/* Blue style */
/* import reset css */
@import "reset.css";
/* import fancybox css */
@import "fancybox/jquery.fancybox-1.3.1.css";

html { font: normal 14px/1.5em Georgia, "Times New Roman", Times, serif; color: #474747; }
body { text-align: left; background: url(../img/body_back.gif) repeat-x; }

/* FRAMEWORK
========================================================================= */
/* based on a 960px 24 col structure */

.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0; }
.hide { display: none; }
.left { float: left; }
.right { float: right; }
.align_center { text-align: center; }
.align_right { text-align: right; }
.left_col, .main_col, .small_col, .medium_col, .large_col, .f_medium_col, .f_large_col, .gutter { float: left; display: inline; position: relative; }

/* MARGIN & PADDING */

.padd { padding-top: 25px; padding-bottom: 25px; }
.paddtop { padding-top: 91px; }
.margin { margin: 0 5px; }
.m_top { margin-top: 25px; }
.m_bottom { margin-bottom: 25px; }
.p_bottom { padding-bottom: 25px; }
.leftspace { padding-left: 200px; }
.small_col, .medium_col, .large_col, .f_medium_col, .f_large_col, .gutter, .c_small_col { margin-left: 5px; margin-right: 5px; }
.gutter { padding-left: 40px; }
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset { margin-bottom: 1em; }

/* COLUMNS */

.wrapper { width: 960px; }
.left_col { width: 360px; padding-right: 20px; text-align: right; text-shadow: #fff 0 1px 0; }
.main_col { width: 560px; padding-left: 20px; }

.small_col { width: 150px; }
	.c_small_col { width: 350px; }
.medium_col { width: 255px; }
.large_col { width: 550px; }
.f_medium_col { width: 190px; }
.f_large_col { width: 310px; }


/* Border */

/* vertical border */
.v_border { border-right: 1px dashed #cccccc; padding-right: 20px; margin-right: 14px; }
.f_v_border { border-right: 1px dashed #b2b2b2; padding-right: 25px; margin-right: 19px; }

/* TYPOGRAPHY
========================================================================= */
hr { display: none; }
.smallcaps { font-variant: small-caps; letter-spacing: 1px; }

h1 { font-size: 26px; }
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
	.main_col h4 { letter-spacing: 1px; font-variant: small-caps; font-weight: bold; }
h5 { font-size: 17px; font-variant: small-caps; letter-spacing: 1px; }

h1, h2, h3, h4 { font-family: "Lucida Grande", sans-serif; }

p { font-size: 14px; clear: both; }

em { font-style: italic; }
del { text-decoration: line-through; }
acronym { border-bottom: 1px dotted black; cursor: help; }
blockquote { border-left: 2px solid black; padding-left: 10px; margin: 20px 20px 35px; }
q { font-style: italic;  }
cite { font-style: italic; }
	cite a { }
pre, code { font-size: 13px; line-height: 20px; font-family: mono-space,monospace; white-space: pre; overflow: auto; }
pre { padding: 10px 0; }
code { background: #f6f6f6 url(../img/code.png) repeat scroll 0 0; display: block; border: 1px solid #ddd; padding: 0 20px; border-bottom-style: none; margin: 10px 0; }
ins { background-color: #fdfe7c; margin: 0 2px; padding: 2px 5px; }

table { width: 100%; }
caption { text-align: center; background-color: #eaeaea; padding: 10px 5px; text-transform: uppercase; font: 16px/16px "Lucida Grande", sans-serif; }
th { height: 1.5em; padding: 5px; background-color: #484848; color: #fff; text-transform: uppercase; font: 13px/13px "Lucida Grande", sans-serif; }
tr { border-bottom: 1px solid #d4d4d4; }
tr:nth-child(2n) { background-color: #f6f6f6; }
tr:hover { background-color: #eaeaea; }
td { height: 1em; padding: 5px; }
		
a { color: #57a9d1; }
	a:hover { text-decoration: none; }
	a:active { position: relative; bottom: -1px; }
	
form {  }
form p {  }
form input {  }
.contact_form input {  }
.contact_form textarea {  }
form textarea {  }
form label {  }

input.error, textarea.error {  }
label.error {  }
label.error {  }
#result {  }
#success {  }
#errors {  }

strong { font-weight: bold; color: #070e11; }
ul li { list-style-position: inside; }
	.main_col ul li { list-style-type: disc; }
ol li { list-style: decimal; list-style-position: inside; }
li { margin-bottom: .4em; }
		
/* BIG SLIDER
========================================================================= */
#slide_border { position: absolute; top: 0; z-index: 99; }
#slide_container { width: 960px; background-color: #999; position: relative; height: 430px; top: 0; left: 0; }

.cs-prev, .cs-next { display: none; }

.coin-slider { position: absolute; top: 0; width: 960px; }
.cs-buttons { position: relative; background-color: #fff; float: right; font-size: 0; line-height: 0; padding: 5px 5px 5px 10px; z-index: 1000; border-bottom: 2px solid #cccccc; top: -28px; margin-right: 10px; }
.cs-buttons a { text-indent: -999em; border: 1px solid #a9a9a9; width: 5px; height: 5px; float: left; margin-right: 5px; }
a.cs-active { background-color: #000; border-color: #000; }
.cs-buttons a:hover { background-color: #d5d5d5; }

/* IMAGES
========================================================================= */
.big_img { width: 548px; border: 1px solid #d4d4d4; margin-bottom: 15px; }
.medium_img { width: 255px; border: 1px solid #d4d4d4; margin-bottom: 15px; }
.small_img { width: 150px; border: 1px solid #d4d4d4; margin-bottom: 15px; }
img.left { margin-right: 15px; }
img.right { margin-left: 15px; }

/* PAGE COMMONS
========================================================================= */
#content { padding-top: 25px; padding-bottom: 25px; }
.left_col h4 { color: #c6c6c6; font-size: 16px; text-shadow: #fff 0 1px 0px; letter-spacing: 1px; text-transform: uppercase; line-height: 24px; padding-top: 1px; }
.home_heading { color: #57a9d1; font-size: 24; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; }
.heading { font-size: 40px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dashed #cccccc; padding-bottom: 15px; margin-bottom: 30px; color: #292929; line-height: 36px; }

/* read more link */
a.readmore { color: #474747; text-decoration: none; font-variant: small-caps; text-align: right; margin-bottom: 5px; display: block; letter-spacing: 1px; float: right; }
	a.readmore:hover { color: #57a9d1; text-decoration: underline; }

.left_col ul { line-height: 1.25em; font-size: 12px; color: #777777; }

/* side bar general list */
.side_list li { margin-bottom: 10px; font-size: 14px; }
.side_list a { text-decoration: none; color: #7f7f7f; }
.side_list a:hover { color: #57a9d1; text-decoration: underline; }

/* side bar popular posts */
.popular p, .popular a { color: #ababab; }
.popular .p_head { margin-bottom: 0; border-bottom: 1px dashed #cbcbcb; padding-bottom: 5px; }
.p_head a { text-decoration: none; }
.popular .p_date { font-variant: small-caps; text-decoration: none; letter-spacing: 1px;  }
.popular li { margin-bottom: 5px; padding: 5px 0 5px 5px; list-style-type: none; }	
	.popular li:hover a, .popular li:hover p { color: #7f7f7f; }
	.popular li .p_head a:hover { color: #57a9d1; text-decoration: underline;  }
	
/* twitter bar */
.twitted p.preLoader { margin: 0; background: transparent url("../img/loader.gif") 1em center no-repeat; }
#twitter_update_list { overflow: hidden; }
#twitter_update_list li:hover, #twitter_update_list li:hover a { color: #7f7f7f; }
#twitter_update_list li { color: #ababab; margin-bottom: 10px; padding: 5px 0 5px 5px; list-style-type: none; font-size: 15px; line-height: 1.25em; }
#twitter_update_list li span { padding-bottom: 5px; margin-bottom: 0; border-bottom: 1px dashed #cbcbcb; display: block; font-size: 13px; }
#twitter_update_list li span a { font-variant: normal; }
#twitter_update_list a { color: #ababab; text-decoration: none; font-variant: small-caps; }
#twitter_update_list li a:hover { color: #57a9d1; text-decoration: underline; }

/* tetimonials bar */
#testimonials { font-size: 12px; line-height: 1.25em; color: #ababab; }
	#testimonials li { margin-bottom: 5px; padding: 5px 0 5px 5px; list-style-type: none; }	
	#testimonials li:hover p { color: #7f7f7f; }
	.test_msg { padding-bottom: 5px; margin-bottom: 0; border-bottom: 1px dashed #cbcbcb; }	
	.test_name { font-variant: small-caps; text-decoration: none; letter-spacing: 1px; }

.gotop { border-bottom: 1px dashed #cccccc; display: block; position: relative; margin-top: 30px; margin-bottom: 25px; text-indent: -999em; cursor: default; }
	.gotop span { width: 23px; height: 22px; background: url(../img/gotop.png) no-repeat 0 top; display: block; float: right; margin-top: -11px; margin-right: 5px; overflow: hidden; cursor: pointer; }
	a.gotop span:hover { background-position: 0 bottom; }
	
.big { font-size: 18px; line-height: 1.5em; }
.color { color: #57a9d1; }

/* social */
#social { float: right; }
#social li { display: inline; float: left; }
#social li a { float: left; margin-left: 5px; }
#social a:hover { opacity: .8; position: relative; top: -2px; }

/* BUTTONS
========================================================================= */
a.btn, span.btn { background: transparent url(../img/btn_right.png) no-repeat scroll right; height: 32px; text-decoration: none; padding-right: 4px; overflow: hidden; clear: both; margin-bottom: 15px; }
	a.btn span, .btn input { background: transparent url(../img/btn_left.png) no-repeat; border: none; color: #fff; text-shadow: #276584 0 -1px 0; height: 32px; font-size: 14px; font-variant: small-caps; letter-spacing: 1px; padding-left: 14px; line-height: 29px; cursor: pointer; float: right; padding-right: 10px; }
	.btn input.submit { line-height: 0; }
	a.btn em { text-transform: capitalize; font-variant: normal; }
	a.btn:hover, span.btn:hover { opacity: .8; cursor: pointer; text-decoration: none; }
	a.btn:active, span.btn:active { position: relative; bottom: -1px; text-decoration: none; }

a.btn.quote { margin-top: 5px; text-align: center; float: left; margin-bottom: 0; }
a.btn.quote span { padding-left: 0; padding-right: 0; width: 141px; margin-left: 45px; }

/* HOME PAGE
========================================================================= */
		
/* HEADER */
#head_col_h { position: absolute; top: 30px; z-index: 200; }
#logo_h { background-color: #57a9d1; color: #fff; height: 65px; padding: 20px 40px 20px 45px; float: left; }
#logo_h h1 { background-image: url(../img/logo.gif); width: 267px; height: 65px; text-indent: -999em; margin: 0; padding: 0; }
#logoborder_h { width: 165px; height: 105px; background: url(../img/logo_border.png) no-repeat; float: left; display: block; }

/* NAV SECTION */
#main_nav_h { padding-left: 35px; margin-top: 45px; float: left; font-size: 16px; }
#main_nav_h ul { float: left; margin: 0; padding: 0; text-transform: uppercase; }
#main_nav_h li { list-style-type: none; }
#main_nav_h li a { background-color: #57a9d1; color: #fff; padding: 5px 10px; float: left; clear: left; margin-bottom: 6px; text-decoration: none; }
#main_nav_h li a:hover { background-color: #000; }
#visit_blog { background-image: url(../img/visit_blog.png); width: 92px; height: 93px; float: left; text-indent: -999em; position: relative; right: -770px; top: -130px; overflow: hidden; }
a#visit_blog:hover { opacity: .8; }

#content { background: url(../img/leftcol_back.gif) repeat-y; }

/* lastest works */
#arr_prev { text-indent: -999em; width: 12px; height: 20px; display: block; float: left; margin: 20px 9px 0; background: url(../img/arr_left.png) 0 top; overflow: hidden; }
	#arr_prev:hover { background-position: 0 bottom; }
#arr_next { text-indent: -999em; width: 12px; height: 20px; display: block; float: right; margin: 20px 9px 0; background: url(../img/arr_right.png) 0 top; overflow: hidden; }
	#arr_next:hover { background-position: 0 bottom; }
#lastest_works { float: left; margin: 0 5px; overflow: hidden; width: 480px; height: 62px; }
#lastest_works li { display: inline; }
#lastest_works a { float: left; border: 1px solid #fff; width: 108px; height: 58px; overflow: hidden; margin: 0 5px; }
#lastest_works a:hover { border: 1px solid #57a9d1; }

/* ABOUT
========================================================================= */	
#head_col { float: left; width: 960px; height: 166px; }
#logo { background-color: #57a9d1; color: #fff; height: 45px; padding: 20px 10px 10px 10px; float: left; margin-top: 30px; }
#logo h1 { background-image: url(../img/logo2.gif); width: 162px; height: 50px; text-indent: -999em; margin: 0; padding: 0; }
#logoborder { width: 60px; height: 95px; background: url(../img/logo_border1.png) no-repeat; float: left; display: block; margin-top: 30px; }

/* top navigation */
#main_nav { float: right; margin-top: 70px; font-size: 16px; }
#main_nav ul { font-family: "Lucida Grande", sans-serif; display: inline; text-transform: uppercase; margin: 0; padding: 0; }
#main_nav li { float: left; margin-left: 10px; list-style-type: none; } 
#main_nav li a { background-color: #57a9d1; color: #fff; padding: 5px 10px; float: left; clear: left; text-decoration: none; }
#main_nav li a:hover, #main_nav li.current a { background-color: #000; }

/* SERVICES
========================================================================= */	
#services { width: 470px; float: right; }
#services dt { color: #303030; margin-bottom: 15px; font: 20px/18px "Lucida Grande", sans-serif; text-transform: uppercase; }
#services dd { margin-bottom: 30px; }
#services dd img { float: left; margin: -30px 0 0 -60px; }

/* PORTFOLIO
========================================================================= */	
#worklist li { display: block; float: left; list-style-type: none; margin-bottom: 10px; margin-right: 1px; padding: 4px 15px 14px; border: 1px solid #fff; width: 150px; }
#worklist li:hover { background-color: #f9f9f9; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#worklist li:hover h4 { color: #57a9d1; }
#worklist li:hover .client_name { color: #777; }
#worklist li a { float: left; margin-bottom: 5px; border-bottom: 1px solid #fff;}
#worklist li a:hover { border-bottom: 1px solid #ccc; opacity: .9; }

#worklist h4 { font-variant: small-caps; font-size: 18px; margin-top: 5px; margin-bottom: 5px; }
#worklist h4 a { color: #474747; text-decoration: none; border-bottom: none;}
#worklist h4 a:hover { border-bottom: none; color: #57a9d1; }
.client_name { font-style: italic; color: #ababab;  border-bottom: 1px dashed #cccccc; margin-bottom: 0; padding-bottom: 5px; }

ul#filter li { font-family: "Lucida Grande", sans-serif; border-bottom: 1px dashed #cccccc; margin-bottom: 10px; font-size: 20px; font-variant: small-caps; letter-spacing: 1px; padding-bottom: 8px; padding-left: 0; padding-right: 0; list-style-type: none; }
ul#filter a { text-decoration: none; color: #919191; }
ul#filter a:hover { color: #57a9d1; }
ul#filter .current a { color: #57a9d1; }

/* detailed project page */
#prj_side { width: 150px; float: left; margin-right: 25px; font-size: 12px; line-height: 1.25em;  color: #ababab; }
#prj_side h5 { color: #494949; border-bottom: 1px dashed #cccccc; padding-bottom: 15px; }
#prj_side p {font-size: 12px; line-height: 1.25em; }
#prj_side ul li { list-style-type: square; margin-bottom: 3px; }
#prj_main { width: 375px; float: left; }

/* BLOG
========================================================================= */	
.head_search { position: relative; float: right; margin-top: -80px; }
.head_search input { height: 30px; border: none; border-bottom: 1px solid #cccccc; font-size: 14px; line-height: 30px; color: #494949; }
.head_search input#search_icn { cursor: pointer;  }
.head_search input#search_icn:hover { opacity: .8; }
.head_search input#search_icn:active { position: relative; bottom: -1px; }
.head_search #search_icn { background-image: url(../img/magn_icn.gif); width: 30px; height: 30px; text-indent: -999em; border: none; margin-left: 10px; }

.post { margin-bottom: 25px; float: left; }
.post p { margin-bottom: 0; }
.post .small_col { margin: 0 10px 10px 0; }
.post_thumb { height: 150px; }
	.post_thumb a { float: left; border-bottom: 2px solid #fff; overflow: hidden; }
	.post_thumb a:hover img { opacity: .9; border-bottom: 2px solid #57a9d1;  }
.post_content { width: 375px; float: right; margin-left: 15px; }

.post h3 { font-size: 14px; line-height: 16px; margin-bottom: 8px; margin-right: 35px; letter-spacing: 1px; text-transform: uppercase; }
	.post h3 a { text-decoration: none; color: #071012; }
	.post h3 a:hover { color: #777777; }
.comments_bubble { border-bottom: 1px dashed #cccccc; display: block; margin-bottom: 2px; text-decoration: none; color: #fff; font-size: 12px; font-weight: bold; font-style: italic; text-align: center; line-height: 30px; }
	.bubble_nr { float: right; background-image: url(../img/c_bubble.png); width: 30px; height: 30px; margin-top: -19px; }
	a.comments_bubble:hover .bubble_nr { opacity: .8; }
.post_meta { font-size: 12px; color: #b9b9b9; font-variant: small-caps; letter-spacing: 1px; margin-right: 35px; margin-bottom: 5px; }
	.post_meta a { color: #57a9d1; text-decoration: none; }
	.post_meta a:hover { text-decoration: underline; }
	.post_date { color: #777777; font-size: 12px; }
#blog_flag { background-image: url(../img/blog_flag.png); width: 30px; height: 77px; display: block; position: absolute; right: 25px; top: -25px; }

#page_nav { text-align: center; margin-bottom: 0; font: 12px "Lucida Grande", sans-serif; }
#page_nav li { display: inline; }
#page_nav li.current a { color: #57a9d1; }
#page_nav a { color: #7f7f7f; text-decoration: none; padding: 2px 5px; }
#page_nav a:hover { background-color: #eaeaea; }

#post_title { margin-bottom: 10px; }

/* comments */
#comment_list li { list-style: none; }
.comment { padding: 10px 10px 10px 0; }
	.comment.admin { background-color: #f2f2f2; }
.comment_leftcol { text-align: center; width: 88px; float: left; display: inline; }
	.avatar { background: #fff; border: 1px solid #cccccc; margin: 0 auto 15px; padding: 5px; clear: both; }
	a.reply { color: #494949; padding: 2px 6px; font-size: 13px; text-decoration: none; font-variant: small-caps; letter-spacing: 1px; }
		a.reply:hover { background-color: #e0e0e0; border-bottom: 1px solid #cacaca; text-shadow: #fff 0 1px 0; }
.comment_rightcol { border-left: 1px solid #d3d3d3; padding-left: 19px; display: inline; width: 430px; float: left; }	
	.comment_head p { margin-bottom: 10px; font-size: 12px; color: #8f8f8f; }
	.user { font-size: 14px; color: #484848; }

ul li .comment { margin-left: 50px; }
ul li .comment_rightcol { width: 380px; }

ul li ul li .comment { margin-left: 75px; }
ul li ul li .comment_rightcol { width: 355px; }

ul li ul li ul li { margin-left: 100px; }
ul li ul li ul li .comment_rightcol { width: 330px; }

ul li ul li ul li ul li { margin-left: 125px; }
ul li ul li ul li ul li .comment_rightcol { width: 305px; }

	
/* CONTACT
========================================================================= */	
.contact_form p { clear: both; float: left; }
.contact_form label { width: 110px; float: left; margin-right: 15px; text-align: right; letter-spacing: 1px; font-variant: small-caps; line-height: 26px; }
#name , #email, #message { width: 420px; float: right; border: none; padding-bottom: 5px; border-bottom: 1px dashed #cccccc; padding-top: 5px; margin-bottom: 15px; }
#message { background-color: #f4f4f4; border-bottom: none; max-width: 420px; }

#name.error, #email.error, #message.error { background-color: #ffe5e6; border-color: #cba2a4; }
label.error { display: none; }
label.error { color: #b10003; display: block; font-size: 12px; line-height: 1em; margin-bottom: 5px; }

#result { font-size: 16px; text-align: center; margin-bottom: 20px; margin-top: 20px; font-variant: small-caps; letter-spacing: 1px; }
#success { background-color: #c0febe; border-color: #87b386; color: #336532; }
#errors { background-color: #ffe5e6; border-color: #cba2a4; color: #8e0d0e; }

#map { border: 1px solid #cccccc; width: 300px; height: 250px; float: right; display: block; text-align: left; }

/* FOOTER
========================================================================= */	
#footer { background-image: url(../img/footer_back.gif); text-shadow: #fff 0 1px 0; }
	#footer p { font-size: 12px; line-height: 1.5em; }
#footer h1 { background-image: url(../img/logo_footer.png); width: 117px; height: 66px; text-indent: -999em; margin-right: auto; margin-left: auto; margin-top: 7px; }
#footer_border { background: url(../img/footer_top.gif) repeat-x; }
#footer .wrapper { padding-top: 25px; padding-bottom: 25px; }
#subnav { text-align: right; }
	#subnav a { font-variant: small-caps; text-decoration: none; color: #494949; letter-spacing: 1px; }
	#subnav a:hover { color: #57a9d1; }
#footer h3 { font-size: 16px; color: #292929; letter-spacing: 1px; text-transform: uppercase; }
.copy { font-variant: small-caps; letter-spacing: 1px; color: #656565; }
#footer dl { clear: both; float: left; }
#footer dt { text-align: right; width: 35px; float: left; clear: both; font-variant: small-caps; letter-spacing: 1px; color: #7f7f7f; }
#footer dd { float: left; margin-left: 10px; }

#footer .readmore { margin-left: 12px; }
#lastest_posts li { clear: both; float: left; }
#lastest_posts h5 { border-bottom: 1px dashed #b2b2b2; font-size: 14px; font-variant: small-caps; letter-spacing: 1px; color: #212121; margin-bottom: 8px; padding-bottom: 2px; }
	.postdate { vertical-align: bottom; color: #8c8c8c; font-size: 12px; }
	.postcontent { color: #848484; }

#f_lastworks li { float: left; width: 135px; margin: 0 10px 5px; }
#f_lastworks li a { text-decoration: none; color: #474747; border-bottom: 1px dashed #b2b2b2; padding-bottom: 3px; margin-bottom: 10px; font: small-caps 14px "Lucida Grande", sans-serif; float: left; }
#f_lastworks li a:hover { color: #57a9d1; }
#f_lastworks li a:hover img { border-bottom: 1px solid #57a9d1; }
#f_lastworks li img { border-bottom: 1px solid #fff; }