/*
    Yuliya Vinokur Style Sheet
    by Victor Onyshchenko
    aquaredblue@gmail.com
*/

html {
	background-color: #000;
    overflow: -moz-scrollbars-vertical;
}

body, div, ul, li, h1, h2, h3, p, img, dl, dt, dd {
	margin: 0;
	padding: 0;
}

body {
    font: 13px/1.231 verdana, arial, helvetica, clean, sans-serif;
    color: #fff;
	*font-size: small;
	*font: x-small;
}

h1, h2, h3 {
	font-size: 100%;
	font-weight: normal;
}

img { border: 0 }

em {
	font-style: normal;
	font-weight: normal;
}

li { list-style: none }

a, a:visited {
    text-decoration: none;
    color: #a50e0e;
}

p { margin-bottom: 9px; }

#wrapper {
    width: 874px;
    margin: 0 0 0 10px;
    /*padding: 0 9px;*/
    text-align: left;
    background-color: #33131a;
	overflow: hidden;
}

#header {
    height: 128px;
    overflow: hidden;
}

#header img { float: left; }

/* Nav */

#header ul {
    float: left;
    display: inline;
    /*margin-left: 1px;*/
}

#header li { float: left;  }

#header li a {
    float: left;
    display: inline;
    width: 150px;
    height: 110px;
    margin-right: 1px;
    text-indent: -9999px;
}

#header li a.home { 
    width: 260px;
    background: url(/images/yuliya_vinokur.png) no-repeat 0 -11px;
}

.home #header li a.home {
    height: 121px;
    background-position: 0 0;
}

#header li a.animations { background: url(/images/animations.png) no-repeat 0 0; }

#header li a.stills { background: url(/images/stills.png) no-repeat 0 0; }

#header li a.modelling { background: url(/images/modelling.png) no-repeat 0 0; }

#header li a.resume {
    width: 160px;
    margin-right: 0;
    background: url(/images/resume.png) no-repeat 0 0;
}

#header li a:hover { height: 121px; }

/*#header li a.home:hover { height: 132px; }*/

.animations #header li a.animations,
.stills #header li a.stills,
.modelling #header li a.modelling,
.resume #header li a.resume { 
    height: 121px;
    background-position: 0 -121px;
}

#main {
    padding: 0 9px 28px 9px;
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 130px;
    padding: 40px 0 0 0;
    overflow: hidden;
}

#sidebar h2 {
    font-size: 77%;
    font-weight: bold;
    color: #8e0421;
    text-transform: uppercase;
}

.animations #content,
.modelling #content {
    height: 561px;
}


.animations #sidebar h2,
.modelling #sidebar h2 {
    width: 133px;
    height: 13px;
    text-indent: -9999px;
}

.animations #sidebar h2 {
    background: url(/images/more_animations.png) no-repeat 100% 0;
}

.modelling #sidebar h2 {
    background: url(/images/more_works.png) no-repeat 100% 0;
}

#sidebar div, #sidebar p {
   font-size: 77%;
}

#sidebar .video {
    margin-top: 18px;
}

#sidebar h3 {
    margin-bottom: 5px;
}

#nav {
    margin-top: 11px;
    overflow: hidden;
}

#nav #prev {
    float: left;
    width: 38px;
    height: 9px;
    text-indent: -9999px;
    background: url(/images/prev.png) no-repeat 100% 0;
}

#nav #next {
    float: right;
    width: 37px;
    height: 9px;
    text-indent: -9999px;
    background: url(/images/next.png) no-repeat 100% 0;
}

#content {
    float: right;
    width: 720px;
    padding-top: 11px;
    overflow: hidden;
}

#content h1 {
    float: right;
    width: 148px;
    height: 27px;
    padding: 2px 2px 0 0;
    text-align: right;
    font-family: arial;
    font-size: 77%;
    color: #fff;
    background-color: #ac0d2e;
}

#content h2 {
    float: right;
    width: 711px;
    height: 26px;
    padding: 4px 9px 0 0;
    text-align: right;
    font-family: arial;
    font-size: 77%;
    color: #fff;
    background-color: #33496d;
}

#content a.switch {
    float: left;
    color: #fff;
    padding-top: 10px;
    text-decoration: underline;
    font-size: 77%;
}

#flash {
    float: right;
    width: 720px;
    height: 500px;
    background-color: #000;
    overflow: hidden;
    text-align: center;
}

.stills h1 {
    float: left;
    width: 100%;
    height: 10px;
    padding-bottom: 2px;
    text-indent: -9999px;
    background: url(/images/stills-h1.png) no-repeat 0 0;
    border-bottom: 1px solid #ac0d2e;
}


.stills #main {
    padding: 42px 44px 28px 44px;
}

.stills #thumbs {
    height: 510px;
    margin-top: 20px;
    /*overflow: hidden;*/
}

.stills h3 {
    margin-bottom: 3px;
    font-size: 77%;
}

div.thumb {
    float: left;
    margin: 0 25px 20px 0;
    overflow: hidden;
}

div.thumbr {
    float: left;
    margin: 0 0 20px 0;
    overflow: hidden;
}

.img {
    display: block;
    width: 133px;
    height: 60px;
}

/* Resume */

#head {
    margin: 15px 0 6px 0;
    border-bottom: 1px solid #ac0d2e;
    overflow: hidden;
}

#head h1 {
    float: left;
    width: 40px;
    text-indent: -9999px;
    background: url(/images/resume-h1.png) no-repeat 0 100%;
}

#head a {
    float: right;
    padding-bottom: 4px;
    color: #fff;
    font-size: 85%;
    text-decoration: underline;
    
}

.resume #main { padding-bottom: 21px; }

#resume {
    width: 769px;
    /* height: 515px; */
    padding: 24px 20px 20px 65px;
    background: #fff url(/images/bk-r2.png) no-repeat 0 0;   
    color: #231f20;
}

#resume a { color: #8e0421; }

#resume p {
    font-size: 85%;
    margin-bottom: 23px;
}

#resume h2 {
    margin-bottom: 14px;
    font-size: 93%;
    font-weight: bold;
}

#resume #yulia {
    margin: 1px 0 19px 0;
    padding-bottom: 4px;
    background: #fff url(/images/dot.png) repeat-x -1px 100%;
    font-size: 85%; 
}


#resume #yulia h2 {
    display: inline;
    margin-right: 5px;
    font-size: 123.1%; 
}

#footer {
    height: 59px;
    padding: 0 9px;
    clear: both;
    background: #33131a url(/images/footer2.png) repeat-x 0 0;
}

#footer p {
    padding-top: 4px;
    font-size: 75%;
    color: #b31f3e;
    text-align: right;
    border-top: 1px solid #b31f3e;
}

#footer a {
    color: #b31f3e;
    text-decoration: underline;
}

#panel {
    width: 882px;
    margin: 10px;
    padding: 5px;
    color: #fff;
    border: 1px solid #eee;
    overflow: hidden;
}

#panel a { color: #fff }

.edit { font-size: 9px }

.right { margin-right: 0; }