/**** This CSS stylesheet is copyright to the Young Social Democrats (formerly the ****/
/**** Young People's Socialist Leauge). Design inspired by, but not copied from    ****/
/**** css Zen Garden submission 090 - 'Untitled', by Ray Henry. Works in Firefox,  ****/
/**** but is NOT validated. Design and coding by Jaime Johnston. ****/

/*********************************
Generic 'body' tag characteristics, plus the full page wrapper
**********************************/

body {
background: url('stars.png');
margin:0;
padding:0;
font-family:times new roman, georgia, serif;
font-size:14px;
}

#container {
width:100%;
height: 100%;
text-align:left;
}

/******************************
Left side of the page, with all appropriate classes defined.
*******************************/

#left-ratio {
background: url('redbanner.png');
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
height: 100%;
width: 392px;
}

/* logo-text1 is 'Young Social Democrats' */
/* logo-text2 is '(formerly Young People's Socialist League) */
#logo {
width: 310px;
height: 130px;
margin: 10px;
font-family:verdana, arial, sans-serif;
}
.logo-img {
float: right;
}
.logo-text1 {
color: #000000;
font-size: 24px;
font-weight: bold;
}
.logo-text2 {
color: #000000;
font-size: 18px;
font-weight: bold;
}

/* don't remove this */
#menu {
position: relative;
font-family:verdana, arial, sans-serif;
}

/* the meat of the menu style */
#emph {
margin: 0px;
padding: 2px;
line-height: 3em;
text-align: center;
width: 310px;
}
#emph a {padding: 0px;}
#emph a.em1 {color: #000033;font-size: 190%;}
#emph a.em1:visted {color: #000033;font-size: 190%;}
#emph a.em1:hover {background: #CCCCFF;color: #330000;font-size: 190%;}
#emph a.em2:visted {color: #000066;font-size: 160%;}
#emph a.em2 {color: #000066;font-size: 160%;}
#emph a.em2:hover {background: #CCCCFF;color: #660000;font-size: 160%;}
#emph a.em3 {color: #000099;font-size: 150%;}
#emph a.em3:visted {color: #000099;font-size: 150%;}
#emph a.em3:hover {background: #CCCCFF;color: #990000;font-size: 150%;}
#emph a.em4 {color: #0000CC;font-size: 140%;}
#emph a.em4:visted {color: #0000CC;font-size: 140%;}
#emph a.em4:hover {background: #CCCCFF;color: #CC0000;font-size: 140%;}
#emph a.em5 {color: #0000CC;font-size: 130%;}
#emph a.em5:visted {color: #0000CC;font-size: 130%;}
#emph a.em5:hover {background: #CCCCFF;color: #CC0000;font-size: 130%;}
#emph a.em6 {color: #000099;font-size: 120%;}
#emph a.em6:visted {color: #000099;font-size: 120%;}
#emph a.em6:hover {background: #CCCCFF;color: #990000;font-size: 120%;}
#emph a.em7 {color: #000066;font-size: 110%;}
#emph a.em7:visted {color: #000066;font-size: 110%;}
#emph a.em7:hover {background: #CCCCFF;color: #660000;font-size: 110%;}
#emph a.em8 {color: #000033;font-size: 100%;}
#emph a.em8:visted {color: #000033;font-size: 100%;}
#emph a.em8:hover {background: #CCCCFF;color: #330000;font-size: 100%;}

/* the quotes box and font markup combined */
#quotes {
color: #000000;
font-size: 90%;
width: 320px;
margin: 5px;
line-spacing:110%;
letter-spacing:1px;
}

/******************************
Right side of the page, with all appropriate classes defined.
*******************************/

#right-ratio {
position: absolute;
top: 0px;
bottom: 0px;
width: 500px;
height: 100%;
margin-left: 392px;
margin-top: -3px;
}

/* the only purpose in defining right-ratio and r-middle sperately is */
/* for the possible future addition of a r-right within the right-ratio */
/* that would sit beside (to the right) of r-middle */
#r-middle {
background: url('textbk.png');
filter:alpha(opacity=80);
-moz-opacity: .80;
opacity: .80;
position: relative;
top: 0px;
left: 0px;
width: 500px;
margin-top: -12px;
padding: 0px;
padding-bottom: 1px;
}

/* the flesh of the page: its content */
/* padding-bottom is important, because it allows the content of the main */
/* text area to scroll upward far enough to be read over the bottom-box */
#main-content {
postion: absolute;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 32px;
padding-top: 15px;
line-spacing:110%;
letter-spacing:1px;
}


/* this defines the content of the footer */
#footer {
margin-bottom: 5px;
margin-left: 15px;
margin-right: 15px;
line-spacing:100%;
letter-spacing:0px;
font-family:verdana, arial, sans-serif;
}
.footer-text {color: #000000;font-size: 80%;margin: 3px;}
.footer-img {float: left;}

/******************************
Stylistic section, defining cool text markup.
*******************************/

p.heading {
line-spacing:100%;
letter-spacing:0px;
font-family:verdana, arial, sans-serif;
}

p.headingleft {
line-spacing:100%;
letter-spacing:0px;
font-family:verdana, arial, sans-serif;
margin-left: 175px;
}

p.justify {
text-align: justify;
}

#rightpullquote {
color: #300;
width: 150px;
background: white;
filter: alpha(opacity=70);
opacity: .90;
float: right;
margin-left: 5px;
margin-top: 2px;
margin-bottom: 2px;
font-family: Verdana, Arial, Helvetica, Georgia, sans-serif;
font-size: 22px;
line-height: 23px;
text-align: right;
}

#leftpullquote {
color: #300;
width: 150px;
background: white;
filter: alpha(opacity=70);
opacity: .90;
float: left;
margin-right: 5px;
margin-top: 2px;
margin-bottom: 2px;
font-family: Verdana, Arial, Helvetica, Georgia, sans-serif;
font-size: 22px;
line-height: 23px;
text-align: left;
}
/* background tricks */
.bkb {background: #000066;}
.bks {background: #CCCCFF;}
.bkr {background: #660000;}

/* 'b' is blue,'r' for red, 's' for silver */
/* 'em' is, of course, emphasis */
.sem1 {color: #CCCCFF;font-size: 170%;}

.bem0 {color: #000066;font-size: 235%;}
.bem1 {color: #000066;font-size: 190%;}
.bem2 {color: #000099;font-size: 170%;}
.bem3 {color: #0000CC;font-size: 150%;}
.bem4 {color: #0000CC;font-size: 120%;}
.bem5 {color: #0000FF;font-size: 100%;}
.bem6 {color: #0000FF;font-size: 80%;}

.rem0 {color: #660000;font-size: 235%;}
.rem1 {color: #660000;font-size: 190%;}
.rem2 {color: #990000;font-size: 170%;}
.rem3 {color: #CC0000;font-size: 150%;}
.rem4 {color: #CC0000;font-size: 120%;}
.rem5 {color: #FF0000;font-size: 100%;}
.rem6 {color: #FF0000;font-size: 80%;}

/* defines box borders */
.redb {
border-style: solid;
border-width: 2px;
border-color: #990000;
padding: 3px;
}

/* common link colors */
a {color: #0000CC;}
a:hover {color: #0000FF;}
a:visited {color: #000066;}