/*
Theme Name: Ryan Van Winkle
Author: Mikel Krumins & Kaspars Jaudzems
Version: 1.0
Text Domain: ryans
*/

/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
a:focus {
    outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}
audio,
canvas,
video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
}
del {
    color: #333;
}
ins {
    background: #fff9c0;
    text-decoration: none;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 24px;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
small {
    font-size: 75%;
    line-height: 1.5;
}
img {
    /* Responsive images (ensure images don't scale beyond their parents) */
    max-width: 100%; /* Part 1: Set a maxium relative to the parent */
    width: auto\9; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */

    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}

/* Globals */
a {
    text-decoration: none;
    padding-right: 0px;
    letter-spacing: 2px;
    color: #999;
}
a:visited {
    color: #333;
    text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    color: #666;
}

.clearfix {*zoom:1}
.clearfix:before, .clearfix:after {display:table;line-height:0;content:""}
.clearfix:after {clear:both}

/*-- BODY AND CONTENT --*/

html, body { height: 100%; }
body {
    margin: 0px;
    padding: 0px;
}

.container {
    max-width: 1500px;
    min-height: 100%;
    margin-right:auto;
    margin-left:auto; /* the auto value on the sides, coupled with the width, centers the layout */
    margin-top: 0;
    overflow-x: hidden;
    position: relative;
}

/* Header */
#logo {
    margin-top: 20px;
    display: block;
}

#topcont {
    width: 335px;
    margin: 0 auto;
    margin-bottom: 15px;
    max-width: 100%;
    position: relative;
    z-index: 5;
}

/* Main navigation */
ul.nav-menu, div.nav-menu ul {
    list-style: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    letter-spacing: 1pt;
    color: #333;
    font-family: 'Lato', sans-serif;
}
ul.nav-menu li, div.nav-menu ul li {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 9px;
    float:left;
    margin-top: 7px;
}

ul.nav-menu a, div.nav-menu ul a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
}/*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link  */


ul.nav-menu a:hover, div.nav-menu ul a:hover,
ul.nav-menu .current-menu-item a, div.nav-menu ul .current-menu-item a,
ul.nav-menu .current-menu-ancestor a, div.nav-menu ul .current-menu-ancestor a,
ul.nav-menu .current-page-ancestor a, div.nav-menu ul .current-page-ancestor a {
    color: #666;
    background-color: #FFF;
}

/* Content */
.spikes {
    max-width:530px;
    margin: 0 auto;
    margin-top: 15px;
    padding:0px;
    background: transparent;
    position: relative;
    z-index: 10;
    padding-bottom: 293px;
}

/* left menu */
.nav-cont {
    background: #fff;
    width: 242px;
    height: 167px;
    padding: 40px 0;
    border-radius: 122px;
    display: table-cell;
    vertical-align: middle;
}

ul.nav {
    list-style: none; /* this removes the list marker */
    margin-bottom: auto; /* this creates the space between the navigation on the content below */
    margin-top: auto;
    font-family: 'Lato', sans-serif;
    color: #333;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
}
ul.nav li {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    line-height: 12pt;
    font-family: 'Lato', sans-serif;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    display: inline-block;
    text-decoration: none;
    color: #666;
    padding: 5px 15px;
    margin-top: 2px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #333;
}
ul.nav .current_page_item a, ul.nav .current-cat a {
    text-decoration: underline;
}

#musicplayer {
    width:220px;
    margin:50px auto;
}

#home_text {
    clear:both;
    /*padding-top:60px;
    padding-bottom:100px;*/
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #666;
    font-size: 14px;
    line-height: 18px;
}

#home_text p {
    margin-bottom:9px;
}

#home_text2
{
    width:400px;
    float:left;
    clear:both;
    margin-top:30px;
    margin-bottom:20px;
    margin-left:60px;
    margin-right:60px;
    font-size: 12px;
    font-family: georgia;
    background-color: #FFF;
}

#home_text2 p
{
    margin-top:9px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #666;
    font-size: 14px;
    line-height: 18px;
}


#book_image
{
    margin-left: 85px;
}

#buttons
{
    margin-left: auto;
    margin-right: auto;
    clear: right;
    width: 180px;
}

#antena
{
    float: right;
    list-style: none; /* this removes the list marker */
    margin-bottom: auto; /* this creates the space between the navigation on the content below */
    margin-top: auto;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #333;
    font-size: 9px;
    text-decoration: none;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    padding-top: 60px;
    padding-right: 70px;
}

#playerbtn {
    float:left;
    margin-left:40px;
    clear:right;
}

#forestbtn {
    float:left;
    clear:left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

/*-- H TAGS AND FONT CLASSES --*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
}

h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 28px;
    color: #333;
    margin-left: -1px;
    font-weight: normal;
    letter-spacing: 1pt;
}

h2
{
    font-size:16px;
    color:#333;
    font-weight: normal;
    letter-spacing: 2pt;
    line-height: 24px;
}

h2 a { color: #333; }


h3
{
    font-size:14px;
    color: #333;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0.5pt;
}


h4
{
    font-size:12px;
    color: #52CAF5;
    font-weight:normal;
    font-style: normal;
    line-height: 14px;
    text-transform: none;
}


h5
{
    font-size:12px;
    color:#666;
    font-weight: normal;
    margin-top: 5px;
    line-height: 16px;
}

h6
{
    font-size:14px;
    color:#009ddb;
    font-weight:normal;
    margin-top:15px;
	margin-bottom:7px;
}

h7
{
    font-size:12px;
    color:#009ddb;
    font-weight:normal;
    margin-top:7px;
}

.bold
{
    font-weight:bold;
    color:#0CF;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
}

.clearing_div
{
    clear: both;
}

#footer {
    font-size:10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: lighter;
    padding: 20px 30px;
    color: #CCC;
    background: #fff;
}

.relative { position: relative }

.aligncenter { display: block; margin: 0 auto; }
.alignleft { display: block; }
.alignright { display: block; }
figure.alignnone { margin-left: 0; margin-right: 0; }

.post {
    padding: 20px 30px;
    margin-top: 20px;
    background-color: #FFF;
}
.post-title {
    margin-bottom: 20px;
}
.post-content img.alignleft, .post-content img.alignright { max-width: 50%; }
.post-content .wp-caption { max-width: 100%; height: auto; }
.post-content .wp-caption.alignleft, .post-content .wp-caption.alignright { max-width: 50%; height: auto; }
.post-content figure { max-width: 100%; height: auto; }
.post-content iframe { max-width: 100%; max-height: 350px; }
.post-content input, .post-content textarea, .post-content select { max-width: 100%; }

/* Images */
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignleft, .wp-caption.alignleft, .thumbnail.alignleft {
    margin: 12px 24px 12px 0;
}
img.alignright, .wp-caption.alignright {
    margin: 12px 0 12px 24px;
}
img.aligncenter, .wp-caption.aligncenter {
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Videos */
.video.active {
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 #fff;
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 #fff;
    background-image: -moz-linear-gradient(top,#fff 0,#f0f0f0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#f0f0f0 100%);
    background-image: -o-linear-gradient(top,#fff 0,#f0f0f0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#f0f0f0));
    background-image: -webkit-linear-gradient(top,#fff 0,#f0f0f0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#f0f0f0 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#f0f0f0);
}
.thumbnail {
    position: relative;
    float: left;
    display: block;
}
.thumbnail .duration { position: absolute; bottom: 0; right: 0; background: #000; color: #fff; }

/* Posts navigation */
#nav-below, .nav-single {
    clear: both;
    line-height: 2;
    overflow: hidden;
}

.nav-previous,
.previous-image,
.nav-next,
.next-image {
    display: block;
    text-align: center;
}

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Sidebar */
#title {
    display: none;
}
#sidebar {
    width: 242px;
    margin: 0 auto;
}

/* Footer */
#colophon {
    max-width: 530px;
    margin: 0 auto;
    position: relative;
    top: -243px;
    clear:both;
    z-index: 10;
}
#footer-widget-area {
    background: #f3f3f3;
    padding: 20px 30px;
    overflow: hidden;
}
#footer-widget-area .widget-area {
    float: left;
    margin-right: 20px;
    max-width: 215px;
}
#footer-widget-area #fourth {
    margin-right: 0;
}
.widget-title {
    margin-bottom: 5px;
}
#site-info {
    float: left;
    font-size: 14px;
    font-weight: bold;
    width: 700px;
}
#site-generator {
    float: right;
    width: 220px;
}

@media screen and (min-width: 400px) {
    ul.nav-menu, div.nav-menu ul,
    ul.nav-menu a, div.nav-menu ul a, ul.nav a:visited {
        font-size: 10px;
    }
    .nav-previous,
    .previous-image {
        float: left;
    }
    .nav-next,
    .next-image {
        float: right;
        text-align: right;
    }
}

@media screen and (max-width: 999px) {
    ul.nav {
        max-height: 162px;
        overflow: auto;
    }
}

@media screen and (min-width: 1000px) {
    #topcont {
        position: fixed;
        width: 22.5%;
        margin: 0 0 0 1%;
    }
    #fixed {
        position: fixed;
        top: 0;
        width: 100%;
        max-width: 1500px;
        z-index: 5;
    }
    #title-cont {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background: #fff;
        top: 180px;
        right: 79.9%;
    }
    #title {
        width: 180px;
        height: 180px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    #line {
        position: absolute;
        top: 260px;
        left: 50%;
        width: 900px;
        height: 20px;
        margin-left: -450px;
        background: #fff;
    }
    #sidebar {
        position: absolute;
        left: 77.5%;
        top: 150px;
    }
    ul.nav-menu, div.nav-menu ul {
        margin: 0 5px;
    }
    ul.nav-menu li, div.nav-menu ul li {
        float:none;
    }
    .spikes {
        margin-top:100px;
    }
}

@media screen and (min-width: 1240px) {
    #topcont {
        width: 27%;
    }
    ul.nav-menu, div.nav-menu ul {
        margin: 0;
    }
    ul.nav-menu li, div.nav-menu ul li {
        float:left;
    }
}

.embpicasa {
 overflow: hidden;
    display: block;
    clear: both;
    margin: 1em auto;
}