/* White style */

/* import reset css */
@import "reset.css";
/* import fontface css */
@import "../fonts/fontface.css";
/* import framework */
@import "framework.css";
/* import fancybox css */
@import "fancybox/jquery.fancybox-1.3.1.css";

html { color: #003594; font: normal 100%/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #000; }
body { text-align: left; background: #fff url(../img/body-back.png) repeat-x; }

/* TYPOGRAPHY
========================================================================= */
/* fontface */
.ffthin { font-family: 'TitilliumText22LThin', Arial, sans-serif; }
.ffmedium { font-family: 'TitilliumText22LMedium', Arial, sans-serif; }
.ffbold { font-family: 'TitilliumText22LBold', Arial, sans-serif; }
.ffxbold { font-family: 'TitilliumText22LXBold', Arial, sans-serif; }

hr { display: none; }
.smallcaps { font-variant: small-caps; letter-spacing: 1px; }
.uppercase { text-transform: uppercase; }

h1 { font-size: 26px; }
h2 { font-size: 24px; text-transform: uppercase; line-height: 1.5em; }
h3 { font-size: 18px; text-transform: uppercase; }
h4 { font-size: 16px; }
	.sidebar h4 { padding: 0 20px; text-transform: uppercase; letter-spacing: 1px; color: #333; font: 18px 'TitilliumText22LBold', Arial, sans-serif; }
h5 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }

h1, h2, h3, h4, h5, #services dt, .back { font-family: 'TitilliumText22LRegular', Arial, sans-serif; color: #000; }

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

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; overflow: hidden; }
ins { background-color: #fdfe7c; margin: 0 2px; padding: 2px 5px; }

table { width: 100%; }
caption { font-family: 'TitilliumText22LMedium', Arial, sans-serif; text-align: center; background-color: #eaeaea; padding: 15px 5px; text-transform: uppercase; line-height: 16px; font-size: 16px; }
th { height: 1.5em; padding: 5px 10px; background-color: #000; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-family: 'TitilliumText22LThin', Arial, sans-serif; }
tr { border-bottom: 1px solid #003594; line-height: 13px; font-size: 13px; }
tr:nth-child(2n) { background-color: #f6f6f6; }
tr:hover { background-color: #eaeaea; }
td { height: 1em; padding: 10px; }
		
a { color: #003594; }
	a:hover { text-decoration: none; color: #000; }

strong { font-weight: bold; color: #071012; }
ul li { list-style-position: inside; }
	ul.list li { list-style-type: disc; }
ol li { list-style: decimal; list-style-position: inside; }
li { margin-bottom: .4em; }
		
/* BIG SLIDER
========================================================================= */
#slideshow { margin-bottom: 30px; position: relative; float: left; }
#slide-a, #slide-b, #slide-c { float: left; width: 320px; height: 425px; overflow: hidden; }
#slides span { position: absolute; padding: 5px 20px; max-width: 230px; font-weight: normal; font-style: normal; left: 10px; bottom: 190px; background: url(../img/black70.png) repeat; color: #fff; }
#slides span a:hover { color: #fff; }

/* custom slider */
#new-slider { position: relative; margin-bottom: 0; }
#new-slider li { position: relative; float: left; height: 425px; width: 960px; overflow: hidden;}
.popup { max-width: 175px; position: absolute; z-index: 99; display: block; bottom: 20px; right: 20px; background-image: url(../img/black70.png); color: #fff; padding: 6px 20px; font-family: 'TitilliumText22LThin', Arial, sans-serif; }
.popup a { color: #fff; }

/* coin slider */
.cs-buttons, #nav { position: absolute; background-color: #fff; font-size: 0; line-height: 0; padding: 5px 4px 5px 10px; z-index: 1000; float: left; margin-left: 10px; bottom: 10px; }
.cs-buttons a, #nav a { text-indent: -999em; background-color: #ccc; width: 8px; height: 8px; margin-right: 6px; float: left; }
a.cs-active, #nav a.activeSlide { background-color: #CD0507; }
.cs-buttons a:hover { background-color: #000; }
.cs-prev, .cs-next { display: none; }

/* round corner css3 */
.cs-buttons a, #nav a { 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/* IMAGES
========================================================================= */
.small-img { margin-bottom: 20px; }
.big-img { margin-bottom: 30px; }
.preload.left { margin-right: 20px; }
.preload.right { margin-left: 20px; }

.preload, .thumb, #slideshow li { background: url(../img/loader.gif) no-repeat center center; display: block; }

/* PAGE COMMONS
========================================================================= */
.heading { font-size: 42px; margin-bottom: -15px; }
.sub-head { font-size: 14px; color: #999; margin-bottom: 30px; text-align: left; }

.red { color: #CD0507; }

ul.sidelist li { font-size: 12px; }
	ul.sidelist li a { padding: 10px 20px; text-decoration: none; color: #333;  display: block; }
	ul.sidelist li a:hover { background-color: #CD0507; color: #fff; }	

#footer ul { font-size: 12px; }
#footer li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dashed #3b3b3b; }
#footer li a { text-decoration: none; }	
	#footer li a:hover { color: #fff; text-decoration: underline; }	
	
a.back { text-indent: -999em; background: url(../img/backbtn.png) no-repeat left top; padding-left: 10px; text-transform: uppercase; float: right; height: 10px; width: 43px; margin-top: 10px; }
a.back:hover { background-position: 0 bottom; }
	
a.gotop { display: block; text-align: right; font-size: 12px; text-decoration: none; text-transform: uppercase; color: #999; border-bottom: 1px solid #d8d8d8; margin-bottom: 20px; margin-top: 20px; }
a.gotop span { background: url(../img/top-arrow.png) no-repeat right 5px; padding-right: 16px; height: 17px; margin-right: 5px; }		
a.gotop:hover { color: #CD0507; background-color: #f2f2f2; }
	a.gotop:hover span { background-position: right -5px; }	

/* twitter bar */
.twitted p.preLoader { background: transparent url("../img/loader.gif") no-repeat right center; margin-left: 20px; margin-right: 20px;}
#twitter_update_list { overflow: hidden; color: #666; font-size: 14px;}
#twitter_update_list li { list-style-type: none; }
	.sidebar #twitter_update_list li { padding: 0 20px 14px; color: #424242; text-shadow: 0 1px 0 #fff; }
	
#twitter_update_list li span { display: block; font-size: 12px; background-color: #ebebeb; padding: 14px 20px; }
	.sidebar #twitter_update_list li span { background-color: transparent; padding: 0; }
		
#twitter_update_list li span a { font-variant: normal; background-image: none; color: #333; float: none; padding: 0; margin: 0 5px 0 0; }
#twitter_update_list a { text-decoration: none; background: url(../img/tweet-arrow.png) no-repeat right bottom; padding-right: 45px; padding-top: 5px; color: #666; margin-right: 20px; float: right; }

	.sidebar #twitter_update_list li a { background: transparent; float: left; margin-top: 10px; width: 175px; margin-right: 0; text-align: left; padding-right: 0; border-top: 1px dashed #ccc; margin-bottom: 20px; }
	.sidebar #twitter_update_list li span a { float: none; margin-right: 5px; border-top: none; }

#twitter_update_list li a:hover { color: #CD0507; text-decoration: underline; }

/* testimonials bar */
#testimonials { line-height: 1.25em; }
	#testimonials li { margin-bottom: 30px; background: url(../img/quote.png) no-repeat 10px 0; padding-left: 20px; padding-right: 20px; text-shadow: 0 1px 0 #fff; }		
	.test_msg { margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; }	
	.test_name { font-variant: small-caps; text-decoration: none; letter-spacing: 1px; font-weight: bold; }

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

.divider { display: block; height: 1px; background-color: #ccc; margin: 40px 20px; }

/* Overlay */
.overlay { position: absolute; background: rgba(255,255,255,0.5) url(../img/zoom.png) no-repeat center center; z-index: 100; display: block; float: left; }
/* Overlay for IE */
.overlayIE { float: left; position: absolute; background: #fff url(../img/zoom.png) no-repeat center center; z-index: 100; display: block; }

.now {}

/* BUTTONS
========================================================================= */
.btn-red { background-color: #CD0507; }
.btn-black { background-color: #393939; }
.small { font-size: 10px; letter-spacing: 1px; padding: 3px 9px 0; }
.big { font-size: 18px; padding: 12px 30px 8px; }
a.btn { text-decoration: none; color: #fff; text-transform: uppercase; float: right; margin-top: 12px; }
#slogan a.btn { margin-top: 0; }
a.btn.left { float: left; }
a.btn:hover { background-color: #000; }
a.btn:active { background-color: #333; }

/* HOME PAGE
========================================================================= */
		
/* HEADER */
#header { height: 80px; position: absolute; width: 960px;  color: #fff; z-index: 99; background-image: url(../img/black70.png); top: 20px; }
#header-alt { height: 80px; width: 960px;  color: #fff; top: 20px; padding-top: 20px; padding-bottom: 70px; }
	#header-alt.w-sidebar { background: url(../img/alt-back.png) repeat-y left; }
#black-fill { float: left; background-color: #000; width: 960px; }
#header h1, #header-alt h1 {
	color: #fff;
	width: 350px;
	float: left;
	height: 80px;
	text-indent: -999em;
	margin-bottom: 0;
	margin-top: 0px;
	margin-left: 10px;
	background: url(../img/logo.png) no-repeat;
}
#header h1 a, #header-alt h1 a { float: left; width: 147px; height: 42px; }
#header h1:hover, #header-alt h1:hover { opacity: .8; }

/* NAV SECTION */
#main-nav { margin-right: 20px; height: 80px; margin-bottom: 0; }
#main-nav li { display: inline; text-shadow: #000 0 1px 0; float: left; padding-left: 10px; }
#main-nav li a { color: #fff; text-decoration: none; text-transform: capitalize; font-size: 14px; overflow: hidden; float: left; padding: 30px 14px; height: 20px; }
#main-nav li a:hover { background-color: #CD0507; }
#main-nav li a.selected { background-color: #CD0507; }

#slogan { width: 920px; color: #fff; padding: 20px; background: url(../img/black70.png) repeat; left: 630px; right: 10px; float: left; margin-bottom: 40px; }
#slogan p { width: 685px; font-size: 28px; line-height: 1.5em; text-transform: uppercase; float: left; margin-bottom: 0; margin-right: 20px; }

div#services {  }
#services ul { margin-bottom: 30px; }
#services li { font-size: 16px; line-height: 1.75em; list-style-image: url(../img/small-arrow.png); list-style-position: outside; }

#middle { background-color: #cacaca; margin-top: 40px; margin-bottom: 30px; padding-top: 20px; padding-bottom: 20px; color: #666; }

dl#contact { font-size: 12px; }
#contact dt { font-weight: bold; padding-right: 10px; float: left; }
#contact dd { }

/* lastest works */
.lasth4-padd { padding-left: 50px; }

#lastest-works { float: left; overflow: hidden; width: 360px; height: 150px; }
#lastest-works li { display: inline; margin-bottom: 0; }
#lastest-works a { float: left; width: 110px; height: 150px; overflow: hidden; margin-right: 10px; }
#lastest-works a span { width: 110px; height: 150px; }

#arr-prev { text-indent: -999em; width: 20px; height: 90px; display: block; background: url(../img/last-arr-left.png) 0 top; overflow: hidden; float: left; margin-top: 29px; margin-right: 15px; margin-left: 15px; }
	#arr-prev:hover { background-position: 0 bottom; }
#arr-next { text-indent: -999em; width: 20px; height: 90px; display: block; background: url(../img/last-arr-right.png) 0 top; overflow: hidden; float: left; margin-left: 5px; margin-top: 29px; }
	#arr-next:hover { background-position: 0 bottom; }


/* ABOUT
========================================================================= */	
#content { padding-bottom: 30px; }
#content.w-sidebar { background: url(../img/alt-back.png) repeat-y left; }

/* SERVICES
========================================================================= */	
dl#services { margin-top: 40px; }
#services dt { text-transform: uppercase; font-size: 22px; margin-bottom: 20px; }
#services dt img { margin-right: 40px; float: left; }
#services dd { margin-left: 72px; margin-bottom: 40px; font-size: 12px; }

/* PORTFOLIO
========================================================================= */
#worklist { float: left; }	
#worklist li { float: left; margin-bottom: 28px; margin-right: 20px; position: relative; width: 215px; height: 200px; }
#worklist li a.thumb { display: block; border-bottom: 2px solid #fff; overflow: hidden; }
	#worklist li a.thumb:hover { border-bottom: 2px solid #000;}
#worklist li h4 { background: #CD0507; display: block; float: left; margin-left: 10px; z-index: 101; position: absolute; max-width: 195px; bottom: -32px; }
#worklist li h4 a { text-decoration: none; color: #fff; font-size: 15px; text-transform: capitalize; padding: 6px 10px 2px; float: left; margin-top: 0; position: relative; z-index: 100; overflow: hidden; }
	#worklist li h4 a:hover { background-color: #000; }
#filter h4 { color: #999; text-shadow: 0 1px 0 #fff; }
#filter li { letter-spacing: 1px; margin-bottom: 0;  }
#filter li.current a { color: #CD0507; padding-left: 18px; border-left: 2px solid #CD0507; }
#filter li.current a:hover { color: #fff; }
#worklist span { width: 215px; height: 200px; }

	
/* PRJ PAGE */
p.sub-head em { color: #CD0507; font-style: normal; }
#prj-slide {  }
#prj-desc { float: right; margin-right: 20px; top: -40px; padding-top: 10px; padding-bottom: 10px; background-image: url(../img/black70.png); color: #fff; font-size: 12px; }
#prj-desc h5 { color: #fff; }
#prj-desc ul li { list-style-type: disc; }
#prj-desc a { color: #fff; }
#prj-desc a:hover { color: #cacaca; text-decoration: none; }

#prj-content { float: left; margin-top: 40px; }

/* BLOG
========================================================================= */	
#head-search { margin-top: 10px; font-size: 12px; float: right; }
#head-search form { float: right; }
input#field { width: 143px; border: 1px solid #cacaca; padding: 5px; float: left; }
input#search-icn { width: 25px; height: 25px; border: none; text-indent: -999em; background: transparent url(../img/find.png) no-repeat left top; cursor: pointer; margin-left: 10px; line-height: 0; }
input#search-icn:hover { background-position: 0 bottom; }
input#search-icn:active { position: relative; bottom: -1px; }

.post { width: 100%; float: left; }
.post-content { border-bottom: 1px solid #999; margin-bottom: 2em; padding-bottom: 25px; position: relative; width: 100%; display: block; float: left; }

.content a.thumb { margin-right: 20px; float: left; }
.content a.thumb span { width: 150px; height: 150px; }

.content { width: 100%; float: left; display: block; }

.post-meta { background: #f3f3f3 url(../img/meta-back.png) no-repeat right top; position: absolute; bottom: 25px; right: 0; padding-top: 10px; padding-bottom: 10px; }
.post-meta p { margin-bottom: 0; color: #999; padding-right: 10px; padding-left: 10px; }
.post-meta em { color: #333; font-weight: normal; font-style: normal; }

.post-head { margin-bottom: 20px; float: left; position: relative; width: 100%; }
.post-head h3 { font: bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 0; float: left; }
.post-head h3 a { text-decoration: none; color: #000; }
.post-head h3 a:hover { color: #CD0507;  }

.post-excerpt { margin-bottom: 5px; display: inline; }

a.comments-bubble { background: url(../img/bubble-bottom.png) no-repeat right bottom; margin-top: -5px; display: block; padding-bottom: 9px; position: relative; float: right; text-decoration: none; }
a.comments-bubble .bubble-nr { color: #fff; text-decoration: none; background: #000 no-repeat; padding: 5px 10px; font-size: 12px; }
a.comments-bubble:hover span { background-color: #CD0507; }
a.comments-bubble:hover { background: url(../img/bubble-bottomh.png) no-repeat right bottom; }

#page-nav { text-align: left; margin-bottom: 0; font-size: 12px; }
#page-nav li { display: inline; }
#page-nav li.current a { background-color: #CD0507; }
#page-nav a { color: #fff; text-decoration: none; background-color: #000; padding: 5px 10px; margin-right: 5px; }
#page-nav a:hover { background-color: #CD0507; }

a.readmore { color: #CD0507; text-decoration: none; font-size: 12px; font-weight: bold; text-transform: capitalize; margin-left: 15px; }
a.readmore:hover { text-decoration: underline; color: #000; }

/* comments */
#comment_list { margin-bottom: 0; }
#comment_list li { list-style: none; float: left; display: inline; margin-bottom: 10px; }
.comment { padding: 10px 10px 10px 0; margin-right: 40px; }
	.comment.admin { background-color: #f2f2f2; display: block; float: left; }
.comment_leftcol { text-align: center; width: 85px; 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 3px; font-size: 13px; text-decoration: none; font-variant: small-caps; letter-spacing: 1px; display: inline; }
		a.reply:hover { color: #fff; background-color: #000; }
.comment_rightcol { border-left: 1px solid #d3d3d3; padding-left: 19px; display: inline; width: 530px; 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: 480px; }

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

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

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

	
/* CONTACT
========================================================================= */	
#map { width: 450px; height: 280px; background-color: #eaeaea; float: right; }
.contact-form { margin-top: 40px; padding: 20px 0; background: #E6E6E6 url(../img/meta-back.png) no-repeat right top; }
.contact-form label { margin-bottom: 5px; font-size: 14px; text-transform: capitalize; color: #999;}
.contact-form h3 { text-transform: uppercase; margin-left: 20px; }
.contact-form p { float: left; clear: right; margin-left: 20px; }
.contact-form input { width: 195px; padding: 10px; border: none; }
.contact-form textarea { width: 390px; max-width: 410px; padding: 10px; border: none; }
.contact-form label { display: block; }
.submit { color: #fff; text-transform: uppercase; margin-top: 10px; float: right; margin-right: 20px; }
.submit:hover { background-color: #000; cursor: pointer; }
.submit:active { background-color: #333; position: relative; bottom: -1px; }
label.error { color: #CD0507; font-size: 12px; position: absolute; }
.required.error { border-bottom: 1px dashed #CD0507; }

/* FOOTER
========================================================================= */	
#footer h4 { text-shadow: 0 -1px 0 #000; }

#footer { background-image: url(../img/black70.png); padding-top: 20px; border-top: 1px solid #000; }
#footer p, #footer a { color: #bfbfbf; }
#footer h4 { color: #fff; text-transform: none; }
#footer-nav li { display: inline; }
#footer-nav li a { color: #999; float: left; text-decoration: none; text-transform: capitalize; margin-right: 10px; margin-left: 10px; letter-spacing: 1px; font-size: 12px; overflow: hidden; }
#footer-nav li a.selected { color: #fff; }
#footer-nav li a:hover { border-bottom: 1px solid #fff; color: #fff; text-decoration: none; }
#bottomline { background-color: #000; padding-top: 20px; padding-bottom: 10px; margin-top: 20px; }
#bottomline .copy { color: #999; font-size: 10px; letter-spacing: 1px; }