/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}




html, body {
margin:0px;
padding:0px;
}



#nav
		{
			font-family: 'Oswald', sans-serif;
			font-weight: normal;
				margin-right:auto;
				margin-left:auto;	
				float:right;
						
		}
#nav > a
			{
				display: none;
				
			}


			#nav li
			{
				position: relative;
			}
				#nav li a
				{
					color: #fff;
					display: block;

				}
				#nav li a:active
				{
					/*background-color: #679983 !important;*/
					cursor:hand;
									}


			/* first level */

			#nav > ul
			{
				height:75px;  
				/*background-color: #778278;
				width: 1200px;*/
				margin-right:auto;
				margin-left:auto;
			list-style:none;
			text-align:center;
				/*border-right: 1px solid #fff;
				border-left: 1px solid #fff;*/
				
			}
				#nav > ul > li
				{
					height: 100%;
					float: left;
					

				}
				
				
				
				
					#nav > ul > li > a
					{
						height: 25px;
					font-family: 'Oswald', sans-serif;
					text-transform: uppercase;
						font-size: 18px; /* 24 */
						line-height: 25px; /* 60 (24) */
						text-align: center;
						font-weight:normal;
						padding: 25px 10px;

					}
					
					
					#nav > ul > li > a::first-letter
					{
					font-size: 22px;
					}
					
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
						
						
							color: #fff;
							background: #3dc1d9;


							/*
							this is where we can add the bone underneath
							
							color: #fff;
							*/


						}

	/* second level */

				#nav li ul
				{
					background-color: #fff;
					display: none;
					position: absolute;
					top: 100%;
					list-style:none;
					border-bottom: 1px solid #778278;

				}
					#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
						#nav li ul a
						{
						color: #778278;
						font-family: 'Oswald', sans-serif;
						font-size: 14px; /* 24 */
						font-weight:normal;
						line-height: 50px; /* 60 (24) */

							border-top: 1px solid #778278;
							padding: 5px 10px; /* 15 (20) */
							border-right: 1px solid #778278;
							border-left: 1px solid #778278;
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
								background-color: #778278;
								color: #fff;
							} 







body, p, ul {
    font: 20px 'Open Sans', sans-serif;
    color: #444;
	text-decoration: none;

	
	
	}
	
	P{
margin-bottom:20px;
text-align:center;
}

P a{
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    color: #37aec4;
	text-decoration: none;

}

P a:hover{
    color: #3dc1d9;

}

a {
    color: #37aec4;
	text-decoration: none;

}

a:hover{
color: #3dc1d9;

}

.pagey ul{
list-style: square;
padding-left: 30px;
}




#jdiLogo{
position:absolute;
top:75px;
z-index:99999999999999999999999999999999999999999999;
width:100%;
}
#jdiLogo img{
display:block;
margin-top:-60px;
margin-right:auto;
margin-left:auto;
width:400px;
z-index:99999999999999999999999999999999999999999999;

}
#jdiLogom{
display:none;
}
#jdiLogom img{
display:none;
}

#topConContainer{
background-color: #37aec4;
width:100%;
}

#topCon{
width:1200px; 
margin-right:auto; 
margin-left:auto; 
background:#f6f6f6;
}


h1 {
    font: 40px 'Lora', sans-serif;
	color: #3f3f3f;
	text-decoration: none;
	font-weight:bold;
	margin-bottom:20px;
	text-align:center;
	text-transform:uppercase;

}
#shadeBackSub .pagey h1{
color: #fff;
}

h1 a {
	color: #0093dd;
	text-decoration: none;
	font-weight:bold;
	display: inline; 
	margin-bottom: 50px;
}
h2 {

    font: 50px 'Oswald', sans-serif;
	color: #37aec4;
	text-decoration: none;
	margin-bottom:20px;
	text-align:center;
	text-transform: uppercase;

}
h2::first-letter {
	font-weight:bold;
	font-size:52px;

}
h3{
    font: 22px 'Open Sans', sans-serif;
	color: #fff;
	text-align:center;

}


h4{
text-align:center;
    font: 50px 'Open Sans', sans-serif;
	color: #387c90;
padding: 40px 0px;
}


#content {
    z-index: 15;
	width: 100%;
}




.pagey{
position:relative;
width:1200px;
margin-left:auto;
margin-right:auto;
}
.pageyNoPad{
position:relative;
width:1200px;
margin-left:auto;
margin-right:auto;

}


#last{
margin-right:0px; !important
}

#toppery{
background-color:#37aec4;
position:relative;
top:0px;
left:0px;
height:75px;
z-index:99999999999999999999999;
}


#topperymobile{
display:none;
}
#topNavContainer{
float:left;
margin-top:0px;
height:75px;

}
#topPhContainer{
float:right;
margin-top:0px;
height:75px;
padding: 25px 0px;
}
#topPhContainer a{
font-size: 22px;
font-family: 'Oswald', sans-serif;
color: #fff;
height: 25px;
line-height: 25px;					
}
#hereyherey {
float:right;
margin-right:20px;
}

#phhead {
float:right;
margin-right:50px;

}




#topBarBlue{
position:absolute;
top:120px;
right:10px;
margin-left:350px;
z-index:9999;


}

#footerbarryshapey{
border-top: 20px solid #3f3f3f;
text-align:center;
}

#footerbarryshapey img{
margin-top:0px;
width:60px;

}
#toppybarryshapey{
border-top: 20px solid #3f3f3f;
text-align:right;

margin-top:0px;
}

#toppybarryshapey img{
margin-top:0px;
width:60px;

}


#botBarBlue{
background: #fff;
width:100%;
position:relative;
padding:0px;
text-align:center;
color: #494949;
font: 20px 'open sans';

}

#botBarBlue a{
color: #494949;
}

#botBarBlue a:hover{
color: #387c90;
}



#shadeBack{
width:100%;
/*background: url('../images/bigmoonTop.png') top center no-repeat, url('../images/bigmoonBot.png') bottom center no-repeat;*/
background-color: #f2f2f2;
padding: 60px 0px;
text-align:center;

}


#shadeBack .pagey h3{
color: #000;
float:left;
margin-right:20px;
font-size:70px;
width:390px;
text-align:left;
font-family: 'Halant', serif;
line-height:1.1;
font-weight:bold;

}

#shadeBack .pagey h2{
color: #37ae51;
font-size:50px;
text-align:center;
font-family: 'Oswald', serif;
line-height:1.1;
font-weight:normal;

}
#shadeBack .pagey p{
color: #000;
text-align:center;
font-size:20px;
font-family: 'Open Sans', san-serif;
line-height:1.5;
font-weight:normal;

}

#shadeBackSub{
width:100%;
background: #0077a1;
padding: 30px 0px;
text-align:center;
}



#shadeBackFooty{
width:90%;
background-color: #37ae51;
padding: 20px 5%;
text-align:center;
color: #fff;
font-size: 40px;
font-family: 'Oswald';

}

#shadeBackFooty .pagey h3{
color: #fff;
margin-right:20px;
font-size:60px;
text-align:center;
font-family: 'Halant', serif;
line-height:1.1;
font-weight:bold;

}


#shadeBackFooty .pagey h4{
color: #fff;
text-align:center;
font-size:50px;
font-family: 'Open Sans', san-serif;
line-height:1.5;
font-weight:normal;
padding:0px;

}

#shadeBackFooty .pagey a{
color: #c3b091;
background: #fff;
padding:20px;
text-align:center;
font-size:30px;
font-family: 'Open Sans', san-serif;
font-weight:bold;
margin-top:30px;


}

.subDown{
position:inline;
top:400px;
}


#just p{
text-align:justify;
}

/* -------------------------------- subsite pieces ------------------------------------------------- */



.galpics{
float:left;
margin:10px;
width:250px;
}



#wideSiteIntro{
position: relative; 
margin-top: 260px; 
width:100%;


min-height: 100px;
text-align:center;

/*background-size:cover;*/

color: #fff;


}



#wideSiteIntro #ldf{
background: rgba(255, 255, 255, 0.4);

}


#wideSiteIntro h1{
color: #fff;
font: 50px 'Arvo', serif;
/*font-weight: bold;*/
line-height:1;
margin:0px;
margin-top:20px;
text-align:center;
}
#wideSiteIntro h2{
color: #fff;
font: 35px 'Open Sans';
font-weight: 600;
line-height:1;
margin:0px;
text-align:center;
}

#wideSiteIntro h3{
color: #fff;
font: 28px 'Open Sans';
font-weight: 600;
line-height:1;
margin:0px;
text-align:center;
font-style: italic;
}



#ctaFrontButtons{
float:left; width:29%; 
margin-right:5%; 
border: 1px solid #37aec4; 
padding-top:40px; 
padding-bottom:30px; 
text-align:center; 
text-transform: uppercase; 
font: 50px Oswald;
}


#guessForm{
position:relative;
top:20px;
width:1000px; 
margin-left:auto; 
margin-right:auto; 
margin-bottom:100px;
}


.last{
margin-right:0px;
}


#linkydoda{
float:left;
margin-right: 150px;
width:300px;
}


.formyFields{
padding:2%; 
width:96%; 
margin-bottom:15px; 
border: 1px solid #d9d9d9; 
border-radius: 0px;
font-size: 15px;
}

.buttonny{
-webkit-appearance:none;
-moz-appearance:none;
width:100%; 
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border: solid 1px #a43218;
padding:15px 0px;
color: #fff;
background: #a43218;
font-size: 20px;

}

.formyDrop{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
padding-top:3%; 
padding-bottom:3%; 
padding-left:3%;
width:100%; 
margin-bottom:15px; 
border: 1px solid #d9d9d9; 
border-radius: 2px;
font-size: 15px;
    background: transparent url("../images/arrow-down.png") no-repeat right center;

}

	


	
	
	.footIcon{
float:left;
padding-right:2.5%;
padding-left:2.5%;
margin-top:20px;
width:28%;
font: 20px 'open sans';
border-right: 1px solid #e3e9e4;

}
	.footIconLast{
width:56%;
border-right:0px;

}

#contactyfontystuffs{
font-size:200%;
}


#redButty{
padding:20px;
background: #37aec4;
color: #fff;
font-size: 30px;
}
#redButty:hover{
background: #3dc1d9;
color: #fff;
}


#redButtyfoot{
padding:20px;
background: #387c90;
color: #fff;
border: 1px solid #387c90;
width:100%;
}
#redButtyfoot:hover{
background: none;
color: #387c90;
border: 1px solid #387c90;
}



#sideshade{
float:right;
padding:20px;
width:30%;
margin-left:5%;
background-color: #f2f2f2;

}


#buttwr{
display:inline-block;
padding:10px;
background: #37ae51;
color: #fff;
width: 60%;
}

#buttwr:hover{
background: #37aec4;
color: #fff;
}


/* -------------------------------- subsite pieces ------------------------------------------------- */



/*         ---------------------------------- responsive side --------------------------------------*/



/* here is what happens when on a small device or mobile device */

@media only screen and (max-width: 1280px) {



#topBarBlue {
    left: 10px;
    }
    
#nav
			{
				position: absolute;
				top: 0;
				left: 0;
			height:50px;
			margin-top:0px;
			}
			
				#nav > a
				{
					width: 90px; /* 50 */
					height: 90px; /* 50 */
					text-align: center;
					text-indent: 0px;
					background-color: #fff;
					position: relative;
					top:0px;
					font-size:12px;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #000;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */
			#nav > ul
			{
				position: relative;
				height: auto;
				display: none;
				left: 0;
				right: 0;
				width:auto;
				top:0px;
    			background: #fff;	
    			z-index:999999999999999999999999999;			

			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
    				}
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 25px; /* 20 (24) */
						font-size: 29px;
						border-right: none;
						border-bottom: 1px solid #000;	
						color: #000;	
						text-transform:none;				
					}

					
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
						
						
						
							background: #333;





						}



				/* second level */

				#nav li ul
				{
					position: static;
					padding: 1.25em; /* 20 */
					padding-top: 0;
				}
				#nav li ul li a
				{
					font-size: 28px;
							border-right: 0px solid #243f50;
							border-left: 0px solid #243f50;

				}	



#search input[type=text]{
width:80%;
}


.pageyNoPad{
width:100%;
padding:0px;
}


.pagey{
padding:5%;
width:90%
}

.pagey p img{
float:none;
max-width:100%;
}
img{
float:none;
max-width:100%;
margin-top:20px;
}



#jdiLogo{
display:none;
}
#jdiLogo img{
display:none;
}
#jdiLogom{
display:block;
top:0px;
width:100%;
text-align:center;

}
#jdiLogom img{
display: inline-block;
margin:0px auto;
width:400px;

}
#topCon{
width:100%; 
margin-right:0; 
margin-left:0; 
background-color: #37aec4;
}

#topConContainer{
background-color: #37aec4;
width:100%;
}
#topPhContainer{
margin-right:10px;
}
#logoSub{
margin-top:10px;	
float:none;

}
#logoSub img{
height: auto;
width:100%;

}


#ctaFrontButtons{
font-size:40px;
}

#search input[type=text]{
width:80%;
}
.selectbox{
width: 37%;
}
	#botSquareLeft{
	width:100%; 
	float:none; 
	text-align:center; 
	font-size: 30px
	}
	#botSquareLeft a{

	font-size: 30px
	}
	#botSquareRight{
	width:100%; 
	float:none; 
	text-align:center; 
	font-size: 32px;
	}


#frontBio img{
margin-right: 10%;
margin-left: 10%;
float:none; 
width:80%


}


#sbservbut a{
width:90%; 
margin-right:auto;
margin-left:auto;
margin-bottom:40px;
padding: 5%;

}

#sbservbut a:hover{
background: url("../images/police-lights.jpg") no-repeat center center; 
		background-size: cover;

/*background: rgba(255,255,255,0.4);*/

}
#wideSiteIntro{
position: relative; 
margin-top: 30px; 
width:100%;
text-align:center;
}




}


/*         ---------------------------------- responsive side --------------------------------------*/

@media only screen and (max-width: 940px) {
#ctaFrontButtons {
    font-size: 30px;
}

#shadeBack .pagey h3{
float:none;
margin-right:0px;
font-size:60px;
width:auto;
text-align:center;
font-family: 'Halant', serif;
line-height:1.1;
font-weight:bold;

}

#shadeBack .pagey p{
float:none;
text-align:center;
margin-left:0px;
font-size:20px;
width:auto;
font-family: 'Open Sans', san-serif;
line-height:1.5;
font-weight:normal;

}

#shadeBack .pagey h2{
margin-right:0px;
font-size:50px;
text-align:center;
font-family: 'Halant', serif;
line-height:1.1;
font-weight:bold;

}

h1 a {
font: 20px;

}

h2 a{
font: 20px;
}

#topNavContainer #hereyherey{
display:none;
}

#topNavContainer #phhead{
display:none;
}


}
/* here is what happens when on a small device or mobile device */
@media only screen and (max-width: 740px) {
html, body, p, ul, a, p a {
    font: 30px 'OPEN SANS', sans-serif;	!important
    text-align:left; !important
	}

P{
   text-align:left; !important

}
h1{
font-size: 25px;
}
h3{
font-size: 20px;
}
p{
font-size: 20px;

}
#botBarBlue a{
    font: 20px 'OPEN SANS', sans-serif;	!important

}
#toppery{
height:auto;
min-height:120px;
display:none;
}


#topNavContainer p{
display:inline;
font: 30px 'open sans';
text-align:right;
}


#topperymobile{
display:block;
width:100%;
position:absolute;
top:0px;
left:0px;
height:120px;
z-index:9999;
}




#ctaFrontButtons {
    font-size: 30px;
	margin:0px;
	width:100%;
	margin-bottom:20px;
}
#ctaFrontButtons img{
visibility:hidden;
}
	
	#contactyfontystuffs{
font-size:100%;
}

	.footIcon{
float:none;
padding-right:2.5%;
padding-left:2.5%;
margin-top:20px;
width:95%;
font: 20px 'Open Sans';
border-right: 0px solid #e3e9e4;

}
	.footIconLast{
width:95%;

}
	.footIcon a{
font: 20px 'Open Sans';


}

#redButty{

font-size: 30px;
}

}


/*         ---------------------------------- responsive side --------------------------------------*/

/* here is what happens when on a small device or mobile device */
@media only screen and (max-width: 650px) {

#nav
			{
			margin:0px;
			width:100%;
			position:absolute;
			top:0px;
			z-index:9999999999999999999999999999999999999999;
			}
#nav a{

			margin-left:auto;
			margin-right:auto;
}
#topBarBlue {
			}
#phhead{
text-align:left;
}
#toppery {
    display: none;
    }
#topNavContainer {
    }
#guessForm{

width:90%; 
padding-right:5%;
padding-left:5%;
margin-left:0px; 
margin-right:0px; 
}



#wideSiteIntro #ldf{
display:none;
}
#botBarBlue{
padding: 10% 10% 40% 10%;
width:80%;
}





#inpleft{
width:90%; 
padding-left:5%; 
padding-right:5%; 
float:none;
}

#inpright{
width:90%; 
padding-left:5%; 
padding-right:5%; 
float:none;
}


#inptfull{
width:90%; 
padding-left:5%; 
padding-right:5%; 
float:none;

}
.buttonny{
padding:10px 5px;
font-size: 15px;

}


	#logo{
width:100%;
height:auto;
margin:20px 0;
left:0px;
}



#wideSiteIntro h1{
visibility:hidden;
font: 35px 'Open Sans';
margin-top:0px;
}
#wideSiteIntro h2{
font: 25px 'Open Sans';
}
#wideSiteIntro h3{
font: 20px 'Open Sans';
}



#redButty{

font-size: 20px;
}
	
	
}

/*         ---------------------------------- responsive side --------------------------------------*/

/* here is what happens when on a small device or mobile device */
@media only screen and (max-width: 501px) {
body{
font-size:15px;
}
p{
font-size:15px;
}
a{
font-size:15px;
}
#botBarBlue {
font-size:15px;

}

	

	
}