@import "../fontsJuude.css";


/*----Copyright Juude Info - if you use you need to credit-----*/

/*-----RESET-----*/

header, nav, section, article, figure, figcaption, aside, footer {
	display: block;	
	
}


	
body {
	 background:  #d8dbdd;
	 font-family: 'FranklinGothicFSCondensed', Arial, Helvetica, sans-serif;
	 font-size: 16px;
	
	 margin: 0px;	
	line-height: 150%;
	
	 
}
#top{
	position: absolute;
	width: 100%;
	height: 280px;
	background-attachment: fixed;
	background-image: url(images/topBac.png);
	background-repeat: repeat-x;
	background-position: top ;
	z-index: 1;	 
}




/*-----MENU-----*/

nav {
	float: left;
	top: 0px;
	width: 8%;
	margin-left: 0px;
	
	padding-right: 2%;
	
	text-align: left;

	
	

}

ul{
	margin-top: 3px;
	margin-left:-26px;

}
.indent{

	margin-left:10px;

}

nav li  {
	display: block;
	list-style-type: none;
	
	
}

a:link {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	color: #2b2b2b;
	font-size: 1.3em;
	text-decoration: none;
	border:none;
}
		
 a:visited {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1.3em;
	color: #2b2b2b;
	text-decoration: none;
	border:none;
}
		
 a:hover {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1.3em;
		color: #369;
	text-decoration: none;
	border:none;

}

a.main:link {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
		color: #369;
	font-size: 1em;
	text-decoration: underline;
	border:none;
}
		
 a.main:visited {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1em;
	color: #369;
	text-decoration: underline;
	border:none;
}
		
 a.main:hover {
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1em;
	color: #2b2b2b;
	text-decoration: underline;
	border:none;

}


/*-----HEADER-----*/
header {
	position:relative;
	max-width: 980px;
	
	margin-top: 0px;
	height: 260px;

	margin-right: auto;
	margin-left: auto;
z-index: 2;
}


#photoHolder{
	position:absolute;
	max-width: 640px;
	right:-1px;
	margin-top: 40px;
	z-index:4;
}



#title{
	position: absolute;
	top: 100px;
	left:0px;
	height: 60px;
	max-width: 360px;
	width: 40%;
	z-index: 8;
	
}
#title img{
	width: 90%;
	margin-left: 0px;
}


#fsfOne{

	float:left;
	margin-left:10px;	
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	
}

#sfNine{
	float:left;
	margin-left:10px;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	
}

#sfSix{
	float:left;
	margin-left:10px;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);


}

#sfFive{
	float:left;
	margin-left:10px;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	
	
}

#sfThree{
	float:left;
	margin-left:10px;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	
	
}




/*-----MAIN CONTENT-----*/

#container{
	margin-top: 70px;
	max-width: 980px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	height: 100%;
}

aside{
	margin-top: 3px;
	width: 14%;
	margin-left: 4%;
	float: right;
	
}
section #centerColumn{

	width: 66%;	
	float: left;
	margin-left: 2%;
	padding-left: 2%;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #b4b6b8;	

}


.thumbs{
	margin-bottom: 10px;
}
.beneath{
	display:none;
}
hr{
	text-align: center;
	max-width: 400px;
	color: #369;
	
}

h1 {
	font-weight: normal;
	color: #555;
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1.6em;

}

h2 {
	font-weight: normal;
	color: #369;
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1.4em;
	margin-bottom: -1px;	
}


h3 {
	font-weight: normal;
	color: #369;
	font-family: 'AvalonBook', Arial, Helvetica, sans serif;
	font-size 1.2em;
	margin-bottom: -2px;	
}

.larger {
	font-weight: normal;
	color: #369;
	font-family: 'AvalonBook', Arial Narrow, Helvetica, sans serif;
	font-size: 1.4em;
		
}


hgroup{
	font-family: 'AvalonBook', Arial, Helvetica, sans serif;
	margin-bottom: -4px;
}


/*-----CONTENT IMAGES-----*/



.thumbs{
	
	max-width: 117px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
	
}

.clearFloat{
	clear: both;
}

 .imageOne{
	float:left;
	margin-right: 20px;


 }

.two img{
	max-width: 117px;
		 width: 36%;
	}
			

			
footer {
	clear: both;
	width: 100%;
	height: 100px;
	color: #fff;
	text-align: center;
	padding-top: 30px;
	background-image: url(images/topBac.png);
	

}

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

#header  {
	margin-left: 4%;
	margin-right: 4%;	
	
}

#container{
	margin-left: 4%;
	margin-right: 4%;	
	
}
section #one{
	width: 60%;
}
#title{
	width: 30%;
	
	
}
}

@media only screen and (max-width : 800px) {
	
body{ 
	font-size: 16px;

}
#container{
	margin-top: 110px;		
	
}

#header{
	margin-left: 0px;
	margin-right: 0px;
}
#photoHolder{
	width: 300px;
	right:2%;
	margin-top: 20px;
	z-index:4;
}
#title{
	top: 120px;
	left:20px;
	height: 60px;
	width: 360px;
	
	z-index: 8;
	
}

#title img{
	width: 76%;
	margin-left: 10%;
}




section #container{
	margin-left:0px;
	margin-right:0px;
	padding-left:10px;
	padding-right:10px;
	max-width: 780px;
	min-width: 300px;	
	
}
section #centerColumn{

	width: 80%;
	margin-right: 0px;	
	margin-left: 0px;
	
}
aside{
	float: none;
	width: 360px;
	margin-left: 20%;
		
}

.thumbs{
float: left;	

	
}
.imageOne{
	width: 98%;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float: none;
max-width: 304px;
max-height: 205px;
 }

.beneath{
display:block;	
	height: 20px;
}


#sfThree{
	display:none;
	width: 0px;
	height: 0px;
}

h1{ 
	font-size:1.8em;
}

h2{ 
	font-size:1.5em;

}
#fsfOne{
	margin-top:10px;
}
#sfFive{
	margin-top:10px;
}


}



@media all and (max-width : 620px) {

body{
	font-size:16px;
	
}
#container{
	margin-top: 40px;
		
	
}
section #centerColumn{
	width: 100%;
border-left-width: 0px;
margin-left: 0px;
}
#photoHolder{
	position-relative;
text-align: center;
	top: 70px;
	width:96%;
margin-left: auto;
margin-right: auto;
	max-width:620px;
	min-width: 280px;
	max-height:177px;
	z-index:1;
	
}
#title{
	left:20%;
	max-width: 610px;
	
	width: 80%;
	top: 20px;
	z-index: 3;
	background-image: #666;	
}

#title img{
	min-width: 200px;
	width: 70%;
	margin-top: 2%;
	margin-left: 0px;
}

#sfThree{
	display:none;
}

header{
	
	margin-left: 0px;
	margin-right: 0px;
	
}



 

#sf{
	margin-bottom: 4px;
	margin-top: -6 px;
}

#sfSix{
	position:static;	
	float: left;
	margin-left: 1%;
	width:24%;
	max-width:117px;
	margin-top:0px;
	-webkit-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	box-shadow: 0px 0px 0 rgba(0,0,0,.3);



}

#fsfOne{
	position:static;
	float: left;
	margin-left: 1%;
	width:24%;
	max-width:117px;
	margin-top:0px;
	-webkit-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	box-shadow: 0px 0px 0 rgba(0,0,0,.3);

}

#sfFive{
	position:static;
	float: left;
	margin-left: 1%;
	width:24%;
	max-width:117px;
	margin-top:0px;
	-webkit-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	
}

#sfNine{
	position:static;
	float: left;
	margin-left: 1%;
	width:24%;
	max-width:117px;
	-webkit-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	box-shadow: 0px 0px 0 rgba(0,0,0,.3);
	

}
	
	#title{
	background-image: #666;
}
asign{
	margin-top: 0;
}
nav li {
	display: inline;	
	height: 26px;
	padding: 0px;
	margin: 0px;
	padding-bottom: 4px;

}


.first {
	margin-left: 0px;
}

.sixth{

	padding: 0px;

}
.navMargin{
	margin-left: 2px;
}
nav{
	float: none;
	height:auto;
	min-height: auto;
	top: 0px;
	left: 0px;
	width: 90%;
	max-width: 620px;
	min-width: 300px;
	text-align: center;
	margin-bottom: 50px;
	padding-bottom: 20px;
	border-bottom:solid 2px #999;
	border-right:0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-right: 0%;
	padding-left: 0%;	
}
	
	
.menu{

	display: inline;
	
}
	
 a:link {
	
	font-size: 1.3em;
	text-decoration: none;
	border:none;
}
		
 a:visited {
	 
	font-size: 1.3em;
	text-decoration: none;
	border:none;
}
		
 a:hover {
	
	font-size: 1.3em;
	text-decoration: none;
	border:none;

}





}