/*========================================================================
Cal Poly Template Print Stylesheet
CSS developed by
Information Technology Services
California Polytechnic State University
San Luis Obispo, CA 93407
========================================================================
DO NOT EDIT THIS STYLESHEET. Instead edit the print.css and the screen.css files in the "css" folder.
Style Name: "Cal Poly Classic"
XHTML Code Base: Version 3.4.7
History:
2008-04-01 New release: Spring Quarter 2008
2008-04-10 Removed left and right divs that split page in half; removed "clear: both" from #content hr
2008-04-28 Added styles for horizontal navigation and content box with no border
2008-05-09 Applied background color to goldbar p and ul, and also changed alt text color of dept logo
and GO button so there is sufficient contrast with images disabled
2008-05-12 Decreased h3 and h4 text sizes; allowed horizontal nav to align left
2008-05-15 Removed "width: 100%" from content tables, added center and right align styles to tables,
applied source formatting, cleaned up link styles by combining repetitive properties
2008-05-21 Fixed Browser Compatibility Issues
2008-05-22 Fixed layout problems in IE6 that were caused by removing HTML comments above DOCTYPE in templates
2008-05-23 Applied IE6 and IE7 to fieldset and legend
2008-06-03 Removed "clear: both" from and changed font size of .backtotop; added contentBox_outline_only;
added "code" styles
2008-06-18 Added .insetBox_left and .insetBox_right styles, added width: 100%; to #content table.split,
added vertical-align: top; to #content table.split td; added style to kbd tag to match code tag.
2008-07-17 Added Gold Highlight Area styles in navcontent1 and navcontent2; Added IE 8 Beta 1 Hacks
2008-10-21 Changed content h2 link styles, Added styles for rightcol h1
2009-01-08 Caption feature (insetBox_left and insetBox_right) can now be applied to a <p>
2009-01-09 Added Opera hack to header to remove grey top margin
2009-01-14 Created homepage template, sample page, and styles
2009-01-30 Chaged leftnav and rightcol styles. Changed header fonts and misc typography
2009-02-09 Added Cascade Server comments
2009-03-06 Redeigned leftnav and rightcol; Changed header background; modified top and bottom goldbars to
extend across page
2009-04-01 Removed leftnav, rightcol, skiplink, and search box from print stylesheet
2009-04-14 Lists are set to "outside" by default; "inside" class created
2009-06-25 Moved splash div to inside content div on homepage template
2009-07-02 Rearranged styles into two sections, Layout and Content
2009-08-18 Removed 10px left margin from tables - fixed the pages with tables on them. Also, applied a comment to
#content-3col IE6 hack
2010-03-09 Changed 900px fixed width to 960px on #container
2010-06-30 Added 3rd level indented links to leftnav and rightcol; Edited scope to include .quicklinks class in content
Added column 1,2,3 , 1-2,3 , 1,2-3 layout for use on any page; Footer navigation now available as an unordered
list; Added sample_homepage2-1.
Added .colSplash class to allow use of splash image in columns layout
2010-11-30 Added icon links class and scoped for #content; Re-scoped #content ul and #content ol that was listed in the
homepage quicklinks to be within #columns only; Substitued bullet and space characters with unicode; Added
!important to margin property on quicklinks and iconlinks to override #columns ul (it's a precidence thing)
2010-12-08 Width changed from 100% on table.directory class to accomodate for DW CS5 overflow bug. Added .emphRed class for
bolded red text and .emphBlue class for bolded blue text.
=========================================================================*/
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
L A Y O U T
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
* { margin: 0; padding: 0; }
/* This gets rid of ALL the margin and padding in the whole site,
since each Web browser vendor sets their own default sizes.
This allows you to set whatever padding and margin you would like on any element */
body { background: #fff;}
/* This gets rid of ALL the default borders applied to images.
You can change this option in the CSS to have borders on images if you want */
#container {
margin: 0 auto;
background: #fff;
width: auto;
}
/* The container div encloses the whole cp template
to make sure everything is positioned correctly */
.clear { clear: both; }
/*==============================| SKIPLINK |==============================*/
#skiplink { display: none; }
/*==============================| HEADER, LOGO, and DEPTARTMENT INFO |==============================*/
#header {
width: auto;
background: url(../images/header/header_bg.gif) left top no-repeat #003300;
padding: 0;
}
#header #cplogo,
#header #cplogo a {
font-size: 150%;
font-family: "Times New Roman", Times, serif;
color: #fff;
}
#cplogo {
float: left;
width: 152px;
margin: 0 22px 0 0;
}
#headercontent {
float: left;
min-width: 50%;
margin: 10px 0 12px 0;
padding-left: 20px;
border-left: #fff solid 1px;
}
#headercontent #deptname {
color: #fff;
}
#header #deptname a:link,
#header #deptname a:visited {
text-decoration: none;
color: #fff;
}
#header #deptname a:focus,
#header #deptname a:hover,
#header #deptname a:active {
text-decoration: underline;
color: #fff;
}
#headercontent #deptname p#department_name {
font-family: "Times New Roman", Times, serif;
color: #fff;
font-size: 170%;
font-weight: normal;
padding: 0;
}
#headercontent #deptname p#small_department_name {
font-family: "Times New Roman", Times, serif;
color: #fff;
font-size: 130%;
font-weight: normal;
}
#headercontent #deptname p#optional_deptinfo {
font-size: 80%;
}
#header #cp {
clear: both;
text-align: right;
background: url(../images/header/goldbar.gif) left top repeat-x #d1bd4a;
border-bottom: #9E8E31 solid 1px;
}
* html #header, * html #header #cp { \height: 1%; }
/* Goldbar fix in IE6 - aka "Holly Hack" */
#header #cp p {
font-weight: normal;
font-size: 65%;
color: #000;
letter-spacing: 2px;
padding: 2px 10px 2px 0;
}
#header #cp a:link,
#header #cp a:visited {
color: #000;
text-decoration: underline;
}
#header #cp a:focus,
#header #cp a:hover,
#header #cp a:active {
color: #000;
text-decoration: underline;
}
#headerimage {
float: left;
margin: 0 10px 0 0;
font-size: 65%;
color: #fff;
}
#main-image { display: none; }
/* This is a blank div for a custom header image or content */
/*==============================| HORIZONTAL NAVIGATION |==============================*/
#header #cp ul {
font-size: 70%;
color: #000;
margin: 0 0 0 174px;
padding: 3px 0;
background: url(../images/header/goldbar.gif) top right repeat-x #d1bd4a;
text-align: left;
border-left: #A09727 solid 1px;
}
#header #cp ul li {
display: inline;
}
#header #cp ul li a {
color: #000;
text-decoration: none;
padding: 3px 7px 3px 10px;
border-right: #A09727 solid 1px;
margin-right: -3px;
}
#header #cp ul li a:link,
#header #cp ul li a:visited {
text-decoration: none;
}
#header #cp ul li a:focus,
#header #cp ul li a:hover,
#header #cp ul li a:active {
background: #FFE6AF;
text-decoration: none;
}
/*==============| SEARCH BOX, LEFT NAVIGATION, RIGHT COLUMN NAVIGATION |==============*/
#search { display: none; }
#leftnav { display: none; }
#rightcol { display: none; }
/*==============================| BREADCRUMB |==============================*/
#breadcrumb {
color: #585858;
font-size: 70%;
width: auto;
}
#breadcrumb a:link,
#breadcrumb a:visited {
text-decoration: none;
color: #585858;
}
#breadcrumb a:focus,
#breadcrumb a:hover,
#breadcrumb a:active {
text-decoration: underline;
color: #585858;
}
/*==============================| CONTENT LAYOUT |==============================*/
#content-1col { padding: 10px 0 20px 0; background: #fff; }
#content-2col { margin: 0; padding: 10px 0 20px 0; }
#content-3col { margin: 0; padding: 10px 0 20px 0; }
#content { padding-top: 20px; width: 100%; }
/*------------ IE 6 Hacks ------------*/
* html #content-1col { mar\gin: 0; f\loat: left; }
* html #content-2col { mar\gin: 0; f\loat: left; }
/** html #content-3col { mar\gin: 0; f\loat: left; }*/
/*==============================| HOMEPAGE SPLASH |==============================*/
#content-2col #content #splashOuter { display: none; }
#content-2col #content #splashOuter {
position: relative;
margin: -2px -17px 20px -17px;
}
#content #splash {
width: 100%;
overflow: hidden;
background: url(../images/content/splash_bg.jpg) left top repeat-x;
}
#content #topContent { /*#topContent used at top of homepage.dwt template*/
width: 100%;
}
/**** CASCADE - for WYSIWYG editor CSS - REMOVE BELOW THIS COMMENT - *****/
/*==============================| FOOTER |==============================*/
#footer {
clear: both;
width: 100%;
background: #fff;
border-top: #9E8E31 solid 1px;
font-size: 70%;
height: 11em;
}
#footer p { margin: 10px; }
#footer_links {
padding: 2px 10px 3px;
background: url(../images/header/goldbar.gif) left top repeat-x #d1bd4a;
color: #3F380D;
}
#footer_links p {
display: inline;
margin: 0 30px 0 0;
}
#footer_links a { margin: 0 5px; }
#footer_links a:link,
#footer_links a:visited {
color: #3F380D;
text-decoration: none;
}
#footer_links a:focus,
#footer_links a:hover,
#footer_links a:active {
color: #3F380D;
text-decoration: underline;
}
#footer_deptlinks {
float: left;
width: 49%;
}
#footer_deptlinks ul {
margin:10px;
padding:0;
}
#footer_deptlinks ul li {
display:inline;
list-style-type:none;
}
#footer_deptlinks ul li:before {
content:"\2022 \0020 ";
}
#footer_deptlinks ul li.removeBullet:before {
content:"";
}
#footer_deptlinks a:link,
#footer_deptlinks a:visited {
color: #000;
text-decoration: none;
}
#footer_deptlinks a:focus,
#footer_deptlinks a:hover,
#footer_deptlinks a:active {
color: #000;
text-decoration: underline;
}
#footer_deptinfo {
float: right;
text-align: right;
width: 50%;
}
#footer_deptinfo a:link,
#footer_deptinfo a:visited {
color: #000;
text-decoration: underline;
}
#footer_deptinfo a:focus,
#footer_deptinfo a:hover,
#footer_deptinfo a:active {
color: #000099;
text-decoration: underline;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
C O N T E N T
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
img, a img {
border: none;
color: #003300;
text-decoration: underline;
}
a:hover img {
border: none;
color: #000099;
text-decoration: underline;
}
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#content { font-size: 75%; }
#content a:link,
#content a:visited {
color: #003300;
text-decoration: underline;
}
#content a:focus,
#content a:hover,
#content a:active {
color: #000099;
text-decoration: underline;
}
#content h1 {
color: #1c4102;
margin-bottom: 20px;
font-size: 215%;
font-weight: normal;
background: url(../images/content/dots.gif) left bottom repeat-x;
}
#content h1 a:link,
#content h1 a:visited {
color: #1c4102;
text-decoration: none;
}
#content h1 a:focus,
#content h1 a:hover,
#content h1 a:active {
color: #000099;
text-decoration: none;
}
#content h2 {
font-size: 175%;
font-weight: normal;
margin-bottom: 7px;
color: #186515;
}
#content h2 a:link,
#content h2 a:visited {
color: #186515;
text-decoration: none;
border-bottom: #186515 solid 1px;
}
#content h2 a:focus,
#content h2 a:hover,
#content h2 a:active {
color: #000099;
border-bottom: #000099 solid 1px;
}
#content h3 {
margin-bottom: 7px;
font-size: 125%;
color: #23481C;
}
#content h3 a:link,
#content h3 a:visited {
color: #23481C;
text-decoration: none;
border-bottom: #23481C solid 1px;
}
#content h3 a:focus,
#content h3 a:hover,
#content h3 a:active {
color: #000099;
text-decoration: none;
border-bottom: #000099 solid 1px;
}
#content h4 {
font-size: 110%;
color: #336600;
margin-bottom: 7px;
}
#content h4 a:link,
#content h4 a:visited {
color: #336600;
text-decoration: none;
border-bottom: #336600 solid 1px;
}
#content h4 a:focus,
#content h4 a:hover,
#content h4 a:active {
color: #000099;
text-decoration: none;
border-bottom: #000099 solid 1px;
}
#content p {
margin-bottom: 20px;
line-height: 170%;
font-size: 100%;
}
#content .indent { margin-left: 20px; }
#content .indent2 { margin-left: 40px; }
#content .indent3 { margin-left: 60px; }
#content .indent4 { margin-left: 80px; }
#content ul {
margin: 0 0 15px 30px;
list-style-type: circle;
}
#content ul li {
margin: 0 0 5px 0;
line-height: 160%;
}
#content ol {
margin: 0 0 15px 30px;
line-height: 160%;
}
#content ol li {
margin: 0 0 5px 0;
}
#content ul.inside li, #content ol.inside li {
list-style-position: inside;
}
#content blockquote {
margin: 0 20px;
padding-left: 30px;
background: url(../images/content/begin_quote.gif) top left no-repeat;
color: #666;
}
#content blockquote p {
background: url(../images/content/end_quote.gif) bottom right no-repeat;
padding-right: 30px;
}
#content em { font-style: oblique; }
#content strong { font-weight: bold; }
#content .emphBlue {
font-weight: bold;
color: #0033CC;
}
#content .emphRed {
font-weight: bold;
color: #CC3300;
}
/*==============================| TABLES |==============================*/
#content table caption {
font-size: 100%;
padding: 0px 0px 4px 0px;
}
#content table {
font-size: 100%;
border-collapse: collapse;
border: #AAAAAA 1px solid;
margin: 0 0 20px 0;
}
#content table td {
font-size: 100%;
border: #AAAAAA 1px solid;
padding: 4px 4px 4px 4px;
text-align: left;
}
#content table tr.shade-row {
background:#f6f7f5;
}
#content table th {
font-size: 100%;
border: #AAAAAA 1px solid;
background:#e8e9e5;
padding: 4px 4px 4px 4px;
text-align: left;
}
/* For Tables that represent lists - removes underlines from links when presented in a table.
Use only for elements that are presented in a list format within a table. Apply this class
to the <table> element. */
#content table.nolinklines a:link, #content table.nolinklines a:visited {
color: #006600;
text-decoration: none;
}
#content table.nolinklines a:focus, #content table.nolinklines a:hover, #content table.nolinklines a:active {
color: #000099;
text-decoration: underline;
}
#content table.center { margin: 0 auto 20px; }
#content table.center caption { margin: 0 auto; }
#content table td.center,
#content table th.center { text-align: center; }
#content table td.right,
#content table th.right { text-align: right; }
#content table.directory {
border: none;
width: 95%; /*Width changed from 100% to accomodate for DW CS5 overflow bug*/
}
#content table.directory th {
border: none;
background: #e8e9e5;
border-bottom: #ccc solid 1px;
}
#content table.directory td {
border: none;
}
/*==============================| FORMS |==============================*/
#content form {
margin: 0 0 20px 0;
background: #fff;
width: 75%;
}
#content fieldset {
background: #f2f2f2;
margin: 0 0 1em 0;
border: #ccc solid 1px;
padding: .5em;
margin-top: 1.5em;
}
#content legend {
font-weight: bold;
padding: 0 5px;
color: #000;
}
#content fieldset p {
padding: .5em 1em;
margin: 0;
}
#content label {
margin: 0 0 0 5px;
}
#content .explanatory label {
display: block;
text-align: left;
width: auto;
float: none;
}
#content textarea,
#content select,
#content input {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
#content textarea,
#content input {
padding: 3px 3px 1px;
}
/*-- IE 6 Hacks --*/
* html #content legend {
\position: absolute;
\top: -.5em;
\left: .5em;
}
* html fieldset {
\position: relative;
\margin-top:1em;
\padding-top:.75em;
}
/*-- IE 7 Hack --*/
*+html #content legend {
margin-top: -1.4em;
}
/*==============================| MISCELLANEOUS |==============================*/
.contentBox {
margin-bottom: 20px;
padding: 15px;
border: #ccc solid 1px;
background: #f2f2f2;
}
.contentBox_no_outline {
margin-bottom: 20px;
padding: 15px;
background: #f2f2f2;
}
.contentBox_outline_only {
margin-bottom: 20px;
padding: 15px;
border: #ccc solid 1px;
}
#content .insetBox_left {
float: left;
margin: 0 10px 10px 0;
}
#content .insetBox_right {
float: right;
margin: 0 0 10px 10px;
}
#content .insetBox_left p,
#content .insetBox_right p {
text-align: center;
font-size: 95%;
margin: 5px 0 0 0;
padding: 0;
line-height: 130%;
}
#content p.insetBox_left,
#content p.insetBox_right {
text-align: center;
font-size: 95%;
line-height: 130%;
}
#content p.insetBox_left img,
#content p.insetBox_right img {
margin: 0 auto 5px;
}
#content hr {
border: none 0;
border-top: #ccc solid 1px;
height: 1px;
margin-bottom: 20px;
}
#content .backtotop {
border-bottom: 1px solid #ccc;
text-align: right;
font-size: 80%;
}
#content .backtotop a {
background: url(../images/content/backtotop.gif) left 5px no-repeat;
padding-left: 10px;
text-decoration: none;
color: #666;
}
#content .backtotop a:hover { text-decoration: underline; }
.textBullet { color: #3F380D; }
.center { text-align: center; }
img.center {
margin: 0 auto;
display: block;
}
.right { text-align: right; }
code, kbd {
font-size: 12px;
color: #000066;
}
/*==============================| COLUMNS |==============================*/
/*#columns is used for backward compatability for original divs on homepage*/
.colSplash {
position: relative; /*Helps overcome overflow bug of IE 6 and 7*/
margin: -2px 0px 20px 0px;
overflow: hidden;
width:100%;
}
#columns , .columns {
overflow: hidden;
padding: 0 0 15px 0;
}
#columns { /*Override for columns div used only on homepages (provides extra space under h1) */
padding:20px 0 0 0;
}
#columns #column1 , .columns .column1 {
width: 22%;
float: left;
padding: 0 1.5% 0 0;
}
#columns #column2 , .columns .column2 {
width: 49%;
float: left;
padding: 0 1.5%;
}
#columns #column3 , .columns .column3 {
width: 22%;
float: left;
padding: 0 0 0 1.5%;
}
#columns #column1-2 , .columns .column1-2 {
width: 74%;
float: left;
padding: 0 1.5% 0 0;
}
#columns #column2-3 , .columns .column2-3 {
width: 74%;
float: left;
padding: 0 0 0 1.5%;
}
#columns #column2 , .columns .column2 {
border-right: #aaa dotted 1px;
border-left: #aaa dotted 1px;
}
#columns #column1-2 , .columns .column1-2 {
border-right: #aaa dotted 1px;
}
#columns #column2-3 , .columns .column2-3 {
border-left: #aaa dotted 1px;
}
* html #columns #column2 , * html .columns .column2 { width: 49%; } /*-- IE 6 Hack --*/
* html #columns #column2 , * html .columns .column2 { width: 49%; } /*-- IE 7 Hack --*/
#content #columns ul , #content .columns ul {
margin: 0 0 0 17px;
}
#content #columns ul li , #content .columns ul li {
padding: 0 0 10px 0;
margin: 0;
list-style-position: outside;
}
#content #columns ol , #content .columns ol {
margin: 0 0 0 22px;
}
#content #columns ol li , #content .columns ol li {
padding: 0 0 10px 0;
margin: 0;
list-style-position: outside;
}
.split {
overflow: hidden;
padding: 0 0 15px 0;
}
.splitLeft {
width: 49%;
float: left;
padding-right: 1%;
}
.splitRight {
width: 48%;
float: left;
padding-left: 1%;
}
/*-- IE 6 Hack --*/
* html .split {
\width: 90%;
}
/*Following split code is for backwards compatability. Original split used a table instead of divs.*/
table.split {
width: 100%;
}
/*-- IE 6 Hack --*/
* html table.split {
\width: 90%;
}
#content table.split {
border: none;
margin: 0;
padding: 0;
width: 100%;
}
#content table.split td {
margin: 0;
padding: 0 10px 0 0;
border: none;
width: 50%;
vertical-align: top;
}
/*==============================| IMAGES |==============================*/
#content img { vertical-align: text-bottom; }
img.imageright {
float: right;
margin: 0 0 10px 10px;
}
img.imageleft {
float: left;
margin: 0 10px 10px 0;
}
/*==============================| HOMEPAGE QUICKLINKS |==============================*/
#content h2.quicklinks {
font-size: 120%;
margin: 0 0 5px 0;
color: #555;
font-weight: bold;
}
#content ul.quicklinks {
padding: 4px 0;
margin: 0 0 20px 0 !important;
}
#content ul.quicklinks li {
list-style-type: none;
list-style-image: none;
padding: 0 !important;
margin: 0 !important;
}
#content ul.quicklinks li a {
text-decoration: none;
padding: 5px 10px;
display: block;
height: 100%;
margin: 0;
color: #555;
border-top: #ddd solid 1px;
}
#content ul.quicklinks li a:link,
#content ul.quicklinks li a:visited {
color: #333;
background: none;
}
#content ul.quicklinks li a:focus,
#content ul.quicklinks li a:hover,
#content ul.quicklinks li a:active {
text-decoration: none;
color: #333;
background: #F0F0F0;
}
#content ul.quicklinks li ul {
margin: 0 !important;
}
#content ul.quicklinks li ul li a {
padding: 2px 5px 2px 25px;
font-size: 90%;
}
#content ul.quicklinks li ul li a:link,
#content ul.quicklinks li ul li a:visited {
color: #333;
background: url(../images/navigation/chevron.gif) 16px 8px no-repeat;
}
#content ul.quicklinks li ul li a:focus,
#content ul.quicklinks li ul li a:hover,
#content ul.quicklinks li ul li a:active {
text-decoration: none;
background: url(../images/navigation/chevron.gif) 16px 8px no-repeat #ebebeb;
color: #333;
}
/*==============================| ICON LINKS |==============================*/
#content ul.iconLinks {
font-size: 95%;
line-height: 130%;
margin: 0 !important;
padding: 0;
clear: both;
}
#content ul.iconLinks img {
float: left;
margin: 0 10px 10px 0;
}
#content ul.iconLinks li {
clear: both;
list-style-type: none;
margin: 0 !important;
padding: 0 !important;
}
#content ul.iconLinks li a {
height: 100%;
margin: 0 0 10px 0;
}
#content ul.iconLinks li a:link,
#content ul.iconLinks li a:visited {
text-decoration: none;
}
#content ul.iconLinks li a:focus,
#content ul.iconLinks li a:hover,
#content ul.iconLinks li a:active {
text-decoration: underline;
}
Codebase Browser
chromium