body {
background:#000 url(bg.jpg) repeat; 
font:22px/26px 'Roboto', "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
color:#ebfbff;
margin:0px;
padding:0px;
}

div#container {
margin:0px auto;
width:1200px;
}

header {
margin:0px auto 0px;
width:1011px;
height:656px;
text-align:center;
position:relative;
}

header img {
margin:0px auto !important;
border:0px !important;
padding:0px !important;
display: block;
max-width:100%;
height: auto;
}

header a img { 
border:0px;
background:none;
margin:0px;
padding:0px;
}

header a img:hover {
}

/*.title {
position: absolute;
top:45%;
left:50%;
transform: translate(-50%, -50%);
color:#fff;
text-shadow:0px 2px 2px #0d131b;
font:45px  'Petit Formal Script', "Open Sans Condensed", georgia, 'times new roman', serif;
font-weight:700;
font-style:italic;
}*/

nav {
margin:-30px auto 10px;
}

nav ul { 
margin:0px;
text-align:center;
}

nav ul li {
display:inline;
list-style-type:none;
margin:0px;
padding:0px;
border-left:3px solid #555;
}

nav ul li:first-child { border-left:0px; }

nav ul li a {
font:30px  'Petit Formal Script', "Open Sans Condensed", georgia, 'times new roman', serif;
font-weight:700;
font-style:italic;
color:#af9389;
text-decoration:none;
padding:10px;
text-shadow:0px 2px 2px #000;
transition:color 0.5s ease;
}

nav ul li a:hover { color:#e48a17; }

section {
margin:0px auto 0px;
padding:0px 40px 5px;
width:850px;
background:url(bg.jpg);
text-align:left;
}

h1 {
margin:0px 0px -10px;
font: 35px 'Petit Formal Script', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#ebfbff;
font-weight:700;
text-transform:lowercase;
text-shadow:0px 2px 2px #000;
background:url(header.png) top left no-repeat;
padding:12px 0px 20px 35px;
}

h2, h4 {
margin:0px 0px -10px;
font: 30px 'Petit Formal Script', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#42ccef;
text-transform:lowercase;
text-shadow:0px 2px 2px #000;
}

blockquote + h2 { margin-top:20px; }

h3 {
margin:-10px 0px -5px;
font: 25px 'DM Mono', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#9e5dd6;
text-align:center;
text-transform:lowercase;
clear:both;
text-shadow:0px 2px 2px #000;
}

a { color:#d5c047; font-weight:bold; cursor:crosshair; transition:color 0.5s ease; }
a:hover { color:#9e5dd6; }


b, strong { font-family:'Petit Formal Script', 'lucida sans unicode', arial, sans-serif; color:#c3a1ee; font-weight:700; }
i, em { font-family:'DM Mono', 'lucida sans unicode', arial, sans-serif; color:#3cc3e7; font-weight:700; }
.center { text-align:center; }
p.right { text-align:right; line-height:15px; padding-bottom:0px; clear:right; }
small { font-size:14px; line-height:18px; }
span { color:#996bca; font-weight:700; font-family:'Petit Formal Script', 'lucida sans unicode', arial, sans-serif; }

p.q {
font-size:18px;
line-height:22px;
color:#40aece;
border-bottom:dotted 1px #aaa;
}


hr {
background:url(hr.png) top center no-repeat;
height:56px;
border:0px;
}

blockquote {
border-left:5px solid #64171e;
margin:20px 10px 0px;
}
blockquote p { margin:0px !important; padding:0px 5px; }
blockquote:hover { border-color:#64171e; }

blockquote span:nth-of-type(odd) { color:#dccc1a; }


img, a img { border:1px solid #0861d0; padding:10px; margin-right:15px; background:#14191c url(imgbg.jpg); transition:border 0.5s ease, background 3s ease; }
img:hover { border-color:#0861d0; background-position:bottom right; }
img.right { float:right; margin:0px 0px 5px 8px; }
img.left { float:left; margin:0px 5px 5px 0px; }


span.site {
font: 24px 'DM Mono', 'lucida sans unicode', arial, sans-serif;
color:#3bcfed;
text-transform:uppercase;
}


ul li { list-style-type:square; }

.help {
cursor:help;
}

/* responsive */


@media (max-width:420px) {

    header {
    width:90%;
    height:auto;
    }
    

    div#container {
    width:90%;
    margin:0px auto !important;
    padding:0px 0px !important;
    }

    section {
    margin:0px auto;
    width:90%;
    padding:5px;
    }
    
    nav ul li a, h1 { font-size:20px !important; }

}

@media (min-width:420px) and (max-width:768px) {

    header {
    width:100%;
    height:auto;
    }
    

    div#container {
    margin:0px auto;
    width:100%;
    }

    section {
    margin:0px auto;
    width:90%;
    }
    
    nav ul li a, h1 { font-size:22px !important; }

    
}

@media (min-width:768px) and (max-width:1200px) {

    header {
    width:100%;
    height:auto;
    }
    
    
    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0px auto;
    clear:both;
    width:90%;
    }
    
}


@media (min-width:1200px) and (max-width:1450px) {


    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0px auto;
    clear:both;

    }
    

}