/********************************* Classes for XHTML default Tag *********************************/
html { overflow-x:hidden; }
@font-face { font-family: Museo300; src: url('Museo300-Regular.otf'); }
@font-face { font-family: Museo500; src: url('Museo500-Regular.otf'); }
@font-face { font-family: Museo700; src: url('Museo700-Regular.otf'); }
::selection{ background: #096; color:#cff; /* Safari */ }
::-moz-selection{ background: #096; color:#cff; /* Firefox */ }
* {	margin: 0; }
html, body { height:100%; }
body { margin:0; padding:0; font: .80em/1.3em arial, sans-serif, tahoma, "Trebuchet MS"; color:#999; background:#001b21 url(../images/page_bg.gif) repeat-x 0 0; }
h1, h2, h3, h4, h5, h6 { font-family: "Museo700",arial, verdana, sans-serif; margin:0; padding:5px 0; text-shadow:1px -1px 1px #000; }
h1, h2 { font:bold 2em "Museo300",aller,arial, verdana, sans-serif; color:#096; }
h3, h4 { font:bold 1.6em "Museo300",aller,arial, verdana, sans-serif; color:#699; }
h5 { font:bold 1.6em "Museo300",aller,arial, verdana, sans-serif; color:#999; }
form, img, a, li, ul { margin:0; padding:0; border:0; list-style:none; }
a { color:#096; text-decoration:none; outline:none; }
a:hover { text-decoration:underline; }
p { margin:0; line-height:1.5em; }

/************************ Classes for differentiation of uniq ID ************************/
#wrapper { min-height:100%; height:auto !important; height:100%; margin:0 auto -390px; }
.lsize, #content_area { width:940px; margin:0 auto; }

#content_area { padding:0; }
#left_panel { width:640px; float:left; position:relative; }
#right_panel { width:250px; float:right; }

#parallax {position:absolute; top:65px; overflow:hidden; width:990px; height:500px; z-index:1;}
#parallax #layer1 { background:url(../images/cloud.png) center top no-repeat; width:1100px; height:500px; }
#parallax #layer2 { background:url(../images/mount.png) center top no-repeat; width:1200px; height:500px; }
#parallax #layer3 { background:url(../images/eagle.png) center top no-repeat; width:1650px; height:500px; }
	
#header { background: url(../images/header_bg.jpg) no-repeat 50% 0; height:610px; overflow:hidden; }
#header_inner { background: url(../images/header_bg_inner.jpg) no-repeat 50% 0; height:387px; overflow:hidden; }
#menu { font: 1.4em "Museo300",aller,arial,sans-serif; background: url(../images/logo_line.png) no-repeat 0 0; width:940px; height:37px; line-height:34px; margin:30px auto 0 auto; overflow:hidden; }
#menu #logo { display:block; float:left; width:139px; height:37px; text-indent:-999em; margin-right:15px; }
#menu #hire { display:block; float:right; width:90px; text-indent:-999em; }
#menu li { float:left; margin:0 15px; text-transform:uppercase; }
#menu li a { display:block; float:left; padding:0; color:#fff; cursor:pointer; text-decoration:none; }
#menu a span { font:normal .65em arial, verdana, sans-serif; background: url(../images/menu_tooltip.png) no-repeat 0 0; position:absolute; display:none; padding:13px 10px 10px 10px; width:113px; height:28px; overflow:hidden; margin-top:30px; z-index:10; text-transform:capitalize; color:#fff; }
#menu a:hover span { display:block; text-indent:0; }
#menu li a:hover { color:#390; text-decoration:none; }
#menu li.active a { color:#390; background: url(../images/menu_arrow.gif) 50% 0 no-repeat; }
#hire:hover span { margin-left:-20px; }

#header_caption { position:absolute; z-index:10; margin-top:320px; width:400px; height:150px; }
#header_caption h1, #inner_caption h1 { font-size:1.7em; color:#699; text-shadow:1px -1px 1px #08181b; }
#header_caption h1 b, #inner_caption h1 b { color:#096; font-family:"Museo700",aller,arial,sans-serif; }
#header_caption a { display:block; float:left; background: url(../images/portfolio_but.gif) no-repeat 0 0; width:261px; height:43px; text-indent:-999em; margin-top:10px; }

#inner_caption { width:485px; margin-top:70px; }
#inner_caption h1 { font-size:1.7em; line-height:1.4em; color:#699; }

#qod-quote { font: 1.2em "Museo300",arial,sans-serif; color:#699; position:absolute; margin-top:150px; width:280px; height:160px; overflow:hidden; }
#qod-quote .qod-author { display:none; }
#qod-quote strong { font-weight:bold; font-family:"Museo700", arial, sans-serif; }


#services_list li, .services_item dd, .list li { margin:5px 0; background:url(../images/green_arrow.gif) no-repeat 0 50%; padding-left:20px; font-weight:bold; }
.list li { padding:6px 0 6px 20px; background-position:0 10px; margin:0; border-bottom:1px solid #082228; line-height:1.5em; }

.services_item { padding-top:10px; }
.services_item dl { float:left; width:205px; margin-right:10px; }
.services_item dl.last { margin-right:0; }
.services_item .sub { font:bold 1.6em "Museo300",aller,arial, verdana, sans-serif; color:#699; text-shadow:1px -1px 1px #08181B; background:none; padding-left:0; }
.services_item .space { padding-top:10px; }
.services_item .space1 { padding-top:28px; }
.services_item dt { background: url(../images/services_heading.gif) no-repeat 0 0; height:50px; font:bold 1.6em/38px "Museo300",aller,arial, verdana, sans-serif; color:#699; text-shadow:1px -1px 1px #08181B; padding-left:14px; }
.services_item .price { background: url(../images/hire_designer_price.png) no-repeat 0 0; display:block; width:76px; height:61px; position:absolute; margin:-25px 0 0 129px; cursor:pointer; }
.services_item .developer { background: url(../images/hire_developer_price.png) no-repeat 0 0; }
.services_item .gdesigner { background: url(../images/hire_gdesigner_price.png) no-repeat 0 0; }

.services_info { position:absolute; width:424px; margin-top:-40px; left:480px; background-color:#09323b; -moz-border-radius:10px; -webkit-border-radius:10px; border:3px solid #096; padding:10px 15px; }
.services_info .arrow { background: url(../images/speech_arrow.gif) no-repeat 0 0; display:block; width:22px; height:40px; position:absolute; margin:30px 0 0 -37px; }
.services_info li { padding:5px 0; border-top:1px solid #0f414c; line-height:1.5em; }
.html_services { width:380px; }
.html_prices { width:210px; left:394px; margin-top:0; display:block; }
.html_prices .hlight { color:#fbbd13; font-size:1.2em; }
.p2h_price { background: url(../images/p2h_price.png) no-repeat 0 0; display:block; width:76px; height:61px; position:absolute; margin:-25px 0 0 129px; cursor:pointer; }

.grad, .grad1 { position:relative; overflow:hidden; text-transform:uppercase; }
.grad span, .grad1 span { background: url(../images/heading_grad.png) repeat-x 0 0; position:absolute; display:block; #display:none; left:0; width:100%; height:35px; margin-top:-4px; }
.grad1 span { background: url(../images/heading_grad1.png) repeat-x 0 0; }

#how_diff li { background: url(../images/hr_line.gif) repeat-x 0 100%; padding:12px 0; }
#how_diff .thumb { float:left; width:205px; }
#how_diff .caption { float:left; width:435px; }
#how_diff h3 { padding-top:0; }

#hire_inst { width:455px; }

#testimonial { background: url(../images/testimonial.gif) no-repeat 0 0; width:250px; height:163px; font-size:.85em; }
#testimonial .spacing { padding:30px 5px 0 15px; }
#testimonial p { height:85px; padding:0 2px; }
#testimonial .nav_but { margin-top:3px; float:left; }
#testimonial .cname { float:right; background: url(../images/voice_icon.gif) no-repeat 0 50%; padding-left:25px; line-height:20px; font-weight:bold; margin-right:5px; color:#ccc; }

#psd_xhtml, #how_work { background: url(../images/banner.gif) no-repeat 0 0; width:250px; height:100px; display:block; text-indent:-999em; margin-top:20px; position:relative; cursor:pointer; }
#how_work { background-position:0 -106px; height:52px; }
#psd_xhtml span, #how_work span { background: url(../images/price_99.png) no-repeat 0 0; display:block; width:49px; height:49px; position:absolute; right:-14px; top:-10px; }
#how_work span { background: url(../images/must_read.png) no-repeat 0 0; }

#work_method h3 { background: url(../images/number_bullet.gif) no-repeat 0 0; height:46px; line-height:35px; position:relative; padding-left:50px; font-size:1.8em; margin:15px 0 0 0; }
#work_method h3 span { position:absolute; color:#001b21; left:10px; top:4px; text-shadow:1px -1px 1px #b2e0d1; font-size:1.5em; font-weight:normal; }

.image-switcher-tools { float:right; margin-top:-25px; position:relative; z-index:1; }
.image-switcher-tools a { display:block; float:left; height:12px; width:12px; font-size:0; background: url(../images/slide_swticher.gif) 0 -26px; overflow:hidden; text-indent:-999em; margin-right:6px; }
.image-switcher-tools a:hover { background-position:0 -13px; }
.image-switcher-tools a.activeSlide, .image-switcher-tools a.activeSlide:hover { background-position:0 0; }
.homepage-carousel-shortbord .slides { height:320px; overflow:hidden; }

.bullet_list li { background:url(../images/bullet.gif) no-repeat 0 10px; padding:4px 0 4px 18px; line-height:1.5em; border-bottom:1px solid #082228; }

#footer, .push { background:#000 url(../images/footer_bg.gif) repeat-x 0 0; height:390px; }
.push { background:none; padding:0; }
#footer .footer_graphic { background: url(../images/footer_graphic.jpg) no-repeat 50% 0; height:170px; padding-top:190px; }
#footer_left { width:630px; margin-top:10px; float:left; }
#footer_menu li { float:left;  }
#footer_menu li a { font: 1.2em "Museo300",arial,sans-serif; background:none; padding:4px; float:left; margin:0 8px; display:inline; text-decoration:underline; color:#699; font-weight:bold; text-decoration:none; }
#footer_menu li.active a, #footer_menu li a:hover { background: url(../images/footer_menu_active.gif) no-repeat 50% 100%; text-decoration:none; }
#footer .footer2 a { color:#c4d7ed; }
#copyright { float:left; display:inline; width:380px; line-height:1.8em; font-size:.9em; font-weight:bold; margin:90px 0 0 12px; clear:both; }
#footer_right { width:250px; float:right; }

#contact_talk { background-color:#09323b; -moz-border-radius:10px; -webkit-border-radius:10px; border:3px solid #096; padding:10px 15px 0 15px; }
#contact_talk .arrow { background: url(../images/speech_arrow.gif) no-repeat 0 0; display:block; width:22px; height:40px; position:absolute; margin:10px 0 0 -37px; }
#contact_talk .talk_us li { background-image:url(../images/talk_icons1.gif); border-bottom:#0f414c 1px solid; }

.talk_us li { background:url(../images/talk_icons.gif) no-repeat 0 0; line-height:30px; border-bottom:#1a1a1a 1px solid; padding-left:35px; }
.talk_us li a { color:#999; font-weight:bold; }
.talk_us .e-mail { background-position:0 8px; }
.talk_us .skype { background-position:0 -20px; }
.talk_us .g-talk { background-position:0 -115px; }
.talk_us .msn { background-position:0 -83px; }
.talk_us .yahoo { background-position:0 -51px; }

#social { width:250px; position:absolute; margin:-105px 0 0 -250px; }
#social a { background:url(../images/social_icon.gif) no-repeat 0 0; width:30px; height:50px; display:block; float:left; margin-right:10px; text-indent:-999em; }
#social a:hover { background-position:0 -57px; }
#social a.facebook { background-position:-40px 0; }
#social a.facebook:hover { background-position:-40px -57px; }
#social a.twitter { background-position:-80px 0; }
#social a.twitter:hover { background-position:-80px -57px; }
#social a.myspace { background-position:-120px 0; }
#social a.myspace:hover { background-position:-120px -57px; }
#social a.deviant { background-position:-160px 0; }
#social a.deviant:hover { background-position:-160px -57px; }

.resources .col1 { float:left; width:32%; }
.resources .col2 { float:left; width:32%; margin:0 2%; }
.resources .col3 { float:right; width:32%; }
.resources li p { font-weight:normal; }

/********************* Filer Portfolio *********************/
div#container { margin:-30px auto 0 auto; overflow: hidden; }
ul#filter { border-bottom:1px solid #334b51; font:bold 1.6em "Museo300",aller,arial, verdana, sans-serif; list-style: none; padding-left:170px; height:30px; position:relative; z-index:1; }
ul#filter li { float:left; padding:0 10px; }
ul#filter li:last-child { border-right:none; margin-right:0; padding-right:0; }
ul#filter a { padding:0 8px; color: #096; text-decoration:none; }
ul#filter li.current a, ul#filter a:hover { background:#699; color:#000; text-decoration:none; -moz-border-radius:5px; -webkit-border-radius:5px; }
ul#filter li.current a { color: #000; font-weight:bold; }
ul#filter li.current { padding-bottom:4px; background: url(../images/portfolio_arrow.gif) 50% 100% no-repeat; }
ul#portfolio { float: left; list-style: none; margin-top:20px; }
ul#portfolio li { float:left; margin:0 10px 10px 0; padding:0; width:303px; }
ul#portfolio a { display:block; width:100%; }
ul#portfolio a:hover { text-decoration:none; }
ul#portfolio img { display:block; background: url(../images/loading_quote.gif) 50% 50% no-repeat; }
ul#portfolio a span { display:block; padding:5px; font-weight:bold; background:#000; color:#999; }
ul#portfolio a:hover span { background:#096; color:#000; }

/********************* Contact Page *********************/
input, textarea, select { font:.9em/1.2em arial, "Trebuchet MS", sans-serif, serif; color:#ccc; }
#contact_form { margin-top:10px; }
#contact_form .col1, #contact_form .col2 { float:left; padding:0 25px 0 0; width:300px; }
#contact_form .col2 { padding:0; }
#contact_form label { display:block; margin-bottom:5px; font-weight:bold; }
#contact_form .textbox, #contact_form select, #contact_form textarea { width:288px; padding:5px; margin-bottom:20px; border:1px solid #0f414c; background:#09323b; -moz-border-radius:5px; -webkit-border-radius:5px; }
#contact_form .human { width:50px; color:#096; font-weight:bold; }
#contact_form select { width:300px; padding:4px; }
#contact_form textarea { width:611px; margin-bottom:10px; }
#contact_form em, .star { color:#fbbd13; }
#contact_form input:focus, #contact_form select:focus, textarea#message:focus { border:1px solid #096; }
#contact_form input.error, #contact_form select.error, #contact_form textarea.error { border:1px dotted #fbbd13; margin-bottom:0; }
#contact_form label.error { color:#fbbd13; font-size:.85em; margin-bottom:0; }
#submit input { background: url(../images/submit_but.gif) no-repeat 0 0; width:245px; height:43px; cursor:pointer; border:0; padding:0; margin:0;  }
.require_field { font:normal .4em arial, verdana, serif; }

a.button { background: url(../images/button.gif) 0 0 no-repeat; display:block; float:left; font-weight:bold; padding-left:15px; text-decoration:none; color:#fff; height:34px; line-height:34px; cursor:pointer; }
a.button span { background: url(../images/button.gif) 100% 0 no-repeat; display:block; float:left; padding-right:15px; }
a.button:hover { background-position:0 100%; text-decoration:none; }
a.button:hover span { background-position:100% 100%; }

/********************* classes for differentiation of padding, border & color ********************/
.fl { float:left; }
.fr { float:right; }
.clear { clear:both; }
.center { text-align:center; }
.left { text-align:left; }
.right { text-align:right; }
.bold { font-weight:bold; }
.normal { font-weight:normal; }
.pad { padding:5px; }
.pad1 { padding:10px; }
.pt { padding-top:5px; }
.pt1 { padding-top:10px; }
.pb { padding-bottom:5px; }
.pb1 { padding-bottom:10px; }
.pl { padding-left:5px; }
.pl1 { padding-left:10px; }
.pr { padding-right:5px; }
.pr1 { padding-right:10px; }
.mrg { margin:5px; }
.mt { margin-top:5px; }
.mt1 { margin-top:10px; }
.mt2 { margin-top:20px; }
.mb { margin-bottom:5px; }
.mb1 { margin-bottom:10px; }
.ml { margin-left:5px; }
.ml1 { margin-left:10px; }
.mr { margin-right:5px; }
.mr1 { margin-right:10px; }
.white_text { color:#ffffff; }
.green_text { color:#096; }
.small_text { font-size:.85em; }
.mid_align { vertical-align:middle; }
.width_full { width:100%; }

.award { position:absolute; right:0; top:100px; z-index:200; }