﻿/* YUI 2: Reset CSS */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, 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 {
    font-style: normal;
    font-weight: normal;
}
ol, ul {
    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;
}
header, section, footer, aside, nav, article, figure
{
    display: block;
}
body
{
    background-color: #fff;
    color: #343434;
    font-family: Arial;
}
#Wrapper
{
    width: 768px;
    margin: 0 auto;
}
#Header
{
    height: 180px;
}
    #HeadContent
    {
        padding: 72px 20px 0;
    }
    #Name
    {
        float: left;
        width: 254px;
        height: 36px;
        text-indent: -3000px;
        background: url(../images/name.png) left top no-repeat;
    }
    #SocialNetworks
    {
        float: right;
    }
    #SocialNetworks li
    {
        border:1px solid #ccc;
        float:right;
        height:32px;
        margin:5px;
        padding:2px;
        width:32px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    }
    #SocialNetworks li:hover
    {
        border-color: #aaa;
    }
        #SocialNetworks a
        {
            width: 32px;
            height: 32px;
            display: block;
            float: left;
            opacity: 0.9;
            text-decoration: none;
            background-color: #fff;
            background-image: url(../images/sn.png);
            background-repeat: no-repeat;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            outline: none;
        }
        #SocialNetworks a:hover
        {
            opacity: 1;
        }
        #Vkontakte
        {
            background-position:0 0;
        }
        #Facebook
        {
            background-position:0 -32px;
        }
        #Youtube
        {
            background-position:0 -64px;
        }
        #Habr
        {
            background-position:0 -96px;
        }
        #Twitter
        {
            background-position:0 -128px;
        }
        #Vremenno
        {
            background-position:0 -160px;
        }
#Footer
{
    height: 180px;
}
    #FooterContent
    {
      display:none;
        padding: 50px 20px 0;
        position: relative;
    }
#ContactEmail
{
    text-indent: -3000px;
    display: block;
    margin: 0 auto;
    width: 160px;
    height: 20px;
    background: url(../images/email.png) 0 0 no-repeat;
}
#PhotoContainer
{
    text-align: center;
    min-height: 200px;
    position: relative;
    background: url(../images/flickr.png) center center no-repeat;
}
#PhotoContainer img
{
    padding: 3px;
    border: solid 1px #ccc;
}

    .arrow
    {
        background-image: url(../images/arrows.png);
        background-color: Transparent;
        background-repeat: no-repeat;
        width: 37px;
        height: 200px;
        position: absolute;
        top: 50%;
        margin-top: -100px;
        cursor: pointer;
        opacity: 0;
        display: none;
    }
    #PhotoContainer:hover .arrow
    {
        opacity: 1;
    }
    .arrow.inactive
    {
        display: none;
    }
    .arrow:active
    {
        margin-top: -99px;
    }
    #Left
    {
        background-position: 0 center;
        left: 20px;
    }
    #Right
    {
        background-position: -37px center;
        right: 20px;
    }
