/* CSS Document */

/*============================================================
  Created for: Claret
  Company: Creative Smile
  By: Sky Blue Studios
============================================================*/

/* Page body/font style */

body { 
	margin:0px;
	background-color:#535252;
	background-image:url(../images/bg.gif);
	background-repeat:repeat-x;
	color:#7b7b7b;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:12px;
}

/* nav styles */

.menu { position:relative; z-index:100; font-family:verdana, arial; float:left; margin-left:15px;}
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:100px;}
.menu li {float:left;position:relative;}
.menu li ul li { width:150px; }

.menu a, .menu a:link, .menu a:visited {
	display:block;
	height:32px;
	font-size:13px; text-decoration:none; color:#fff;
}

a.nav_home:link, a.nav_home:visited, a.nav_home:active {
	display:block; width:80px; height:32px; background-image:url(../images/nav_home.gif); }
a.nav_home:hover { background-position:0px -32px; }

a.nav_company:link, a.nav_company:visited, a.nav_company:active {
	display:block; width:97px; height:32px; background-image:url(../images/nav_company.gif); }
a.nav_company:hover { background-position:0px -32px; }

a.nav_news:link, a.nav_news:visited, a.nav_news:active {
	display:block; width:117px; height:32px; background-image:url(../images/nav_news.gif); }
a.nav_news:hover { background-position:0px -32px; }

a.nav_services:link, a.nav_services:visited, a.nav_services:active {
	display:block; width:118px; height:32px; background-image:url(../images/nav_services.gif); }
a.nav_services:hover { background-position:0px -32px; }

a.nav_projects:link, a.nav_projects:visited, a.nav_projects:active {
	display:block; width:141px; height:32px; background-image:url(../images/nav_projects.gif); }
a.nav_projects:hover { background-position:0px -32px; }

a.nav_careers:link, a.nav_careers:visited, a.nav_careers:active {
	display:block; width:81px; height:32px; background-image:url(../images/nav_careers.gif); }
a.nav_careers:hover { background-position:0px -32px; }

a.nav_contact:link, a.nav_contact:visited, a.nav_contact:active {
	display:block; width:81px; height:32px; background-image:url(../images/nav_contact.gif); }
a.nav_contact:hover { background-position:0px -32px; }


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:32px;left:0; width:100px; }
/* hack for IE5.5 */
* html .menu ul ul {top:31px;t\op:32px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; }

/* style the second level links */
.menu ul ul a, .menu ul ul a:link, .menu ul ul a:visited { font-size:11px; background:#df5454; border-top:0px; color:#ffffff; height:auto; line-height:1em; padding:5px 10px; font-family:Verdana, Arial, Helvetica, sans-serif; }
/* yet another hack for IE5.5 */


/* style the hover */
.menu a:hover, .menu ul ul a:hover{ }
.menu ul ul :hover > a {color:#fff; background:#ab3838;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }



/* Image Styles */

img { border:0px; }

/* Form Styles */

.RightSearchBoxForm { margin:0px; padding:0px; display:inline; }
.SearchBox { width:142px; height:15px; margin-right:7px; border:1px #c0c0c0 solid; float:left;  display:inline; }

div#NewsletterFormBox { margin-top:8px; }
.RightNewsletterForm { margin:0px; padding:0px; display:inline; }
.EmailBox { width:130px; height:15px; margin-right:7px; border:1px #ae3333 solid; float:left;  display:inline; }

.quickform { margin:0px; padding:0px; margin-top:-20px; }
.quickfinddropdown { border:3px #ffffff solid; padding:0px; width:174px; height:20px; margin-top:12px; }
select { padding:2px; font-size:10px; }

/* Div cells */

div#wrap {
	width:1011px;
	padding:0px 0px 6px 0px;
	margin:50px 0px 50px 0px;
	left:50%; margin-left: -505px;
	background-color:#FFFFFF;
	position:relative;
	float: left;
}

#wrapinner { width:999px; margin:6px 6px 0px 6px; }

div#header { width:999px; height:135px; background-image:url(../images/header.jpg); position:relative; float:left; }
div#headcont { width:999px; float:left; }
div#headLogo { top:33px; left:31px; position:absolute; float:left; }
div#headtext { top:84px; right:50px; position:absolute; float: right; }
div#HTLeft { padding-right:10px; border-right:1px #ffffff solid; float:left; }
div#HTMid { padding-left:10px; padding-right:10px; float:left; }
div#HTRight { padding-left:10px; border-left:1px #ffffff solid; float:left; }

div#nav { width:999px; height:32px; background:url(../images/navi_bg.gif); float:left; }
div#navcont { width:999px; float:left; }
div#rss { height:32px; float:right; margin:4px 65px 0px 0px; font-weight:bold; }

#container {
	width:999px; float:left;
	background-color:#f6f6f6;
	padding:0px;
}

#LeftContain {
	width:696px;
	margin:0px 0px 26px 15px;
	float:left;
}

.LeftHead { display:block; width:696px; height:40px; background:url(../images/shadow_left_top.png) no-repeat; float:left }
.LeftFoot { display:block; width:696px; height:40px; background:url(../images/shadow_left_foot.png) no-repeat; float:left; }
.LeftMid { width:696px; background: url(../images/shadow_left_left.png) repeat-y ; float:left }

div#LeftCorner { width:68px; height:48px; background-image:url(../images/body_corner.gif); background-repeat:no-repeat; 
				 background-position:top right; position:relative; top:-1px; right:-21px; z-index:2; float:right; }
				 
div#Left { width:676px; height:510px; margin:0px 0px 0px 20px; background-image:url(../images/bodybg.gif); float:left; display:inline; }
div#LeftB { width:656px; border:1px #686868 solid; margin:0px 0px 0px 20px; background-color:#FFFFFF; float:left; display:inline; }


#RightContain {
	width:280px;
	margin:0px 0px 0px -20px;
	float:left;  z-index:3; position:relative;
}

.RightHead { display:block; width:280px; height:40px; background:url(../images/shadow_right_top.png) no-repeat; float:left }
.RightFoot { display:block; width:280px; height:40px; background:url(../images/shadow_right_foot.png) no-repeat; float:left }

div#rightwrap { width:280px; float:left; margin:0px 0px 0px 0px; background:url(../images/shadow_right_mid.png) repeat-y; }

div#Right { width:240px; height:374px; background-color:#ffffff; border:1px #686868 solid; margin:0px 0px 0px 0px; }
div#Right2 { width:240px; height:118px; background-color:#ffffff; border:1px #686868 solid; margin-top:14px; }
div#RightB { width:240px; background-color:#ffffff; border:1px #686868 solid; margin-top:48px; float:left; margin:0px 0px 0px 18px; }


div#LeftCont { margin:16px; margin-top:12px; }
.LeftContText { margin:10px; margin-top:20px; }
div#RightCont { margin:18px; margin-top:14px; }

#LeftBoxL ul { width:50%; padding:0;margin:0;list-style-type:none; float:left; }
#LeftBoxL ul li { margin:4px 4px 0px 4px; }
#LeftBoxL a:link, #LeftBoxL a:active, #LeftBoxL a:visited { font-size:10px; font-family:Century Gothic, Verdana, Arial; color:#CC6666; text-decoration:none; line-height:12px; }
#LeftBoxL a:hover { text-decoration:underline; }

div#LeftPic { width:626px; height:358px; margin:14px; margin-bottom:0px; float:left; display:inline; background-image:url(../images/Main_image_1.jpg); }
div#LeftTitle { margin:20px; float:right; position:relative; top:285px; z-index:9; }

div#LeftBoxL { width:238px; height:110px; float:left; margin-left:15px; margin-top:8px; border-right:1px #b4c4cd solid; display:inline; }
div#LeftBoxM { width:193px; height:110px; float:left; margin:0px; margin-top:12px; border:0px; display:inline; }
div#LeftBoxR { width:193px; height:110px; float:left; margin-right:15px; margin-top:12px; border-left:1px #b4c4cd solid; display:inline; }

.BoxLink { margin-top:10px; float:right; display:inline; }

.LeftBoxCont { margin:16px; margin-top:14px; float:left; display:inline; }
.LeftBoxTitle { width:171px; float:left; display:inline; }
.LeftBoxText { width:171px; height:40px; margin-top:8px; float:left; display:inline; }
.LeftBoxLink { margin-right:10px; float:right; display:inline; }

div#RightQuickLink { width:210px; height:120px; margin:20px; margin-bottom:0px; float:left; display:inline; background-image:url(../images/quickfind_bg.gif); background-repeat:no-repeat; }
div#QuickLinkCont { margin:14px; margin-top:10px; float:left; display:inline; }
div#QuickLinkTBox { width:180px; margin-top:18px; padding-top:10px; }

div#RightNewsBox { width:230px; height:108px; margin:5px; margin-bottom:0px; float:left; background-image:url(../images/newsletter_bg.gif); background-repeat:no-repeat; padding:30px 0px 0px 19px; overflow:hidden; }

div#RightCareerBox { width:230px; height:108px; margin:5px; margin-bottom:0px; float:left; background-image:url(../images/careers_bg.gif); background-repeat:no-repeat; padding:30px 0px 0px 19px; overflow:hidden; }

div#jobslink { margin:-19px 28px 0px 0px; float:right; }

div#RightBox { width:190px; margin:25px; margin-top:15px; margin-bottom:0px; float:left; display:inline; }
div#RightBoxTBox { width:200px; margin-top:4px; padding-top:10px; }
div#RightBoxTBox2 { width:190px; margin-top:8px; padding-top:10px; border-top:1px #f3bdbd solid; }

div#footer {
	width:999px; height:70px;
	margin: 0px 0px -1px 0px;
	background:url(../images/footer_bg.gif) repeat-x;
	position:relative; float:left;
}
div#footcont { width:906px; margin:0px auto; }
div#footLogo { top:15px; position:absolute; float:left; }
div#footRight { margin-top:14px; float:right; }
div#footCSLogo { margin-top:28px; margin-left:14px; float:right; }



/* Testimonials */

.TestiBox { width:560px; margin:30px 20px 0px 20px; float:left; display:inline; }
.TestiQL { width:35px; height:31px; float:left; background-image:url(../images/quote_left.gif); background-repeat:no-repeat; }
.TestiQR { width:57px; height:52px; float:right; background-image:url(../images/quote_right.gif); background-repeat:no-repeat; }
.TestiText { width:400px; margin-left:20px; margin-right:20px; display:inline; float:left; }
.TestiName { width:450px; margin-right:40px; margin-top:15px; display:inline; float:Left; }


/* recent projects */


.ProjHeader { width:600px; height:18px; background-color:#e05151; color:#FFFFFF; font-size:12px; line-height:18px; float:left; display:inline; }
.ProjHNo { width:25px; float:left; display:inline; }
.ProjHJob { width:160px; margin-left:12px; float:left; display:inline; }
.ProjHDes { width:275px; margin-left:12px; float:left; display:inline; }
.ProjHType { width:100px; margin-left:12px; float:left; display:inline; }

.ProjBox { width:600px; margin-top:16px; color:#e05151; font-size:12px; line-height:18px; float:left; display:inline; }
.ProjNo { width:25px; color:#5e5e5e; float:left; display:inline; }
.ProjJob { width:160px; margin-left:12px; float:left; display:inline; }
.ProjDes { width:275px; margin-left:12px; float:left; display:inline; }
.ProjType { width:100px; margin-left:12px; float:left; display:inline; }


/* Every page body pictures */

#pagePic1 {
	display: block;
	float:right;
	padding:0px 0px 10px 20px;
}

#pagePic2 {
	display: block;
	float:right;
	padding:0px 0px 10px 20px;
}


/* Recent Projects page pictures */

#projectPicBox {
	width:618px; height:200px;
}

.projectPic {
	width:200px; height:200px;
	float:left;
}