/********************************** common tag **********************************/


/********************************** content **********************************/
#big_wrapper { min-height:100%; min-width:980px; position:relative; }
#wrapper { width:980px; margin:0 auto; position:relative; z-index:2 } /*sticky footer hack - margin-bottom = footer height = push*/
#content {  width:980px; padding-top:1px; margin-bottom:150px; }
#content h1 { font-size:20px; }
#content_top { width:980px; padding-top:10px; }
#content_left { width:630px; float:left; margin-top:20px; }
#content_right { width:300px; float:right; margin-top:20px; }
#box_cms { display:none; background:url('../images/box_cms.png') center top no-repeat; width:262px; height:148px; position:absolute; top:0; right:229px; }
#box_cms .box_content { top:158px;  }
#box_ecomm { display:none; background:url('../images/box_ecomm.png') center top no-repeat; width:262px; height:500px; position:absolute; top:0; right:368px; }
#box_ecomm .box_content { top:510px;  }
#box_webapps { display:none; background:url('../images/box_webapps.png') center top no-repeat; width:262px; height:400px; position:absolute; top:0; right:0 }
#box_webapps .box_content { top:410px;  }
#box_website { display:none; background:url('../images/box_website.png') center top no-repeat; width:262px; height:249px; position:absolute; top:-40px; right:520px; z-index:1 }
#box_website .box_content { top:259px;  }
#box_intro { display:none; padding:20px; background:url('../images/dark_bullet.png'); color:#FFF; top:0; position:absolute; text-align:justify; width:400px }
/*#box_intro { display:none; padding:20px; background:url('../images/dark_bullet.png'); color:#FFF; top:245px; position:relative; text-align:justify; width:300px }*/
#box_intro h1 { font-weight:normal; font-size:33px; }
#box_intro h2 { font-weight:normal; text-align:justify; font-size:26px; margin-bottom:10px; }
.box_content { background:#FFF; opacity: 0.4; filter: alpha(opacity = 40); padding:10px 10px; position:relative; text-align:justify; color:#000; cursor:default; overflow:hidden; font-size:11px }
.box_content { transition:box-shadow .3s linear; -moz-transition:-moz-box-shadow .3s linear; -webkit-transition:-webkit-box-shadow .3s linear; }
.box_content:hover { box-shadow:0px 0px 10px #000; -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; }
.box_content h2 { font-size:28px; float:left; margin-right:10px; }
.box_content div { float:left; width:200px }
#name_card { background:url('../images/name_card.png') no-repeat; width:437px; height:308px; position:fixed; bottom:10px; right:-451px; padding:60px 0 0 70px; z-index:10000 }
.email { background:url('../images/icons/mail_icon.png') left center no-repeat; padding-left:35px; line-height:25px; text-align:left; font-size:18px; color:#000; }
.phone { background:url('../images/icons/phone_icon.png') left center no-repeat; padding-left:35px; line-height:25px; text-align:left; font-size:18px; color:#000; margin-bottom:5px }
.details { margin-top:3px; text-align:left; margin-top:20px; font-weight:bold; color:#000; font-size:10px }
.details a { color:#666; text-decoration:none }
.contact_phone { background:url('../images/icons/phone.png') left center no-repeat; padding-left:30px; line-height:19px; text-align:left; font-size:12px; color:#000; margin-bottom:10px }
.contact_fax { background:url('../images/icons/fax.png') left center no-repeat; padding-left:30px; line-height:19px; text-align:left; font-size:12px; color:#000; margin-bottom:10px }
.contact_email { background:url('../images/icons/mail.png') left center no-repeat; padding-left:30px; line-height:19px; text-align:left; font-size:12px; color:#000; }
.contact_address { background:url('../images/icons/address.png') left top no-repeat; padding-left:30px; line-height:20px; text-align:left; font-size:12px; color:#000; }
#overlay { display:none; background:url('../images/dark_bullet.png'); width:100%; height:100%; position:fixed; top:0; left:0; z-index:9;  }
#top_bg {}
#top_bg { display:none; background:url('../images/top_bg.png') no-repeat; width:490px; height:513px; position:fixed; z-index:-10; top:0; right:0; }
#bottom_bg { display:none; background:url('../images/bottom_bg.png') no-repeat; width:314px; height:319px; position:fixed; z-index:-10; bottom:65px; left:0 }
ul#scroll { list-style:none; margin:0; padding:0 }
ul#scroll li.scroll_content { width:980px; min-height:10px; margin-right:1000px; float:left; text-align:center; }
ul#scroll li#contact { text-align:left; }
ul.portfolio { list-style:none; padding:0; margin:0 auto; width:871px; height:auto !important; }
ul.portfolio li { position:relative }
ul.portfolio li a { display:block; position:relative }
ul.portfolio li { background:url('../images/portfolio_bg_small.png') no-repeat; width:190px !important; height:135px !important; padding-top:15px; float:left; margin-left:30px; margin-bottom:10px; margin-right:0 !important; }
ul.portfolio li img { display:block; margin:0 auto }
ul#scroll li#portfolio { position:relative }
ul#scroll li#portfolio p { text-align:center; width:821px; margin:0 auto; line-height:20px; }
ul#scroll li#service { position:relative }
ul#scroll li#service img { display:block; margin:0 auto }
ul#scroll li#service p { text-align:center;width:821px;margin:0 auto; line-height:20px; }
ul#scroll li#contact { position:relative }
ul.contact { list-style:none; padding:0; margin-top:10px; }
ul.contact li { height:auto !important; float:left; width:175px !important; margin-right:0 !important; margin-left:32px; text-align:left !important; }
ul.contact li:first-child { margin-left:0 }
.contact_form { float:right; width:370px; position:relative; z-index:6 }
.contact_form label.title { display:block; font-weight:bold }
.contact_form label.title:first-child { margin-top:0; }
.contact_form label.title { margin-top:10px; }
.lightbox_content h1 { border-bottom:1px solid #ccc;margin-bottom:10px }
.lightbox_content .image { padding:4px; border:1px solid #CCC; }
.lightbox_content .detail { float:left; }
.lightbox_content .description { margin-top:10px }
.jquery-lightbox-button-max { display:none !important }
.jquery-lightbox-background { background:#FFF !important; }

/********************************** class **********************************/
.clear { clear:both; }
h2.blue { color:#112c6a; }
a.print { display:block; background:url('../global/images/icons/printer.html') no-repeat; padding-left:20px; position:relative; float:right; width:50px; color:#666; text-decoration:none; }
a.print:hover { text-decoration:underline; color:#069; }
.hidden { display:none; }
.red { color:#FF0000 }

/********************************** header **********************************/
#header { height:120px; overflow:hidden; position:fixed; z-index:5; }
#header_top { width:980px; height:24px; line-height:24px; overflow:hidden; text-align:right; color:#CCC; }
#header_top a { color:#C6EFFF; text-decoration:none; }
#header_top a:hover { text-decoration:underline; }
#header_content { width:980px; overflow:hidden; }
#logo { float:left; padding:10px 0; }

/********************************** footer **********************************/
#footer { background:url('../images/footer_bg.png') center bottom repeat-x; bottom:0; z-index:1; text-align:center; position:fixed; height:160px; margin-top:-160px; min-width:980px; width:100% }  /*sticky footer hack - margin-bottom = footer height = push*/
#footer a { color:#555; text-decoration:none; }
#footer a:hover { text-decoration:underline; }

/********************************** menu **********************************/
#menu { display:block; width:980px; margin:0 auto; position:relative; top:40px }
ul#dropmenu { width:405px; margin:0 auto; padding:0; border:0; display:block; list-style:none; position:relative; bottom:20px; left:50%; margin-left:-202px; }
ul#dropmenu li { float:left; position:relative; padding:0 8px; }
ul#dropmenu li a { font-size:12px; font-weight:bold; color:#FFF; display:block; text-decoration:none; }
ul#dropmenu li a:hover { text-decoration:none; }

/********************************** input validation **********************************/
.msg_success { color:#060; border:1px solid #060; background-color:#e6ffea; }
.msg_error { color:#900; border:1px solid #900; background-color:#ffcece; }
.msg_alert { color:#e27815; border:1px solid #e27815; background-color:#FFFBCF; }
.msg_success, .msg_error, .msg_alert { position:relative; z-index:10; margin:10px 0; padding:10px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:rgba(200,200,200,1) 0 1px 5px; -webkit-box-shadow:rgba(200,200,200,1) 0 1px 5px; -khtml-box-shadow:rgba(200,200,200,1) 0 1px 5px; box-shadow:rgba(200,200,200,1) 0 1px 5px; }
input, textarea { padding:4px; }
input[type="text"], textarea { width:200px }
textarea { height:100px }
.contact_form input[type="submit"] { margin-top:10px; cursor:pointer }
form input.invalid, form textarea.invalid { background:#FFFBCF; border:1px solid #FFCC33; }
span.invalid { padding:8px 0 8px 20px; margin-top:5px; background:url('../images/icons/exclamation.png') no-repeat left center; font-size:11px; color:#900; }

/********************************** 404 **********************************/
#error_404 { line-height:30px; color:#900; border:1px solid #900; background-color:#FFECEC; }
#error_404 { position:relative; z-index:10; margin:10px 0; padding:10px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
#error_404 b { font-size:24px }

/********************************** page under construction **********************************/
p.valid { background:#EFE; text-align:center; padding:5px; border:1px solid #0C0; overflow-x:auto; }
p.error { background:#FEE; text-align:center; padding:5px; border:1px solid #F00; overflow-x:auto; }