/*
  ***************************
  * S T A N D A R D   C S S 
  ****************************
 */


/* null margins and padding to give good cross-browser baseline */
/* i removed ul from this list */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,li,ol,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
	text-decoration:none;
	font-family: pp-sans-big-regular,Helvetica Neue,Arial,sans-serif;
    font-variant:  normal;
    font-weight: 400;
}


img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

ul {
    list-style: round;
}


label {
	cursor:pointer;
}

html, body {
	background-color: #ffffff;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5 "open sans",sans-serif;
}

body {
	display: block;
	width: 98%;
	border: 0.188em solid #000000;
	border-radius: 1.62em; 
	margin: 1.25em;
	padding: 1.25em;
	min-height: 70vh;
}

a {
    text-decoration: none;
    color: #000000;
}


/* =================   All custom css goes under here =======================*/


/*
  *********************
    C O L O R S    
  *********************
*/


.error_text {
    display: block;
    text-align: center;
    color: #9e111e;
}

.success_text {
    display: block;
    text-align: center;
    color: #1e9a08;
}


/*
  ****************
    Misc css   
  ****************
*/


.intro_text{
    display: flex;
}

.intro_text a{
    display: contents; /* this is correct syntax - editor is old */
}

img.sadie_home {
    display: block;
    height: 12.5em;
    width: 12.5em;
    border: none;
    margin-right: 1em;
}

#bookit {
    display: block;
    float: right;
    margin-right: 5em;
}

#bookit a {
    text-decoration: none;
    box-shadow: 0.188em 0.188em;
}

.bookit_button  {
    width: 5em;
    background-color: #0ed508; /* light green */
    cursor: pointer;
    text-align: center;
    margin: 4px 2px;
    padding: 0.938em 2em;
}

.bookit_button:hover {
    text-shadow: 0.5px 0 0 #555, -0.5px 0 0 #555;
    background-color: #095e06; /* dark green */
    color: #ffffff;
}


#reset_button {
    background-color: #ff0000;  /* red */
    color: #000000;
    border: 1px solid #000000;
}

#reset_button:hover {
    background-color: #a22222; /* bright red */
    color: #ffffff;
}

.plink {
    text-decoration: underline;
    color: #105903; /* dark green */;
}

fieldset {
    padding-bottom: 2em;
}

legend {
    margin-bottom: 2em;
}

.headbanner {
    display: block;
    width: 98%;
    max-width: 98%;
    height: 9.375em;
    background-repeat: no-repeat;
    background-size:cover;
    border-top-right-radius: 1.56em; 
    border-top-left-radius: 1.56em;
    margin: auto;
}

.logo_wrapper {
    width: 25em;
    height: 5em;
}

img.logo {
    display: block;
    border: 0;
}


.nodots {
    list-style: none;
}

.tinytxt {
    font-size: 0.625em;
}

.inside {
    list-style-position: inside;
}

.text_border {
   border: 2px solid #000000;
   width: fit-content;
   text-align: center;
   padding: 0.625em;
}

.tiny_notes {
    font-size: small;
}

.heavy {
    font-weight: bold;
}



/*
  ****************************
    GDPR Notify Ticker Banner   
  ****************************
*/

#notice_gdpr {
    width: 93%;
    position: fixed;
    bottom: 0;
    color: #ffffff;
    background-color: #252e39;
    z-index: 1;
    display: none;
}

.gdpr_container {
    width: 100em;
    margin: auto;
}

.gdpr_subcontainer {
    width: 75%;
}

.gdpr_ticker {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 2em;
}

.gdpr_ticker p {
    color: #ffffff;
}

.gdpr_ticker a {
    padding-left: 1em;
    color: #ffffff;
    font-weight: 500;
    text-decoration: underline;
}


#gdpr_button {
    margin-right: 4em;
    border-radius: 5px;
    padding: 0.75em;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    background-color: #14a7d0;
}


.gdpr_btn_text {
    color: #ffffff;
}


/*
  *********************
  * M A I N   M E N U  
  *********************
 */
 

label[for="toggle_mainMenu"] {
    display:none;
}

/* the check box will be left side above nav bar hidden */
input#toggle_mainMenu {
    display: none;
    position: absolute;
} 
 
.main_menu {
    position: relative;
    margin-bottom: 2em;
    background-color: #57ad48; /* med green */
}
 
.sameline {
    display: flex;
    padding: 0.625em;
    width: 80%;
    margin: auto;
}

.main_menu_item {
    margin-left: auto;
}

li.main_menu_item {
    display: block;
    width: 10%;
    text-align: center;
}

li.main_menu_item a:hover {
    font-style: italic;
    font-weight: bold;
}

.current {
    font-style: italic;
    font-weight: bold;
    color: #000000; 
}



/*
  *******************
  *  C O N T E N T  
  *******************
 */

.content_wrapper {
    display: block;
    height: fit-content;
    margin: auto auto 1em 2em;
}

.intro {
    max-width: 90%;
    font-size: medium;
    border: 1px solid #000000;
    border-radius: 0.25em;
    padding: 1em;
    margin: 1em;
}


.contact,
.intro a {
    color: #644607; /* gold */
    text-decoration: underline;
}


/*
 *****************
 * G A L L E R Y 
 *****************
 */
 
 
#ulrow {
    display:inline;
}

#shots {
    width: 30%;
    height: 30%;
    margin: 0 0 0.75em 0;
}

#shotlist {
   columns:6;
   column-gap:1em; 
   list-style-type: none; 
}


/*
  ****************
  * P R I C E S   
  ****************
 */

.price_wrapper {
    display: block;
}

.price_wrapper dl {
    border: 0;
    padding: 1em;
    margin-bottom: 1em;
    background-color: #57ad48; /* med green */
    border-radius: 0.625em;
}


.price_button_wrapper {
    float: right;
    margin-right: 1em;
    width: 10em;
    text-align: center;
    background-color: #0ed508; /* light green */
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0.188em 0.188em;
}
    
.price_button_wrapper:hover {
    background-color: #095e06; /* dark green */
    color: #57ad48; /* light lime green */
}


/*
  ****************
  * B O O K I N G    
  ****************
 */
 
 
 select#vaccs {
     width: 35em;
 }

 
 #sub_book {
    float: right;
    margin-right: 25em;
 }
 
 #booking_form legend{
  background-color: #57ad48; /* med green */
 }
 
 .ack_text {
     font-size: 1em;
 }



/*
  ****************
  * R U L E S    
  ****************
 */

.rules_wrapper {
    display: block;
}

.roman_upper {
    list-style: upper-roman;
    font-weight: bold;
}

.roman_upper li h4 {
    font-weight: bold;
}

.list_circle {
    list-style: disc;
}


/*
  ****************
  * F O O T E R  
  ****************
 */
 
 
footer {
    display: block;
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    height: 11em;
    max-height: 11em;
    font-size: small;
    text-align: center;
    padding-top: 6em;
}


/*
  *********************
  * M O B I L E  C S S   
  *********************
 */
 
 
@media(max-width:55em) {
    html, body {
        width: 97%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    body {
        margin: 1em;
    }
    .content_wrapper {
        width: 88%;
        margin-left: 0;
    }
    .content_wrapper p {
        font-size: small;
    }
    .main_menu {
        display: none;
    }
    .sameline {
        display: block;
    }
    legend {
        font-size: small;
    }
    #toggle_mainMenu:checked ~ .main_menu {
		display: block;
		width: 10%;
		text-align: left;
		background-color: #ffffff;
	}
	#toggle_mainMenu:checked ~ .main_menu a{
	    display: block;
        border: 0;
        margin: 0;
	}
	label[for=toggle_mainMenu] {
	   display:block;
	   position: absolute;
       cursor:pointer;
       margin-left: 8.75em;
	   font-size: 2em;
	   top: 1em;
    }
    img#shots {
        width: 1.5em;
        height: 1.5em;
    }
    img.logo {
        width: 65%;
        height: 65%;
    }
    img.sadie_home {
    margin-right: 0;
    margin-bottom: 1em;
    }
    .intro {
        border: 0;
        font-size: small;
    }
    .intro_text {
        display: block;
    }
    .intro_text a {
        display: inline; 
    }
    input[type="text"] {
        display: block;
        width: 48%;
    }
    .price_wrapper {
        width: 100%;
    }
    .price_wrapper dl {
        font-size: small;
    }
    .price_button_wrapper {
        display: block;
        width: 90%;
        float: none;
        margin: 0;
        margin-left: 1em;
    }
    .miscc,
    .handi,
    .onlinesvc,
    .vacs {
       display: block;
   }
   label {
       font-size: small;
   }
   textarea {
       width: 51%;
   }
   fieldset span {
       font-size: small;
   }
   #own_phoneac,
   #own_phonepre,
   #own_phonelast,
   #own_alt_phoneac,
   #own_alt_phonepre,
   #own_alt_phonelast,
   #vet_phoneac,
   #vet_phonepre,
   #vet_phonelast {
       font-size: small;
   }
   #email {
       display: flex;
       width: 91%;
   }
   #dog_name,
   #dog_color,
   #dog_breed,
   #dog_leash,
   #dog_chip,
   #chip_id,
   #dog_nicks,
   #dog_vet {
       width: 50%;
   }
   textarea#misc,
   textarea#handicap,
   textarea#online_service {
       width: 90%;
   }
   #dog_breed,
   #dog_weight {
       display: flex;
   }
   select#vaccs {
       width: 90%;
       font-size: small;
   }
   .ack_text {
       font-size: small;
   }
   #sub_book {
       display: inline;
       width: 7em;
       float: none;
       margin-right: 0;
   }
   #notice_gdpr {
       width: 87%;
       position: relative;
   }
   .gdpr_container {
    width: 40em;
    margin: auto;
    }
    .gdpr_subcontainer {
        width: 55%;
    }
    .gdpr_ticker {
        flex-wrap: nowrap;
        margin-left: 1em;
    }
    .gdpr_ticker p {
        font-size: x-small;
        width: 50%;
    }
    #gdpr_button {
        font-size: small;
    }
} /* close media */