/*
    For Ponychan Settings..
    No rights reserved and all that jazz..
    -Grandil
*/
/*
    Hover in my direction, div! - V1.7

    Fixed placement of helphovers that have the button after a text field.
*/

html, body{
    font-family: 'Lucida Grande', sans-serif;
    font-size: 85%;
    color: rgb(48, 57, 66);
}
body {
    height: 100%;
    min-width: 1024px;
    margin: 0;
    padding: 0;

    background-position: -9999px -9999px;
    background-size: 560px 600px;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

@media (min-width: 1161px) and (max-height: 670px) {
    body{
        background-position: 100% 70px;
    }
}
@media (max-width: 1160px) and (min-height: 671px) {
    body{
        background-position: 600px 100%;
    }
}
@media (max-width: 1160px) and (max-height: 670px){
    body{
        background-position: 600px 70px;
    }
}
@media (min-width: 1161px) and (min-height: 671px) {
    body{
        background-position: bottom right;
    }
}
ul, ol, dl {
    padding: 0;
    margin: 0;
}
a:link, a:visited {
    text-decoration: none;
    color: rgb(158, 167, 176);
}
a:hover{
    color: rgb(48, 57, 66);
}
#gradient{
    /*fades out ponies when they enter the content area.*/
    background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 620px, rgba(255,255,255,0) 870px, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(620px,rgba(255,255,255,0.6)), color-stop(870px,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 620px,rgba(255,255,255,0) 870px,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 620px,rgba(255,255,255,0) 870px,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 620px,rgba(255,255,255,0) 870px,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 620px,rgba(255,255,255,0) 870px,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.container {
    position: relative;
    min-height: 100%;
}

/*Content scrolls up "behind" the header just like in the chrome settings*/
.header {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 180px;
    width: 650px;
    padding-top: 10px;
    margin: 0;
    font-size: 20px;
    /*So we can scroll behind the header.*/
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
/*Making the <hr> in the header a bit fancy*/
hr{
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.50), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.50), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.50), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.50), rgba(0,0,0,0));
}
/*Navigation bar*/
.sidebar1 {
    position: fixed;
    margin-top: 70px;
    width: 180px;
}
ul.nav {
    list-style: none;
}
/*Grey box in the navigation menu*/
ul.nav li {
    margin: 0;
    padding: 0;
    border-left: 6px solid transparent;
}
ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display: block;
    text-decoration: none;
    color: rgb(148, 157, 166);
}
ul.nav>form>a{
    margin-left: 6px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    color: rgb(48, 57, 66);
}
/*activepage adds a grey box to the "active" navigation tab*/
#activepage{
    border-left: 6px solid rgb(68, 77, 86);
}
#activepage a{
    color: rgb(48, 57, 66);
}
/*The box that content goes in durhh*/
.content {
    margin: 0;
    margin-left: 180px;
    padding-top: 55px;
    padding-bottom: 130px;
    padding-left: 7px;
    width: 650px;
}
.content h1{
    font-size: 15px;
}
label{
    display: inline-block;
    padding-left: 20px;
    width: 180px;
}
input[type=text]{
    background-color: rgba(255, 255, 255, 0.6);
    width: 180px;
}
#section>ul>li>select{
    background-color: rgba(255, 255, 255, 0.6);
    width: 180px;
}
input[type=checkbox]{
    position: absolute;
    left: 390px;
    margin-top: 0px;
}
input[type=submit]{
    color: rgb(48, 57, 66);
    font-size: 15px;
    width: 75px;
    height: 25px;
    border: 1px solid rgb(148, 157, 166);
    margin-top: 20px;
    margin-left: 550px;
    background: rgb(234,234,234);
    background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(198,198,198,1) 50%, rgba(198,198,198,1) 51%, rgba(234,234,234,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(50%,rgba(198,198,198,1)), color-stop(51%,rgba(198,198,198,1)), color-stop(100%,rgba(234,234,234,1)));
    background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(198,198,198,1) 50%,rgba(198,198,198,1) 51%,rgba(234,234,234,1) 100%);
    background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(198,198,198,1) 50%,rgba(198,198,198,1) 51%,rgba(234,234,234,1) 100%);
    background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(198,198,198,1) 50%,rgba(198,198,198,1) 51%,rgba(234,234,234,1) 100%);
    background: linear-gradient(to bottom,  rgba(234,234,234,1) 0%,rgba(198,198,198,1) 50%,rgba(198,198,198,1) 51%,rgba(234,234,234,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#eaeaea',GradientType=0 );
}
input[type=submit]:hover{
    background-position: 2px 2px;
}
#section{
    padding: 10px 5px 20px 5px;
    border-bottom: 2px solid rgba(148,157,166,0.2);
}
#section h1{
    margin: 0;
    float:left;
    width: 180px;
}
#section ul{
    margin-left: 40px;
    padding-top: 10px;

    list-style: none;
    float: left;
}
#section ul>li{
    padding-bottom: 10px;
}
#section ul>li>a{
    cursor: default;
}
/*If you delete this bit stuff will burn and crash! You have been warned..*/
#section:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#Rarity{
    color: white;
    mane: purple;
    fabulous: 100%;
    pony: best !Important;
}
/*Styling for help button*/
.helpme{
    cursor: default;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    color: rgb(48, 57, 66);
    border-radius: 10px;
    margin-left: 10px;
    vertical-align: sub;

    background: rgb(224,224,224);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%, rgba(175,175,175,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(175,175,175,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(175,175,175,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(175,175,175,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(224,224,224,1) 0%,rgba(175,175,175,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(224,224,224,1) 0%,rgba(175,175,175,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#afafaf',GradientType=1 );
}
.helpme:hover{
    background: rgb(196,196,196);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(196,196,196,1) 0%, rgba(122,122,122,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(196,196,196,1)), color-stop(100%,rgba(122,122,122,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(196,196,196,1) 0%,rgba(122,122,122,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(196,196,196,1) 0%,rgba(122,122,122,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(196,196,196,1) 0%,rgba(122,122,122,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(196,196,196,1) 0%,rgba(122,122,122,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c4c4', endColorstr='#7a7a7a',GradientType=1 );
}
/*The window that appears when the help button is clicked*/
.helphover>div{
    position: absolute;
    margin-top: 2px;
    padding: 10px 5px 10px 5px;
    width: 220px;

    background-color: white;
    border: 1px solid rgb(148, 157, 166);
    -webkit-box-shadow: 5px 5px 11px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    5px 5px 11px rgba(50, 50, 50, 0.75);
    box-shadow:         5px 5px 11px rgba(50, 50, 50, 0.75);
}
/*Helphover divs behind text fields need to have an added "left: 595px;*/
#Passwordhelp>div{
    left: 595px;
}
/*.footer.. What do you think goes here?*/
.footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    padding-top: 100px;
    /*So we can scroll behind the footer*/
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
/*Remove the comment tags around the line below if you wan't the links in the footer to be underlined*/
.footer a{
    /*text-decoration: underline;*/
}


/*****************************************************************/
/*          Bottomline is that Rarity is best pony!              */
/*****************************************************************/
/*#section:nth-of-type(6)>h1:after{display: block;width: 230px;position: relative;left:405px;top: -337px;height:23px;border: 1px solid rgb(48,57,66);background-color: rgb(85,46,182);color: rgb(230,231,247);font-size: 11px;content: "Option closed due to lack of best pony!";text-align: center;padding-top: 6px;border-radius:5px;}*/