body {margin: 0;padding: 0;overflow: hidden;}
#banner {background-color: white;}
@font-face{
    font-family: "Quicksand-Regular";
    src: url('../fonts/Quicksand-Regular.otf'),
    url('../fonts/Quicksand-Regular.otf'); /* IE */
}

@font-face{
    font-family: "Quicksand-Bold";
    src: url('../fonts/Quicksand-Bold.otf'),
    url('../fonts/Quicksand-Bold.otf'); /* IE */
}

div {font-family:"Quicksand-Bold"; color:black;}
#orange {color: #E38138;}
img {height: 50%; width: auto; float: left; padding:15px;}
a {text-decoration: none}
.ui-state-default {color: #F2F3C9; background: #AFBC98;}

/*Skyscraper*/
@media (max-width: 120px) and (max-height: 600px) {
#banner {position:relative; border: solid 2px; border-color: #339966; width:116px; height:594px;}
img {position:absolute; vertical-align: center; width: 108px; height: 98px; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px;}
#p1 {position:absolute; top:0; vertical-align: center; margin-top: 50px}
#p2 {position:absolute; bottom:0; vertical-align: center; margin-bottom: 50px}
}

/*Medium Rectangle*/
@media (max-width: 300px) and (max-height: 250px) {
#banner {position:relative; border: solid 2px; border-color: #339966; width:296px; height:246px;}
img {position:absolute; vertical-align: center; width: 108px; height: 98px; left: 50%; top: 50%; margin-left: -70px; margin-top: -70px;}
#p1 {position:absolute; top:0; vertical-align: center; margin-top: 15px}
#p2 {position:absolute; bottom:0; vertical-align: center; margin-bottom: 15px}
}

/*Leaderboard*/
@media (max-width: 728px) and (max-height: 90px) {
#banner {border: solid 2px; border-color: #339966; width:724px; height:86px;}
img {height: 85%; width: auto; float: left; padding:15px; padding-right: 0px; margin-top: -10px}
div {font-size: 20px; line-height: 130%;}
p {margin-top: 15px}
}

/*Full Banner*/
@media (max-width: 468px) and (max-height: 60px) {
#banner {border: solid 2px; border-color: #339966; width:464px; height:56px;}
img {height: 80%; width: auto; float: left; padding:15px; padding-right: 0px; padding-left: 5px; margin-top: -10px}
p{margin-top: 10px}
div {font-size: 14px}
}

/*Skyscraper Medium*/
@media (max-width: 140px) and (max-height: 400px) {
#banner {position:relative; border: solid 2px; border-color: #339966; width:136px; height:396px;}
img{position:absolute; vertical-align: center; width: 90%; height: auto; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px;}
#p1 {position:absolute; top:0; vertical-align: center; margin-top: 15px}
#p2 {position:absolute; bottom:0; vertical-align: center; margin-bottom: 15px}
}

/*Mini*/
@media (max-width: 140px) and (max-height: 200px) {
#banner {position:relative; border: solid 2px; border-color: #339966; width:136px; height:196px;}
img{position:absolute; vertical-align: center; width: 40%; height: auto; left: 50%; top: 50%; margin-left: -40px; margin-top: -50px;}
#p1 {position:absolute; top:0; vertical-align: center; margin-top: 5px; margin-right: 2px; margin-left: 2px; font-size: 13px}
#p2 {position:absolute; bottom:0; vertical-align: center; margin-bottom: 5px; margin-right: 2px; margin-left: 2px; font-size: 13px}
}