/* for all pages */
h1 {font-size:3em;}
h2 {font-size:2em;}
code {color:#CC0000;}
a:link {color:#000099;} /*or 0000CC */
a:visited {color:purple;}
/* a:hover {background-color:#BDB76B; color:#000099;} /* background-color:#FFFFAA; color:#000099; */
a:active {color:red;}
body {background-color: black; font-family: sans-serif;}
.hide, .hideimage {display:none;}
.show {display:inline;}
.sectionhead {font-weight:bold;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
background-color:#996600;
color:#99CC00;}
.sectionhead:hover {background-color:#99CC00;
color:#996600;}
dt {font-weight:bold;}
/* for individual image pages and the many index pages*/
.image, .hideimage {text-align: center;}
.caption, .index .intro {
color:black;
text-align: justify;
width: 600px;
margin: 10px auto;
padding: 10px;
background-color: #FFFFAA;} /*FFFFAA BDB76B CC9966 */
.intro div {margin-left:10px;
margin-top:5px;
margin-bottom:10px;
float:right;}
.prevnext {margin: 10px auto;
padding: 4px;
width: 50px; /* 220px */
text-align: center;
background-color: #FFFFAA; /*BDB76B */
font-weight:bold;
position:absolute; top:2px; left:5px;} /*wasn't here*/
.prevnext a {text-decoration:none;
color:black;}
.prevnext a:link {}
.prevnext a:visited {}
.prevnext a:hover {background-color:#BDB76B; color:#000099;}
.prevnext a:active {}
.index {width: 100%;
margin: 0px auto;
text-align: center;} /* border: 3px coral solid;} */
.index h1 {color: #FFFFAA;}
.index h2 {color: #FFFFAA; font-size:1em;}
.index h1+h2 {margin-top: -1.5em;} /* squeeze the spacing together a bit on consecutive headings */
.index .intro h2, .index .caption h2 {color:#000000;} /* this is just putting some things back to normal, is there a better way to do that? */
/*for the homepage, combination with .thumb */
.thumbcontainer .thumb {
float:left;
width:250px;}
/* for the main index page. color rule works for ".thumb a" but not for "h2 a" decoration works for either */
.thumb img {border-width: 0; margin: 0px;}
.thumb {border:0px black solid;
margin:0px auto;
text-align:center;}
.thumb a {text-decoration:none;
color:black;}
/* make margin closer between heading and its image h2+a {margin-bottom: 5em;} */
.thumb h2 {margin-bottom: .3em;}
hr {color: #000000;
background-color: #000000;
border: 0;
height: 2px;
margin-bottom: 4px; }
/*Navigation*/
.navdiv {float:left;
width:100px;
margin:0 auto;
text-align:center;
border:0px black solid;
font: normal .7em verdana;}
.navdiv ul {margin: 0;
padding: 0;
list-style: none;
width: 100px; /* Width of Menu Items */
border-bottom: 1px solid #cca;}
.navdiv img {margin-top:9px;}
.navdiv ul li {position: relative;}
.navdiv li ul {position: absolute;
left: 99px; /* Set 1px less than menu width */
top: 0;
width:170px;
display: none;}
.navdiv li ul li ul {display:none;}
/* Styles for Menu Items */
.navdiv ul li a {display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #cca; /* IE6 Bug */
border-bottom: 0;}
/* Holly Hack. IE Requirement \*/
* html .navdiv ul li { float: left; height: 1%; } /*not sure about .navdiv here....???? */
* html .navdiv ul li a { height: 1%; }
/* End */
.navdiv li:hover ul, li.over ul { display: block; } /* The magic */
/* NOTES and extra examples
In the css file:
selector {property: value; property: value;}
In the :
DON'T forget the semicolon
Font style possibilities:
color:any
text-decoration: none underline overline
font-weight: bold normal
font-style:italic normal
font-family: any e.g. Verdana, Arial, Helvetica, sans-serif;
font-size: use em units. 1 em is "normal" size
background-color: any valid color, or "transparent"
Possible display values: block | inline | list-item | none
creating my own tags works, but probably is bad: blahblah {color:purple;}
use classes instead: .blahblah {color:purple}
ol {color:green;}
the following works. Is there a way to override it so some figures can be a different size?:
img {height:360px; width:480px;}
body {margin: 0px; padding: 0px; text-align: center;}
div {margin: 0 auto;} centers the div on the page
img {vertical_align: text-bottom; margin: 10px; align:right;}
.centereddiv {width: 230px; align: center; border: 3px coral solid; margin: 0 auto;}
.floatleft {float:left; border: 3px yellow solid; }
.floatright {float:right; border: 3px red solid; }
.caption2 {color:black; text-align: justify; width: 600px; margin: 0 auto;
padding: 10px;
background-color: #BDB76B;
background-image: url(antLate03/thumbnails/001Campanile.jpg); background-repeat: repeat-y;
background-attachment: fixed; background-position: center bottom;}
p::first-letter {font-size: 200%; padding: 3px; border: solid black; border-width: 2px 0 0 2px; border-color: red;}
p:first-child::first-line {text-transform: uppercase; }
*/