/* CSS Document */

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

* html .clearfix {height: 1%;}  
* { margin: 0; padding: 0; }

html { height:100%; }

body {font-family: Century Gothic, Futura, Arial, sans-serif;
	height:100%;
	color: #cccccc;
	margin: 0px;
	padding: 0px;}

a { color: #cdffff;
	text-decoration: none;}

.a-fix {position: relative;
	clear: left;
	float: left;
	visibility: hidden;}

h1, h2, h3, h4, h5 {font-family: Century Gothic, Futura, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -.05em;
	margin: 0;
	padding: 0;
	line-height: 1em;}

h1 {text-align: center;
	font-size: 65px;
	padding: 20px 0 20px 0;
	margin: 0 20px 0 20px;}

h2 {font-size: 42px;
	display: inline;}

h3 {font-size: 1.4em;
	vertical-align: middle;
	text-align: middle;}

h4 {color: #660000;
	font-size: 16px;
	margin: 20px 0 20px 0;
	display: inline;}

h5 {font-size: 20px;}

p {margin-bottom: 20px; line-height: 1.4em; letter-spacing:0.05ex;}

#crswap {
	background-image: url(hd_ch_on.jpg);    
	width: 208px;                    
	height: 22px;                   
}

#htlswap {
	background-image: url(hd_htl_on.jpg);    
	width: 186px;                    
	height: 22px;                 
}

#rtlswap {
	background-image: url(hd_rtl_on.jpg);    
	width: 229px;                    
	height: 22px;                 
}

#main_infoswap {
	background-image: url(main_info_on.jpg);  
	width: 34px;                  
	height: 22px;                   
}

#main_workswap {
	background-image: url(main_work_on.jpg);   
	width: 41px;                   
	height: 22px;                   
}

#main_contactswap {
	background-image: url(main_contact_on.jpg);    
	width: 65px;                    
	height: 22px;                  
}

#brandingswap {
	background-image: url(work/hd_brandg_on.jpg);    
	width: 119px;                    
	height: 22px;                  
}
#prswap {
	background-image: url(work/hd_pr_on.jpg);    
	width: 198px;                    
	height: 22px;                  
}
#designswap {
	background-image: url(work/hd_design_on.jpg);    
	width: 93px;                    
	height: 22px;                  
}
#infoswap {
	background-image: url(bg_info_on.jpg);    
	width: 34px;                   
	height: 22px;                  
}
#workswap {
	background-image: url(bg_work_on.jpg);   
	width: 41px;                   
	height: 22px;                   
}
#contactswap {
	background-image: url(bg_contact_on.jpg);    
	width: 65px;                    
	height: 22px;                  
}
#logoswap {
	background-image: url(bg_logo_on.jpg);   
	width: 103px;              
	height: 28px;                
}
#s_infoswap {
	background-image: url(s_info_on.jpg);    
	width: 34px;                  
	height: 22px;                 
}
#s_workswap {
	background-image: url(s_work_on.jpg);    
	width: 41px;               
	height: 22px;                  
}
#s_contactswap {
	background-image: url(s_contact_on.jpg);    
	width: 65px;                   
	height: 22px;                   
}
#s_logoswap {
	background-image: url(s_logo_on.jpg);    
	width: 103px;                   
	height: 28px;                  
}
#backswap {
	background-image: url(back3_on.jpg);    
	width: 34px;                   
	height: 22px;                  
}
#prevswap {
	background-image: url(prev_on.jpg);    
	width: 33px;                  
	height: 22px;                 
}
#nextswap {
	background-image: url(next_on.jpg);   
	width: 33px;               
	height: 22px;                
}

.rollover { display: block; } 
.rollover img { width: 100%; height: 100%; border: 0; } 
.rollover:hover { visibility: visible; /* for IE */ } 
.rollover:hover img { visibility: hidden; } 

#Mast {position:relative;
	width:1020px;
	margin:0; padding:0;}	

#LeftMast {float:left;
	width:540px;
	*width:570px;
	height: 60px;
	*height:100px;
	padding: 40px 0 0 30px;}

#RightMast {float:left;
	width: 420px;
	height: 100px;}

.Mast {position:relative;
	float: left;
	width:1020px;
	margin:-15px 0 0 0; padding:0;}	

.LeftMast {float:left;
	width:540px;
	*width:570px;
	height: 60px;
	*height:100px;
	padding: 40px 0 0 30px;}

.RightMast {float:left;
	width: 420px;
	height: 100px;}

.navi {position: relative; 
	top:46px;
	*margin-top:46px;}
		
.info {float:left;	
	left: 0;
	width:100px;}

.work {float:left;
	width:104px;}

.contact {float:left;
	width:204px;}	

#Container {clear:left;
	position:relative;
	*position: inherit;
	width:1020px;
	margin:0;
	padding:0;}

#LeftContainer {
	float:left;
	width: 570px;
	margin: 0;
	padding: 0;}
	
#RightContainer {
	float: left;
	width: 420px;
	margin: 0;
	padding:0;}

#RContent {
	float:left;
	width: 400px;
	margin:0; padding:20px 0 0 0;
	font-family: Century Gothic, Futura, Arial, sans-serif;
	font-size: 1.1em;
	line-height: 1.2em;}

#RContent strong {color: #fff}

#RContent p {text-align: left; font-size: 12px; color:#fff;}

.contact {font-size:0.7em; line-height: 1.3em;}

#RContent h1 {margin:0; text-align: left; font-size:1.4em; margin-bottom: 10px; letter-spacing: 0.12em;}

#RContent h2 {font-size:1.2em; margin-bottom: 10px;}

.Content {
	float:left;
	position: relative;
	left:30px;
	width:960px; 
	margin:0;
	margin-bottom: 450px;
	padding:0;}

.bgContentBox {
	float: left;
	position: relative;
	width: 960px;
	margin:20px 0 0 30px;
	*margin: 20px 0 0 15px;
	*padding:0;}

.BrandingMenu {clear:left;
	position: relative;
	padding:48px 0 0 0;}	
	
.PrMenu {clear:left;
	position: relative;
	padding:25px 0 0 0;}

.DesignMenu	{clear:left;
	position: relative;
	padding:24px 0 0 0;}
	
#design_div {position: absolute; width:130px;padding-top:10px; *margin-left:-10px;}

#design_div ul {list-style: none; 
	margin-left: 30px;
	 *margin:0; 	 
	 padding:0; 
	 padding-top:2px; 
	 border:0; 
	 border-left:2px solid #0099cc; 
	 }

#design_div li {text-transform: uppercase;
	letter-spacing: 2px; 
	*letter-spacing: 0.14em;
	font-size: 0.68em; 
	*font-size: 0.6em; 
	margin:0;
	line-height: 1.9em;
	*line-height: 0.9em;
	font-family: Century Gothic, Futura, Arial, sans-serif;	
	border:none;}

#design_div li a {display: block;
	padding:0px 5px 0px 10px;	
	color:#fff;
	text-decoration: none;}

#design_div li a:hover {color:#c3f6f9}

.bottom {clear:left; 
	position: absolute;
	top: 580px; left:30px;
	color:#f1f1f1;
	font-family: Century Gothic, Futura, Arial, sans-serif;
	font-size: 0.6em;
	padding: 0 0 30px 0;
	margin:0;
	width:200px;}

.ContentBox {
	float: left;
	position: relative;
	width: 930px;
	margin:24px 0 0 30px;
	*margin-left: 15px;}

.work-header {
	clear: left;
	position:relative;
	margin-bottom: 30px;
	color:#00769e;
	text-transform: uppercase;
	}

.clearfix { clear: left;}

img.bottom {
	vertical-align: middle;}

.work-spacer {float:left;
	clear: left;
	position: relative;
	height:1200px;
	width:40px;
	*margin-top:10px;}

.last-spacer {float:left;
	clear: left;
	position: relative;
	height:440px;
	width:40px;
	*margin-top:10px;}

.work-back {*position: absolute;
	*top: 300px;
	*left: 0;
	*height:20px;
	*background: #222;}

.work-iefix {position:absolute: overflow:hidden; background: #222; height: 30px;}

.back {float:left;
	position:relative;
	margin-bottom:20px;}

#projects {width:794px;
	position:static;
	display:block;
	float: none;
	clear:none;
	margin:0; padding:0;}

#projects p {font-family: Century Gothic, Futura, Arial, sans-serif; font-size: 0.8em; color: #7c868f; line-height: 1.9em; letter-spacing:0.15ex; margin-bottom: 16px;}

#projects b {font-weight: bolder; color: #a5b1bd;}

ol {list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	position:static;
	display:block;}

#projects ol {*margin:-30px;
	*padding:0;}

#projects li {position: relative;
	float: left;
	height: 163px;
	margin: 20px 0 17px 30px;
	vertical-align: bottom;
	overflow: visible;
	line-height: 1.22em;
	text-align: center;}

.project-image {height:150px;
	position: relative;
	line-height: 1.22em;
	text-align: center;}

.project-image img {bottom:0; left:0; position:absolute; text-align: center; border:0pt none;}

.project-image a {
	outline-color:invert;
	outline-style:none;
	outline-width:medium;}

.project-name {margin: 2px 11px 0 14px;
	position: relative;
	left:-10%;
	*position: absolute;
	text-align: center;
	font-size: 0.8em;
	padding-top: 4px;
	color: #cdffff;
	background: transparent;}

.work-bottom { clear:left; float:left; width:460px; margin:15px 0 0 0; *margin-top:30px;}

#showcase {position: relative; width: 990px; margin:0; padding:0; left:30px; top:30px;}

#photo {width:990px; margin:0; padding:0; }

#photo li {position: relative;
	float: left;
	width: 135px;
	height: 80px;
	margin: 0 0 30px 0;
	vertical-align: bottom;
	overflow: visible;
	line-height: 1.22em;}

#photo img {bottom:0; left:0; position:absolute; text-align: center; border:0pt none;}

.photo-bottom {clear:left; float:left; width:460px; margin:15px 0 0 0; *margin-top:30px;}

#showcase-img {float:left;
	width:360px;
	margin:0; padding:0 30px 0 0;}
	
#showcase-right {float:left;
	width:460px;
	margin:0 80px 0 0; padding:0 0 0 0;}
	
#showcase-header {}

#showcase-right li {position: relative;
	float: left;
	width: 100px;
	height: 65px;
	margin: 20px 0 20px 0;
	*margin-right:30px;
	vertical-align: bottom;
	overflow: visible;
	line-height: 1.22em;
	text-align: center;}

#showcase-right li img {bottom:0; left:0; position:absolute; text-align: center; border:0pt none;}

.showcase-spacer {position: relative;
	float: left;
	width: 40px;}

.showcase-text {position: relative; clear: left; font-size:0.8em; line-height: 1.4em;text-align: justify; margin:30px 0 0 0; *margin-top: 10px; padding:20px 0 0 0; *padding:0; }

.showcase-bottom { clear:left; float:left; width:460px; margin:30px 0 0 0;}

#back2 {float:left;	
	left: 0;
	width:96px;}

#prev {float:left;
	width:100px;}

#next {float:left;
	width:204px;}