*{
 margin:0;
 padding:0;
}

body{
 margin:0;
 padding:0;
 background:#000 url('../img/main-background.jpg') no-repeat top center;
 font-family: Georgia, Times New Roman, Helvetica, serif;
 font-size: 62%;
 color:#CCCCCC ;
}

img, div, ul, p, span{ behavior: url('img/iepngfix.htc') }






/******************
*******************
Typography    ****/

h1{ 
 padding:24px 0 0 0;
 margin: 0 0 14px 0; 
 text-align:center;
}

h2{
 font-size:2.5em;
 line-height:1em;
 letter-spacing:-.5px;
 font-weight:bold;
 margin: 0 0 12px 0;
}

#services h2#connect{ padding-top:20px;}

h3{ 
 font-size:1.7em;
 font-weight:normal;
 color:#999;
 padding:0px 0 0;
 line-height:1em;
}

#process h3{ margin:0 0 5px 0;}

h3 span{
 margin:0 0 0 16px;
 position:relative;
 top:-6px; 
}

a{ text-decoration:none;}

a img{ border:0;}

#content p{
 font-size:1.8em;
 line-height:1.3em;
 text-align:left;
 margin: 0 0 22px 0;
 padding:0;
 overflow: visible; /* Fixes IE6 em inside floated container exploded width bug */
 height:1%;         /* Fixes IE6 em inside floated container exploded width bug */
}

#content p.smallerp{ font-size:1.7em;}

#content p.sub-heading{ 
 font-size:2em; 
 font-weight:bold;
 border-bottom:1px solid #ccc; 
 color:#fff; 
 padding:0 0 25px 0;
}

#hire-me-page #content p.sub-heading{ 
 border:0;
 padding:0;
 font-size:2.5em;
} 

#content p.sub-heading span{ color:#d1ae6e; font-weight:bold; }

#content p.no-margin{margin:0;}
#content p.align-left{text-align:left;}

#content p.testimonail-start{ margin:0 0 10px 0;}

#services #content p.sub-heading{ border:0; padding-bottom:0;font-size:1.9em;}

#content p a{ 
 border-bottom:1px dotted;
 color:#ccc; 
}

#content p a:hover, #content p span{ color:#fff;} 








/******************
*******************
Main layer styles    ****/

#wrapper{
 position:relative;
 width:972px;
 left:50%;
 margin:0 auto;
 margin-left:-502px;
 padding:0;
}

#masthead{
 height:114px;
 z-index:100;
}

#logo{
 position:absolute;
 top:43px;
 left:200px;
 z-index:100;
}

#hire-me{
 width:184px;
 height:54px;
 background:url('../img/hire-me.gif') no-repeat 0 0;
 position:absolute;
 top:0; 
 right:0;
 z-index:100;
} 

#hire-me span{ display:none;}

#hire-me:hover{ background-position:0 -146px;}




/******************
*******************
Navigation    ****/

#navigation{
 width:972px;
 height:167px;
 position:absolute;
 top:0;
 z-index:50;
}

#navigation img{float:left;}

#navigation ul{
 height:49px;
 width:784px;
 padding:7px 0 0 1px;
 background:url('../img/navigation-bg.png') repeat-x 0 0;
 float:left;
 margin: 83px 0 0 0;
 list-style:none;
} 

#navigation ul li{
 float:left;
 display:inline;
}

#navigation ul li a{ height:27px; float:left; display:block;}
#navigation ul li a span{ display:none;}

#navigation ul li.homea a{ width:75px; background:url('../img/nav/home.png') no-repeat 0 -200px; }
#navigation ul li.abouta a{ width:84px; background:url('../img/nav/about.png') no-repeat 0 -200px; }
#navigation ul li.servicesa a{ width:97px; background:url('../img/nav/services.png') no-repeat 0 -200px; }
#navigation ul li.portfolioa a{ width:101px; background:url('../img/nav/portfolio.png') no-repeat 0 -200px; }
#navigation ul li.processa a{ width:101px; background:url('../img/nav/process.png') no-repeat 0 -200px; }
#navigation ul li.clientsa a{ width:162px; background:url('../img/nav/clients.png') no-repeat 0 -200px; }
#navigation ul li.contacta a{ width:97px; background:url('../img/nav/contact.png') no-repeat 0 -200px; }
#navigation ul li.bloga a{ width:62px; background:url('../img/nav/blog.png') no-repeat 0 -200px; }

#navigation ul li a:hover{ background-position: 0 0;}








/******************
*******************
Main content divs */

#content{
 width:998px;
 padding:25px 0 0 0;
}

#home #content{ padding:0;}

#left-column{
 width:430px;
 padding: 0 28px 0 28px;
 float:left;
 display:inline;
}

#contact #left-column, #hire-me-page #left-column{ width:494px; float:right;margin:0;padding-left:0;}

#right-column{
 padding:0 0 0 11px;
 float:left;
 width:475px;
}

#contact #right-column, #hire-me-page #right-column{
 width:437px;
 padding:0;
}

#right-left-column{
	width:220px;
	margin:15px 0 0 0;
	float:left;
}

#right-right-column{
	width:221px;
	margin:15px 0 0 33px;
	float:left;
	display:inline;
}

#right-left-column h2,#right-right-column h2{ padding:5px 0 0 ; line-height:1em;}

blockquote{
 width:221px;
 padding: 0 0 48px 0;
 background: url('../img/quote-bottom.gif') no-repeat bottom left;
}

blockquote.wide-quote{
 width:475px;
 margin:0 0 20px 0;
 background: url('../img/quote-bottom-wide.gif') no-repeat bottom left;
}

#content blockquote p{
 margin:0;
 color:#330000;
 line-height:.5em;
 text-align:left;
}

#content blockquote p.quote{
 padding:0 15px 15px 15px;
 line-height:1.05em;
 font-size:1.7em;
 letter-spacing:-1px;
 background: #cea96c url('../img/close-quote.gif') no-repeat bottom right;
}

#content blockquote.wide-quote p.quote{padding:10px 30px 30px 30px; font-size:1.8em; letter-spacing:normal;}

#content p.quoter{
 font-size:1.7em;
 color:#cea96c;
 text-align:left;
}

#what-clients-say #content p.quoter{ font-style:italic;}

.quote-right{
 width:221px;
 float:right;
 position:relative;
 margin:25px 0 0 35px;
}

#social-sites img{ margin:8px 3px 4px 0;} 










/******************
*******************
Footer styles */

#footerwrapper{
 width:100%;
 height:246px;
 background:url('../img/footer-bg.png') repeat-x top left;
 clear:both;
}

#footer{
 position:relative;
 width:1050px;
 left:50%;
 margin:0 auto;
 margin-left:-502px;
 padding:31px 0 0;
 color:#d8d1c5;
}

#footer a{
 color:#d8d1c5;
 border-bottom:1px dotted;
}

#footer a:hover{ color:#fff;}

#footer-right{
 width:300px;
 height:215px;
 float:right;
 behavior:none;
 position:relative;
}

#footer-right p{
 width:218px;
 height:215px;
 font-size:1.7em;
 color:#d4cfc4;
 background:url('../img/freelance-show.png') no-repeat top left;
}

#footer-right p a{
 width:175px;
 height:110px;
 padding:105px 125px 0 0;
 display:block;
 z-index:300;
}

#footer-right #tshirt{
 position:absolute;
 bottom:0;
 right:0;
 width:166px;
 height:118px;
}

#footer-right #tshirt a{
 width:166px;
 height:118px;
 display:block;
}

#home #footer-right #tshirt{ background: url('../img/tshirts/home.png') no-repeat bottom right;}
#about #footer-right #tshirt{ background: url('../img/tshirts/about.png') no-repeat bottom right;}
#services #footer-right #tshirt{ background: url('../img/tshirts/services.png') no-repeat bottom right;}
#portfolio #footer-right #tshirt{ background: url('../img/tshirts/portfolio.png') no-repeat bottom right;}
#process #footer-right #tshirt{ background: url('../img/tshirts/process.png') no-repeat bottom right;}
#what-clients-say #footer-right #tshirt{ background: url('../img/tshirts/clients.png') no-repeat bottom right;}
#contact #footer-right #tshirt{ background: url('../img/tshirts/contact.png') no-repeat bottom right;}
#hire-me-page #footer-right #tshirt{ background: url('../img/tshirts/hire-me.png') no-repeat bottom right;}

#footer-left{
 width:733px;
 float:left;
 background:url('../img/footer-left-bg.gif') no-repeat top right;
}

#footer-left h2{ padding:0 0 0 28px; margin-bottom:0;}

#footer-left #signup{
 font-size:1.8em;
 line-height:1.1em;
 width:307px;
 padding: 0 95px 5px 28px;
 background:url('../img/footer-arrow.gif') no-repeat right 10px;
}

#signup-form{
 width:255px;
 height:88px;
 padding:6px 0 0 0;
 position:absolute;
 top:64px; 
 left:458px;
}

#signup-form label{
 width:49px;
 padding: 1px 0 0 4px;
 font-size:1.4em;
 float:left;
 font-weight:bold;
}

#signup-form input{
 width:170px;
 float:left;
 margin:0 0 11px 0;
}

#signup-form input.button { width:auto;}

p#kickstart{
 width:634px;
 height:61px;
 padding: 70px 0 0 92px;
 font-size:1.5em;
 background:url('../img/kickstart.png') no-repeat top left;
 margin:0;
}

p#copyright{
 position:absolute;
 top:212px;
 left:236px;
 font-size:1.1em;
}

p#copyright span{
 padding:0 0 0 21px;
 margin:0 0 0 10px;
 background:url('../img/checkmark.png') no-repeat top left;
}












/******************
*******************
Home page ********/

#home-slider{
 height:407px;
 width:927px;
 border:9px solid #6A1010;
 overflow: hidden;
 margin:0 auto;
}

#home-slider ul{ 
 list-style:none;
 height:407px;
}

#home-slider ul li{  float:left;} 

#portfolio-thumbs{height:100%; position:relative;}

#portfolio-thumbs div{
 position:relative;
 margin:0 0 15px 0; 
 overflow:hidden;
 height:191px;
 width:219px;
}

#portfolio-thumbs div img.enlarge{
 position:absolute;
 bottom:0;
 right:0;
}













/******************
*******************
About page ********/


#about-photo{ margin:0 0 22px 0;}
 
ul#notable{
 font-family:verdana, arial, heletica, sans-serif;
 color:#e2c68b;
 font-size:1.4em;
 margin: 0 0 58px 12px;
}

ul#notable li{
 margin: 0 0 18px 0;
}











/******************
*******************
Services page ********/

#service-slider{ 
 margin:0 0 22px 0;
 height:349px;
 width:475px;
 overflow: hidden;
}

#service-slider ul{ 
 list-style:none;
 height:349px;
 width:475px;
}

#service-slider ul li{  float:left;} 












/******************
*******************
Portfolio page ********/

.portfolio-section{
 padding:10px 0 0 0;
 margin:0 27px 0 28px;
 border-top:1px solid #666;
 position:relative;
 clear:left;
}

.portfolio-content{ margin:0 0 0 20px; display:inline;}

.portfolio-content ul{list-style:none;}

.portfolio-content ul li{
 width:166px;
 float:left;
 display:inline;
 margin: 10px 0 10px 11px;
 font-size:.6em;
 font-family:verdana, arial, heletica, sans-serif;
}

.portfolio-content ul li img{ margin:0 0 5px 0;}

.portfolio-section img.prev-arrow{
 position:absolute;
 top:110px;
 left:0;
}

#content .portfolio-content p{
 text-align:left;
 line-height:1.2em;
}













/******************
*******************
Contact/Hire me pages */

#contact-form{ 
 width:437px;
 padding:0 0 0 10px;
 height:1550px;
 background:#D1AE6E;
}

#hire-form{ 
 width:437px;
 padding:0 0 0 10px;
 height:2010px;
 background:#D1AE6E;
 float:left;
 color:#fff;
}

#hire-form label, #hire-form em, #pnlViewForm  span{ color:#fff;} 

#icebrrg{position:absolute;width:100%;height:100%;}

iframe{ 
 width:100%;
 height:100%;
 border:none;
 background:none; 
}














/******************
*******************
Misc common styles */

.center{ text-align:center;}

div.hr{
 width:100%;
 height:1px;
 font-size:1px;
 line-height:1px;
 border-top:1px solid #ccc;
 margin:-8px 0 18px 0;
 clear:both;
}

#what-clients-say div.hr{ border-color:#666;}