@charset "utf-8";

/*
Theme Name: tweestudio
Theme URI: http://www.tweestudio.com/
Description: Custom theme designed for tweestudio
Version: 1.0
Author: Thuy Le
Author URI: http://www.tweestudio.com/
Tags: custom

	This theme was design & coded by Thuy Le
	
*/

* { margin : 0 auto; padding : 0; }

html {
	background: url(images/bk-tile-25.png) #111 top center;
	height: 100%;
	}

body {
	height: 100%;
	}
	
ul, li { 
	list-style: none; 
	}

#container {
	min-height: 100%;
	position: relative;
	width: 100%;
	}

*html #container {
	height: 100%;
	}

/*------------------------------------------------------------------
                       HEADER LINKS (GLOBAL)
------------------------------------------------------------------*/

#header-top {
	border-top: #790000 solid 20px;
	}

#header-outer {
	background: url(images/bk-tile-50.png) top center;
	border-bottom: #cbcbcb solid 1px;
	border-top: #111 solid 10px;
	height: 198px;
	width: 100%;
	}

#header {
	background: url(images/bk-header.png) no-repeat 0px 0px;
	height: 198px;
	}

#header, #footer, #content, #footer-top {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 1200px;
	}	

#logo {
	background: url(images/header-logo.png) no-repeat 0px 0px; 
	float: right;
	height: 58px;
	position: relative;
	right: 136px;
	top: 42px;
	width: 388px;
	}

#logohomelink { 
	height: 58px; 
	left: 0px;
	overflow: hidden;
	position: absolute; 
	text-decoration: none; 
	text-indent: -9999px; 
	top: 0px;
	width: 388px;
	z-index: 99; 
	}	
	
#menu-global {
	float: right;
	left: 187px;
	position: relative;
	top: 130px;
	width: 247px;	
	}
	
#menu-global li, #menu-nextprev li, #menu-copyright li  {
	display: inline;
	}
	
#menu-global a, #menu-nextprev a, #menu-copyright a {
	display: block;
	outline: none;
	position: absolute;
	text-indent: -9999px;
	}

#menu-global .blog {
	background: url(images/nav-blog.png) no-repeat;
	float: left;
	height: 71px;
	position: relative;
	width: 86px;
	}
	
#menu-global .folio {
	background: url(images/nav-folio.png) no-repeat;
	float: left;
	height: 71px;
	position: relative;
	right: 1px;
	width: 86px;
	}

#menu-global .about {
	background: url(images/nav-about.png) no-repeat;
	float: left;
	height: 71px;
	position: relative;
	right: 2px;
	width: 98px;
	}

#menu-global .bio {
	background: url(images/nav-bio.png) no-repeat;
	float: left;
	height: 71px;
	position: relative;
	right: 2px;
	width: 75px;
	}

body.category-blog #menu-blog a, body.category-folio #menu-folio a, body.category-about #menu-about a, body.category-bio #menu-bio a, #menu-global a:hover, #footer-top a:hover {
	background-position: left bottom;
	}

/*------------------------------------------------------------------
                       MAIN CONTENT
------------------------------------------------------------------*/

#content-outer {
	padding-bottom: 100px;
	width: 100%;	
	}

h1 {
	background-color: #111;
	border-bottom: solid 1px #cbcbcb;
	color: #cbcbcb;
	font-size: 48px;
	padding: 30px 0px;
	text-align: center;
	}

h2 {
	color: #cbcbcb;
	font-size: 24px;
	}

#content {
	overflow: hidden;
	position: relative;
	width: 1200px;
	margin: 0 auto;
	} 
	
#content p {
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	padding-bottom: 1.2em;
	text-transform: normal;
	}

.post-text h1 {
	background: none;
	border-bottom: none;
	color: #cbcbcb;
	font-size: 36px;
	padding: 0px 0px;
	text-align: left;	
	}

#portrait {
	float: left;
	margin: 0px 33px 20px 0px;
	position: relative;
	}

#collection {
	background-color: #555;
	padding: 5px 20px;
	}

/* Content (COLUMN LEFT + RIGHT)
------------------------------------------------------*/

#column-left, #column-left-800horizontal, #column-left-800vertical, #column-left-sub1200, #column-right, #column-right-400, #column-right-sub400 {
	margin-bottom: -1000px;	
	padding-bottom: 1000px;
	position: relative;	
	}

#column-left {
	float: left;	
	padding-top: 50px;
	width: 606px;
	}

#column-left-800horizontal {
	float: left;	
	margin-top: 50px;
	width: 806px;
	}

#column-left-800vertical {
	float: left;	
	background: url(images/dot-grey.gif) repeat-y 779px 220px;
	margin-top: 50px;
	width: 806px;
	}

#column-left-1200 {
	margin-top: 50px;
	position: relative;
	width: 1200px;
	}

#column-left-sub1200 {
	float: left;	
	background: url(images/dot-grey.gif) repeat-y 779px 220px;
	width: 806px;
	top: -6px;
	}

#column-left img[src$="001.jpg"], #column-left img[src$="001.gif"], #column-left-800horizontal img[src$="001.jpg"], #column-left-800vertical img[src$="001.jpg"],#column-left-1200 img[src$="001.jpg"], #portrait {
	border: solid 3px #fff;
	}

#column-right {
	float: right;
	padding-top: 100px;
	width: 594px;
	}

#column-right-bio {
	float: right;
	padding-top: 100px;
	width: 560px;
	}

#column-right-400 {
	float: right;
	padding-top: 100px;
	width: 394px;
	}

#column-right-sub400 {
	float: right;
	padding-top: 50px;
	width: 394px;
	}

#column-right p:first-child, #column-right-400 p:first-child, #column-right-sub400 p:first-child {
	font-size: 27px;
	line-height: 1.2em;
	margin-left: 34px;
	position: relative;
	}

#column-right p, #column-right-400 p, #column-right-sub400 p {
	margin-left: 34px;
	position: relative;
	}

#column-right-bio p {
	position: relative;	
	}

#column-right-bio p:first-child {
	font-size: 27px;
	line-height: 1.2em;
	position: relative;
	}

/* Content (Home)
------------------------------------------------------*/

#home {
	width: 100%;
	height: 900px;
	}

#content p#text-intro {
	color: #ccc;
	font-size: 48px;
	height: 140px;
	left: 373px;
	line-height: .8em;
	position: relative;
	top: 267px;
	width: 700px;
	}

#text-intro span {
	color: #fff;
	}

#text-intro i {
	font-size: 60px;
	font-style: normal;
	}

.post-home {
	float: right;
	height: 22px;
	position: relative;
	right: 50px;
	top: 223px;
	width: 827px;
	}

.post-home a {
	float: right;
	margin: 0px 7px;
	position: relative;
	top: -14px;
	}

.post-home img {
	float: right;
	position: relative;
	}

/* Content (Category Page - BLOG / FOLIO)
------------------------------------------------------*/

#post-list {
	float: right;
	position: relative;
	width: 832px;
	}

#post-list-folio {
	float: right;
	position: relative;
	width: 560px;
	}

#post-list p, #post-list-folio p {
	margin-left: 0px;
	}

#post-list img {
	float: left;
	margin-right: 30px;
	margin-top: 7px;
	position: relative;
	}

#portrait ~ p {
	color: #cbcbcb;
	}

/* Content (Menu Post Navigation)
------------------------------------------------------*/

#menu-navigation {
	border-top: solid 1px #cbcbcb;
	position: relative;
	width: 594px;
	}

#menu-navigation-blog {
	border-top: solid 1px #cbcbcb;
	position: relative;
	width: 1200px;
	}

#menu-navigation-folio-800horizontal {
	border-top: solid 1px #cbcbcb;
	position: relative;
	width: 394px;
	}

#menu-navigation-folio-800vertical {
	float: right;
	position: relative;
	right: 27px;
	padding-top: 50px;
	}

#menu-next {
	border-left: solid 1px #cbcbcb;
	border-right: solid 1px #cbcbcb;	
	float: right;
	height: 28px;
	position: relative;
	right: 202px;
	width: 84px;
	}

#menu-prev {
	border-right: solid 1px #cbcbcb;
	float: right;
	height: 28px;
	position: relative;
	right: 203px;
	width: 84px;
	}

#menu-vertical-next {
	border-top: solid 1px #cbcbcb;
	height: 28px;
	position: relative;
	width: 84px;
	}

#menu-vertical-prev {
	height: 28px;
	position: relative;
	top: -10px;
	width: 84px;
	}

/*------------------------------------------------------------------
                       FOOTER
------------------------------------------------------------------*/

#footer-outer {
	height: 44px;
	position: relative;
	margin-top: -44px;
	width: 100%;
	}

#footer-top {
	height: 33px;
	}

#menu-copyright {
	float: right;
	right: 185px;
	position: relative;
	}
	
#menu-copyright .contact {
	background: url(images/nav-contact.png) no-repeat;
	float: left;
	height: 33px;
	position: relative;
	width: 375px;
	}

#footer {
	background-color: #790000;
	border-top: solid 1px #cbcbcb;
	height: 10px;
	}
	
/*------------------------------------------------------------------
                       CLEARING METHOD
------------------------------------------------------------------*/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
	}

.clearfix {
    display: inline-block;
	}

html[xmlns] .clearfix {
    display: block;
	}

* html .clearfix {
    height: 1%;
	}

/*------------------------------------------------------------------
                       SLIDING PANEL
------------------------------------------------------------------*/

* {
	-moz-outline:none;
	outline:0;
	outline:none;
	}

.SlidingPanels {
	position: relative;
	width: 498px;
	height: 122px;
	padding: 0px;
	float:left;
	}
.SlidingPanelsContentGroup {
	position: relative;
	width:10000px;
	height: 126px;
	margin: 0px;
	padding: 0px;
	float:left;
	}
.SlidingPanelsContent {
	width: 498px;
	height: 122px;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	float:left;
	}

#pdetails {
	border-right: solid 1px #cbcbcb;
	float: left;
	padding-top: 6px;
	width: 579px;
	}

#pimage {
	height: 456px;
	width: 606px;
	}
	
#pimage img {
	border: 3px solid #FFF;
	}
	
.morepics a img {
	border: 3px solid #FFF;
	margin-right: 2px;
	}

.morepics a:hover img {
	border: 3px solid #00bff3;
	margin-right: 2px;
	}
	
#arrow-left {
	background: url(/images/arrow-left.png) no-repeat;
	float: left;
	height: 120px;
	position: relative;
	text-indent: -9999px;
	width: 28px;
	}

#arrow-right {
	background: url(/images/arrow-right.png) no-repeat;
	float: left;
	height: 120px;
	position: relative;
	text-indent: -9999px;
	width: 22px;	
	}

/*------------------------------------------------------------------
                       ALL LINKS STYLING
------------------------------------------------------------------*/

#column-right p a:link, .post-text p a:link {
	color: #d55b00;
	text-decoration: none;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	padding-bottom: 1.2em;
	text-transform: normal;	
	}
	
#column-right p a:visited, .post-text p a:visited {
	color: #d55b00;
	text-decoration: none;
	}
	
#column-right p a:hover, .post-text p a:hover {
	color: #00bff3;
	text-decoration: none;	
	}
	
.post-text h1 a:link, .post-home a:link {
	color: #d55b00;	
	font-size: 32px;
	text-decoration: none;
	-webkit-transition: color .25s linear .1s;
	transition: color .25s linear .1s;
	}

.post-text h1 a:visited, .post-home a:visited {
	color: #d55b00;	
	font-size: 32px;
	text-decoration: none;
	-webkit-transition: color .25s linear .1s;
	transition: color .25s linear .1s;
	}

.post-text h1 a:hover, .post-home a:hover {
	color: #00bff3;
	font-size: 32px;
	text-decoration: none;
	-webkit-transition: color .25s linear;
	transition: color .25s linear;
	}

h1 a:link {
	color: #444;
	text-decoration: none;
	}

h1 a:visited {
	color: #444;
	text-decoration: none;
	}

h1 a:hover {
	color: #00bff3;
	text-decoration: none;
	}
	
#post-list a:link img {
	border: solid 3px #fff;	
	}
	
#post-list a:hover img {
	border: solid 3px #00bff3;	
	}