@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------------------------------------------------------------------------------
	1) STYLE SHEET FOR WWW.IWOODWEBDESIGN 2010 - AUTHOR: JAMES GUNDRY
/* --------------------------------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------------------------------------
	1) RESETS & UNIVERSAL CLASSES
/* --------------------------------------------------------------------------------------------------------------------------------- */
	body {font-size:62.5%; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0;background-color: #000;}
	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0;}
	fieldset, img, abbr, acronym { border:0 none;}
	table { border-collapse:separate; border-spacing:0;}
	:focus { outline:0;}
	address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal;}
	caption, th { text-align:left;}
	h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;}
	blockquote:before, blockquote:after, q:before, q:after { content:"";}
	ul, li {list-style: none;}
	
	
	.nomargin { margin:0 !important;}
	.fleft { float:left;}
	.fright { float:right;}
	.fright20 {float: right; margin-left: 20px;}
	.clear { clear:both; height:0; line-height:0; visibility:hidden;}
	.clearfix:after, .subheading:after, dl:after, .prodlist dd:after, .selectpop dd:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
	#ie6 .clearfix, #ie6 dl, #ie6 .subheading, #ie6 .prodlist dd, #ie6 .selectpop dd, #ie7 .clearfix, #ie7 dl, #ie7 .subheading, #ie7 .prodlist dd, #ie7 .selectpop dd { display:inline-block;}
	
	body {
	}
	
	
	p.no_margin {margin: 0; padding: 0;}
	

	



	
/* ---------------------------------------------------------------------------------------------------------------------------------
	2) TYPOGRAPHY
/* --------------------------------------------------------------------------------------------------------------------------------- */

	html {}
	
	p {}
	
	a {}
	
	a.arrow_link 
	{
	font-size:12px;
	color: #ff6600;
	text-transform: uppercase;
	font-weight: bold;
	padding-left: 7px;
	background-image: url(../images/icons/right_arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
	text-decoration: none;
	position: absolute;
	top: 195px;
}
	
	a.arrow_link:hover {color: #333;}
	
	.col1_link {margin-top: 10px;}
	
	
	/*HEADINGS*/
	#top_holder h1 {width: 195px; height: 26px; float: left; margin-top: 85px; margin-left: 3px;}
	
	h1 {}
	h2 {}
	h3 {font-size: 1.8em; border-bottom: 1px dotted #666; padding-bottom: 3px; margin-bottom: 10px; color: #333;}
	h4 {}
	h5 {}
	h6 {}


	/*TEXT FORMATTING CLASSES*/
	.orange {color: #ff6600;}
	.small {font-size: 11px;}
	
	.size14 {font-size: 1.4em; line-height: 22px;}
	
	
	
	
ul.tick {margin: 0; padding: 0; border-top: 1px dotted #CCC; padding-top: 10px; margin-bottom: 21px;}	
.servicespage ul.tick {border: 0; padding-top: 0;}
ul.tick li {margin: 0; padding: 0; font-size: 1.2em;line-height: 20px; font-weight: bold; padding-left: 15px; background-image: url(../images/icons/tick.png); background-repeat: no-repeat; background-position: 0 4px;}

ul.portfolio_list {border-top: 1px dotted #CCC; font-size: 1.2em; margin-bottom: 10px;}

ul.portfolio_list {border-top: 1px dotted #CCC; font-size: 1.2em; margin-bottom: 10px;}
ul.portfolio_list li {color: #333; font-weight: bold; height: 20px; padding-top: 7px;border-bottom: 1px dotted #CCC;}
ul.portfolio_list li.list1 {background-image:url(../images/grads/portfolio_list_bg.jpg); background-position: 0 0;}
ul.portfolio_list li.list2 {background-image:url(../images/grads/portfolio_list_bg.jpg); background-position: 0 -27px;}
ul.portfolio_list li.list3 {background-image:url(../images/grads/portfolio_list_bg.jpg); background-position: 0 -54px;}
ul.portfolio_list li.list4 {background-image:url(../images/grads/portfolio_list_bg.jpg); background-position: 0 -81px;}
ul.portfolio_list li.list5 {background-image:url(../images/grads/portfolio_list_bg.jpg); background-position: 0 -108px;}

ul.portfolio_list li:hover {background-position: 0 -136px;}
ul.portfolio_list li a {display:block; color: #333; text-decoration: none; height: 20px;}
ul.portfolio_list li a:hover {color: #000}



/* ---------------------------------------------------------------------------------------------------------------------------------
	3) PAGE LAYOUT
/* --------------------------------------------------------------------------------------------------------------------------------- */

#top_bg {background-image:url(../images/grads/clouds.jpg); height: 499px; width: 100%; background-position: center;}
#top_bg_portfolio {background-image:url(../images/grads/clouds_full.jpg); height: 950px; width: 100%; background-position: center;}
#top_bg_services {background-image:url(../images/grads/clouds_full2.jpg); height: auto; width: 100%; background-position: top center;background-color: #DAD8D9; background-repeat: repeat-x;}

#mid1_bg {height: 231px; background-image:url(../images/grads/mid1_bg.jpg); width: 100%;}
#mid2_bg {height: 287px; background-image:url(../images/grads/mid2_bg.jpg); width: 100%; background-position: center;}
#footer_bg {height: 164px; background-image:url(../images/grads/footer_grad.jpg); width: 100%;}

#twitter {position: absolute; left: 118px; top: 40px;width: 550px;}
#twitter div {display: inline;}

#contact_top {
position: absolute; 
right: 10px; 
top: 40px;
width: 300px; 
text-align: right; 
text-transform: uppercase;
color: #333;
font-weight: bold;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
letter-spacing: -0.05pt; }



#top_bar {height: 137px; background-image:url(../images/top_bar.png);background-position: bottom;  background-repeat: repeat-x; width: 100%;}
#top_holder {width: 960px; height: 127px; margin: 0 auto; position: relative;}

#mid1_holder {width: 960px; height: 231px; margin: 0 auto; position: relative;}
#mid2_holder {width: 960px; height: 287px; margin: 0 auto; position: relative;}
#footer_holder {width: 960px; height: 164px; margin: 0 auto; position: relative;}


#logo {height: 110px; width: 111px; background-image:url(../images/iwood_logo.png); margin-left: 4px; margin-top: 39px; float:left;}
#header_container {width: 960px; height: 363px; margin: 0 auto; position: relative;}
#portfolio_container {width: 960px; margin: 0 auto; position: relative;}
#screen {float: right; width: 430px; height: 391px; background-image:url(../images/screen.png); position: absolute; right: 0; top: -55px;}

#header_text_holder {width: 510px; height: 330px; margin-left: 10px; margin-top: 56px; line-height: 22px; position: relative; }

.portfoliopage h2, .servicespage h2, .contactpage h2 {margin-top: 56px; margin-left: 10px;}

#header_text_holder p.intro_text {font-size: 1.6em; color: #333;}
#header_text_holder p.quote {font-size: 1.4em; color: #333; margin-top: 14px;}

#top_orange_line {height: 3px; background-color: #ff6600; width: 100%;}
#mid_orange_line {height: 3px; background-color: #ff9933; width: 100%;}
#bottom_grey_line {height: 3px; background-color: #999999; width: 100%;}

.home_title {margin-bottom: 37px;}

#what_i_do {
	float: left;
	margin-top: -55px;
	width:111px;
	height:31px;
	background-image: url(../images/tabs/what_i_do.png);
}
#more_info {position: absolute; top: 200px; left: 5px;width:111px; height:31px; background-image: url(../images/tabs/more_info.png);}
#finally {position: absolute; top: 255px; left: 5px;width:111px; height:31px; background-image: url(../images/tabs/finally.png);}

#photo_holder {
	position: absolute;
	height: 100px;
	width: 80px;
	left: 252px;
	top: -57px;
}



#col1, .col1 {width: 340px; height: 170px;  float: left; margin-left: 10px;}
.col2 {width: 280px; height: 170px;  float: left; padding-left: 10px; margin-left: 10px;}
.col3  {width: 340px; height: 351px; margin-top: -78px; float: left; margin-left: 10px;}

#col1 a, .col1 a, .col2 a, .col3 a {color: #ff6600; font-weight: bold; text-decoration: none;}
#col1 a:hover, .col1 a:hover, .col2 a:hover, .col3 a:hover {color: #333; font-weight: bold; text-decoration: underline;}


.servicespage .col1, .contactpage .col1 {height: 400px;width: 340px; margin-top: 31px; float: left; margin-left: 10px; text-align: left;}
.servicespage .col2 {height: 400px;width: 280px; margin-top: 31px; float: left; margin-left: 10px; text-align: left;}

.servicespage .col1 p, .servicespage .col2 p, .contactpage .colWide p, .col3 p {font-size:1.2em; line-height: 20px; border: 0; color: #333; padding-top: 0; margin-bottom: 10px;} 

#mid_col1 {width: 340px; height: 170px; margin-top: 37px; float: left; margin-left: 10px; position: relative;}
.mid_col2 {width: 280px; height: 170px; margin-top: 37px; float: left; padding-left: 10px; margin-left: 10px;position: relative;}

#col1 p, .col2 p, #mid_col1 p, .mid_col2 p {font-size: 1.2em; line-height: 20px; color: #666; padding-top: 10px; border-top: 1px dotted #CCC; text-align: justify; margin-bottom: 5px;}
.servicespage .col1 p, .servicespage .col2 p {text-align: left;} 
.contactpage .col1 p, .contactpage .colWide p {text-align: left;} 
.contactpage .colWide {height: 400px;width: 450px; margin-top: 31px; float: left; margin-left: 10px; text-align: left;}

#col1 h2, .col1 h2, .col2 h2 {height: 20px; margin-top: 22px; padding-bottom: 5px;}
#col1 .icon {float: right; width: 50px; height: 40px; background-image:url(../images/icons/pencil.png);}
.col2 .icon1 {float: right; width: 47px; height: 40px; background-image:url(../images/icons/brush.png);}
.col2 .icon2 {float: right; width: 47px; height: 40px; background-image:url(../images/icons/blue_print.png);}
.mid_col2 .icon3 {float: right; width: 31px; height: 27px; background-image:url(../images/icons/pencil_small.png); margin-top: -10px;}

.footer_col {width: 190px; margin-top: 30px; margin-left: 10px; float: left; }
.footer_col h3 {font-size: 1.2em; font-weight: bold;text-transform: uppercase; color: #fff; margin-bottom: 10px; border: 0;}
.footer_col p {color: #fff; font-size: 1.1em; line-height: 18px;}

.footer_col a, #footer_right a {color: #ff6600; text-decoration: none;}
.footer_col a:hover, #footer_right a:hover {border-bottom: 1px dotted #ff6600;}

#footer_right {float: right; width: 197px; text-align: center; margin-top: 56px;}

#footer_right p {color: #fff; font-size: 11px; margin-top: 5px;}

.portfolio_box {float: left; width: 472px; height: 666px; background-image:url(../images/portfolio_box.png); background-position: bottom; background-repeat: no-repeat; margin-top: 5px; margin-left: 5px;}
.graphics_box {float: right; width: 472px; height: 666px; background-image:url(../images/portfolio_box.png); background-position: bottom; background-repeat: no-repeat; margin-top: 5px; margin-right: 5px;}


.portfolio_nav_web {width: 153px; height: 30px; float: right; margin-right: 16px; margin-top: 0px; margin-bottom: 10px;}
.portfolio_nav_web a {text-decoration: none;}

.portfolio_nav_web span {visibility: hidden;}



.back {height: 30px; width: 29px; Background-image: url(../images/nav/portfolio_nav.png); background-position: 0 3px; float: left; display: block; background-repeat: no-repeat; cursor: pointer;}
.back:hover {background-position: 0 -30px;}


.web_middle {height: 30px; width: 94px; Background-image: url(../images/nav/portfolio_nav.png); background-position: -29px 3px; float: left; display: block;  background-repeat: no-repeat}
.graphics_middle {height: 30px; width: 94px; Background-image: url(../images/nav/graphics_nav.png); background-position: -29px 3px; float: left; display: block;  background-repeat: no-repeat}

.next {height: 30px; width: 29px; Background-image: url(../images/nav/portfolio_nav.png); background-position: -123px 3px; float: left; display: block;  background-repeat: no-repeat;  cursor: pointer;}
.next:hover {background-position: -123px -30px;}


.panel_holder {}
.screen_holder {padding: 8px; width: 426px; height: 185px; background-image: url(../images/border_wide.gif); margin-bottom: 4px;}

.screen_holder h3 {font-family:Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #999; margin-top: 7px; width: 300px; float: left; margin-left: 5px; border: 0;}

.screen_holder .arrow_link {
	float: right; position: relative;top: 10px; margin-right: 5px;}
	
table {font-size: 1.2em; font-weight: bold;}
table tr td {height: 20px; padding: 5px;}

input .btn, .btn {border: 0; width: 103px; height: 33px; color:#FFF; background-image:url(../images/buttonBg.png); font-weight: bold; background-color: transparent; cursor: pointer;}
	

/* ---------------------------------------------------------------------------------------------------------------------------------
	3) NAVIGATION LAYOUT
/* --------------------------------------------------------------------------------------------------------------------------------- */


#nav ul, #nav li {list-style: none; margin: 0; padding: 0;}

#nav {height: 73px; float: right; margin-top: 58px; width: 291px;}

#nav a, #nav a .hover {height: 73px; background:url(../images/nav.jpg) 0 0; display: inline; float: left;}

#nav a.home {height: 73px; width: 61px; background-image:url(../images/nav.jpg); background-position:0 0;}
#nav .highlight a.home:hover, #nav a.home .hover {background-position: 0 -73px; width: 61px;}
.homepage #nav a.home {height: 73px; width: 61px; background-image:url(../images/nav.jpg); background-position:0 -73px;}


#nav a.portfolio {height: 73px; width: 75px; background-image:url(../images/nav.jpg); background-position:-60px 0;}
#nav .highlight a.portfolio:hover, #nav a.portfolio .hover {background-position: -60px -73px; width: 75px;}
.portfoliopage #nav a.portfolio {height: 73px; width: 75px; background-image:url(../images/nav.jpg); background-position:-60px -73px;}

#nav a.services {height: 73px; width: 80px; background-image:url(../images/nav.jpg); background-position:-134px 0;}
#nav .highlight a.services:hover, #nav a.services .hover {background-position: -134px -73px; width: 80px;}
.servicespage #nav a.services {background-position: -134px -73px; width: 80px;}

#nav a.contact {height: 73px; width: 75px; background-image:url(../images/nav.jpg); background-position:-213px 0;}
#nav .highlight a.contact:hover, #nav a.contact .hover {background-position: -213px -73px; width: 75px;}
.contactpage #nav a.contact {background-position: -213px -73px; width: 75px;}