body {
    background-color: #69487b;
}


body, p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin:0; 
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*-- Body --*/
body {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    color: #B6CCFF;
    font-size: 18px;
    background-image: url(Images/background.gif);
    background-repeat: repeat-x;
}
div#mybox {
    max-width: 900px; 
    margin: 0 auto;
    box-shadow: 5px 5px 25px lightslategrey;
}
header {
    background-color: #194761;
    background-image: url(Images/Gamepad.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 60px;
}

header h1 {
    color: #B6ccff;
    padding: 1rem 0 0 2%;
    font-size: 1.75rem;
    margin-left: 50px;
}



header h2 {
    color: #b6ccff;
    padding: 2%;
    font-size: .75rem;
    letter-spacing: 1px;
}

/*--- nav ---*/
/* Phone nav rules */
@media only screen and (max-width: 600px) {
    nav {
        background-color: #194761;
        padding: .5rem 2%;
    }
    
    nav ul.mymenu {
        list-style-type: none;
        padding: 0;
    }
    
    nav ul.mymenu li a {
        border: solid 1px #5c088a; 
        display: block;
        padding: .5rem 2%;
        background-color: #194761;
        margin-bottom: .5rem;
        border-radius: .5rem;
        color: #5B667f;
        font-weight: 600;
        text-decoration: none;
    }
    
    nav ul.mymenu li.active a {background-color: #0038cf;}
    
    nav ul.mymenu li a:hover {background-color: #d7e3ff;}
    
}
/* end of phone nav */

/* desktop nav rules */
@media only screen and (min-width: 601px) {
   nav {
    background-color: #194761;
       background: linear-gradient(to bottom, #000 0%, #194761 100%);
    border-top: solid 1px #555;
    border-bottom: solid 1px #555;
}
nav ul.mymenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul.mymenu li {
    float:left;
}
nav ul.mymenu li a {
    display: block;
    padding: .5rem 1.5rem;
    color: #5b667f;
    text-decoration: none;
    border-right: solid 1px #5C088A;
}

nav ul.mymenu li a:hover {
    background-color: #d7e3ff;
        color: #000;
}
nav ul.mymenu li.active a {
    background-color: #0038cf;
} 
    
    
}
/* end of desktop nav */

/* --- the main --- */
main {
    padding: .5rem 2%;
    background: linear-gradient(to top, #194761 25%, #000 50%);
    box-shadow: 3px 3px 6px green inset;
}
main h1 {
    font-size: 2rem;
    color: #0038cf;
    border-bottom: 1px solid LightGray;
    margin-bottom: .4rem;
    text-shadow: 1px 1px 4px #194761;
}

main h2 {
    font-size: 1.8rem;
    color: #0038cf;
    margin-bottom: .2rem;
}

main p {
    padding-bottom: .8rem;
    line-height: 160%;
}

main blockquote {
    font-style: italic;
    margin: .4rem 2%;
    font-size: .9rem;
}
main a {
    color: #5c088a;
}

main a:hover {
    color: #00B81f;
}

/* --- my lists --- */
main ul.me, main ol.smart {
    margin: 0 0 .8rem 0;
    padding: 0 0 0 1rem;
}
main ul.me {
    list-style-image: url(Images/bullet-diamond.gif);
}
main ol.smart li {
    background-image: url(Images/Smile.gif);
    background-repeat:no-repeat;
    list-style-type: none;
    padding-left: 50px;
}

main dl dt {
    margin: 0;
    font-weight: 600;
    padding: 0 0 0 1rem;
}
main dl dd {
    margin: 0;
    padding: 0 0 .75rem 2rem;
}

/* My image stuff */

figure.myphoto {
    margin: 0 0 0 2%;
    padding: .5em;
    float: right;
    border: 1px solid #d7e3ff;
    width: 60%;
}
figure.myphoto img {
    width: 100%;
}


figure.drawings {
    float: left;
    padding-top: 2px;
    border: 1px solid #d7e3ff;
    text-align: center;
    height: 230px;
    width: 180px;
    margin: 1rem;
}

figure.drawings figcaption {
    font-size: .8rem;
    color: #5c088a;
}

figure.games {
    float: left;
    padding-top: 2px;
    border: 1px solid #d7e3fF;
    text-align: center;
    height: 230px;
    width: 300px;
    margin: 1rem;
}
figure.games figcaption {
    font-size: .8rem;
    color: #5c088a;
}

/* --- My form --- */
form.games fieldset {
    margin-bottom: 2rem;
    border-radius: .5rem;
    font-size: .8rem;
    color: #5b667f;
}

form.games legend {
    font-weight: 700;
    margin-left: 1rem;
}

form.games span {
    display: block;
    padding: .8rem 0 0 .3rem;
}

form.games .userinput {
    color: #5c0bba;
    width: 20rem;
    border-radius: .6rem;
    border: solid 1px #d7e3ff;
    padding: .4rem;
} 

form.games .userbutton {
    width: 20rem;
    padding: .8rem;
    margin-left: 2%;
    background: #194761;
    border: solid 1px #d7e3ff;
    border-radius: .6rem;
    
}

/* --- media and map --- */
iframe.mymap {
    border: 1px solid #194761;
    width: 94%;
    margin-left: 2%;
    height: 500px;
}
table.mytutorials {
    border-collapse: collapse;
    font-size: .8rem;
    border: 1px solid #194761;
    margin: 0 4% 1rem 4%;
    
}
table.mytutorials th {
    text-align: left;
    background-color: #0038cf;
    color: #5b667f;
    font-size: 1.5rem;
    padding: .1rem .5rem;
}
table.mytutorials td {
    padding: 1rem;
}
table.mytutorials tr:nth-child(odd){
    background-color: #5b667f;
}
table.mytutorials tr:hover {
    background-color: #d7e3ff;
    color: darkslateblue;
}

/* --- my video from youtube --- */
iframe.myvideo {
    width: 100%;
    margin-left: 1%;
    height: 320px;
    margin-bottom: 1rem;
    
}









/* --- my footer --- */
footer {
    background-color: #d7e3ff;
}
footer p {
text-align: center;
    color: darkslateblue;
    padding: .5rem;
    font-size: .8rem;
    font-weight: 500;
}


/* ---FunStuff--- */
div.keepOpen {
    clear: both;
}

div.bannerAd {
    float:right;
    background-color: #5c088a;
    width: 150px;
    border: 1px solid slateblue;
    height: 600px;
    
}