/*
Theme Name: iBates Designs Custom Theme
Theme URI: http://iBatesDesigns.com
Description: The custom iBates Designs theme
Version: 1.0
Author: Ian Bates
Author URI: http://iBatesDesigns.com/about
Tags: Electric blue, Fixed width, 2 column
*/

/* 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;}
* { margin:0; padding:0; }

/* @font-face kit */
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?iefix') format('eot'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Basic Tags */
blockquote { padding: 0 30px; border-left: 1px solid #0ca6ff; }
p { padding: 0 0 20px 0; }
strong { font-weight: bold; }
em { font-style: italic; }
hr { display: none; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.hide { display: none; }
.push { padding-top: 20px; }

/* Formatting */
html, body {
	background-color: #9d999b;
	background-attachment: fixed;
	background-image: url(images/iBD-bg.jpg); 
	background-repeat: no-repeat;
	background-position: top center;
	margin: 0;
	padding: 0;
	height: 100%;}

.pagewrap { 
	margin: 0 auto;
	padding-bottom: 360px;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 960px;}
	
.pagecenter { margin: 0 auto; width: 940px; }
.header { height: 200px; }
#logo { float: left; margin: 20px 0 10px 30px; }
#tag { float: right; }

h1 {
	/* font-family: Haettenschweiler; */
	margin: 40px 20px 0 0;}
h2 {
	font-family: LeagueGothicRegular, Helvetica, Arial, sans-serif;
	font-size: 40px;
	margin-bottom: -8px;
	padding-bottom: 8px;
	text-transform: uppercase;}
h3 {
	color: #f2f9ff;
	float: right;
	font-family: LeagueGothicRegular, Haettenschweiler, Impact, Arial black, sans-serif;
	font-size: 34px;
	font-weight: normal;
	padding: 12px 20px 0 0;
	letter-spacing: 1px;
	text-transform: uppercase;}
h4 { 
	color: #f2f9ff;
	float: right;
	font-family: Impact;
	font-size: 30px;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 36px;
	padding: 10px; }
h4 a:link, h4 a:visited { color: #0ca6ff; text-decoration: none; }
h4 a:hover, h4 a:active { color: #0e6aa0; text-decoration: none; }
h5 {
	color: #222222;
	font-family: Tahoma, arial, sans-serif;
	font-weight: bold;
	font-size: 26px;
	padding: 5px 0;
}
h6 { color: #222; font-family: Tahoma, arial, sans-serif; font-size: 18px; font-weight: bold; padding: 5px 0; }

.navbar { margin: 5px 0 0 8px; width: 620px; }

/* Nav */
#nav {
width: 620px;
height: 30px;
position: relative;
margin: 0;
padding: 0;
}
#nav li {
float: left; list-style: none; height: 30px;
}
#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 30px;
background: url(http://www.iBatesDesigns.com/iBD-nav.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

/* Nav Up */
li#nav_home a { left: 0; width: 78px; background-position: 0 0; }
li#nav_about a { left: 78px; width: 92px; background-position: -78px 0; }
li#nav_services a { left: 170px; width: 124px; background-position: -170px 0; }
li#nav_portfolio a { left: 294px; width: 138px; background-position: -294px 0; }
li#nav_blog a { left: 432px; width: 72px; background-position: -432px 0; }
li#nav_contact a { left: 504px; width: 116px; background-position: -504px 0; }

/* hover state*/
li#nav_home a:hover { background-position: 0 -30px; }
li#nav_about a:hover { background-position: -78px -30px; }
li#nav_services a:hover { background-position: -170px -30px; }
li#nav_portfolio a:hover { background-position: -294px -30px; }
li#nav_blog a:hover { background-position: -432px -30px; }
li#nav_contact a:hover { background-position: -504px -30px; }

/* current state*/
#body_home li#nav_home a { background-position: 0 -61px; }
#body_about li#nav_about a { background-position: -78px -61px; }
#body_gallery li#nav_services a { background-position: -170px -61px; }
#body_services li#nav_portfolio a { background-position: -294px -61px; }
#body_contact li#nav_blog a { background-position: -432px -61px; }
#body_contact li#nav_contact a { background-position: -504px -61px; }

/* Main Page Formatting */
/* Row 1 */
#latesttop {
	background-color: #0ca6ff; 
	height: 30px;
	margin: 0 10px;
	width: 620px; }
#latest {
	background-color: #999;
	height: 300px;
	margin: 0 10px;
	width: 620px; }
#latestbottom {
	background-color: #000;
	color: #f2f9ff; 
	height: 60px;
	margin: 0 10px;
	width: 620px; }

#whoiamtop {
	background-color: #0ca6ff;  
	margin: 0 10px;
	height: 30px;
	width: 300px; }
#whoiam { 
	background-image: url(images/iBD-whoiam.jpg); 
	background-repeat: no-repeat;
	height: 300px;
	overflow: hidden;
	margin: 0 10px;
	width: 300px; }
#whoiambottom {
	background-color: #000; 
	margin: 0 10px;
	height: 60px;
	width: 300px; }
.portfoliofooterwrap {
	background-color: #000; 
	margin: 0;
	height: 60px;
	width: 300px; }
.portfoliofooter h3 { color: #fff; }
.elec-blue { color: #0ca6ff; }

/* Row 2 */
.box, .gridbox {
	float: left;
	margin: 0 10px;
	overflow: hidden;
	width: 300px; 
	z-index: 99; }
.gridbox { margin-bottom: 10px; }
.portfolioimage { background-color: #999; height: 150px; }
.portfoliofooter { background: url(blog/wp-content/themes/iBD/images/iBD-print.jpg); height: 60px; }

/* Interior Page Formatting */
#pagehead {
	background-color: #0ca6ff; 
	height: 30px;
	margin: 0 10px;
	width: 940px; }

#page-left p, #pagecontent p { font-family: Georgia, times, serif; font-size: 15px; line-height: 24px; }
#page-right p { font-family: georgia, times, serif; font-size: 14px; line-height: 20px; }

#pagecontent { background-color: #f1f3f8; margin: 0 10px; padding: 0px 20px; }
#pagecontent p a, #pagecontent p a:link, #pagecontent p a:visited, #pagecontent ul li a,#pagecontent ul li a:link, #pagecontent ul li a:visited, #page-right p a, #page-right p a:link, #page-left p a:link, #page-left p a:visited
{ color: #333333; padding: 3px; text-decoration: underline; }
#pagecontent p a:hover, #pagecontent p a:active, #pagecontent ul li a:hover, #pagecontent ul li a:active, #page-right p a:active, #page-right p a:hover, #page-left p a:hover, #page-left p a:active
{ color: #FFFFFF; background-color: #0ca6ff; padding: 3px ;text-decoration: none; }

#pagecontent ul li, #page-left ul li { margin: 10px 0 10px 30px; }

#pagewrap { margin-top: 10px; height: 300px; width: 960px; }
#sort { margin: 10px 0 10px 10px; }
.sortspan { color: #f6f6f6; padding: 5px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold; }
.sortspan a:link, .sortspan a:visited, .sortspan a:active { color: #f6f6f6; padding: 5px; }
.sortspan a:hover { background-color: #0ca6ff; color: #f6f6f6; text-decoration: none; padding: 5px; }

#page-left-head, #page-right-head { background-color: #0ca6ff; height: 30px; }
#page-left-head { margin: 0 auto; width: 620px; }
#page-right-head { margin: 0 auto; width: 300px; }
#page-left, #page-right { padding: 10px 20px 20px 20px; }
#pageleftcontainer { background-color: #f1f3f8; float: left; margin: -20px 10px; width: 620px; }
#pagerightcontainer { background-color: #f1f3f8; float: right; margin: -20px 10px; width: 300px; }

/* Footer */
.footer { 
	position: absolute; 
	bottom: 0px; 
	padding-top: 30px; 
	margin-bottom: -10px; 
	background-color: #000000; }
.footbox {
	float: left;
	margin: 0 10px;
	width: 300px; }
.footbox ul {list-style: none;} /* Overall List */
.footbox li {list-style: none; } /* Between each entry */
.footbox ul li {list-style: none;} /* Overall List */
.footbox ul li ul {list-style: none;} /* Child List Indent */
.footbox ul li ul li {list-style: none;}
.footbox ul ul li {list-style: none;}
.footbox ul ul ul li {list-style: none;}

.footbox ul li a { display:block; margin:0; width: 175px;}
.footbox ul li a:link, .footbox ul li a:visited { 
	color: white; 
	font-family: helvetica, arial, sans-serif;
	padding: 5px;
	text-decoration: none;}
.footbox a:hover, .footbox a:active { 
	background-color: #0ca6ff;
	color: white; 
	font-family: helvetica, arial, sans-serif;
	padding: 5px;
	text-decoration: none;}
#footbottom { background: #0ca6ff; height: 50px; width: 960px; }
#footbottom p {
	color: #f2f9ff;
	font-family: helvetica, tahoma, sans-serif;
	font-size: 12px;
	padding-top: 16px;
	margin: 0 auto;}
#footbottom p a:link, #footbottom p a:visited, #footbottom p a:active { color: #f6f6f6; }
#footbottom p a:hover { color: #f6f6f6; text-decoration: none;}
.footleft { float: left; padding-left: 20px; }
.footright { float: right; padding-right: 20px; }

/* Blog Stuff */
.post { padding-top: 10px; }
.post a, .post a:link, .post a:visited { color: #111; padding: 5px 0; text-decoration: none; }
.post a:hover, .post a:active { text-decoration: underline; }
.entry { font-family: arial; }
.entry p { line-height: 24px; }
.postdate { font-family: tahoma, verdana, arial; font-size: 12px; padding: 5px 0; }

/* Grid Nav */
#grid {
width: 90px;
height: 30px;
float: right;
position: relative;
margin-left: 650px;
margin-bottom: 10px;
padding: 0;
overflow: hidden;
}
#grid li {
float: left; list-style: none; height: 30px; overflow: hidden;
}
#grid li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 30px;
background: url(http://www.iBatesDesigns.com/iBD-grid.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

/* Grid Up */
li#grid_left a { left: 0; width: 30px; height: 30px; background-position: 0 0; }
li#grid_up a { left: 30px; width: 30px; height: 30px; background-position: -30px 0; }
li#grid_right a { left: 60px; width: 30px; height: 30px; background-position: -60px 0; }

/* hover state*/
li#grid_left a:hover { background-position: 0 -30px; }
li#grid_up a:hover { background-position: -30px -30px; }
li#grid_right a:hover { background-position: -60px -30px; }

/* Entry Formatting */
.entryleft { float: left; margin: 0 10px 10px 0; width: 620px; overflow: hidden; }

.morescreens { float: left; margin: 0; width: 620px; height: 150px; }
.screen1 { float: left; height: 150px; }
.screen2 { float: left; margin-left: 20px; height: 150px; }

.imghint { color: #333; margin: 10px 0 0 0; font-family: arial, verdana, sans-serif; font-weight: bold; }
.entryright { float: right; margin-top: 0px; width: 260px; }
.entryright p { font-family: garamond, georgia, times, serif; }
.linkage {
	background-color: #0ca6ff;
	color: #fff;
	display: block;
	padding: 5px 0px; 
	width: 260px; }
.linkage a:link, .linkage a:visited, .linkage a:active { 
	color: #fff;
	font-size: 20px;
	font-family: arial;
	font-weight: bold;
	margin-left: 20px;
	text-decoration: none; }
.linkage:hover { text-decoration: none; background-color: #000; color: #fff; }
#url {
	background-color: #000000;
	display: block;
	padding: 5px 0px;
	margin-bottom: 5px; 
	width: 230px;
	height: 30px; }
#url a:link, #url a:visited, #url a:active { 
	color: #f1f3f8;
	font-size: 30px;
	font-family: arial;
	font-weight: bold;
	margin-left: 20px;
	text-decoration: none; }
#url:hover { text-decoration: none; background-color: #0ca6ff; }

.filed, .filed a { font-family: georgia, serif; color: #000; text-decoration: none; }
.filed a:hover, .filed a:active { color: #333; text-decoration: underline; }

/* overlays */
.full_overlay {
	position:relative;
	width:300px;
	height:150px;
}
.full_overlay p {
	color:#FFFFFF;
	padding:10px;
}
	.full_overlay .content {
		position: absolute;
		left: 0px;
		width: 300px;
		height:150px;
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		background:#000000;
		background: rgba(0,0,0,0.9);
		-webkit-transition: opacity 0.2s ease-in-out;
		-moz-transition: opacity 0.2s ease-in-out;
		-o-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}
	.content h2, .content p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
	.content h2 a:link, .content h2 a:visited, .content h2 a:active {
		color: #ffffff; text-decoration: none;
	}
	.content h2 a:hover { color: #0ca6ff; }
	.full_overlay:hover .content {
		/* Setting a 100% opacity on mouse hover to show the content */
		filter: alpha(opacity=100);
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}