in the HTML; in CSS, .caption corresponds to

in the HTML. Elements such as or

are the same in both CSS and HTML, except there are no arrows (<>) used in the CSS. Also, not every element in the HTML will be represented in the CSS, only the ones for which we wanted to create specific styles.*/ /*-----SITE-WIDE STYLES this dictates how the entire body of the page will render-----*/ *{ margin: 0px; padding: 0px; } body { font-family: trebuchet ms, helvetica, sans-serif; font-size: small; color: #333333; background-color: #F3F6E4; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: large; font-weight: normal; color:#224F8C; margin: 12px 0px 8px -2px; } h2 { font-family:trebuchet ms, helvetica, sans-serif; font-size: medium; font-weight: normal; color:#224F8C; margin: 12px 0px 8px -2px; } h3 { font-family:Georgia, "Times New Roman", Times, serif; font-size: small; font-weight: normal; color:#224F8C; margin: 12px 0px 8px -2px; } h4 { font-family:Georgia, "Times New Roman", Times, serif; font-size: x-small; font-weight: bold; color:#224F8C; margin: 12px 0px 8px -2px; } /*-----This controls how h4, when hyperlinked, looks and behaves-----*/ h4 a:link, h4 a:active, h4 a:visited { color:#224F8C; text-decoration: none; font-weight: bold; } h4 a:hover { color:#81ae85; font-weight: bold; } /*-----END-----*/ /*-----WRAP contains the entire page---*/ #wrap { padding: 10px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #F3F6E4; width: 97%; } /*-----HEADER TOP PART OF PAGES this includes the top pictures and the search box-----*/ #header_wrap { width: 100% } #headerlogo { height: 16px; width: 100%; background-image: url(../site_imgs/new_grid.gif); background-repeat: repeat-x; } #headerlogomacro { height: 16px; width: 100%; background-image: url("new_grid.gif"); background-repeat: repeat-x; } #header { height: 80px; background-color: #B9DABB; } #header img { border:none; float: left; } #search { padding: 10px; height: 80px; text-align: right; } /*-----TOP NAVIGATION this controls the look and behavior of the top navigation, including "fill" to keep the navigation in place-----*/ /*-----FILL is basically an empty div that keeps the navigation in place---*/ #fill { border:0px; width:175px; float:left; background-image:url(../site_imgs/topnav_bg.gif); background-repeat:repeat-x; padding: 5px 0px 0px 0px; } #navbar { color: #FFFFFF; background-color: #EAEAEA; border-bottom: 1px #cccccc solid; text-align: center; background-image:url(../site_imgs/topnav_bg.gif); background-repeat:repeat-x; } #navbar .navbarwrap { width:100%; margin:0px auto; border-left:#ccc 1px solid; border-right:#ccc 1px solid; } #nav { margin-right: auto; margin-left: auto; text-align: left; } /*----- UL and LI are list elements that we used to create navigation lists and other lists throughout the site ...other divs have different ways of making the UL and LI elements behave-----*/ #nav, #nav ul { padding: 0 0 0 0px; margin: 0; list-style: none; line-height: 1; font-family: trebuchet ms, helvetica, sans-serif; font-size: x-small; font-weight: bold; } /*-----The "a" attribute is for hyperlinks...other divs have different ways of making the 'a" attribute behave-----*/ #nav a { display: block; padding: 7px 15px 5px 15px; background-image: url(../site_imgs/topnav_bg.gif); border-right: #cccccc 1px solid; text-decoration: none; color: #414748; } #nav a:hover { background-color: #DCDFE7; background-image:url(../site_imgs/topnav_bg_over.gif); } #nav li { float: left; } #nav li ul { position: absolute; background: #EAEAEA; width: 200px; left: -999em; } #nav li ul li{ width: 200px; } #nav li ul li a{ font-weight: normal; font-size: x-small; } #nav li ul ul { margin: -1em 0 0 10em; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; } /*-----MAIN CONTENT this controls look and behavior of everything below the header-----*/ #content { margin-right: auto; margin-left: auto; width: 100%; text-align: center; } /*-----The BREAD div is used to control the behavior of the breadcrumbs just above the title of each page in the middle column-----*/ #bread { margin-left: auto; text-align: left; } #anchor { margin-left: auto; text-align: left; } #anchor a:link, #anchor a:active, #anchor a:visited { color:#224F8C; } #anchor a:hover { color:#81ae85; } #maincontent { margin: 0px auto; } /*-----LEFT COLUMN-----*/ #leftcol { float: left; width: 159px; text-align:left; padding-left: 5px; padding-top: 40px; background-color: #F3F6E4; } #leftcol li { list-style-type: none; font-family: trebuchet ms, helvetica, sans-serif; border-top: 1px solid #ccc; padding-bottom: 8px; } /*-----This controls how left column "a" attributes, when hyperlinked, look and behave-----*/ #leftcol a:link, #leftcol a:active, #leftcol a:visited { text-decoration: none; color:#224F8C; } #leftcol a:hover { text-decoration: none; color:#81ae85; } #leftcol li a:link, #leftcol li a:active, #leftcol li a:visited { text-decoration: none; color:#224F8C; } #leftcol li a:hover { text-decoration: none; color:#F3F6E4; background-color: #224F8C; display: block; } /*-----KNOW div controls the behavior of the rotating images and text in the index.php page's left column-----*/ #know { width: 150px; font-family: trebuchet ms, helvetica, sans-serif; font-size: small; color: #333333; text-align: center; border-style: double; border-width: thin; border-color:#224f8c; padding:2px; margin-left: -3px; } /*-----END-----*/ /*-----MIDDLE COLUMN-----*/ #midcol { float: left; width: 65%; padding: 20px 15px 0px 25px; text-align: left; color:#000000; background-color:#F3F6E4; border-left: 1px dotted #cccccc; } #midcol li { padding: 0px; margin: 10px 0px 12px 30px; list-style-type: disc; } /*-----This controls how middle "a" attributes, when hyperlinked, look and behave-----*/ #midcol a:link, #midcol a:active { color: #316fc3; text-decoration: none; font-weight: bold; } #midcol a:visited { color: #666666; text-decoration: none; font-weight: bold; } #midcol a:hover{ color:#81ae85; font-weight: bold; } /*-----END-----*/ /*-----.caption, .icon_left, and .icon_right are classes that control the look and behavior of images, and the paragraphs that hold them, in the middle column-----*/ #midcol .caption { width:200px; float:left; margin:5px; font-style:italic; font-size:x-small; text-align:center; padding: 3px; } #midcol .captioncenter { width:200px; float:center; margin:5px; font-style:italic; font-size:x-small; text-align:center; padding: 3px; } #midcol .icon_left { clear: both; height:200px; padding-top: 5px; padding-right: 0px; padding-bottom:10px; padding-left:0px; } #midcol .icon_left img { padding-top: 0px; padding-right: 10px; padding-bottom: 5px; padding-left: 0px; float: left; border: none; } #midcol .icon_left2 { clear: both; height:auto; padding-top: 5px; padding-right: 0px; padding-bottom:10px; padding-left:0px; } #midcol .icon_left2 img { padding-top: 0px; padding-right: 10px; padding-bottom: 5px; padding-left: 0px; float: left; border: none; } #midcol .icon_left3 { clear: both; height:200px; padding-top: 5px; padding-right: 0px; padding-bottom:10px; padding-left:0px; } #midcol .icon_sneak { color:#F3F6E4; } #midcol .icon_left img { padding-top: 0px; padding-right: 10px; padding-bottom: 5px; padding-left: 0px; float: left; } #midcol .icon_right { clear: both; height:auto; padding-top: 5px; padding-right: 0px; padding-bottom:10px; padding-left:0px; } #midcol .icon_right img { padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; float: left; } /*-----Class P_HANG creates a hanging indent when applied to text that you want to add the indent to, like in the resources.php pages-----*/ #midcol .p_hang { padding-left: 1em; text-indent: -1em; } /*-----TABLE This controls the look of any table elements used -----*/ table { font-size: x-small; width: 575px; border-top-width: 1px; border-top-style: solid; border-top-color: #330000; } td { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; } td.item { width: 190px; font-weight: bold; } td.naming { width: 385px; font-weight: bold; } td.capture { width: 140px; font-weight: bold; } td.resol { width: 100px; font-weight: bold; } td.file { width: 100px; font-weight: bold; } td.storage { width: 45px; font-weight: bold; } /*-----FOOTER This controls the look and behavior of the elements at the very bottom of the page-----*/ #footer { height: 50px; background-color: #B9DAB9; font-size: x-small; font-family: trebuchet ms, helvetica, Arial, sans serif; text-align:center; vertical-align:middle; padding:1px 3px 0px 3px; } #footer img { border: none; } /*-----This controls footer "a" attributes, when hyperlinked, look and behave-----*/ #footer a:link, #footer a:hover, #footer a:active, #footer a:visited { color: #333333; text-decoration: none; text-align: center; vertical-align:middle; font-weight: bold; } /*-----END-----*/ #bechs { float:left; vertical-align:middle; } #watermark { float:right; vertical-align:middle; } /*-----MISCELLANEOUS STUFF TO MAKE THE SITE WORK CORRECTLY-----*/ .clear {clear:both;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */