/*

Theme Name: Form & Function



*/





/* Begin Structure */

html { margin:0; padding:0; }



body {

	font-size: 62.5%; /* Resets 1em to 10px */

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	color: #333;

	background:#D2EAF1;

	margin:0;

	padding: 0;

	width:100%; height:100%;

	}



#container {

	margin:0px;

	padding:0;

	border:10px solid #e0f1f5;

	border-width:10px 0 0 10px;

}



#header {

	background: #e0f1f5;

	width:230px;

	height:100%;

	float:left;

	z-index:100;

	position:relative;

	}



#logo, #logo a, #logo a img { margin:0; padding:0; height:265px; }

	

/****** fake borders ******/



.border {

	z-index:2;

	height:100%;

	position:absolute;

	top:0; 

	background:#e0f1f5;
	position:fixed; 

	}

	

#border-left { left:0; width:240px; }

#border-right { right:0; width:10px; }

	

	

/****** MENU ******/



#menu {

	margin:0;

	padding:10px;

	height:160px;

	background:#c3e4ed;

	color:#009FC2;

	font-size:1.3em;

}



#menu ul { 

	list-style-type:none;

	margin:0;

	padding:0;

	}



#menu ul ul { margin:0 0 0 15px; }



#menu li span { margin: 0 2px 0 0; }

	

#menu ul li {

		margin:0;

		padding:0;

	}



#menu a {

	text-decoration:none;

	color:#009FC2;

	}



#menu a:hover {

	color:#6DC5DB;

	}



#menu a:visited {

	

	}

	

#menu a.active {

	color: #FFFFFF;

	}





/******* PAGE CONTENT *******/



#content {

	font-size: 1.3em;

	color:#009FC2;

	background:#D2EAF1;

	z-index:1;

	padding:0px 20px 0 240px;

	margin:0;

	position:relative;

	}

	

#content div.post {

	padding:223px 0 0 0;

}



div.post h2 {

	margin:0; padding:0;

	font-size:36px;
	color:#FFFFFF;

	font-weight:normal;

	}

	

div.post h1 {

	margin:-12px 0 0 0; padding:0;

	font-size:24px;

}



div.entry {

	width:410px;

	margin:-3px 0 0 0;

	}

	

div.entry a {

	color:#6DC5DB;

	text-decoration:none;

	}

div.entry a:hover { color:#009FC2; }



#breadcrumbs {

	background:#009FC2;

	color:#FFFFFF;

	width:686px;

	padding:5px 12px;

	}



#breadcrumbs a {

	text-decoration:none;

	color:#FFFFFF;

	}

	

#breadcrumbs a:hover {

	color:#6DC5DB;

	}



#breadcrumbs span {

	}



#breadcrumbs .last-crumb {

	color:#6DC5DB;

	}

#breadcrumbs a.last-crumb:hover {

	color:#ffffff;

	}



#boxes {

	width:720px;
	}



#boxes a {

	display:block;

	width:230px;

	height:229px;

	float:left;

	margin:10px 10px 0 0;

	text-decoration:none;

	color:#009FC2;

	background:#A7D9E7;
	text-align:center;

	}



#boxes a img {

	border:0;

	margin:0; padding:0;

	}
	

#boxes a span {

	margin:10px 10px 0 10px;

	display:block;
	text-align:left;

	}



#boxes a:hover {

	background:#6DC5DB;

	}



#boxes a div {

	margin:5px 10px 12px 10px;
	text-align:left;

	padding:0;

	}
	
#boxes a div.imgBox {
	width:230px;
	height:180px;
	margin:0; padding:0;
	background:#FFFFFF;
	text-align:center;
	}

#boxes a div p {

	margin:0; padding:0;

	}

#boxes a div p.title {

	}

#boxes a div p.design {

		color:#FFFFFF;

	}

#boxes a div p span { margin:0 25px 0 0; display:inline; }


#spacer {
	clear:both;
	height:10px;
	margin:0; padding:0;
	width:100%;
	}


/* End Structure */







/* Feature */



#featureBox {

	position:absolute;

	top:275px;

	left:250px;

	z-index:100;

	background:#6DC5DB;

	width:210px;
	/*min-width:210px;*/

	height:160px;

	padding:10px;

	margin:0;

	color:#ffffff;

	text-decoration:none;

	display:block;

	}

#featureBox h1 {

	font-size:36px;

	margin:0px 0 5px 0; padding:0;

	font-weight:normal;

	}

#featureBox h2, #featureBox h3 {

	font-weight:normal;

	margin:0; padding:0;

	font-size:1.3em;

	}

#featureBox h3 {

	margin:50px 0 0 0;

	}

	

#featureBox p { margin:0; padding:0; }

	

#featureImg {

	margin:0 0 0 10px;

	padding:0;

	width:710px;

	height:660px;

}



/* End Feature */





/* Product Page */



#gallery {

	width:710px;

	height:410px;

	margin:10px 0 0 0;

	position:relative;

}

.gallery-img { 
	position:absolute;
	top:0;
	left:0;
	width:710px;
	height:410px;
	margin:0;
	padding:0;
	background:#FFFFFF;
	text-align:center;
	}
#gallery img { margin:0; padding:0; }



#info {

	background:#A7D9E7;

	width:460px;

	margin:0; padding:10px 240px 30px 10px;

	
	position:relative;

	color:#FFFFFF;

	}

#info p {

	margin:0; padding:0;

	}



#info p.title { font-size:1.2em; }

#info p.title, #info div.description { color:#009FC2; }

#info p.designer { margin:10px 0 0 0; }

#info div.description { margin:10px 0 10px 0; }

	

#info p table { margin:0; padding:0; width:250px; }

#info p table tr { vertical-align:top; margin:0; padding:0; }

#info p table tr td:first-child { }



#thumbnails {

	position:absolute;

	margin:0;

	top:0; right:0;

	background:#8CCFE1;

	width:232px;

	height:100%;

	}



#nav { color:#009FC2; text-align:right; margin:15px 10px 0 0; }

#nav a {

	color:#009FC2;

	text-decoration:none;

	}



#nav a:hover {

	color:#C3E4ED;

	}



#thumbs {

	margin:5px 0 0 2px; padding:0;

	width:220px;

	}

	

#thumbs a {

	border:1px solid #8CCFE1;

	margin:8px 0 0 8px;

	padding:0;

	display:block;

	float:left;

	height:45px;

	width:45px;

	}

#thumbs a:hover {

	border:1px solid #009FC2;

	}

#thumbs a img { margin:0; padding:0; }



#info-sheet {

	color:#C3E4ED;

	text-decoration:none;

	display:block;

	font-size:1em;

	padding:10px 0 0 10px;

	margin:0;

	clear:left;

}



#info-sheet:hover { color:#009FC2; }



#manufacturer {

	float:right;

	margin:0 5px 0 10px;

	padding:0;

}



/* End Product */





/* Begin Images */

p img {

	padding: 0;

	max-width: 100%;

	}



/*	Using 'class="alignright"' on an image will (who would've

	thought?!) align the image to the right. And using 'class="centered',

	will of course center the image. This is much better than using

	align="center", being much more futureproof (and valid) */



img.centered {

	display: block;

	margin-left: auto;

	margin-right: auto;

	}



img.alignright {

	padding: 4px;

	margin: 0 0 2px 7px;

	display: inline;

	}



img.alignleft {

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

	}



.alignright {

	float: right;

	}



.alignleft {

	float: left;

	}

	

.clear {

	clear: both;

	}

	

/* End Images */









/* Begin Various Tags & Classes */

.center {

	text-align: center;

	}



.hidden {

	display: none;

	}

	

.screen-reader-text {

     position: absolute;

     left: -1000em;

}



hr {

	display: none;

	}



a img {

	border: none;

	}

/* End Various Tags & Classes*/