/*   
Theme Name: MyTheme
Description: Vancan Design Studio Blog
Author: Van Tran
.
(c) Copyright Van Tran @ Vancan Design Studio.
.
*/
* {margin:0px; padding:0px;}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	text-align:center;
	background:#fff url('../images/bg_body.gif') repeat-x top left;
}

a {color:#3875a5; text-decoration:none;}
a:hover {color:#F78F1E; text-decoration:none;}
a:focus {outline:none;}

h1, h2, h3, h4, h5, h6 {color:#F78F1E; line-height:125%; font-weight:bold;}
h1 {font-size:42px; font-weight:lighter ;color:#F78F1E; line-height:100%; text-align:left; padding-left:200px; margin-bottom:35px; z-index:2; font-family:Georgia, "Times New Roman", Times, serif; text-transform:lowercase;}
h2 {font-size:26px; font-weight:normal; margin-bottom:12px;}
h3 {font-size:18px; font-weight:normal; margin-bottom:12px;}
h4 {font-size:12px; margin-bottom:12px;}
h5 {font-size:12px;}
h6 {font-size:12px; font-weight:normal; color:#555;}
p, ul, ol, blockquote {line-height:18px; margin-bottom:12px; display:block;}
ol, ul {margin-left:13px;}

img {border:none;}

/* request form */
.request {width:400px; padding:25px; text-align:left; display:none; background-color:#eee; position:relative;}
.request img {margin-bottom:5px;}
div.close {position:absolute; top:-17px; right:-17px;}
fieldset {width:465px; border:none;}
select, input, textarea {width:100%; border:1px solid #d5d5d5; margin-bottom:12px; color:#666; background-color:#fff;}
input:focus, textarea:focus {background-color:#fbfbfb; border-color:#aaa;}
textarea {height:100px;}
label {display:block; margin-bottom:2px;}
input.verification_code {width:100px; display:block;}
button {width:60px; padding:3px; margin-bottom:5px; background:none; background-color:#666; color:#fff; cursor:pointer; border:1px solid #999;}
button:hover {background-color:#333;}

sup {font-size:10px; line-height:8px;}
.float_right {float:right; margin-left:15px;}
.float_left {float:left; margin-right:15px;}
.clear_both {clear:both;}
.clear_right {clear:right;}
.clear_left {clear:left;}
.no_margin {margin:0px;}
span.cyan {color:#00AEF0;}
span.magenta {color:#ED008C;}
span.yellow {color:#ffe400;}
span.black {color:#000;}


/*layout
===============================================================*/
#wrapper {width:900px; margin:0 auto;}

#header {width:900px; height:165px; position:relative;}
#header #logo {
	position:absolute;
	top:57px;
	left:25px;
}
#header #main_nav {
	width:470px;
	position:absolute;
	top:0;
	left:188px;
	font-size:18px;
	color:#826A5A;
	text-align:left;
}
#header #main_nav li {border-left: 1px solid #efefef; padding:111px 50px 0 0; width:50px; float:left; list-style:none; text-transform:lowercase;}
#header #main_nav li a {padding:111px 50px 0 5px;}
#header #main_nav li.cyan {border-top:2px solid #3FF}
#header #main_nav li.magenta {border-top:2px solid #F0F;}
#header #main_nav li.yellow {border-top:2px solid #FF0;}
#header #main_nav li.black {border-top:2px solid #000;}
#header #main_nav li.cyan:hover {border-top:2px solid #3FF; background-color:#f1f1f1;}
#header #main_nav li.magenta:hover {border-top:2px solid #F0F; background-color:#f1f1f1;}
#header #main_nav li.yellow:hover {border-top:2px solid #FF0; background-color:#f1f1f1;}
#header #main_nav li.black:hover {border-top:2px solid #000; background-color:#f1f1f1;}
#subnav {width:200px; border-left: 1px solid #efefef; position:absolute; top:0; right:0; text-align:left;}
#subnav ul {margin:0 0 0 5px;}
#subnav ul li {border-bottom:1px solid #efefef; line-height:25px; list-style:none; text-transform:lowercase;}
#subnav ul li a {display:block; padding:0 5px;}
#subnav ul li a:hover {background-color:#f1f1f1;}
div.title {font-size:101px; color:#ecf2f7; text-align:left; position:absolute; top:152px; left:65px; z-index:-1; font-family:Georgia, "Times New Roman", Times, serif;;}

#content {width:900px; padding-bottom:50px;}

#left_column {width:165px; float:left; text-align:right; background-color:#fff;}
#left_column li {font-size:12px; text-transform:lowercase; list-style:none;}
#left_column li a {color:; cursor:;}
#left_column li a:hover {color:;}
#left_column h5 {border-top:px solid #cbd9e5; border-bottom:px solid #cbd9e5;}
#left_column .services {background-color:#fff;}
#left_column .contact h2 {font-size:30px; font-weight:lighter ;color:#F78F1E; line-height:100%; text-align:right; margin-bottom:35px; font-family:Georgia, "Times New Roman", Times, serif; text-transform:lowercase;}

#right_column {width:700px; float:right; text-align:left;}
#right_column #banner {height:282px; margin:0 0 12px 0; padding:3px 0 5px 0; position:relative; border-bottom:1px solid #ccc;}
#right_column .portfolio_desc {position:absolute; bottom:8px; right:0; text-align:right;}

#right_column .verbiage {float:left; width:465px;}
#right_column .sidebar {width:200px; float:right; padding-top:45px;}
#right_column .sidebar ul {margin:0 0 12px 0;}
#right_column .sidebar li {list-style:none; margin-bottom:12px;}
#right_column .sidebar h3 {margin-bottom:4px;}
#right_column .portfolio {background:#f1f1f1; border-left:1px solid #ccc; padding:25px 0 25px 5px; margin-bottom:35px;}
#right_column .portfolio span.portfolio_word {font-size:42px; font-weight:normal; line-height:100%; font-family:Georgia, "Times New Roman", Times, serif;}
#right_column .portfolio h2 {font-size:24px; font-weight:normal; margin-bottom:0px; line-height:100%; font-family:Georgia, "Times New Roman", Times, serif;}
#right_column .sidebar img.thumb {padding:0 0 0 10px; border-left:1px solid #cbd9e5; border-right:0px solid #cbd9e5; margin-bottom:18px;}
#right_column .two_columns {-webkit-column-count:2; -moz-column-count:2; -webkit-column-gap:35px; -moz-column-gap:35px;}

.testimonials {background-color:#efefef; margin-bottom:25px; padding:25px 75px; }
blockquote {position:relative; text-align:left;}
blockquote p {font-size:12px; text-align:left;}
blockquote .openquote {font-size:150px; color:#bbb; position:absolute; top:50px; left:-55px;}
blockquote .closequote {font-size:150px; color:#bbb; position:absolute; bottom:-30px; right:-55px;}

div.aboutme {margin-bottom:15px; float:right; width:392px}
div.aboutme img {float:left; margin:0 10px 10px 0; border:1px solid #fff; border:1px solid #ccc; cursor:pointer;}
div.aboutme img:hover {border:1px solid #F78F1E; cursor:pointer;}

#footer {padding:35px 0 5px 195px; margin-bottom:15px; text-align:left; clear:both; font-size:11px; background:url('../images/bg_footer_orange.gif') no-repeat top left;}

#vertical_line {position:absolute; top:0px; left:50px; width:1px; height:300px; background:url('../images/bg_verticalredline.gif') repeat-y top left; z-index:-2;}

/* == scrollable == */
.scrollable {position:relative; overflow:hidden; border:1px solid #ddd; width:698px; height:248px; float:left;}
.scrollable img {
	float:left; 
	padding:0px;
	cursor:pointer;
	width:700px;
	height:250px;
}
.scrollable img {margin:0px;}
div.scrollable:hover {border:1px solid #F78F1E;}
.scrollable .items {width:20000em;position:absolute;clear:both;}
.items div {float:left;width:700px;}
.scrollable .active {border:2px solid #000;position:relative;cursor:default;}


.items a {
	display:block;
	float:left;
	margin:0 1px 0 0;
}
.items a[title]:hover::popup {display:none}
/* position and dimensions of the navigator */
#scroll_control {position:absolute; left:0px; bottom:4px;}
.navi {
	float:left;
	bottom:8px;
	left: 340px;
	height:20px;
	margin:3px 5px 0 5px;
}
/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url('../images/navigator.png') 0 0 no-repeat;
	display:block;
	font-size:1px;
	cursor:pointer;
}

/* mouseover state */
.navi a:hover {background-position:0 -8px;}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url('../images/button_next_prev.png') no-repeat;
	width:20px;
	height:20px;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* right arrow */
a.right {background-position: -20px 0px;}
a.right:hover {background-position:-20px -20px; }
a.right:active {background-position:-20px -40px; } 

/* left arrow */
a.left {background-position: 0px 0px;}
a.left:hover {background-position:0px -20px; }
a.left:active {background-position:0px -40px; }

/* disabled navigational button */
a.disabled {visibility:hidden !important;}
#gallery .disabled {visibility:visible !important;}
#gallery .inactive {visibility:hidden !important;}

/*== Gallery Overlay == */
.simple_overlay { 
    display:none; 
    background-color:#000;
    padding:20px;   
	z-index:99;
	color:#333;
	text-align:left;
	margin:auto 0px;
	position:relative;
} 
.simple_overlay img {margin-bottom:10px; border:1px solid #444; display:block;}
.group img {float:left; margin-right:15px;}
.simple_overlay p {width:700px; text-align:left; color:#ccc; margin-bottom:5px;}
.simple_overlay h2, .simple_overlay h3, .simple_overlay h4, .simple_overlay h5 {color:#ccc; margin-bottom:5px;}
.
img[rel] {cursor:pointer;}

.simple_overlay .close { 
    background-image:url('../images/close.png'); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

.next, .prev {
	position:absolute;
	top:45%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:5px 10px;
	color:#fff;
	font-size:12px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
	color:#fff;
}

/* when there is no next or previous link available this class is added */
.disabled {visibility:hidden;}

/* the "information box" */
.info {
	position:absolute;
	bottom:11px;
	left:13px;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
	visibility:inherit; /*set this to hidden to hide info bar */
}

.info strong {display:block;}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

.next, .prev, .info {background-color:#333; -ms-filter:“progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; filter:alpha(opacity=60); -moz-opacity: 0.60;-khtml-opacity: 0.60; opacity: 0.60;}

/* === tabs === */
ul.tabs { 
	list-style:none; 
	margin:0 0 25px 0 !important; 
	padding:0;	
	border-bottom:1px solid #ccc;	
	height:30px;
}

ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important;
	border-left:1px solid #efefef;
}
ul.tabs li.first {line-height:30px; border:none; font-weight:bold; padding-right:25px;}

ul.tabs a { 
	display:block;
	height: 30px;  
	line-height:30px;
	padding:0 25px 0 5px;
	margin:0px;
}

ul.tabs a:active {}
ul.tabs a:hover {}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-color:#efefef;		
	cursor:default !important; 
	color:#333 !important;
}

.panes .pane {display:none;	}
.panes .left img, .panes .right img {border:1px solid #ddd; background-color:#efefef; padding:4px; margin-bottom:20px; cursor:pointer; width:330px; height:180px;}
.panes .left img:hover, .panes .right img:hover {border:1px solid #F78F1E;}
.left {width:340px; float:left;}
.right {width:340px; float:right;}

/* form error message */
.error {
	height:15px;
	background-color:#FFFE36;
	font-size:11px;
	border:1px solid #E1E16D;
	padding:4px 10px;
	color:#000;
	margin-left:-2px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px; 
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-topleft:0;	
	-webkit-border-bottom-left-radius:0; 
	-webkit-border-top-left-radius:0;
	
	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;	
}