/* Our colors:

#003399 is the medium blue for borders and visited links
changed the borders actually, now they're a more muted
#153E7E this way the links stand out more
#000033 is the dark blue for backgrounds
#0066FF is the light blue for path and links
#FFFFCC is a very light yellow, havent used it yet, but might be good
to make something stand out more from the blue (by contrast). Now used for artists names.

*/



body {
	margin: 0;
	padding: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
	/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
	color: white;
	background-color: black;

	background-repeat: no-repeat;
	background-position: top left;

	}
	
#head {
    float: left;
    width: 100%;
    }
	
#logo {
    float: left;
    top: 0px;
    height: 80px;
    width: 180px; /*this is in pixels because the size of the logo doesn't change, use ems for variable sizing */
    padding: 0em;
    margin: 0em;
    background-image: url(./images/logo_black.png);
    background-repeat: no-repeat;
    background-position: top left;
    }
    
#sitenavi {
    margin: 0px;
    padding-top: 60px;
    padding-right: 15em; /* login = right + width */
    text-align: center;
    border-bottom: 4px double #153E7E;
    }
    
#sitenavi a:link {
    color: white;
    font-weight: normal;
	}
	
#sitenavi a:visited {
    color: white;
    font-weight: normal;
	}

#sitenavi a:hover {
	text-decoration: underline;
	}

li.sitelink, .activesitelink {
    margin: 0px;
    padding: 0.25em 1.1em 0.25em 1.1em;
    display: inline;
    border-top: 1px solid #153E7E;
    border-right: 1px solid #153E7E;
    border-left: 1px solid #153E7E;
    }
    
/* this is the section you're currently in */
li.activesitelink {
    background-color: #000033;
    }


#path {
    clear: left;
    float: left;
    padding: 0.5em;
    padding-right: 0em;
    padding-left: 0em;
    width: 100%;
    font-size: 0.9em;
    border-bottom: 4px double #153E7E;
    color: #0066FF;
    /* use this instead of margin or padding to keep 100% */
    text-indent: 1em;
    }
    
#path a:visited {
        color: #0066FF;
    }

/* this is the main area of the page, under path above copyright */
#main {
    clear: both;
    float: left;
    width: 100%;
    border-bottom: 1px solid #153E7E; /*bottom border under copyright*/
	}
	
/* text inside main */
#maintext {
    padding: 1em;
    padding-left: 2em;
    padding-bottom: 3em;
    }

#search {
    float: left;
    background-image: url(images/search_clock.png);
    background-repeat: no-repeat;
/* the reason we do this crazy define bigger, then negative margins
is so that the image displays completely, yet the text cuts over parts of it */
/* of course, it works everywhere but explorer */
    width: 380px;
    height: 380px;
    margin-right: -50px;
    margin-bottom: -110px;
    }
    
#signup {
    float: left;
    background-image: url(images/signup_scribe.png);
    background-repeat: no-repeat;
    height: 380px;
    width: 380px;
    }
    
#about {
    float: left;
    background-image: url(images/about_adonis.png);
    background-repeat: no-repeat;
    height: 380px;
    width: 380px;
    }
    
#help {
    float: left;
    background-image: url(images/help_zeus.png);
    background-repeat: no-repeat;
    height: 380px;
    width: 380px;
    margin-right: -60px;
    }
    

#searchResults a {
    margin-top: 2em;
    margin-left: 3em;
    font-size: 1.1em;
    font-weight: normal;
    line-height: 2em;
    color: white;
    }
    
#member {
    float: left;
    background-image: url(images/member_committee.png);
    background-repeat: no-repeat;
    height: 380px;
    width: 290px;

    }

#usernavi {
    text-transform: capitalize;
/* I have no idea why, but both safari and camino move to the right */
    margin-left: 1em;
    text-align: left;
    padding-top: 2em;
    float: left;
    width: 15em;
    margin-right: 10px;
    }

#usernavi a {
    line-height: 1.5em;
    font-weight: normal;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    color: white;
    border: 1px solid #153E7E;
    display: block;
    }

#usernavilist li {
    /*cursor: move;*/
    }

#usernavi ul {
        margin: 0; /*removes indent IE and Opera*/
        padding: 0; /*removes indent Mozilla and NN7*/
        list-style: none; /*turns off display of bullet*/
    }
    
#usernavi a:visited {
    color: white;
    }
    
#usernavi a:hover {
    text-decoration: underline;
    }

/* this overrides usernavi a*/
.subcategory a {
    background-color: #000033;
    text-align: center;
    margin-left: 2em;
    }
    
li.category {
    font-weight: bold;
    }

#homecontent {
    margin-right: 2em;
    margin-left: 320px;
    }
    
#aboutcontent {
    margin-right: 2em;
    margin-left: 200px;
    }
    
#helpcontent {
    margin-right: 2em;
    margin-left: 200px;
    }
    
#signupcontent {
    padding-left: 200px;
    margin: 2em;
    text-align: right;
    }
	
#usercontent {
    min-height: 20em;
    margin-left: 17em;
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;
    border-left: 4px double #153E7E;
    }
	
/*the following classes are to demonstrate better line heights for narrow columns*/	
.narrow1{
	width: 50%;
	line-height: 1.3em;
	}
.narrow2{
	width: 50%;
	line-height: 1.5em;
	}
		
/*typography*/
a {
	text-decoration: none;
	font-weight: bold;
	color: #000;
	}
a:link {
    color: #0066FF;
	}
a:visited {
    color: #003399;
	}
a:active {
	}
a:hover {
	text-decoration: underline;
	}
h1 {
	font-size: 2.0em;
	font-weight: normal;
	margin-top: 0em;
	margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
	}
h2 {
	font-size: 1.7em;
	margin: 1.2em 0em 0.5em 0em;
	font-weight: normal;
	}

h2 a:link, h2 a:visited {
    font-weight: normal;
    }	

h3 {
	font-size: 1.4em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
h4 {
	font-size: 1.2em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h5 {
	font-size: 1.0em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h6 {
	font-size: 0.8em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
img {
	border: 0;
	}
ol, ul, li {
	list-style: none;
	font-size: 1.0em;
	line-height: 1.8em;
	margin-top: 0.2em;
	margin-bottom: 0.1em; 
	}
p {
	font-size: 1.0em;
	line-height: 1.8em;
	margin: 1.2em 0em 1.2em 0em;
	}
li > p {
	margin-top: 0.2em;
	}
pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
	font-family: monospace;
	font-size: 1.0em;
	}
strong, b {
	font-weight: bold;
	}
	
#markup {
    float: right;
    margin-top: 0.25em;
    /* percentages because it's in comparison to the textarea */
    width: 40%;
    }
    
#pagebreaks {
    margin-bottom: 1em;
    margin-left: 1.5em;
    }	
		
#tag {
    font-size: 0.9em;
    border-top: 1px solid #153E7E;
    clear: both;
    width: 100%;
    text-indent: 1em;
    }

/* space above and below is too large */
#tag p {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    }
    
/* most is the class that controls how the most viewed and most recent appear */ 
.most {
    }

.mostlabel {
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 35px; /* in pixels because thumbs have a set size */
    clear: left;
    float: left;
    border-bottom: 4px double #153E7E;
    }

.mostimage {
    float: left;
    text-align: center;
    margin-bottom: 1.5em;
    margin-right: 1em;
    height: 92px;
    width: 92px;
    border: 1px solid #153E7E;
    background-color: #000033;
    }
    
.mostimage img {
    margin: 1px;
    }
    
.mostimage a:hover {
    text-decoration: none;
    }
    
.mostimage img:hover {
    margin: 0px;
    text-decoration: none;
    border: 1px solid white;
    }
    
    
.wholeimage {
/* so all the images have the same spacing, px because it's around the img */
    width: 124px;
    height: 192px;
    padding: 4px;
    float: left;
    text-align: center;
    }

.wholeimage, .wholeimage a, .wholeimage a:link, .wholeimage a:hover {
    color: #98AFC7;
    font-weight: normal;
    }

.thumbOuter {
    /* centers the image (138 - 92 / 2) */
    margin-left: 18px;
    }
    
.thumb {
    display: table-cell;
    vertical-align: middle;
    height: 92px;
    width: 92px;
    border: 1px solid #153E7E;
    background-color: #000033;
    }
    
.thumb a:hover {
    text-decoration: none;
    }
    
.thumb img {
    margin: 0px;
    }
    
.thumb img:hover {
    margin: 0px;
    text-decoration: none;
    border: 1px solid white;
    }
    
.thumbTitle {
    margin-top: 1em;
    }
    
    
#artist {
    font-size: 1.1em;
    color: #FFFFCC;
    text-align: center;
    float: right;
    width: 20em;
    }
    
#contact {
    color: white;
    font-weight: normal;
    border: 1px solid #153E7E;
    padding-left: 2em;
    padding-right: 2em;
    margin-top: 2em;
    margin-left: 3em;
    }
    
#image {
    text-align: center;
    }
    
.imagenavi {
    text-transform: capitalize;
    margin: 0px;
    text-align: center;
    }
    
.imagenavi a:link {
    color: white;
    font-weight: normal;
	}
	
.imagenavi a:visited {
    color: white;
    font-weight: normal;
	}

.imagenavi a:hover {
	text-decoration: underline;
	}

.back {
    background: url(images/left.png) no-repeat right;
    }
    
.last {
    background: url(images/left.png) no-repeat right;
    }
    
/* this moves the text to the left */
.back a {
    padding-right: 1.5em;
    }
    
.last a {
    padding-right: 1.5em;
    }
    
.next {
    background: url(images/right.png) no-repeat right;
    }
    
.first {
    background: url(images/right.png) no-repeat right;
    }
    
/* this moves the text to the left */
.next a {
    padding-right: 1.5em;
    }
    
.first a {
    padding-right: 1.5em;
    }
    
.detail {
    background: url(images/plus.png) no-repeat right;
    }

.detail a {
    padding-right: 2em;
    }

.normal {
    background: url(images/minus.png) no-repeat right;
    }

.normal a {
    padding-right: 1.5em;
    }

li.imagelink {
    margin: 1em;
    padding: 0.1em 1.1em 0.1em 1.1em;
    display: inline;
    }
    
/*
.detail {
    text-align: center;
    float: right;
    width: 15em;
    margin-bottom: 1em;
    }
    
#detaillink {
    color: white;
    font-weight: normal;
    border: 1px solid #153E7E;
    padding-left: 2em;
    padding-right: 2em;
    overflow: hide;
    }
    
*/
.title {
    color: #0066FF;
    font-weight: normal;
    }
    
#login {
    position: absolute;
    font-size: 0.8em;
    margin: 1em;
    margin-top: 0.5em;
    width: 19em;
    right: 0px;
    display: inline;
    text-align: right;
    }

#login a:visited {
    color: #0066FF;
    }

form {
    margin: 1em;
    display: inline;
    }

#submit {
    text-align: right;
    }
    


input {
    margin: 0.1em;
    border: 1px solid black;
    }
    
textarea {
    width: 70%;
    height: 16em;
    }

label {
    cursor: pointer;
    }

.explanation {
    border-top: 1px dotted #153E7E;
    border-bottom: 1px solid #153E7E;
    padding: 0.8em;
    font-size: 0.9em;
    }
    
.alert {
    clear: both;
    font-size: 1.5em;
    display: inline;
    font-weight: bold;
    color: #FFFFCC;
    }
    
/* i know, an ugly spacer, sorry
it's so that the double line in the user area go all the way down, even if hte page isn't full */
.spacer {
    clear: both;
    }
    
.break {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-top: 2px dotted #153E7E;
    border-bottom: 2px dotted #153E7E;
    }


#imageslist {
	}
    
#imageslist li {
    cursor: move;
    position: relative;
    float: left;
    margin: 1px;
    width: 126px;
    height: 194px;
    padding: 1px;
    text-align: center;
	}
    
#biophoto {
    float: left;
    width: 100px;
    }