/*
Theme Name: Altility Art Studio
Description: Custom WordPress theme for Altility Art Studio.
Version: 1.0
Author: eROI (Meggan G)
Author URI: http://www.eroi.com/
*/


/* CSS Document */

/************************************************************************

	Site:		Altility Art Studio

	Author:		Meggan G - eROI		[www.eroi.com]  

	Client:		Aaron Loveitt	[http://www.altilityartstudio.com]

	Listing Order:
	==============

	1 - Global
	2 - Structure/Layout
	3 - Header
	4 - Main Content
			- Header tags
			- Category page
	5 - Footer Navigation
	

************************************************************************/

/***********************************************************************
	1 - GLOBAL STYLES
************************************************************************/

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%;
    font-weight: inherit;
}

body {
	background: #f8faf9 url(images/bg.jpg) no-repeat top;
	color: #a9a9a9;
	text-align: center;
	font: 62.5%/1.3em Georgia, "Times New Roman", Times, serif;
}

.clearer {
	clear: both !important;
	line-height: 0;
}

.disappear {
	margin-left: -9999px;
}

p, ul, ol {
	padding-bottom: 1em;
}

a {
	color: #0076a3;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/***********************************************************************
	2 - STRUCTURE/LAYOUT STYLES
************************************************************************/

div#container {
	width: 970px;
	margin: 0 auto;
	text-align: left;
}




/***********************************************************************
	3 - HEADER STYLES
************************************************************************/

div#header {
	padding: 10px 0;
}

div#logo {
	float: left;
	width: 115px;
	height: 66px;
	background: url(images/logo-altility.png) no-repeat top left;
}

div#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

div#nav {
	width: 500px;
	float: right;
}

div#nav ul {
	list-style-type: none;
	padding: 0;
}
div#nav ul li {
	float: left;
	padding: 0 17px;
}
li.last {
	padding-right: 0 !important;
	border-right: 0;
}

div#nav ul li a {	
	display: block;
}

div#nav ul li#li_artwork {
	padding: 0 4px;
}
div#nav ul li#li_fabrication {
	padding: 0 12px;
}

#nav li a {
	background: url(images/nav.png) no-repeat;
	display: block;
}

#nav #li_artwork a { 
	background-position: 0 -308px; 
	width: 60px;
	height: 54px;
} 
#nav #li_artwork a:hover { background-position: 0 -204px; } 

#nav #li_fabrication a { 
	background-position: 0 -720px; 
	width: 66px;
	height: 54px;
} 
#nav #li_fabrication a:hover { background-position: 0 -616px; }

#nav #li_product a { 
	background-position: 0 -1134px; 
	width: 46px;
	height: 54px;
} 
#nav #li_product a:hover { background-position: 0 -1030px; } 

#nav #li_about a { 
	background-position: 0 -102px; 
	width: 33px;
	height: 54px;
}
#nav #li_about a:hover { background-position: 0 0; }  
 
#nav #li_influence a { 
	background-position: 0 -928px; 
	width: 52px;
	height: 54px;
} 
#nav #li_influence a:hover { background-position: 0 -824px; } 

#nav #li_contact a { 
	background-position: 0 -514px; 
	width: 43px;
	height: 54px;
} 
#nav #li_contact a:hover { background-position: 0 -412px; } 


/***********************************************************************
	4 - CONTENT STYLES
************************************************************************/

div#content {
	clear: both;
	padding: 10px 0;
	font-size: 110%;
}


/* HEADER STYLES ***************/

h1 {
	color: #222;
	font-size: 120%;
	font-weight: bold;
	padding-bottom: .6em;
}

h2 {
	font-size: 90%;
}

h3 {
	font-size: 100%;
	color: #2c2d29;
	/*background: url(images/bg-header.gif) no-repeat left;
	padding-left: 15px;*/
	text-transform: uppercase;
	letter-spacing: 1px;
}
h3 img {
	vertical-align: baseline;
	padding: 0 2px;
}

h4 {
	font-size: 180%;
	line-height: 1.2em;
}

/**********************************/

div#content p {
	line-height: 1.6em;
}

div#content ul {
	padding-left: 2em;
}

div#largephoto {
	background: url(images/bg-largephoto.png) no-repeat top;
	width: 964px;
	height: 477px;
	padding-top: 8px;
}	

div#largephoto div.caption, div.medcaption {
	display: none;
}
div.caption p, div.medcaption p {
	font-size: 120%;
	font-style: italic;
	font-weight: bold;
}

div.medcaption p {
	text-align: right;
}

div#largephoto img {
	display: block;
	margin: 0 auto;
}


.image-overlay {
    position: relative;
}
.image-overlay .caption, .image-overlay .medcaption {
    position: absolute;
	bottom: 21px;
	left: 12px;
    background-color: #000;
	color: #fff;
    width: 940px;
	/*padding: 15px;*/
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .7;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.image-overlay .medcaption {
	width: 610px;
}

.image-overlay .caption p, .image-overlay .medcaption p {
	padding: 15px;
	width: 910px;
	position: relative;
	font-weight: normal;
}
.image-overlay .medcaption p {
	width: 590px;
	padding: 7px 15px;
}
.image-overlay .caption p span {
	position: absolute;
	right: 18px;
}
.caption p a {
	font-size: 80%;
	color: #007dad;
}




div#intro {
	font-size: 190%;
	padding: 10px 10px 0 10px;
}
div#intro p {
	line-height: 1.5em !important;
}

div#intro a.small {
	font-size: 55%;
	font-style: italic;
}


div#recent {
	width: 950px;
	clear: both;
	padding: 25px 0 5px 0;
}

div#recent h3 {
	border-bottom: 1px solid #dedfde;
	padding-bottom: 3px;
}

div#recentprojects {
	width: 550px;
	float: left;
}
div#recentpost {
	width: 400px;
	float: right;
}

div#recentpost h4 {
	margin-top: 15px;
	padding-bottom: .4em;
}

div#recentpost a {
	font-size: 100%;
	font-style: italic;
}

div#recentpost h4 a {
	color: inherit;
	font-style: normal;
}

div#recentprojects ul {
	padding: 10px 0;
	list-style-type: none;
}
div#recentprojects ul li {
	float: left;
	padding-right: 15px;
}

a.thumb {
	background: url(images/bg-thumb.png) no-repeat top left;
	display: block;
	width: 91px;
	height: 92px;
	padding: 3px 0 0 4px;
}
a.thumb:hover {
	background: url(images/bg-thumb-over.png) no-repeat top left;
}

div#recentpost h3, div#recentpost h4, div#recentpost p {
	padding-left: 50px;
}	




/* CATEGORY PAGE STYLES **********/

div.page-template-category-template-php h3 {
	border-bottom: 1px solid #dedfde;
	padding-bottom: 3px;
	margin-bottom: 10px;
	clear: both;
}

div.catimages {
	clear: both;
	margin-top: 30px;
}


div.page-template-category-template-php a.thumb {
	float: left;
	margin: 0 15px 15px 0;
}

div#breadcrumbs {
	padding: 10px 10px 15px 10px;
	color: #595f68;
}
div#breadcrumbs strong {
	color: #222;
}

/* DETAIL PAGE *************/

div#detail {
	padding-bottom: 3em;
}

div#detailimage {
	/*background: url(images/bg-detail.png) no-repeat top;*/
	width: 633px;
	float: left;
}
div#detailimage img {
	display: block;
	margin: 0 auto;
	padding: 5px;
	background: #fff;
	border: 1px solid #cfcfcf;
}

img#medphoto {
	max-width: 620px;
}

div#thedetails {
	width: 240px;
	float: left;
	padding-left: 20px;
	color: #595f68;
	font-size: 110%;
}

div#thedetails  p.stats {
	font-style: italic;
	line-height: 1.2em;
}

div.blog a, div#copybox a {
	font-style: italic;
}

.alignleft {
	display: block;
	float: left;
	margin-right: 10px;
}
.alignright {
	display: block;
	float: right;
	text-align: right;
	margin-left: 10px;
}

/*div.navigation {
	padding-top: 25px;
}*/

div#viewslideshow {
	width: 630px;
	float: left;
}

div#viewslideshow p {
	padding: 1.3em 0 3em .2em;
	font-size: 110%;
	line-height: 1em;
}

div#viewslideshow p a.hide {
	display: none;
}

div#detail:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


div#extraimages {
	display: none;
}


/* BLOG AREA (INFLUENCE ) *************************/

div.blog, div#copybox, div.single, div.archive {
	color: #595f68;
}

div.archive {
	width: 940px !important;
}

div.postarea {
	width: 655px;
	float: left;
	padding: 0 0 0 10px;
}

div.post {
	border-top: 1px solid #dedfde;
	clear: both;
	padding: 10px 0 0 0;
	margin: 15px 0 25px 0;
}

div.date {
	width: 155px;
	float: left;
}

div.entry {
	width: 470px;
	float: left;
	margin-left: 20px;
}

div.postarea h2 {
	font-size: 200%;
	color: #222;
	line-height: 1.1em;
	padding-bottom: .5em;
}

img.wp-image {
	background: #fff;
	padding: 5px;
	border: 1px solid #cfcfcf;
}


div.entry div.postwise {
	clear: both;
	float: none;
	margin: 10px 0;
	padding-bottom: 25px;
}

img.alignnone, img.alignleft, img.alignright, img.aligncenter {
	background: #fff;
	padding: 5px;
	border: 1px solid #cfcfcf;
}


div#sidebar {
	width: 230px;
	float: right;
	margin-right: 10px;
}

div.sidebox {
	padding-bottom: 2em;
	float:left;
	width:230px;
}

div.sidebox a.grouped_elements {
	display:none;
	background:#FFFFFF;
	padding:1px;
	border-bottom:1px solid #c0c0be;
	float:left;
	margin:0 5px 5px 5px;
}

div.sidebox a.cover {
	display:block;
}

div#sidebar h3 {
	border-bottom: 1px solid #dedfde;
	padding: 0 0 3px 1em;
	margin: 0 0 .5em 0;
}

div#sidebar ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 1em;
}
div#sidebar ul li {
	padding-bottom: .5em;
}
div#sidebar ul li a {
	font: normal 14px/1.3em Georgia, "Times New Roman", Times, serif;
}
div#sidebar p {
	padding-left: 1em;
}

form#signupform label.error {
	display: block;
	float: none; 
	color: #db8920;
}

/* COMMENTS */

h3#comments, div#respond h3 {
	margin-top: 1em;
	padding-bottom: .5em;
}

/*h3#comments {
	padding-top: 1em;
	border-top: 1px solid #dedfde;
}*/


ol.commentlist {
	list-style-type: none;
}	

ol.commentlist li {
	margin-bottom: 10px;
	border-bottom: 1px solid #dedfde;
	padding: 5px 10px;
	position: relative;
}

div.commentwise div {
	padding-top: 25px;
}

cite.fn {
	font-weight: bold;
}

div.commentmetadata {
	padding: 1em 0;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}

div.comment-body p {
	padding: .5em 0 2em 0;
}

/* ABOUT PAGE *************************/

div#photobox {
	width: 640px;
	float: left;
}

div#copybox {
	width: 305px;
	float: right;
	padding: 0 10px 0 0;
}







/***********************************************************************
	5 - FOOTER STYLES
************************************************************************/

div#footer {
	clear: both;
	width: 950px;
	margin: 0 auto;
	border-top: 1px solid #dedfde;
	color: #595f68;
	padding: 8px 15px 30px 0;
	font-size: 110%;
}