/* '$RCSfile$' */
/* Purpose: Default style sheet for PISCO project web pages */
/* Using this stylesheet rather than placing styles directly */
/* into PISCO web documents allows us to globally change the */
/* formatting styles of the entire site in one easy place. */
/* Versioning information for this document can be found at */
/* cvs.piscoweb.org. */
/* Copyright: 2000 Regents of the University of California and the */
/* Partnership for Interdisciplinary Studies of Coastal Oceans */
/* Authors: Chris Jones, James Woods */
/* */
/* '$Author$' */
/* '$Date$' */
/* '$Revision$' */
/* */
/*
* import eml css:
*/
body {
margin: 0px; /* No NN4 */
padding: 0px;
border: 0px;
background-image: url('images/bg.gif');
background-position: top left; /* No NN4 */
background-repeat: repeat-y; /* No NN4 */
background-color: #ffffff;
color: #006699;
font-style: normal;
font-weight: normal;
font-size: 85%;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
body>div img {
padding: 0px 0px 0px 0px;
}
#header {
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px;
border: 0px;
background-image: url('images/data_catalog_header_bg.jpg');
background-position: top left; /* No NN4 */
background-repeat: repeat-x; /* No NN4 */
height: 100px; /* begin hack for ie5win */
width: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: 78px;
width: 100%;
}
html>body #header {
width: 100%;
height: 78px; /* end hack for ie5win */
}
#left_logo {
position: absolute;
top: 0px;
left: 0px; /* we want the logo on the left */
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px;
border: 0px;
background-image: url('images/data_catalog_logo.jpg');
background-position: top left; /* No NN4 */
background-repeat: no-repeat; /* No NN4 */
width: 167px; /* begin hack for 1e5win */
height: 100px;
voice-family: "\"}\"";
voice-family: inherit;
width: 167px;
height: 78px;
}
html>body #left_logo {
width: 167px;
height: 78px; /* end hack for ie5win */
}
#right_logo {
position: absolute;
top: 0px;
right: 0px; /* we want the logo near the right */
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px;
border: 0px;
background-image: url('images/data_catalog_header_corner.jpg');
background-position: top right; /* No NN4 */
background-repeat: no-repeat; /* No NN4 */
height: 100px; /* begin hack for 1e5win */
width: 78px;
voice-family: "\"}\"";
voice-family: inherit;
height: 78px;
width: 78px;
}
html>body #right_logo {
width: 78px;
height: 78px; /* end hack for ie5win */
}
#banner {
margin: 0px 0px 0px 167px; /* T R B L */
padding: 0px;
border: 0px;
background-image: url('images/data_catalog_header_search.jpg');
background-position: top left; /* No NN4 */
background-repeat: no-repeat; /* No NN4 */
height: 100px; /* begin hack for 1e5win */
width: 400px;
voice-family: "\"}\"";
voice-family: inherit;
height: 78px;
width: 393px;
}
html>body #banner {
height: 78px; /* end hack for ie5win */
width: 393px;
}
#left_sidebar {
position: absolute;
top: 78px;
left: 0px;
margin: 0px;
padding: 0px;
border: 0px;
width: 180px; /* begin hack for 1e5win */
voice-family: "\"}\"";
voice-family: inherit;
width: 167px;
}
html>body #left_sidebar {
width: 167px; /* end hack for ie5win */
}
#right_sidebar {
position: absolute;
top: 78px;
right: 0px;
margin: 0px;
padding: 0px;
border: 0px;
width: 180px; /* begin hack for 1e5win */
voice-family: "\"}\"";
voice-family: inherit;
width: 0px;
}
html>body #right_sidebar {
width: 0px; /* end hack for ie5win */
}
#content {
border: 0px;
margin: 20px 20px 0px 187px;
}
#loginbox {
border: 0px;
position: absolute;
top: 55px;
right: 65px;
}
#footer {
position: absolute;
right: 10px;
bottom: 0;
left: 167px;
margin: 0px 10px 10px 177px;
}
#debug {
position: absolute;
right: 20px;
bottom: 0;
left: 167px;
margin: 0px 10px 10px 177px;
}
p,ul,ol,dl,li,dt {
color: #006699;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
p ol,p ul, p dl, ol ul {
color: #006699;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
ul,ol {
padding: 0px;
margin: 0px 0px 0px 15px;
}
div {
color: #006699;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* NN 4.xx needs the font weight reset for b and strong tags */
strong, b {
font-weight: 800;
}
/* to emphasize words, use it inline with a <span> class*/
big {
font-size: larger;
}
/* to shrink words, use it inline with a <span> class*/
small {
font-size: smaller;
}
/* for pre-formated text: adds a small padding around it
* font is set to the default style,
* but could be changed for different effect
*/
pre {
color: #006699;
padding: 10px;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* for creating block quotes.
* set off with a slight indent to the left & right margins
* font is set to default style,
* but could be changed for different effect
*/
blockquote {
color: #006699;
padding: 0;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* Headings Tags :
* Headings are used to break up straight text.
* They are used to present topics, or subsections, chapters, etc.
* There are 6 headings tag which can be styled as we wish.
* All of our headings will be rendered in the same font and color as the
* default settings.
*/
/* h1: very large font, set bold */
h1 {
color: #006699;
padding: 0;
font-size: 200%;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* large font, set bold */
h2 {
color: #006699;
padding: 0;
font-size: 150%;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* slightly larger font, set bold
h3 {
color: #006699;
padding: 0;
font-size: 120%;
font-style: normal;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
*/
/* Style headings */
h3 {
border-bottom: #94c1d4 solid 1px;
color: #006699;
padding: 0;
margin: 3px;
text-align: left;
font-style: italic;
font-weight: 200;
}
/* same size font as default, no bold */
h4 {
color: #006699;
padding: 0;
font-style: normal;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* slightly smaller font */
h5 {
color: #006699;
padding: 0;
font-size: 90%;
font-style: normal;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* very small font */
h6 {
color: #006699;
background-color: #FFFFFF;
padding: 0;
font-size: 50%;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* Old style hr command - will be depreciated
* Netscape 4.x does not like this
* should use new style below
*/
hr {
border-top: #006699 0px solid;
width: 450px;
height: 2px;
color: #006699;
background-color: #006699;
/*border-width: none;
border-color: #006699; */
}
/* New horizontal rule. Netscape 4.x should render this fine.
* apply this class to a <div> tag for the desired effect.
* the rule is 1px wide, blue with a slight margin on the left and right.
*/
.rule {
border-top-width: 2px;
border-top-style: solid;
border-color: #006699;
margin: 4px 4px
}
/* check all link properties
* make links orange
* without decorations (underlines, etc)
* and same size relative to parent
*/
a:link {
color: #CC6633;
text-decoration: none;
}
a:visited {
color: #CC6633;
text-decoration: none;
}
a:hover {
color: #CC6633;
text-decoration: underline;
}
a:active {
color: #CC6633;
text-decoration: underline;
}
/* image styles */
/* no padding or border around images by default */
img {
border: 0px;
border-style: none;
border-width: 0px;
padding: 0px;
text-decoration: none;
}
/* this class is needed to remove some extra space along the top of images
* this attribute can not be put into default img class because it prevents
* text from wrapping correctly
*/
img.vtop {
vertical-align: top;
}
/* Add a blue border around an image */
img.border {
border: medium;
border-style: solid;
border-color: #006699;
padding: 0px;
}
/* Format the headshot images in the who section */
img.headshot {
margin-right: 20px;
margin-bottom: 40px;
}
/* Format the headshot images in the who section
* that have alot of text aligned to the right */
img.headshot_long {
margin-right: 20px;
margin-bottom: 80px;
}
/* Format inline images justified to the left in the text*/
img.inlineleft {
border: medium;
border-style: solid;
border-color: #006699;
margin-right: 8px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Format inline images justified to the right in the text*/
img.inlineright {
border: medium;
border-style: solid;
border-color: #006699;
margin-left: 8px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Default behavior for linked images
* no border, no padding, aligned to the top
*/
a img {
border: 0px;
border-style: none;
border-width: 0px;
padding: 0px;
vertical-align: top;
text-decoration: none;
}
/* Default for table cells.
* No border or padding.
* Keep the relative font size and set color to blue
*/
td {
color: #006699;
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
border: 0px;
padding: 0px;
vertical-align: top;
}
/* Classes for the footer area */
/* Basic footer class to get the correct font size
* default footer style.
* colors are the same, but font size is smaller
*/
.footer {
color: #006699;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 0px;
font-size: 75%; /* No EM in NN4 */
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
}
/* extra class to handle the small table in the footer */
.tblfooter {
color: #006699;
background-color: #FFFFFF;
font-size: 75%; /* No EM in NN4 */
font-style: normal;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* Classes for positioning: use with div tags for desired effect */
.indent1 {
white-space: nowrap;
padding-left: 10px;
}
.indent2 {
padding-left: 15px;
}
.indent3 {
padding-left: 50px;
}
/* Classes for the <em> tag (emphasis) */
.italic {
font-style: italic;
font-weight: normal;
}
.italics {
font-style: italic;
font-weight: normal;
}
.bold {
font-style: normal;
font-weight: bold;
}
.waybold {
font-style: italic;
font-weight: bolder;
}
/* Additions for the data catalog pages */
/* Define a border for groups of elements. This uses the
-moz-border-radius (Mozilla, Netscape, Opera only)
attribute for the time being. Once
browsers support the CSS3 border-radius attribute, this
should be switched.*/
.group {
padding: 0;
color: #006699;
min-width: 800px;
voice-family: "\"}\""; /* begin ie5win hack */
voice-family: inherit;
-moz-border-radius: 10px; /* end ie5win hack */
}
/* Children of the group get some padding */
.group * {
padding: 2px;
}
.group_border {
/* orange-ish border */
border: #cc9900 solid 1px;
}
.subGroup {
padding: 3px;
color: #006699;
voice-family: "\"}\""; /* begin ie5win hack */
voice-family: inherit;
-moz-border-radius: 10px; /* end ie5win hack */
}
.subGroup_border {
/* blue-ish border */
border: #94c1d4 solid 1px;
}
/* This selector causes the 'section' tables to indent under the overarching div
* tags */
div>table.subGroup {
padding-left: 15px;
padding-right: 15px;
}
div.left {
position: absolute;
left: 20px;
clear: right;
}
div.right {
position: absolute;
right: 20px;
clear: left;
}
table.left {
position: absolute;
left: 20px;
}
table.right {
float: right;
margin-right: 10px;
clear: left;
}
th {
border-bottom: #94c1d4 solid 1px;
color: #94c1d4;
padding: 0;
margin: 0;
text-align: left;
font-style: italic;
font-weight: 700;
}
th.rowheader {
background: #e5f5fd;
border-right: #94c1d4 solid 1px;
}
.rowodd {
border-bottom: #94c1d4 dotted 1px;
border-top: #94c1d4 dotted 1px;
background-color: #e5f5fd;
padding: 0;
margin: 0;
}
.roweven {
padding: 0;
margin: 0;
}
.coleven {
border-left: #94c1d4 dotted 1px;
border-right: #94c1d4 dotted 1px;
background-color: #e5f5fd;
padding-left: 2px;
padding-right: 2px;
text-align: left;
}
.colodd {
padding-left: 2px;
padding-right: 2px;
text-align: left;
}
.innercolodd {
border: solid #94c1d4 1px;
font-size: .75em;
padding-left: 2px;
padding-right: 2px;
text-align: left;
}
.innercoleven {
border: solid #94c1d4 1px;
background-color: #e5f5fd;
font-size: .75em;
padding-left: 2px;
padding-right: 2px;
text-align: left;
}
.onehundred_percent {
width: 100%;
}
.seventyfive_percent {
width: 75%;
}
.fifty_percent {
width: 50%;
}
.fortyfive_percent {
width: 45%;
}
.forty_percent {
width: 40%;
}
.twentyfive_percent {
width: 25%;
}
.fifteen_percent {
width: 15%;
}
input, select, textarea {
color: #006699;
border: 1px solid #94c1d4;
margin: 5px;
}
input.submit {
margin-left: 5px;
border: #94c1d4 dotted 1px;
background-color: #e5f5fd;
font-size: 85%;
}
label {
text-align: right;
vertical-align: middle;
color: #94c1d4;
}
.login {
font-size: 85%;
width: 6em;
}