@import "../fontsJuude.css";

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

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



body html{
	 height: 100%;
	
}
	

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


	


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

nav {
	position: absolute;
	top: 140px;
	width: 448px;
	height: 30px;
	background-image: url(images/bac.png);
	box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	ms-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-o-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	z-index:7;
	

}
#navBacTwo {
	position: absolute;
	top: 140px;
	
	width: 100%;
	height: 30px;
	background-image: url(images/bac.png);
	box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-moz-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	-o-box-shadow: 0px 5px 0 rgba(0,0,0,.3);
	z-index:1;

}

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

}

nav li {
	display: inline;
	list-style-type: none;
	padding-right:12px;
	
}

	
	
 a:link {
	color: #ccc;
	text-decoration: none;
	border:none;
}
		
 a:visited {
	color: #ccc;
	text-decoration: none;
	border:none;
}
		
 a:hover {
	
	color: #fff;
	text-decoration: none;
	border:none;

}




/*-----HEADER-----*/
header {
	width: 100%;
	margin-top: 0px;
	height: 260px;
	background-image: url(images/bac.png);

}


#photoHolder{
position:relative;
margin-right:4%;
	z-index:4;
	
}

#title{
	position: absolute;
	top: 80px;
	left:0px;
	height: 60px;
	width: 448px;
	background-color: #666;
	z-index: 8;
	
}
#title img{

	margin-left: 120px;
}
#titleBac{
	position: absolute;
	top: 80px;
	left:0px;
	height: 60px;
	width: 100%;
	background-color: #666;

	
}

#fsfOne{
	position: absolute;
	top:30px;
	right: 408px;
	/*height: 177px;*/
	width: 117px;
	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,.4);
		z-index: 6;
}

#sfNine{
	position: absolute;
	top:30px;
	right: 272px;
	width: 117px;
	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);
	z-index: 6;
}

#sfSix{
	position: absolute;
	top:30px;
	right: 136px;
	width: 117px;
	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);
	z-index: 6;

}

#sfFive{
	position: absolute;
	top:30px;
	right: 0px;	
	margin-right: 0px;
	width: 117px;
	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);
	z-index: 6;
	
}



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

#container{

	width:84%;
	margin-left: 4%;
	margin-right: 4%;
	padding: 4%;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#fff;
	border-left-style:solid;
	border-left-width: 1px;
	border-left-color:#fff;
	background-color: #eee;
	text-align: left;

	column-count: 3; 
	column-gap:60px;
	column-fill:balance;
	box-shadow: 5px 5px 0 rgba(41,41,41,.5);
	column-rule:solid 1px #ddd; 
	
	-moz-column-count: 3; 

	-moz-column-gap: 60px;
	-moz-column-fill:balance;; 
	-moz-box-shadow: 5px 5px 0 rgba(41,41,41,.5);
	-moz-column-rule:solid 1px #ddd; 

	-webkit-column-count: 3; 
	-webkit-column-gap: 60px;
	-webkit-column-fill:balance;	
	-webkit-box-shadow: 5px 5px 0 rgba(41,41,41,.5); 
	-webkit-column-rule:solid 1px #ddd; 
	
	-o-column-count: 3; 
	-o-column-gap: 50px;
	-o-column-fill:balance;
	-o-box-shadow: 5px 5px 0 rgba(41,41,41,.5);
	-o-column-rule:solid 1px #ddd; 
	
	-ms-column-count: 3; 
	-ms-column-gap: 50px;
	-ms-column-fill:balance;
	-ms-box-shadow: 5px 5px 0 rgba(41,41,41,.5);
	-ms-column-rule:solid 1px #ddd;  

	
}







/*------HEADINGS-------*/



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

}

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


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

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


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

.left{
	float:left;
	max-width: 90%;
	min-width: 120px;
	margin-right: 14px;
	margin-bottom: 10px;
}

.right{
	float:right;
	max-width: 90%;
	min-width: 117px;
	margin-left: 14px;
	margin-top: 10px;
	margin-bottom: 10px;
}

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

.clearFloat{
	clear: both;
}

 .imageOne{
	 max-width: 304px;
	width: 100%;
	margin-right: 20px;
	margin-bottom: 10px;

 }

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

			
footer {
	width: 92%;
	height: 60px;
	color: #fff;
	padding:4%;
	border-top-style:solid;
	border-top-width: 1px;
	border-top-color:#999;
	background: #444;
}

/*-----MEDIA QUERIES-----*/


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



#container{


	column-count: 2; 
	column-gap:50px;
	column-fill:auto;
	
	
	-moz-column-count: 2; 
	-moz-column-gap: 50px;
	-moz-column-fill:balance; 
	 

	-webkit-column-count: 2; 
	-webkit-column-gap: 50px;
	-webkit-column-fill:balance;	
	 
	
	-o-column-count: 2; 
	-o-column-gap: 50px;
	-o-column-fill:balance;
	
	
	-ms-column-count: 2; 
	-ms-column-gap: 50px;
	-ms-column-fill:balance;

	
}
}



	
@media all and (max-width : 520px) {
	body{
		font-size:16px;
	}
	
#photoHolder{
	position: absolute;
	top: 120px;
	margin-left:2%;
	margin-right:2%;
	width: 100%;
	max-width: 480px;
	min-width: 280px;
	z-index:1;
	
}

#container{
	padding-left:10px;
	padding-right:20px;
	margin-left:2%;
	margin-right:2%;
	width: 88%;
	max-width: 520px;
	min-width: 280px;

	column-count: 1; 
	column-gap:0px;
	column-fill:auto;
	
	
	-moz-column-count: 1; 
	-moz-column-gap: 0px;
	-moz-column-fill:auto; 
	 

	-webkit-column-count: 1; 
	-webkit-column-gap: 0px;
	-webkit-column-fill:auto;	
	 
	
	-o-column-count: 1; 
	-o-column-gap: 0px;
	-o-column-fill:auto;
	
	
	-ms-column-count: 1; 
	-ms-column-gap: 0px;
	-ms-column-fill:auto;

	
}


h1{ font-size:1.5em;
}
h2{ font-size:1.2em;

}
 .imageOne{
	width: 100%;

 }
#title{
	position: absolute;
	left:0px;
	min-width: 300px;
	width: 100%;
	top: 20px;
	z-index: 3;
	background-image: #666;	
}
#title img{
	min-width: 200px;
	max-width: 80%;
	margin-top: 2%;
	margin-left: 14px;
}
#titleBac{
	position: absolute;
	
	top: 20px;
	left:0px;
	height: 60px;
	width: 100%;
	background-color: #666;

	
}

#sfSix{
position:static;	
	float: left;
margin-left: 0px;
width:23%;
max-width:160px;
min-width: 70px;
max-height: 130px;

}

#fsfOne{
position:static;
	float: left;
	
margin-left: 2%;
width:23%;
max-width:160px;
min-width: 70px;
max-height: 130px;
}

#sfFive{
position:static;
	float: left;
margin-left: 2%;
width:23%;
max-width:160px;
min-width: 70px;
max-height: 130px;
}

#sfNine{
position:static;
	float: left;
margin-left: 2%;
width:23%;
max-width:160px;
min-width: 70px;
max-height: 130px;
}


#title{
background-image: #666;
}


a{

	width: 400px;
	height: 30px;
	font-size: 1em;
	margin-bottom: 6px;
	padding: 5px;

}
ul {
margin-left: 10px;
}
nav{
	height:22px;
	top: 80px;
left: 0px;

}
	
	
ul{
	margin-left: -20px;

}}