/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

html {
    background-color: #000000;
    /*height: 100%;*/
}

body {
    font-size: 62.5%;
}

#logo {
    display: block;
    position: absolute;
    top: 33px;
    left: 87px;
    background: url(../images/logo.png) 0 0 no-repeat;
    width: 199px;
    height: 77px;
    text-indent: -999em;
	z-index: 1000;
}

#logo:focus {
	outline: none;
	border: none;
}

#bg-image {
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	min-width: 970px;
    min-height: 664px;
	z-index: 10;
}

#menu-main {
	position: absolute;
	right: 89px;
	top: 0;
	height: 34px;
	overflow: visible;
    width: 510px;
	z-index: 200;
}

#menu-main > li {
	float: left;
	position: relative;
   	background: url(../images/bg-section.png);
    margin: 0 0 0 3px;
    padding: 0 15px 0 15px;
    height: 34px;
    overflow: hidden;
	z-index: 500;
}

#menu-main > li > a {
    font-weight: bold;
    display: block;
    font-size: 1.0em;
    color: #bbbbbb;
    text-decoration: none;
    text-transform: uppercase;
    width: 134px;
    height: 14px;
    line-height: 14px;
    padding: 10px 0 10px 0;
    text-indent: -999em;
	cursor: pointer;
}

#menu-main > li > a:hover {
	background-position: 0 -68px;
}

#menu-main > li > a.down, #menu-main > li > a.down:hover {
	background-position: 0 -34px;
}

#menu-main #button-about {
	background-image: url(../images/bg-menu-about.gif);
}

#menu-main #button-contact {
    background-image: url(../images/bg-menu-contact.gif);
}

#menu-main #button-portfolio {
    background-image: url(../images/bg-menu-portfolio.gif);
}

#menu-main > li > a:focus {
    border: none;
    outline: none;
}

.section {
    overflow: auto;
    width: 134px;
    padding: 55px 0 0 0;
    background: url(../images/bg-section-divider.png) 0 0 no-repeat;
}

.section h2 {
    background: url(../images/bg-section-divider.png) 0 0 no-repeat;
    padding: 10px 0 0 0;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #bbbbbb;
    font-weight: bold;
    letter-spacing: 0.15em;
}

.section p + h2 {
    margin-top: 25px;
}

.section p {
    color: #d7d6d6;
    font-size: 1.1em;
    font-style: italic;
    line-height: 17px;
    margin: 0 0 10px 0;
}

.section p.tel {
    font-size: 1.8em;
    color: #fff;
    font-style: normal;
    margin-top: 30px;
    font-family: 'Droid Serif', Arial, Helvetica, serif;
}

.section p.email {
	line-height: 14px;
}

.section p a {
    color: #fff;
}

.section-box-1 {
    min-height: 320px;
}

.std-menu, .std-menu-2 {
    color: #fff;
    font-style: italic;
}

.std-menu a, .std-menu-2 a {
    color: #fff;
    text-decoration: none;
}

.std-menu li, .std-menu-2 li {
    float: left;
    clear: both;
    font-size: 1.1em;
    margin: 0 0 10px 0;
	width: 134px;
}

.std-menu-2 li {
    margin: 0 0 5px 0;
}

.std-menu-2 a {
    text-decoration: underline;
}

.portfolio-menu {
    margin: 10px 0 20px 0;
}

.portfolio-menu li {
    font-size: 1.4em;
    font-family: 'Droid Serif', Arial, Helvetica, serif;
    margin: 0 0 15px 0;
}

.portfolio-menu li a {
    color: #fff;
    text-decoration: none;
}

h2#title-biography {
    background: url(../images/title-biography.png) 0 0 no-repeat;
    width: 132px;
    height: 18px;
    text-indent: -999em;
    overflow: hidden;
}

h2#title-clientsfeatured {
    background: url(../images/title-clientsfeatured.png) 0 0 no-repeat;
    width: 132px;
    height: 20px;
    text-indent: -999em;
    overflow: hidden;
}

h2#title-getintouch {
    background: url(../images/title-getintouch.png) 0 0 no-repeat;
    width: 121px;
    height: 18px;
    text-indent: -999em;
    overflow: hidden;
}

h2#title-followme {
    width: 132px;
    height: 18px;
    background: url(../images/title-followme.png) 0 0 no-repeat;
    text-indent: -999em;
    overflow: hidden;
}

h2#title-categories {
    width: 132px;
    height: 18px;
    background: url(../images/title-categories.png) 0 0 no-repeat;
    text-indent: -999em;
    overflow: hidden;
}

h2#title-projects {
    width: 132px;
    height: 18px;
    background: url(../images/title-projects.png) 0 0 no-repeat;
    text-indent: -999em;
    overflow: hidden;
}

/*
 root element for the scrollable.
 when scrolling occurs this element stays still.
 */
.scrollable {
    /* required settings */
    position: absolute;
    top: 164px;
    left: 0;
    overflow: hidden;
    height: 560px;
    width: 100%;
    z-index: 50;
}

/*
 root element for scrollable items. Must be absolutely positioned
 and it should have a extremely large width to accommodate scrollable items.
 it's enough that you set width and height for the root element and
 not for this element.
 */
.scrollable .items {
    /* this cannot be too large */
    width: 20000em;
    position: absolute;
    margin-left: 87px;
	z-index: 10;
}

/*
 a single item. must be floated in horizontal scrolling.
 typically, this element is the one that *you* will style
 the most.
 */
.items div {
    float: left;
    margin: 0 43px 0 0;
}

.items img {
	z-index: 0;
	opacity: 0.3;
}

.items div p {
	opacity: 0;
}

.items div.first,
.items div.first p {
	opacity: 1;
}

.prev, .next {
    position: absolute;
    display: block;
    width: 21px;
    height: 21px;
    top: 0;
    left: 55px;
    background: url(../images/bg-carousel-nav.png) 0 0 no-repeat;
    cursor: pointer;
    z-index: 100;
}

.prev {
    background-position: 0 0;
}

.prev:hover {
    background-position: -21px 0;
}

.next {
    top: 25px;
    background-position: -21px -22px;
}

.next:hover {
    background-position: 0 -22px;
}

.disabled, .disabled:hover {
	background: url(../images/bg-carousel-inactive.png) 0 0 no-repeat;
	cursor: default;
}

.scroll-link {
	display: block;
	position: relative;
    cursor: pointer;
	background: url(../image/ajax-loader.gif) 50% 50% no-repeat;
}

.scroll-link .loader-gif {
	position: absolute;
	top: 50%;
	left: 50%;
}

.items div p {
	margin-top: 15px;
	background: url(../images/bg-image-title.png) 0 0 no-repeat;
	height: 26px;
	min-width: 135px;
	color: #fff;
	padding: 15px 0 0 3px;
	font-size: 1.1em;
	font-style: italic;
}