@import url('reset.css');

/* GENERAL */
body {
    background-color: #000;
    color: #707070;
    font: 12px/118% Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
#root {
    width: 720px;
    margin: auto;
    padding: 0 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#000));
    background: -moz-linear-gradient(top,  #292929,  #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#000');
    position: absolute;
    left: 0;
    right: 0;
    min-height: 100%;
}
a {
    text-decoration: none;
    color: #707070;
}
a:hover {
    /*color: #10b6ec;*/
    color: #f12335;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
}
p {
    margin-bottom: 12px;
}
article {
    padding-bottom: 20px;
}
section.description,
article#words,
article#about,
article#contact {
    line-height: 130%;
}

/* CHOP */
header {
    padding-top: 20px;
}
header a {
    display: block;
    width: 179px;
    height: 82px;
    background-image: url(../img/harder.png);
    background-position: 0 0;
    text-indent: -5000px;
}
header a:hover {
    background-position: 0 -83px;
}

/* NAV */
nav {
    padding: 18px 0;
}
nav ul li {
    color: #fff;
    margin-left: -20px;
    padding-left: 20px;
}
nav ul li.selected {
    background: transparent url(../img/triforce.png) 4px 2px no-repeat;
}
nav ul ul li {
    color: #707070;
    margin-left: 0;
    padding-left: 0;
}
nav ul ul li.selected {
    background-image: none;
}
nav ul ul li.selected a {
    /*color: #10b6ec;*/
    color: #f12335;
}
nav ul li ul,
nav ul li ul li {
    display: inline;
}
nav ul ul li:after {
    content: ' / ';
}
nav ul ul li:last-child:after {
    content: '';
}

/* LIST VIEW */
.thumbs li {
    width: 180px;
    float: left;
}
.thumbs .reels li {
    width: 720px;
    float: none;
}
.thumbs h1, .thumbs img, .thumbs div {
    margin-bottom: 4px;
}
.thumbs h1 {
    font-size: 12px;
    margin-bottom: 7px;
}

/* SOCIAL NETWORK BUTTONS */
#social {
    position: relative;
    height: 70px;
}
#social #tweet-button, #social #like-button {
    position: absolute;
    top: 24px;
    left: 0;
}
#social #like-button {
    left: 65px;
}

/* VIDEOS */
#videos li {
    width: 360px;
}

/* VIDEO */
#video h1 {
    color: #fff;
    margin-top: 4px;
    margin-bottom: 20px;
}

/* IMAGE */
#image img {
    margin-bottom: 12px;
    display: block;
}
#image h1 {
    /*color: #10b6ec;*/
    color: #f12335;
    float: left;
    margin-right: 5px;
}
#image #social {
    margin-top: 24px;
}

/* SPLASH */
html#splash, #splash body {
    height: 100%;
}
#splash body {
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#splash a {
    position: absolute;
    display: block;
    text-indent: -5000px;
    width: 100%;
    height: 100%;
}

/* WORDS */
#words {
    background-color: #fff;
    color: #707070;
    margin: 0 -20px -20px -20px;
    padding-top: 20px;
    -webkit-font-smoothing: subpixel-antialiased;
}
#words h1 {
    color: #000;
    font-weight: bold;
}
#words section {
    width: 430px;
    border-bottom: 1px solid #707070;
    margin: 0 20px 20px 20px;
    padding-bottom: 10px;
}
#words section:last-child {
    border-bottom-width: 0;
    margin-bottom: -20px;
}
#words h1, #words .author {
    margin-bottom: 0;
}

/* CONTACT */
#contact h1, #contact h2, #contact a {
    font-weight: bold;
}
#contact h1 {
    color: #00adef;
    margin: 22px 0 8px 0;
}
#contact h2, #contact a {
    color: #fff;
}
#contact a:hover {
    color: #00adef;
}
#contact ul {
    margin-bottom: 28px;
}