body {background-color: #131A37; padding-top: 30px; font-family: sans-serif;}
    img {border: 0;}
    div {padding: 0; margin: 0;}
    a {text-decoration: none; color: White;}
    a:hover {text-decoration: underline; color: #FFFFDD;}
div.roundy
{
    position: relative;
    margin-left: auto; margin-right: auto;
border:2px solid #A3B8CE;
background:#3C5F85;
width:800px;
min-height: 500px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
background-image: url(UG5.jpg);
}
#main {width: 300px;}
@font-face {
    font-family: simple;
    src: url('Fineness Regular.ttf');
    font-family: curse;
    src: url('FREEBSC.ttf'), url('FREEBSC.ttf') format('opentype');

}
.buttoning {padding-bottom: 0px; padding-top: 15px; padding-left: 5px; text-align: left; color: #000066; font-weight: 200;
    border-top-right-radius: 25px; border-bottom-right-radius: 25px; font-size: 16px; border:1px solid #444477; border-left: 0; padding-right: 6px;
    height: 60px; background-color: White; opacity:0.4; filter:alpha(opacity=40);}
.buttoning a {color: #000066;}
.buttoning:hover {opacity:0.7; filter:alpha(opacity=70);}
#un {color: White; left: 370px; top: 120px; position: absolute; font-size: 26px; font-family: "simple", Arial, sans-serif;} 
#gr {color: White; left: 200px; top: 50px; position: absolute; font-size: 170px; font-family: "curse", cursive, serif;
    text-shadow: 2px 2px #AAAABB;} 
.leftbar {float: left; position: absolute; width: 100px; min-height: 400px; border-bottom-left-radius: 60px; padding-top: 4px;}
.leftbar img {padding-left: 10px; padding-top: 10px; padding-bottom: 5px;}
#under {color: #BBBBBB; position: absolute; bottom: 20px; left: 240px; text-align: right;}
#under a {color: #BBBBBB;}
#mainx {width: 670px; color: #DDDDDD; position: relative; float: right;}
#base {padding-bottom: 10px; padding-top: 30px; text-align: right; width: 100%; position: absolute; font-size: 12px; color: #CCCCCC; bottom: 0px; right: 10px;}
#base a {color: #BBBBBB;}
#headthing {color: White; font-size: 40px; padding-bottom: 15px; font-family: "curse", cursive;}
blockquote {font-size: 12px;}
.ital {font-style: italic;}
#port {background-image: url(portrait1.png); margin-left: auto; margin-right: auto; width: 400px; height: 448px;}
#people {background-image: url(people1.jpg); margin-left: auto; margin-right: auto; width: 400px; height: 236px;}
.closer {font-size: 10px; text-align: right; padding-right: 10px; padding-bottom: 10px;}
.baselist {list-style-type: none; list-style-image: url(lilbook.png);}
.baselist li {padding-top: 15px;}
.ponder {list-style-image: url(lilarrow2.png);}
.butter {font-size: 20px; font-weight: bold; background-color: Red; color: Blue;}
.more {background-color: #CCCCCC; color: #000033; border-radius: 25px; border:2px solid #A3B8CE; width: 100px; margin-left: auto; margin-right: auto; text-align: center;}
.more a {color: #000033;}
#fadeshow1 {width: 400px; height: 277px; margin-left: auto; margin-right: auto; background-image: url(aa/aaweakness.jpg); background-color: Yellow; color: Black;}
legend {color: White;}
label {padding-left: 10px;}
textarea {margin-left: auto; margin-right: auto; margin-left: 10px;}
fieldset {width: 90%;}
.righto {float: right; height: 100px; padding: 10px;}
.video {position: absolute; width: 96%; height: 96%; background-color: #000033; text-align: center; z-index: 5; margin-left: auto; margin-right: auto; color: white; text-align: center;}
.closeleft {text-align: left; float: left; color: White;}
.noner li {list-style-image: none; list-style-type: disc;}
#buttons {position: relative; padding: 5px; left: 15px; filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;}
#buttons a {font-size: 24px; background-color: #2B324B; border-color: white; border-style: double; border-width: 5px; width: 50px; padding-left: 5px; padding-right: 5px; margin-top: 15px;}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 820px) {
    div.roundy {width:90%; background-position: right;}
    #un {top: 125px; left: 225px; font-size: 18px; font-weight: normal;}
    #gr {top: 80px; left: 145px; font-size: 100px;}
    #under {position: absolute; left: 135px; top: 300px; color: #CCCCCC;}
    #mainx {width: 70%;}
    #port {background-image: url(portrait2.png); width: 300px; height: 336px;}
    #people {background-image: url(people2.jpg); margin-left: auto; margin-right: auto; width: 300px; height: 177px;}
    #fadeshow1 {width: 300px; height: 208px; margin-left: auto; margin-right: auto; background-image: url(aa/aaweakness.jpg); background-color: Yellow;}
}


/* for 700px or less */
@media screen and (max-width: 600px){
    div.roundy {width:90%; background-position: right;}
    #un {top: 75px; left: 145px; font-size: 18px; font-weight: normal;}
    #gr {top: 80px; left: 125px; font-size: 70px; text-shadow: none;}
    #under {position: absolute; left: 115px; top: 205px; color: #333333; text-align: left;}
    #port {background-image: url(portrait3.png); width: 200px; height: 224px;}
    #people {background-image: url(people3.jpg); margin-left: auto; margin-right: auto; width: 200px; height: 118px;}
    #fadeshow1 {width: 200px; height: 139px; margin-left: auto; margin-right: auto; background-image: url(aa/aaweakness.jpg); background-color: Yellow;}
}

/* for 480px or less */
@media screen and (max-width: 480px) 
{
    div.roundy {width:90%; background-repeat: no-repeat; background-color: #3C5F85; background-position: left top;}
    #un {top: 0px; left: 60px; position: relative; font-size: 18px; color: White; font-weight: normal;}
    #gr {top: -20px; left: 20px; position: relative; font-size: 80px; text-shadow: none;}
    .leftbar {float: none; width: 90%; position: relative; padding-bottom: 25px;}
    #main {width: 90%; position: relative;}
    #under {position: relative; width: 90%; left: 5px; top: 0px; padding-bottom: 30px; color: #CCCCCC;}
    #mainx {width: 90%; float: none; left: 10px; padding-bottom: 10px; padding-top: 10px;}
    #people {background-image: url(people3.jpg); margin-left: auto; margin-right: auto; width: 200px; height: 118px;}
    #port {background-image: url(portrait3.png); width: 200px; height: 224px;}
    .drop {font-size: 14px;}
    #fadeshow1 {width: 200px; height: 139px; margin-left: auto; margin-right: auto; background-image: url(aa/aaweakness.jpg); background-color: Yellow;}

}