html {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
background: #e5e5e5;
background-image:url(../images/side_map.gif);
background-repeat:no-repeat;
}
/*** STRUCTURE ***/
#wrapper {
position:relative;
width: 780px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
min-height:600px;
background: #fff;
-moz-border-radius: 0px 0px 8px 8px;
webkit-border-radius: 0px 0px 8px 8px;
}
#masthead {
background: #c00;
height: 50px;
}
#navigation {
background:#ccc;
padding:1px;
height: 21px;
}
#content {
float:left;
width: 560px;
background: #fff;
min-height:650px;
overflow:auto;
}
#content_long {
float:left;
width: 560px;
background: #fff;
min-height:1175px;
overflow:auto;
}
#content_verylong {
float:left;
width: 560px;
background: #fff;
min-height:2000px;
overflow:auto;
}
#content_mid {
float:left;
width: 560px;
background: #fff;
min-height:950px;
overflow:auto;
}
#content_short {
float:left;
width: 560px;
background: #fff;
min-height:550px;
overflow:auto;
}
#content_home {
float:left;
width: 560px;
background: #fff;
min-height:610px;
_height:650px;
overflow:auto;
}
#content_nonav {
float:left;
width:auto;
padding:10px;
background: #fff;
min-height:610px;
_height:650px;
overflow:auto;
}
#sidebar {
float: right;
width: 220px;
background: #FFCC66;
-moz-border-radius: 0px 0px 8px 8px;
webkit-border-radius: 0px 0px 8px 8px;/*match sidebar background color in wrapper for full sidebar*/
}
#sidebar_nav {
float: right;
width: 220px;
background: #FFCC66;
-moz-border-radius: 8px 8px 8px 8px;
webkit-border-radius: 8px 8px 8px 8px;
margin: 8px 0px 0px 0px/*match sidebar background color in wrapper for full sidebar*/
}
#sidebar_bookmark {
float: right;
width: 220px;
background: #FFCC66;
-moz-border-radius: 8px 8px 8px 8px;
webkit-border-radius: 8px 8px 8px 8px;
margin: 8px 0px 0px 0px/*match sidebar background color in wrapper for full sidebar*/
}
#footer {
clear: left;
background: #CCC;
color: #333;
text-align: center;
padding: 4px 0;
height:12px;
-moz-border-radius: 0px 0px 8px 8px;
webkit-border-radius: 0px 0px 8px 8px;
}
#footer_breadcrumb {
float:left;
width: 560px;
background: #fff;
overflow:auto;
}
#map_openlayers_sm {
width: 510px;
height: 800px;
}
#map_openlayers_lg {
width: 780px;
height: 600px;
}
#flashcontent {
width: 510px;
height: 500px;
}
.innertube {
margin: 10px; /*Padding for inner DIV inside each column*/
}
/*** STRUCTURE - INNER ***/
img {
border:0;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.floatleftpad {
float:left;
margin: 0 8px 0 0;
}
.floatrightpad {
float:right;
margin: 0 0 0 8px;
}
.floatleftclear {
float:left;
float:left;
margin: 0 8px 0 0;
}
.floatrightclear {
float:right;
clear:right;
margin: 0 0 0 8px;
}
.clearboth {
clear: both;
}
.featurebox {
float:left;
width:250px;
height:300px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
} /*Floated gfx in feature boxes should be placed within p tags to align margin with text*/
.featureboxwide {
float:left;
width:510px;
height:auto;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
} /*Width of featureboxwide is featurebox width doubled plus right margin 8px plus 2px for borders*/
.featureboxwide_whitebg {
float:left;
width:510px;
height:auto;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
} /*Width of featureboxwide is featurebox width doubled plus right margin 8px plus 2px for borders*/
.featureboxhalf {
float:left;
width:250px;
height:142px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
.featureboxthird {
float:left;
width:165px;
height:300px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
.featureboxquarter {
float:left;
width:125px;
height:142px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
.featurebox_grow {
float:left;
width:250px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
.featureboxphoto {
float:left;
width:260px;
background:#f2f2f2;
margin: 0 8px 8px 0;
border:1px solid #ccc;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
.featurebox p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxwide p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxhalf p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxthird p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxquarter p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxwide_whitebg p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featureboxhalf_whitebg p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featurebox_grow p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featurebox_photo p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding: 0 8px;
}
.featurebox ul {
padding:0 8px;
margin-left:0;
}
.featurebox li {
list-style-type: none;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
margin-bottom:6px;
}
.featuretitle {
display:block;
font: 14px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #fff;
text-align:center;
margin: 0px;
padding:4px;
background: #c00;
-moz-border-radius: 8px 8px 0px 0px;
webkit-border-radius: 8px 8px 0px 0px;
}
.featurebottom {
display:block;
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
margin: 0px;
padding:2px;
background: #c00;
-moz-border-radius: 0px 0px 4px 4px;
webkit-border-radius: 0px 0px 4px 4px;
}
.bubbletalk {
position:relative;
float:left;
clear:both;
width:auto;
background-color: #e5e5e5;
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #333;
padding:4px;
-moz-border-radius:8px;
webkit-border-radius:8px;
}
/*** TEXT ***/
p {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
td {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
.introtext {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
line-height: 17px;
}
.smalltext {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
.smallertext {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
.breadcrumb {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #666;
padding:8px;
}
.caption {
font: 9px Verdana, Arial, Helvetica, sans-serif;
color: #333;
text-align:center;
}
.sidebarheader {
font: 18px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #666;
}
h1 {
font: 30px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #ccc;
}
h2 {
font: 22px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #666;
}
h3 {
font: 18px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #666;
}
h4 {
font: 14px Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #666;
}
ul.default {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #333;
}
ul.default li {
margin-bottom:8px;
}
ol.default {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #333;
}
ol.default li {
margin-bottom:8px;
}
.snredcolored {
color:#c00;
}
/*** LINKS ***/
a:link {
color: #c00;
text-decoration: none;
}
a:visited {
color: #c00;
text-decoration: none;
}
a:active {
color: #000;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: underline;
}
/*** FORMS ***/
input.btn {
color:#fff;
font: 10px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
background-color:#c00;
border:1px solid #ccc;
-moz-border-radius:4px;
webkit-border-radius:4px;
}
input.btnhov {
color:#c00;
font: 10px Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
background-color:#ccc;
border:1px solid #c00;
-moz-border-radius:4px;
webkit-border-radius:4px;
}
input, select, textarea, textfield {
color:#000;
font: 10px Verdana, Arial, Helvetica, sans-serif;
background-color: #e5e5e5;
border: 1px solid #c00;
}
input:focus, textarea:focus {
background: #fff;
border-color: #c00;
}
/*** BEGIN MENU STYLE ***/
/* HORIZONTAL FREESTYLE MENU LAYOUT */
/* All tags in the menu including the first level */
.menulist, .menulist ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Submenus ( tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
display: none;
position: absolute;
top: 0.7em;
margin-top: 11px; /* I'm using ems and px to allow people to zoom their font */
left: -1px;
width: 150px;
}
/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
top: -1px;
margin-top: 0;
left: 148px; /* WHY ISN"T THIS WORKING? */
}
/*
All menu items (- tags). 'float: left' lines them up horizontally, and they are
positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
float: left;
display: block;
position: relative;
background: #ccc;
margin-right: -1px;
width:150px;
}
/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
float: none;
margin: 0;
margin-bottom: -1px;
border: 1px solid #999;
}
.menulist ul>li:last-child {
margin-bottom: 1px; /* Mozilla fix */
}
/* Links inside the menu */
.menulist a {
display: block;
padding: 4px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #c00;
text-decoration: none;
}
/* Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
color: #000;
background-color: #999;
text-decoration: none;
}
.menulist a.highlighted {
color: #000;
background-color: #999;
text-decoration: none;
}
/*
If you want per-item background images in your menu items, here's how to do it.
1) Assign a unique ID tag to each link in your menu, like so:
2) Copy and paste these next lines for each link you want to have an image:
.menulist a#xyz {
background-image: url(out.gif);
}
.menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
background-image: url(over.gif);
}
*/
/* Only style submenu indicators within submenus. */
.menulist a .subind {
display: none;
}
.menulist ul a .subind {
display: block;
float: right;
}
/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
float: left;
}
.menulist ul a {
float: none;
}
/* \*/
.menulist a {
float: none;
}
/* */
/*
HACKS: IE/Win:
A small height on
- and tags and floating prevents gaps in menu.
* html affects <=IE6 and *:first-child+html affects IE7.
You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist ul li {
float: left;
width: 100%;
}
* html .menulist ul li {
float: left;
height: 1%;
}
* html .menulist ul a {
height: 1%;
}
/* End Hacks */
/*** END MENU STYLE ***/
/*** HTML SITEMAP ***/
span.foldopened {
color: white;
border-width: 1;
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding: 0em 0.25em 0em 0.25em;
background: #e0e0e0;
VISIBILITY: visible;
cursor:pointer;
}
span.foldclosed {
color: white;
border-width: 1;
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding: 0em 0.25em 0em 0.25em;
background: #e0e0e0;
visibility: hidden;
cursor:pointer;
}
span.foldspecial {
color: #666666;
font: 10px Verdana, Arial, Helvetica, sans-serif;
border-style: none solid solid none;
border-color: #CCCCCC;
border-width: 1;
padding: 0em 0.1em 0em 0.1em;
background: #e0e0e0;
cursor:pointer;
}