body {
background:url(img/bg.gif) top left repeat scroll #fff;
font:18px/24px Lato, "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
color:#313132;
}

header {
position:absolute;
top:0px;
left:0px;
width:698px;
height:734px;
background:url(img/layout.jpg);
}

header img {
position:absolute;
top:88px;
left:88px;
border-width:0px;
margin:0px;
padding:0px;
background:none;
}

header img:hover { background:none; }

a#title {
position:absolute;
top:45px;
left:561px;
width:425px;
height:68px;
display:block;
text-decoration:none;
background:url(title.png);
}

a#title:hover {
background:url(title2.png);
}


nav a { display:block; }
nav ul li { list-style-type:none;, list-style-image:none; }
nav span { display:none; }
nav img { border:0px; }

nav a#clear {
position:absolute;
left:143px;
top:476px;
width:281px;
height:71px;
}

nav a#about {
position:absolute;
top:548px;
left:130px;
width:96px;
height:42px;
}

nav a#fan {
position:absolute;
top:548px;
left:226px;
width:150px;
height:44px;
}

nav a#site {
position:absolute;
top:548px;
left:376px;
width:57px;
height:41px;
}

nav a#clear:hover { background:url(img/nav.png) -3px 13px no-repeat; }
nav a#about:hover { background:url(img/nav.png) 10px -59px no-repeat; }
nav a#fan:hover { background:url(img/nav.png) -86px -59px no-repeat; }
nav a#site:hover { background:url(img/nav.png) -236px -59px no-repeat; }

section {
margin:0px 50px 0px 0px;
text-align:left;
}

h1 {
margin:0px 0px -10px;
font: 38px/26px Cookie, 'lucida sans unicode', arial, sans-serif;
color:#e976ac;
text-transform:lowercase;
text-shadow:0px 2px 2px #ab8ab2;
}

h2, h4 {
margin:-10px 0px -10px;
font: 35px/30px Cookie, 'lucida sans unicode', arial, sans-serif;
color:#ea8156;
text-transform:lowercase;
text-shadow:0px 2px 2px #ab8ab2;
}

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

h3 {
margin:-10px 0px -5px;
font: 30px Cookie, 'lucida sans unicode', arial, sans-serif;
color:#9b6ca6;
text-align:center;
text-transform:lowercase;
clear:both;
text-shadow:0px 2px 2px #ab8ab2;
}

a { color:#5a93d5; font-weight:bold; cursor:crosshair; }
a:hover { color:#73c0e5; }


b, strong { font-family:Lato, 'lucida sans unicode', arial, sans-serif; color:#e976ac; }
i, em { font-family:Lato, 'lucida sans unicode', arial, sans-serif; color:#df7575; }
span { color:#908eab; }
.center { text-align:center; }
p.right { text-align:right; line-height:15px; padding-bottom:0px; clear:right; }
small { font-size:14px; line-height:18px; }
code { font-family:"Ubuntu Mono", "courier new", monospace; }


.help {
cursor:help;
text-decoration:none;
border-bottom:1px dotted #8dd8bb;
color:#3a3a4e;
}

.help:hover { color:#7a7a8a; }



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


img, a img { border:1px solid #d4d1d2; padding:5px; margin-right:6px; background:url(img/layout.jpg) -50px -50px; }
img:hover { border-color:#2dd6fa; background-position:-50px -100px; }
img.right { float:right; margin:0px 0px 5px 5px; }
img.left { float:left; margin:0px 5px 5px 0px; }

ul li { 
list-style-type:none;
list-style-image:url(img/list.png);
}

input, textarea {
background:rgba(215,183,219,0.2);
padding:2px;
border:3px solid #d4d1d2;
font:18px/24px Lato, "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#313132;
margin:5px 0px;
}

option, select { 
padding:2px;
border:3px solid #d4d1d2;
font:18px/24px Lato, "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#313132;
margin:5px 0px;
background:rgba(215,183,219,0.2);
}

/* responsive */

@media (max-width:1200px) {
    
    section {
    position:absolute;
    top:600px;
    left:25px;
    width:650px;
    }
}

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

    section {
    position:absolute;
    top:50px;
    left:675px;
    min-width:525px;
    max-width:725px;
    }
}

@media (min-width:1400px) {

    section {
    position:absolute;
    top:50px;
    left:675px;
    width:725px;
    }

}