/* ----- Master Style Sheet for Mang Creative ----- */
/* ----- Author: mangcreative - 0845 33 12 987  ----- */
/* ----- Year : 2008 ----------------- */
/* ----- Comment : All rights reserved by mangcreative ----------------- */
/* ----- CSS Document -----*/

body { background: #F4F2F3 url(../images/background/main-background.jpg) top repeat-x; font: 70%/140% Arial, Helvetica, Verdana, Tahoma, sans-serif; margin: 0px auto; text-align: center; }
#wrapper { position: relative; margin-right: auto; margin-left: auto; width: 980px; text-align: left; }
#container { position:relative; margin-bottom: 1.5em; height: auto; }
img { border: 0; }

/************** header styles *****************/

#header { width: 100%; height: 85px; margin: 0 auto; }
#header-left { width: 250px; float: left; margin: 30px 0 0 0; }
#header-right { width: 650px; float: right; margin: 20px 0 0 0; text-align: right; }

a.logo { cursor:hand; float: left; display: block; width: 285px; height: 32px; background: transparent url("../images/logo/web_logo.png") 0 0 no-repeat; text-decoration: none; overflow: hidden; }
a:hover.logo { cursor:hand; background-position: -285px 0; }

/************** menu styles *****************/

#nav { margin: 0 auto; float: right; }
#nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#nav li { display: inline; line-height: 3em; font-size: 120%; }
#nav a, #nav em { float: left; padding: 0 1.5em; text-decoration: none;  }
#nav a { color: #333; background: transparent; }
#nav a:hover { background: #F4F2F3 0 -9999em no-repeat; color: #111; }
#nav li#active a { background: #fff 0 -9999em no-repeat; color: #141414; }

#navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid #cecece; width: 200px; } 
#navlist li { list-style: none; margin: 0; padding: 0.5em; border-top: 1px solid #cecece; } 
#navlist li a { color: #666; text-decoration: none; }
#navlist li a:hover { color: #333; }
#navlist li#active a { color: #060; font-weight: bold; }
#navlist li#second a { color: #060; padding-left: 15px; }
#navlist li#third a { padding-left: 15px; }

/************** font styles *****************/

h1 { font-size: 185%; color: #666; }
h2 { font-size: 135%; color: #666; padding: 0 0 0 35px; }

h1 .grey {color:#999;}
h2 .grey {color:#333;}

a.link { color: #060; text-decoration: none; }
a.link:hover { color: #5B9716; text-decoration: underline; }

.content { font-size: 110%; color: #555; line-height: 1.75em; }
.homepage-testimonial { margin: 10px 0 0 35px; width: 145px; font-size: 105%; color: #666; }

/************** form styles *****************/

.submit { background: #fff; width: 75px; font-size: 90%; color: #060; border: 1px solid #060; padding: 3px; }
.error { color: #c00; font-size: 100%;}

/************** homepage styles *****************/

#flash { width: 980px; height: 300px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px 0 10px 0; }
#pictorial { width: 980px; height: 250px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px 0 10px 0; }
#no-flash { width: 980px; height: 5px; border-top: 1px solid #ccc; padding: 10px 0 10px 0; }
#homepage { width: 100%; margin: 30px 0 0 0; }
#pictorial { width: 980px; height: 250px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px 0 10px 0; }

#folio-altcontent { }
#home { background: url(../images/feature/homepage-welcome.png) no-repeat; width: 980px; height: 350px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
#home-left { width: 45%; float: left; text-align: left; }
#home-left .title { color: #666; font-family: 'Helvetica'; font-size: 170%; margin: 195px 0 0 30px; line-height: 1.55em; }
#home-right { margin: 0 0 0 -300px; float: right; }

#intro { width: 332px; float: left; padding: 0 25px 0 10px; line-height: 1.7em; border-right: 1px dashed #999; }
.intro { color: #666; font-size: 105%; }

.service { width: 203px; float: right; border-right: 1px dashed #999; line-height: 1.8em;  }
.service-list { list-style-type: none; text-align: left; }
.service-list li a { font-size: 105%; color: #666; text-decoration: none; padding-left: 15px; background-image: url(../images/misc/arrow.gif); background-repeat: no-repeat; background-position: 0 .5em;} 
.service-list li a:hover { text-decoration: underline; color: #060; background-image: url(../images/misc/green-arrow.gif); }

#service .grey {color:#666;  }

/************** col styles *****************/

#content { width: 100%; margin: 40px 0 0 0; }
#content-2 { width: 100%; margin: 20px 0 0 0; }

#col-left { width: 270px; float: left; line-height: 1.8em; padding: 0 30px 0 10px; }
#col-mid { width: 270px; float: left; line-height: 1.8em; padding: 0 45px 0 45px; }
#col-right { width: 270px; float: left; line-height: 1.8em; padding: 0 0 0 30px; }

#col-2-right { width: 635px; float: left; line-height: 1.8em; padding: 0 0 0 30px; }

.ul-service { margin-left:-25px }

/************** content styles *****************/

#clients { padding: 0; margin: 0 0 0 14px; } 

/************** footer styles *****************/

.clear { clear: both; }
#footer { width: 100%; margin: 25px 0 0 0; border-top: 1px solid #ccc; height: 25px; }
.footer { font-size: 100%; color: #666; }
#footer-left { width: 30%; float: left; padding: 10px 0 0 0; }
#footer-right { width: 60%; float: right; text-align: right; padding: 10px 0 0 0; }
.footer a { color: #666; text-decoration: none;  }
.footer a:hover { color: #060; }

#keywords { display:block; height: 15px; overflow: hidden; position:absolute; z-index:3; top:700px; bottom:52px; width:760px; margin-bottom: 5px; }
.keywords { font-size: 0.7em;  color: #fff; }