html { height: 100%; margin-bottom: 1px; font-size: 100%; }
body { min-width: 950px; margin: 0; padding: 0 0 3em; background: #000; color: #555; font: .75em/1.3 "Arial", "Helvetica", sans-serif; }
a { color: #F47F20; text-decoration: none; outline: none; cursor: pointer; }
a:hover { background-position: 0 100%; color: #555; text-decoration: none; }
a:active { color: #000; outline:none; text-decoration:none;}

a.linkhome {
	background:transparent url(../images/homebutton.png) no-repeat scroll 0 0;
	display:block;
	height:24px;
	text-indent:-9999px;
	width:30px;
	float:left;
}
a.linkhome:hover {
	background:transparent url(../images/homebutton.png) no-repeat scroll 0 -24px;
}
a.linkcontact {
	background:transparent url(../images/emailbutton.png) no-repeat scroll 0 0;
	display:block;
	height:24px;
	text-indent:-9999px;
	width:30px;
	float:left;
}
a.linkcontact:hover {
	background:transparent url(../images/emailbutton.png) no-repeat scroll 0 -24px;
}
.logo {background: transparent url(../images/logo.png) scroll no-repeat 0 4px; width:44px; height:582px; text-indent:-9999px;float:left;}
p.subheader { margin:0 auto 0 454px;height:30px; padding-bottom:10px; }
p.footer { margin:0 auto; text-transform:uppercase; text-align:center;}
p.footer a {
	color:#808080;
}
p.footer a:hover {
	color:#981b1f;
	text-decoration:none;
}
p.footer a.active {
	color:#fff;
	text-decoration:none;
}
/*
** header
*/
.header { position: relative; overflow: hidden; background: #000; color: #808080; }
.header div { position: relative; width: 950px; margin: 0 auto; padding: 90px 0 0; }
.header div div { position: static; width: auto; margin: 0; padding: 0; }

/*
** intro / non scripted version
*/
.intro { position: relative; overflow: hidden; padding: 0 0 30px !important; }

.intro .navigation { position: absolute; left: 345px; overflow: hidden; top:270px; width: 260px; color: #A2A2A2; font-size: .833em; text-align: center; text-transform: uppercase; line-height: 1; }
.intro .navigation:hover ul { display: block; }
.intro .navigation ul { display: none; float: left; list-style: none; margin: 0; padding: 25px 72px; text-align: left; }
.intro .navigation li { float: left; }
.intro .navigation li a { overflow: hidden; float: left; width: 38px; height: 23px; background: transparent url("../images/intro_navigation.png") no-repeat 0 0; text-indent: -999em; }
.intro .navigation li a.previous {background-position:5px -1px;}
.intro .navigation li a.previous:hover { background-position: 5px -24px; }
.intro .navigation li a.next { background-position: -86px -1px; }
.intro .navigation li a.next:hover { background-position: -86px -24px; }
.intro .navigation p { position: relative; padding: 1ex 0; }
.intro .navigation p span { padding-right: 20px; }

.intro .content { width: auto; min-height: 200px; margin: 0; padding: 40px 50px 0 520px; border: none; }
.intro .content p.photo { float: left; margin: -26px 0 0 -500px; padding: 2px; }
.intro .content h2 { background: transparent; color: #FFF; font-size: 1.75em; text-transform: uppercase; line-height: 1.2; letter-spacing: -.1ex; }
.intro .content h2 em { color: #981b1f; font-style: normal; }
.intro .content p.info { color: #535353; font-size: .833em; text-transform: uppercase; word-spacing: .5ex; display:None; }
.intro .content p.info * { word-spacing: normal; }
.intro .content a { background: transparent url("../images/border_00.png") no-repeat -1024px 100%; color: #A8B934; }
.intro .content a:hover { background-position: -1536px 100%; }
body .header .intro .content h2 { float: none; height: auto; margin: 0 !important; padding: 0; background: transparent; text-indent: 0; }

.intro p.ruler { position: relative; width: 812px; margin: 0 auto; padding: 10px 59px 0; background: transparent url("../images/intro_ruler.png") no-repeat 0 100%; font-size: .75em; text-transform: uppercase; line-height: 1; }
.intro p.ruler a { position: relative; top: 5px; display: block; width: 48px; margin-left: -27px; padding: 0 0 25px; background: transparent url("../images/button_01.png") no-repeat 0 100%; color: #fff; text-align: center;height:2px; }
.intro p.ruler a span { position: relative; display: block; width: 120px; margin: 0 -38px; }

/* scripted version of intro */
.intro-scripted { position: relative !important; width: 1260px !important; margin: 0 -155px !important; padding-bottom: 41px !important; }
.intro-scripted .navigation { position: absolute; left: 520px; z-index: 6; }
.intro-scripted .navigation ul { z-index: 3; display: block; /*padding-left: 44px; padding-right: 44px;*/ }
.intro-scripted .navigation li a.pause { width: 35px; background-position:-42px 0; }
.intro-scripted .navigation li a.pause:hover { background-position: -42px -23px;; }
.intro-scripted .navigation li a.play { background-position: -129px 0 !important; }
.intro-scripted .navigation li a.play:hover { background-position:-129px -23px !important; }

.intro-scripted .content { position: absolute; left: 0; top: 0; z-index: 3; width: 385px; padding: 80px 170px 0 675px; }

.intro-scripted p.ruler { position: relative; z-index: 7; margin-bottom: 10px; }
.intro-scripted p.ruler a { cursor: pointer; }
.intro-scripted p.ruler a.drag,
.intro-scripted p.ruler a:hover { background-position: 100% 100%; color: #FFF; }

.intro-scripted .fade-left { position: absolute; left: 0; top: 0; z-index: 4; width: 200px; height: 500px; background: transparent url("../images/intro_fade_left.png") no-repeat 0 0; }
.intro-scripted .fade-right { position: absolute; right: 0; top: 0; z-index: 4; width: 200px; height: 500px; background: transparent url("../images/intro_fade_right.png") no-repeat 0 0; }


/*
** portfolio
*/
.work { overflow: hidden; margin: 0 0 -25px; padding: 0 0 1px; }
p.work { margin: 0; }

.work ul.navigation { overflow: hidden; list-style: none; margin: 0; padding: 1em 19px 1em 14px; border-bottom: 1px solid #EFEFEF; }
.work ul.navigation li { float: right; padding-left: 5px; font-size: .917em; }
.work ul.navigation a { float: left; padding: 0 0 0 15px; background: transparent url("../images/button_03.png") no-repeat 0 0; color: #888; line-height: 19px; text-transform: lowercase; }
.work ul.navigation a span { float: left; padding: 0 12px 1px 0; background: transparent url("../images/button_03.png") no-repeat 100% 0; }
.work ul.navigation a.alt { padding-left: 12px; background-position: 0 -40px; }
.work ul.navigation a.alt span { padding-right: 15px; background-position: 100% -40px; }
.work ul.navigation a:hover { background-color: #F47E20; background-position: 0 -20px; color: #FFF; }
.work ul.navigation a:hover span { background-position: 100% -20px; }
.work ul.navigation a.alt:hover { background-position: 0 -60px; }
.work ul.navigation a.alt:hover span { background-position: 100% -60px; }

.work .description { float: left; width: 410px; padding: 20px 0 25px 19px; }
.work .description h2 { padding: 0; }
.work .description h2.sifr { font-size: 2.3em; }
.work .description p { padding: 0 0 1ex; line-height: 1.5; }
.work .description p.date { padding: 0 0 1.2em; color: #888; font-size: .833em; text-transform: uppercase; }
.work .description p.work { margin-left: -12px; padding: 1em 0 0; }

.work .screenshot { float: right; width: 460px; padding: 20px 19px 25px 0; }
.work .screenshot p { position: absolute; padding: 0; }
.work .screenshot div { position: relative; z-index: 2; overflow: hidden; width: 460px; padding: 345px 0 0; background: transparent url("../images/screenshots_border.png") no-repeat 0 0; font-size: .917em; text-align: right; line-height: 17px; }
.work .screenshot div p { position: static; float: left; }
.work .screenshot div.right { width: auto; margin-top: 0; padding: 0; background: transparent; font-size: 1em; }
.work .screenshot .right p { position: static; padding-right: 9px; text-align: right; }
.work .screenshot .right ul { float: left; list-style: none; margin: 0; padding: 0; }
.work .screenshot .right li { float: left; }
.work .screenshot .right a { float: left; width: 18px; margin-left: 1px; background: transparent url("../images/button_04.png") no-repeat 0 0; color: #888; font-size: .909em; text-align: center; }
.work .screenshot .right a.selected,
.work .screenshot .right a:hover { background-color: #000; background-position: 0 100%; color: #FFF; }

.work .projects { clear: both; padding: 25px 19px; border-top: 4px solid #EFEFEF; }
.work .projects h3 { float: left; width: 90px; text-transform: lowercase; }
.work .projects h3.sifr { font-size: 2em; }
.work .projects ul { overflow: hidden; float: left; list-style: none; width: 860px; margin: 0 -40px 0 0; padding: 0; background: transparent url("../images/work_projects_background.png") repeat-y 195px 0; }
.work .projects li { float: left; padding: 0 40px 0 19px; margin-left: -20px; border-left: 1px solid #EDEDED; }
.work .projects li span,
.work .projects li a { float: left; width: 153px; height: 35px; padding: 3px 0 0 22px; background: transparent url("../images/work_projects_item_background.png") no-repeat 0 38px; color: #555; font-size: .917em; /*text-transform: lowercase;*/ }
.work .projects li span strong,
.work .projects li a strong { overflow: hidden; display: block; width: 150px; margin: 0 0 -1px; color: #F47F20; font-size: 1.273em; font-weight: 400; text-transform: none; white-space: nowrap; }
.work .projects li a:hover { background-color: #000; background-position: 0 0; color: #777; }
.work .projects li a:hover strong { color: #FFF; }
.work .projects li span { background-color: #F0F0CB; background-position: 0 -38px; }
.work .projects li span strong { color: #000; }
.work .projects div.ehm { overflow: hidden; }

.work .projects .navigation { position: relative; top: 1px; float: right; padding: 0 0 0 5px; background: transparent url("../images/work_projects_navigation_background.png") no-repeat 0 0; color: #888; font-size: .917em; line-height: 2; word-spacing: 1ex; white-space: nowrap; }
.work .projects .navigation p { padding: 0 15px 0 10px; background: transparent url("../images/work_projects_navigation_background.png") no-repeat 100% 0; }
.work .projects .navigation a { font-weight: 700; word-spacing: normal; }
.work .projects .navigation a:hover { color: #F47F20; text-decoration: underline; }
.work .projects .navigation a.next { padding-right: 7px; background: transparent url("../images/bullet_04.png") no-repeat 100% 60%; }
.work .projects .navigation a.previous { padding-left: 7px; background: transparent url("../images/bullet_06.png") no-repeat 0 60%; }
.work .projects .navigation span.next { padding-right: 7px; background: transparent url("../images/bullet_05.png") no-repeat 100% 60%; }
.work .projects .navigation span.previous { padding-left: 7px; background: transparent url("../images/bullet_07.png") no-repeat 0 60%; }

p.work-big { position: absolute; left: 50%; top: 0; z-index: 11; width: 300px; margin-left: -150px; padding: 1em; background: #000; color: #FFF; line-height: 1; }
p.work-big img { position: relative; margin-top: -1em; }