/*Hovell Stud Styles*/

/* ids "#" and classes '.'*/
    
/*main selectors*/
html, body{
    height: 100%;
    margin:0;
    padding:0;
    background-color: #000;
}           
/*IDs*/    
#wrapper{
    width:90%;
    margin: 0 auto;
    background-color:  #323232;
}
#headerblock{
    background: #323232;
    width:100%;
    height:auto;
    margin-top: 0px;
    margin-left:auto;
    margin-right:auto;
    vertical-align: middle;
    position: relative;/*needs to be relative for the child div of logocontainer to be centred*/
    display:block;
    	border-bottom-style: solid;
	border-bottom-color: #3c3c3c;
	border-bottom-width: thin;
	background-repeat: no-repeat;    
} 
#contentblock{
    background-color: #323232;
    /*background-color:white;*/
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display:block;
    text-align: center;
    padding-top:3em;
    max-width:1200px;
}
#leftdivblock{
    float: left;
    padding-right: 1.0em;
    vertical-align: top;
    border-right: thin;
    border-right-style: solid;
    border-right-color: #3c3c3c;
}
#rightdivblock{
    float: right;
    padding-left: 0.5em;
    margin-left: 0.5em;
    vertical-align: top;
    border-left: thin;
    border-left-style: solid;
    border-left-color: #3c3c3c;
    border-bottom: thin;
    border-bottom-style: solid;
    border-bottom-color: #3c3c3c;
    max-width: 120px; /*Only used for wrapping text*/
}
#eventblock{
    padding: 0.7em;
    margin: 0.7em;
    border: thin;
    border-style: solid;
    border-color: #777;
    overflow: auto;
}
#newsitemblock{
    padding: 0.7em;
    margin: 0.7em;
    border: thin;
    border-style: solid;
    border-color: #777;
    overflow: auto;
}
#sireblock{
    padding: 0.7em;
    margin: 0.7em;
    border: thin;
    border-style: solid;
    border-color: #777;
    overflow: auto;
}
#bannerblockhoiz{/*for horizontal banner on narrow display*/
    text-align: center;
    padding-bottom:0.5em;
    display: none;
    clear: both;
    vertical-align: top;/*this aligns the current object with the vert top of its container*/
    background: none;
}
#sponsorblock{/*can use for either social media or sponsors block*/
    text-align: center;
    padding-bottom:0.5em;
    display: block;
    clear: both;
    vertical-align: top;/*this aligns the current object with the vert top of its container*/
    background: none;
    border-top: thin;
    border-top-style: solid;
    border-top-color: #3c3c3c;
}
#emailblock{
    background-color: #3c3c3c;
    border-style: solid;
    border-color: #ccc;
    border-width: thin;
    margin: 0 auto;
    display: table;
    margin-bottom: 0.2em;
    width:420px;    
    text-align: left;
    padding:10px;
}
#registerblock{
    background-color: #3c3c3c;
    border-style: solid;
    border-color: #ccc;
    border-width: thin;
    margin: 0 auto;
    display: table;
    margin-bottom: 0.2em;
    width:420px;    
    text-align: left;
    padding:10px;
}
#footerblock{
    position: relative;
    background-color:#EBF5D6;
    width:100%;
    height:100%;
    overflow-y: hidden;
    text-align: center;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
	background-color: #323232;
	border-top-style: solid;
	border-top-color: #3c3c3c;
	border-top-width: thin;
	border-right-style: solid;
	border-right-color: #3c3c3c;
	border-right-width: thin;
    		  background-image: url('../images/page_bg.png');
/*  background-attachment: fixed;*/
    background-size:auto 100%;
    background-position: bottom right;
    background-repeat: no-repeat;    
}
#footernavblock{
    float: left;
    display: inline-block;
    height:100%;
/*       background-color: #323232;*/
    padding-right:1em;
}
#testimonialsblock{    
    margin:0 auto;
    padding:1em;
}
#footeraddress{
    float: right;
    text-align: left;
    padding-left:1em;
    padding-right:1em;
    display:none;   
}
.footeraddresstext{color:#666;
font-family: 'Muli', Arial, Helvetica, sans-serif;
}
#creditblock{
    background-color: #000;
    width:100%;
    float:right;
    clear:both;
    text-align: right;
    padding-right:1.5em;
}
.phnum{/*phone number*/
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    color: white;
    padding:0.5em;
    text-align: right;
    vertical-align: bottom;
    display: block;
    margin-left: 1em;
    font-weight: bold;
}
.nobr{ white-space:nowrap; }/*stops wrapping for things like ph numbers*/

.lambplan_tbl{/*For lambplan data for ram sales*/
/*    padding: 0.7em;
    margin: 0.7em;*/
    border: thin;
    border-style: solid;
    border-color: #777;
    /*overflow: auto;*/
	border-collapse: collapse;
}
.lambplan_tbl td {
    border: 1px;
    border-style: solid;
    border-color: #777;
}
/*Classes*/
.bodytextblock{
    margin: 0 auto;
    text-align: left;
    width:98%;
/*    padding-left: 7%;
    display:table-cell;*/
}

.bodytextwrapper{
    padding-left: 7%;
    display:table-cell;    
}

.gallerywrapper{
    margin: 0 auto;
    text-align: center;
    width:60%;
}
.thumbnail_left{/*an image block used for small left images*/
	width: auto;
	float:left;
	max-width: 250px;/*need other solution*/
	padding:0.2em;
	margin: 0.4em;
	border-style: solid;
	border-color: #999;
	border-width: thin;
	text-align: center;/*centres a caption - can be overridden with inline justification*/
	margin-top: 0;
}
.thumbnail_right{/*an image block used for small left images*/
	width: auto;
	float:right;
	max-width: 250px;/*need other solution*/
	padding:0.2em;
	margin: 0.6em;
	border-style: solid;
	border-color: #999;
	border-width: thin;
	text-align: center;/*centres a caption - can be overridden with inline justification*/
	margin-top: 0;
}

.image_scaler{/*makes images responsive and maintains aspect ratio*/
     width:100%;
     height:auto;
}
.small_caption{
    font-size: small;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    color: #7d7d7d;
    padding:0.3em;
    text-align:left;
}
.subheading{
	color:#fff;
	font-weight: bold;
    font-family: 'Muli', Arial, Helvetica, sans-serif !important;
}
.boldtext{
    color:#fff;
    font-family: 'Muli', Arial, Helvetica, sans-serif !important;
    font-weight: bolder;
    }
.boldtext_ul{
    color:#fff;
    font-family: 'Muli', Arial, Helvetica, sans-serif !important;
    font-weight: bolder;
    text-decoration: underline;
    }
.bodytext{
    color:#fff;
    font-family: 'Muli', Arial, Helvetica, sans-serif !important;
}
.bodytext_alert{
    color:#fff;
	background:#FF0000;
    font-family: 'Muli', Arial, Helvetica, sans-serif !important;
}
.greybodytext{
    color:#ccc;
    font-size:small;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
}
.whitebodytext{
    color:#fff;
    font-size:small;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
}
.taglinetext{
    color:#666;
    font-family: 'Handlee', "Comic Sans MS", cursive, Arial, Helvetica, sans-serif !important;/*Google font*/
    text-align: center;
    margin:0.2em;
}
.contentbox{
    text-align:left;
    margin:10px;
    display: inline-block;
    vertical-align: top;/*this aligns the current object with the vert top of its container*/
}
.indent{/*text indent only works on inline elements*/
    text-indent:2.6em;
    display:inline-block;
}
.credittext{
    color:#999;
    font-size: small;
    font-family:Arial, Helvetica, sans-serif;
    padding-top:1em;
    padding-bottom:1em;
    margin: 0px;
}
a.credittext:hover{color:#fff;}
/*Footer nav styles*/
.footernav{/*the ul class*/
    margin-left: 1.5em;
    padding:0;
    text-align: left;
    list-style-type: none;
}
.footernav li{/*the list item class li*/
    vertical-align: middle;
}
.footerlink{/*the link*/
    font-size: small;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    color: #7d7d7d;
    padding:0.1em;
    cursor: pointer;
    text-decoration: underline;	
}
.footerlink:hover{color:#fff;}

/*Logo Specific Styles*/
#logocontainer{
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    height:auto;
    } 
.logoimage{
    width:100%;
    max-width:1200px;
    height:auto;    
}
/*Navigation Specific Styles*/
#navigation {
    float:left;
    width: 100%;
    display:block;
    border-bottom: solid;
    border-bottom-color: #3c3c3c;
    border-bottom-width: thin;
    background-color: #323232    
/*     margin: 0 auto;*/
}
#navigation ul {
    margin:0px;
    padding:0;
    letter-spacing: -1em;/*removed space between nav items*/
    text-align: center;/*locates nav block*/
    list-style-type: none;
    overflow: hidden;
    color: #FFFFFF;
    transition: max-height 0.4s ease;
    -webkit-transition: max-height 0.4s ease;
    -ms-transition: max-height 0.4s ease;
    -moz-transition: max-height 0.4s ease;
    -o-transition: max-height 0.4s ease;
}
#navigation ul li {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    letter-spacing: normal;/*reinstates normal letter spacing*/
    color: white;
    border-left-style: solid;
    border-left-color: #999;/*was #3c3c3c;*/
    border-left-width: thin;
    background: #222; 
}
#navigation ul li a {
	display:block;/*makes all block clickable*/
	text-decoration: none;
	font-family: 'Muli', Arial, Helvetica, sans-serif;
	color: white;
	padding:0.7em;
}
#navigation ul li:hover {
/*background-position: 0 -50px;*/
    background-color: #666;
}
.handle {
    width: 100%;
    background: #111;
    text-align:right;
    box-sizing: border-box;
    cursor: pointer;
    color: white;
    display: none;
    text-decoration: none;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
    padding:0.8em;
}
/*End Nav StyLes*/
/*Form specific styles*/
textarea.styledtextarea {
    resize: none;
    width: 97%;/*was 90%*/
    height: 8em;
    border-style: solid;
    border-color: #ccc;
    border-width: thin;
    margin-top:0px;
    padding: 5px;
    background: white none repeat scroll 0% 0%;
    -webkit-overflow-y: scroll;
}

input.formfield{
    width: 99%;/*was 90%*/
    height: 1.5em;
    margin-top:0px;
    margin-bottom: 6px;
    border-style: solid;
    border-color: #ccc;
    border-width: thin;
    background: white;
}

input:invalid{
    background: #ffebeb;
    border-style: solid;
}
/*Center recaptcha*/
.g-recaptcha div { margin-left: auto; margin-right: auto;}

/*Form Errors Specific Styles*/
.errorslist{/*the ul class*/
    list-style-type: none;
}
.errorstext {/*the list item text*/
    color:#fff;
    font-family: 'Muli', Arial, Helvetica, sans-serif;
}
.emailsuccess {
    background-color:#7a9761;
    padding:3%;
    margin-bottom: 1em;
}    
.emailfailed {
    background-color:#a60000;
    padding:3%;
    margin-bottom:1em;
}

/*End Form Specific Styles*/

/*Media Queries*/
/*Using media queries I need to scale the image so that the top header banner scales to show trstual content on mobile devs*/

/*media query when width hits 480px*/
@media only screen and (max-width: 480px){
     #logocontainer{
	height:auto;
        text-align: center;
        }
    .logoimage{
	width:100%;
	height:auto;
      }
    #emailblock{/*set email form block to 80% width of container*/
    width:90%;}

	#registerblock{/*set covid register form block to 80% width of container*/
    width:90%;}
	
    .gallerywrapper{
	width:90%;
	}
    .bodytextblock{
	padding-left: 0.5em;
    }
    .bodytextwrapper{
     padding-left: .5em;
    }
}
    
    
/*media query fixes logo size and scales header div when width hits 320*/
@media only screen and (max-width: 400px){
    #logocontainer{
	height:auto;/*scales div down appropriately on mobile particularly portrait*/
        text-align: center;
        }
    .logoimage{
	width:100%;
	height:auto;
      }
      #leftdivblock{
	display: none;
      }
	#rightdivblock{
	display: none;
      }
      #bannerblockhoiz{/*show horizontal banner on narrow display*/
	display: block;
      }
    }
/* If viewport is no greater than 480px, no less than 320px*/
@media only screen and (max-width:480px) and (min-width:320px) {
/**/   
    }
/*nav specific*/
@media screen and (max-width:805px) { /*Nav buttons wrap at 805px*/  
    #navigation ul {
    	max-height: 0;
    }
    #navigation ul.showing {/*Can be outside of media queries - sets height of menu*/
        max-height: 27em;
    }
    #navigation ul li {
        box-sizing: border-box;
    	width: 100%;
        text-align: left;
        border-top: solid;
	border-left: none;
	border-color: #555;
        border-width: thin;
    }
    .handle {
    	display:block;
    }
}