/* Body
----------------------------------------------- */
body{
	background: #ccd3dc url("../imgs/bg.gif") top center no-repeat;
	font-family: Arial, Helvetica, sans-serif;
}



/* Structure
----------------------------------------------- */
*{
	margin: 0;
	padding: 0;
}

#container{
	width: 663px;
	margin: 26px auto 0 auto;
	position: relative;
	background-position: top left;
	background-repeat: no-repeat;
}

#header{
	position: relative;
	width: 663px;
	height: 209px;
	background-color: #fff;
}

#content{
	float: left;
	width: 663px;
	background: url("../imgs/bg-content.gif") bottom center no-repeat;
	padding-bottom: 26px;
	margin-bottom: 12px;
}

#left{
	float: left;
	width: 186px;
	min-height: 424px;
}

#right{
	float: left;
	width: 477px;
	min-height: 502px;
	height: auto;
	border-top: solid 3px #ccc;
	background-image: url("../imgs/bg-right_1.jpg");
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* for Internet Explorer */
/*\*/
* html #right {
	height: 502px;
}
/**/

.long{
	padding-bottom: 4em;
}

#footer{
	clear: both;
	width: 663px;
	height: 34px;
	background: url("../imgs/bg-footer.gif") top left no-repeat;
	margin-bottom: 14px;
}

#showcase{
	width: 417px;
}

#showcase #two,
#showcase #three,
#showcase #four{
	display: none;
}

#showcase,
#showcase div,
.graphic{
	float: left;
	clear: left;
}



/* Paragraphs and Headings
----------------------------------------------- */
#header h1{
	width: 663px;
	height: 170px;
	background-position: top left;
	background-repeat: no-repeat;
}

#header h1.homepage{ background-image: url("../imgs/bg-h1_homepage.jpg"); }
#header h1.services{ background-image: url("../imgs/bg-h1_services.jpg"); }
#header h1.company{ background-image: url("../imgs/bg-h1_company.jpg"); }
#header h1.downloads{ background-image: url("../imgs/bg-h1_downloads.jpg"); }
#header h1.contact{ background-image: url("../imgs/bg-h1_contact.jpg"); }

#right h1,
#right h2,
#right h3,
#right p{
	font-size: 11px;
	margin-right: 60px;
	margin-left: 32px;
}

#right h1{
	margin-top: 40px;
	margin-bottom: 25px;
}

#right h2{
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 40px;
}

#right p{
	color: #333;
	line-height: 1.4em;
	margin-bottom: 22px;
	text-align: justify;
}

#showcase div p{
	clear: left;
	width: 375px;
}

#footer p{
	color: #fff;
	font-size: 10px;
	margin-top: 10px;
}

#footer p#copy{
	float: left;
	display: inline;
	margin-left: 17px;
}

#footer p#copy span{
	margin-left: 10px;
}

#footer p#copy span#cdate{
	margin-left: 0;
}

#footer p#credit{
	float: right;
	display: inline;
	margin-right: 17px;
}

.graphic{
	display: inline;
	margin-bottom: 24px;
	margin-left: 32px;
	background:  url("../imgs/frame.gif") top left no-repeat;
	width: 417px;
	height: 237px;
}



/* Lists
----------------------------------------------- */
#header ul{
	float: right;
	display: inline;
	width: 477px;
	height: 33px;
	background: url("../imgs/bg-nav.gif") top left repeat-x;
	margin: 3px 3px 0 0;
}

#header li{
	list-style: none;
	font-size: 1px;
	float: left;
}

#header li ul {
	margin: 0;
	position: absolute;
	left: -999em;
}

#header li:hover ul,
#header li.sfhover ul {
	left: auto;
}

#header li #services{
	width: 240px;
}

#header li #company{
	width: 162px;
}

#casestudy,
#casestudy li,
.thumbs,
.thumbs li{
	float: left;
	display: inline;
	list-style-type: none;
}

#casestudy{
	margin: -10px 0 42px 32px;
}

#casestudy li{
	margin-right: 16px;
}

.thumbs{
	margin: 16px 0 18px 32px;
	width: 417px;
}

.thumbs li{
	width: 68px;
	height: 45px;
	margin-left: 19px;
	background: url("../imgs/frame_thumb.gif") top left no-repeat;
}

.thumbs li.first{
	margin-left: 0;
}

.normal{
	margin-right: 60px;
	margin-left: 32px;
}

.normal li{
	font-size: 11px;
	margin-bottom: 8px;
	margin-left: 32px;
	line-height: 1.4em;
	color: #333;
}



/* Links
----------------------------------------------- */
#header li a{
	display: block;
}

#footer a{
	color: #fff;
	text-decoration: none;
}

#casestudy a{
	display: block;
	background-color: #939272;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
	padding: 6px 10px;
}



/* Images
----------------------------------------------- */
img{
	border: 0;
}

#header h1 img{
	margin-top: 30px;
	margin-left: 41px;
}

#hot{
	position: absolute;
	top: 150px;
	left: 3px;
}

#left img{
	margin-left: 3px;
}

.thumbs li img{
	width: 64px;
	height: 41px;
	margin-top: 2px;
	margin-left: 2px;
	cursor: pointer;
}

.graphic img{
	width: 407px;
	height: 227px;
	margin-top: 5px;
	margin-left: 5px;
}
