/****************************************************************************
*** There is so much CSS here, I barely know how to organize it. I had it ***
*** originally split up by section, but it was really annoying when I     ***
*** wanted to edit it.							  ***
*** Good Luck! Please leave my name in the footer and here: WhoNeedsBlue? *** ***         Designer:Matt Deasy, www.deasystudios.com                     ***
****************************************************************************/

body {
background-color: #787878;
font-family:verdana, arial, times, georgia, sans-serif;
font-size: 13px;
}

/* margin: auto; automatically sets the margin width, so with any resolution it looks good. I would leave this alone */

#wrap, #footerwrap {
background: #787878;
margin: auto;
width: 832px;
padding: 0px;
}

/*********TOP BAR "Who Needs Blue?"*********/

#head {
background-image:url(topimg.gif);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100px;
color: #fff;
font-size: 50px;
text-align: center;
padding-top: 10px;
margin: 0px;
}

/*********NAVIGATION DIV "Navigation: Home, Profile", etc...*********/
.left {
float: left;
width: 190px;
background-color: #f2f2f2;
border: solid 2px #A7A7A7;
margin-top: 5px;
padding: 5px;

}

.left a, .left a:visited {
display: block;
text-align: center;
border-left: solid 5px #A7A7A7;
border-right: solid 5px #A7A7A7;
text-decoration: none;
color: #BBD2E0; 
font-weight: bold;
padding: 10px;
}

.left a:hover, .here {
display: block;
text-align: center;
border-left: solid 10px #A7A7A7;
border-right: solid 10px #A7A7A7;
text-decoration: none;
color: #5893AC;
font-weight: bold;
padding: 10px;
}

/*********MIDDLE DIV "Welcome! Welcome to my second..."*********/
#text {
float: left;
width: 390px;
background-color: #f2f2f2;
border: solid 2px #A7A7A7;
margin: 5px;
padding: 5px;
color: #000;
}

#text a, a:visited {
display: inline;
border: none;
text-decoration: none;
color: #BBD2E0; 
font-weight: bold;
padding: 0px;
}

#text a:hover {
text-decoration: none;
color: #5893AC;
display: inline;
border: none;
font-weight: bold;
padding: 0px;
}


/*********RIGHT DIV "News, IE or FF?..."*********/
.right {
float: left;
width: 200px;
background-color: #f2f2f2;
border: solid 2px #A7A7A7;
margin-top: 5px;
padding: 5px;
}

ul {
font-size: 13px;
margin-top: 10px;
}

li {
list-style-image:url(arrow.gif);
margin-bottom: 5px;
}

.date {
text-decoration: underline;
color: #C9C;
margin-bottom: -15px;
font-weight: bold;
}

/*********FOOTER*********/
#footer {
background-image:url(footer.gif);
background-repeat: no-repeat;
background-position: bottom center;
width: 404px;
text-align: center;
color: #f2f2f2;
font-weight: bold;
margin-top: 2px;
margin-left: 209px;
}

#footer a, #footer a:visited {
color: #BBD2E0;
text-decoration: none;
font-weight: bold;
}

#footer a:hover {
color: #fff;
text-decoration: none;
font-weight: bold;
}

/*********FLOATING IMAGES, "?"*********/
img.imgright {
float: right;
padding: 2px;
margin: 6px;
}

img.imgleft {
float: left;
padding: 2px;
margin-right: 6px;
margin-top: 6px;
padding: 2px;
}

img.imgright, img.imgleft {
border: solid 2px #BBD2E0;
}

/*only works in FF */
img.imgright:hover, img.imgleft:hover {
border: solid 2px #5893AC;
}

/*********EVERY HEADER/FOOTER "Navigation", "Read More...", etc...*********/

.head {
background-image:url(star.gif);
background-repeat: no-repeat;
background-position: right center;
font-size: 25px;
text-indent: 2%;
width: 100%;
margin-bottom: 10px;
border-bottom: dashed 2px #B4B4B4;
color: #C9C;
}

.readmore {
width: 100%;
font-size: 13px;
border-top: dashed 2px #c9c;
color: #BBD2E0;
text-align: right;
}

.readmore a, readmore a:visited {
text-decoration: none;
color: #BBD2E0;
text-align: right;
}

.readmore a:hover {
text-decoration: none;
color: #5893AC;
text-align: right;
}