/************************************************************************************
STRUCTURE   
*************************************************************************************/
body {
	width: 100%; font: 1em/150% Arial, Helvetica, sans-serif; margin: 0px; position: relative; background-image: url(7sci/apples.jpg); width: 100%;}
h6 {margin-bottom: 3px; padding: 0px;}
p {margin-top: 3px;}
.white {color: White; font-size: 4px; margin: 0; padding: 0;}
.thing {position: relative; width: 800px; min-height: 650px; background-color: Fuchsia; margin-left: auto; margin-right: auto; opacity:0.8; filter:alpha(opacity=80);}
.botm {margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; font-size: .8em;}
.sinister {position: relative; float:left; width: 58%;}
.dexter {position: relative; float:right; width: 38%;}
.info {width: 70%; position: relative; text-align: left; margin-left: auto; margin-right: auto; padding: 20px;}
.flori {float: right;}
.menlist {padding: 0px;}
.menlist li {margin-left: 30px; list-style-type: none;}
.menlist a:hover {color: #005000; text-decoration: none; background-color: #ffff80;}
.menlist li a:hover {color: #005000; text-decoration: none; background-color: #ffff80;}
    .as {list-style-image: url('lista.jpg'); padding: 0px;}
    .la {list-style-image: url('listl.jpg'); padding: 0px;}
    .hw {list-style-image: url('listh.jpg'); padding: 0px;}
    .qz {list-style-image: url('listq.jpg'); padding: 0px;}
    .te {list-style-image: url('listt.jpg'); padding: 0px;}
 .first:first-letter {font-size:xx-large; font-variant: small-caps; font-variant:small-caps;}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 995px) {
	.thing {width: 510px; height: 680px;}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
    .thing {width: 420px; height: 680px;}
    .info {width: 90%; padding: 10px;}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
    .thing {width: 360px; height: 550px; font: 1em/100% Arial, Helvetica, sans-serif;}
    .sinister {width: 68%;}
    .dexter {width: 28%;}
}