
/**********************************************************************************

xpginc.com // October 16, 2010
Authors: Cole Welty

***********************************************************************************


All content & design (C) 2010 Xpress Graphics // All rights reserved
 
Thanks for your interest in the source code
Feel free to have a look around, but please don't steal from us.


**********************************************************************************/

/* HTML5 RESET by Richard Clark - http://richclarkdesign.com */


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}





/* CLEARFIX */


.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	line-height: 0%;
	content: " ";
	clear: both;
	height: 0;
}
	
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */




/* TYPOGRAPHY */



h2{
	color: #9a0100;
	font: 28px/30px "Baskerville", "Georgia", "Times New Roman", serif;
	text-transform: uppercase; 
}

h3{
	color: #9a0100;
	font: 36px/36px "Baskerville", "Georgia", "Times New Roman", serif; 
}

h3.work{
	color: #333;
	font: 33px/36px "Baskerville", "Georgia", "Times New Roman", serif;
	margin-bottom: 20px; 
}

h4{
	color: #333;
	font: 32px/38px "Baskerville", "Georgia", "Times New Roman", serif; 
}

p{
	color: #333;
	font: 15px/26px "Baskerville", "Georgia", "Times New Roman", "Times", serif;
	font-weight: 400;
}

a{
	color: #9a0100;
	-webkit-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
}

a:hover{
	color: #333;
	-webkit-transition: color 0.3s ease-in-out;
	-moz-transition: color 0.3s ease-in-out;
}






/* BODY STYLES */

html{
	overflow-y: scroll;
}

body{
	background: #616161 url(../images/bodyBG.jpg) 0px 0px repeat;
}


#container{
	background-color: #fff;
	margin: 0px auto;
	padding: 0px 20px 0px 20px;
	overflow: visible;
	width: 1000px;
}

.fl{
	float: left;
}

.fr{
	float: right;
}

span.amp{
	font-family: "Baskerville" "Georgia", serif;
	font-style: italic;
	font-size: inherit;
}

.center{
	text-align: center;
}


/*Header Styles */




header{
	border-bottom: 5px solid #c0c0c0;
	padding: 30px 0px 20px 0px;
}


h1{
	background: transparent url(../images/logo.png) 0px 0px no-repeat;
	height: 86px;
	margin-top: 21px;
	width: 397px;
}

h1 a{
	display: block;
	height: 86px;
	width: 397px;
}

h1 span{
	display: none;
}

header nav ul{
	margin-top: 33px;
}

header nav ul li{
	border-right: 1px dotted #333;
	color: #333;
	font: 12px/15px "Baskerville", "Georgia", "Times New Roman", serif;
	font-weight: 200;
	margin-right: 18px;
	text-shadow: rgba(255,255,255,.5) 1px 1px 0px; 
	width: 140px;
}

header nav ul li.last{
	border-right: none;
	margin-right: 0px;
	width: 130px;
}

header nav ul li a{
	color: #333;
	display: block;
	text-decoration: none;
}

header nav ul li a:hover em{
	color: #333;
	-webkit-transition: color 0.3s ease-in-out;
}

header nav ul li em{
	color: #9A0100;
	display: block;
	font: 20px/24px "Baskerville", "Georgia", "Times New Roman", serif;
	font-weight: normal;
	-webkit-transition: color 0.3s ease-in-out;
}

header nav ul li em.active{
	color: #333;
}	


/* Hero Styles */


section.hero{
	border-top: 2px solid #c0c0c0;
	margin-top: 7px;
	padding-top: 25px;
}

div.heroContainer{
	border: 1px solid #ccc;
	height: 375px;
	position: relative;
	width: 100%;
}



/* Who We Are Styles */


section.about{
	margin-top: 50px;
	padding-bottom: 90px;
}

section.about div.textWrapper{
	margin-top: 35px;
	width: 45%;
}

section.about div.textWrapper p{
	padding-bottom: 25px;
}

div.callUs span.left{
	background: transparent url(../images/filagreeSprite.jpg) 0px 15px no-repeat;
	height: 68px;
	width: 78px;
}

div.callUs span.right{
	background: transparent url(../images/filagreeSprite.jpg) 3px -82px no-repeat;
	height: 68px;
	width: 81px;
}

div.callUs{
	color: #333;
	font-size: 48px;
	line-height: 48px;
	font-family: "Baskerville" "Georgia", "Times New Roman" serif;
	margin: 0px 7px 0px 8px;
}

div.callUs strong {
	font-weight: normal;
}

div.callUs strong span{
	color: #666;
	display: block;
	font-size: 18px;
	line-height: 18px;
	font-family: "Baskerville" "Georgia", "Times New Roman" serif;
}

div.galleryWrapper{
	background: #ececec;
	height: 355px;
	position: absolute;
	top: 10px; left: 10px;
	width: 980px;
}

#gallery {
	position:relative;
	height:355px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	




/* What We Do Styles */


div.workIntro{
	margin: 10px 0px 30px 125px;
} 

div.workIntro span.left,
div.contactIntro span.left{
	background: transparent url(../images/filagreeSprite.jpg) 0px 15px no-repeat;
	height: 68px;
	width: 78px;
}

div.workIntro span.right,
div.contactIntro span.right{
	background: transparent url(../images/filagreeSprite.jpg) 0px -82px no-repeat;
	height: 68px;
	width: 78px;
}

div.workIntro h3,
div.contactIntro h3{
	color: #333;
	font: 33px/36px "Baskerville" "Georgia", "Times New Roman" serif;
	margin: 0px 7px 0px 8px;
	text-align: center;
}

section.work{
	border-top: 2px solid #c0c0c0;
	margin-top: 7px;
	overflow: hidden;
	padding: 25px 0px 120px 0px;
	position: relative;
}

div.project{
	border: 1px solid #ccc;
	height: 200px;
	position: relative;
	margin: 31px 0px 0px 31px;
	width: 310px;
}

div.project img{
	position: absolute;
	top: 10px; left: 10px;
}

div.project.first{
	clear:left;
	margin-left: 0px;
}



/* Get InTouch Styles */


div.contactIntro{
	margin: 10px 0px 30px 82px;
}

div.contactWrapper{
	padding: 40px 0 70px;
}

div.map{
	border: 1px solid #ccc;
	height:367px;
	position: relative;
	width: 637px;
}

div.map iframe{
	position: absolute;
	top: 7px; left: 8px;
}

div.contactInfo{
	border-bottom: 5px solid #c0c0c0;
	padding-bottom: 15px;
	width: 340px;
}

div.contactInfo.last{
	border-bottom: none;
}

div.contactInfo.marginTop{
	margin-top: 25px;
}

div.contactInfo h4{
	font-style: italic;
	padding-left: 5px;
}

div.contactInfo p, div.contactInfo a{
	color: #333;
	font: 36px/40px "Baskerville", "Georgia", "Times New Roman", serif;
	text-decoration: none;
}


div.contactInfo a:hover{
	color: #9a0100;
}




/* Footer Styles */

section.footer{
	background-color: transparent;
}

footer{
	background-color: #a8a7a7;
	margin: 0 auto;
	padding: 30px 20px 30px 20px;
	width: 1000px;
}

footer nav ul li{
	border-right: 1px dotted #333;
	color: #333;
	font: 13px/16px "Baskerville", "Georgia", "Times New Roman", "Times", serif;
	font-weight: 200;
	padding-left: 20px;
	text-shadow: rgba(255,255,255,.5) 1px 1px 0px; 
	width: 225px;
}

footer nav ul li.last{
	border-right: none;
}

footer nav ul li a{
	color: #333;
	display: block;
	text-decoration: none;
}

footer nav ul li a:hover em{
	color: #9A0100;
	-webkit-transition: color 0.3s ease-in-out;
}

footer nav ul li em{
	color: #333;
	display: block;
	font: 22px/26px "Baskerville", "Georgia", "Times New Roman", "Times", serif;
	-webkit-transition: color 0.3s ease-in-out;
}




