@import "reset.css";

/* STRUCTURE */

body {
	background-image: url(../images/noise_bg-white.jpg);
	font-family: Helvetica, sans-serif, arial;
	width: 100%;
	height: 100%;
}
#page-wrap {
	top: 0px;
	margin: 0px auto -50px;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
h1 {
	font-family: sans-serif Arial;
	color: white;
	width: 700px;
	margin: 0px auto;
}

/* NAV & HEADER */

#masthead {
	top: 0px;
	width: 100%;
	height: 221px;
	background: url(../images/k-header-white.jpg) no-repeat center top;
}
.home {
	position: relative;
	top: 0px;
	width: 880px;
	height: 100px;
	display: block;
	margin: 0px auto;
	font-size: .2em;
	color: transparent;
	text-decoration: none;
}

/* NAV LEFT */

#Nav {
	position: relative;
	top: 0px;
	width: 880px;
	height: 30px;
	margin: 0px auto;
	padding-top: 3px;
	border-top: solid thin #383d3f;
	border-bottom: solid thin #383d3f;
}
#Nav ul li {
	display: inline;
}
#Nav ul li a {
	display: block;
	height: 29px;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}
#Nav ul li.fashion a {
	width: 91px;
	margin-left: 10px;
	padding-right: 30px;
	background: url(../images/fashionNav_OFF.png) left no-repeat;
}
#Nav ul li.fashion a:hover {
	width: 91px;
	margin-left: 10px;
	padding-right: 30px;
	background: url(../images/fashionNav_ON.png) left no-repeat;
}
#Nav ul li.portrait a {
	width: 107px;
	padding-right: 30px;	
	background: url(../images/portraitNav_OFF.png) left no-repeat;
}
#Nav ul li.portrait a:hover {
	width: 107px;
	padding-right: 30px;	
	background: url(../images/portraitNav_ON.png) left no-repeat;
}
#Nav ul li.wedding a {
	width: 96px;
	padding-right: 30px;	
	background: url(../images/weddingNav_OFF.png) left no-repeat;
}
#Nav ul li.wedding a:hover {
	width: 96px;
	padding-right: 30px;	
	background: url(../images/weddingNav_ON.png) left no-repeat;
}
#Nav ul li.project a {
	width: 97px;
	background: url(../images/projectNav_OFF.png) left no-repeat;
}
#Nav ul li.project a:hover {
	width: 97px;
	background: url(../images/projectNav_ON.png) left no-repeat;
}

/* NAV RIGHT */

#Nav ul.extraNav li {
	display: inline;
}
#Nav ul.extraNav li a {
	display: block;
	height: 29px;
	text-indent: -9999px;
	float: right;
}
#Nav ul.extraNav li.contact a {
	width: 93px;
	padding-right: 10px;
	background: url(../images/contactNav_OFF.png) left no-repeat;
}
#Nav ul.extraNav li.contact a:hover {
	width: 93px;
	padding-right: 10px;
	background: url(../images/contactNav_ON.png) left no-repeat;
}
/*
#Kamanskifashion #Nav ul li.fashion a {background: url(../images/fashionNav_ON.png) left no-repeat;}
#Kamanskiportrait #Nav ul li.portrait a {background: url(../images/portraitNav_ON.png) left no-repeat;}
#Kamanskiwedding #Nav ul li.wedding a {background: url(../images/weddingNav_ON.png) left no-repeat;}
#Kamanskiproject #Nav ul li.project a {background: url(../images/projectNav_ON.png) left no-repeat;)
#Kamanskicontact #Nav ul.nav li.contact a {background: url(../images/contactNav_ON.png) left no-repeat;}
*/

/* INDEX - BIO */

.bio {
	position: relative;
	left: 80px;
	top: -40px;
}
.bio p {
	position: relative;
	left: 25px;
	top: 10px;
	display: block;
	width: 375px;
	font-family: Helvetica, sans-serif, arial;
	font-size: .9em;
	text-align: left;
	line-height: 1.4em;
	color: #000;
	float: left;
}
.bio h1 {
	position: relative;
	left: 25px;
	height: 30px;
	width: 375px;
	float: left;
	padding-top: 3px;
	font-family: Helvetica, sans-serif, arial;
	color: transparent;
	border-top: solid thin #383d3f;
	border-bottom: solid thin #383d3f;
}
.bio h1 img {
	position: relative;
	top: -13px;
	left: -60px;
}
.frontSlide {
	width: 800px;
	height: 533px;
	border: solid thin #383d3f;
	float: left;
}
.frontSlide img {
	width: 800px;
	height: 533px;
	top: 0;
	left: 0;
}
.bioSig {
	position: relative;
	left: 30px;
	top: 10px;
	width: 200px;
	height:49px;
	float: left;
	background: url(../images/bioSig.jpg) no-repeat;
}

/* CONTACT PAGE*/

.contact {
	position: relative;
	left: 80px;
	top: -40px;
}
.contact p {
	position: relative;
	left: 25px;
	top: 10px;
	display: block;
	width: 375px;
	font-family: Helvetica, sans-serif, arial;
	font-size: .9em;
	text-align: left;
	line-height: 1.4em;
	color: #9f9f9f;
	float: left;
}
.contact h1 {
	position: relative;
	left: 25px;
	height: 30px;
	width: 375px;
	float: left;
	padding-top: 3px;
	font-family: Helvetica, sans-serif, arial;
	color: transparent;
	border-top: solid thin #383d3f;
	border-bottom: solid thin #383d3f;
}
.contact h1 img {
	position: relative;
	top: -12px;
	left: -60px;
}
a {
	color: #686d71;
	text-decoration: none;
}
a:hover {
	color: #308195;
}

/* GALLERY */

.gallery {
	position: relative;
	left: 50px;
	top: -60px;
	float: left;
}
.gallery li {
	width: 30px;
	height: 30px;
	border: solid thin #383d3f;
}
.gallery li div {
	left: 200px;
}
.gallery li div .caption {
	font-family: sans-serif;
}
#main_image {
	position: relative;
	top: -45px;
	left: 40px;
	width: 700px;
	margin: 0px auto;
}
#main_image img {
	border: solid thin #383d3f;
	width: auto;
	margin:0px auto;
}
.galleria_container{
	margin: 0 auto;
}



/* STICKY FOOTER */

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #page-wrap {height: 100%;}

body > #page-wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 30px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -30px; /* negative value of footer height */
	margin-left: auto;
	margin-right: auto;
	height: 30px;
	width: 880px;
	clear:both;
	padding-top: 3px;
	border-top: solid thin #383d3f;
	border-bottom: solid thin #383d3f;
}
 
#footer p{
	position: relative;
	top: 10px;
	left: 10px;
	color: #383d3f;
	font-family: Helvetica, sans-serif, arial;
	font-size: .7em;
	line-height: .7em;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */