Main Style Sheet style.css
<![CDATA[
/*
* CSS for Tincat Group, Inc. web site
*
* Date: 5/17/05
* Updated: 12/20/05
* Author: Dawn Wolthuis
*
* Last update to split out style.css for use with many sites
* and site.css for site-specific code and color overrides
*
* Many resources were consulted.
*
* Several tips were taken from Lowery's "CSS Hacks & Filters", 2005, Wiley
* css for dropdown menus was initially based on http://koivi.com/css-menus/
*
* You are encouraged to copy, clone, and adapt this for your own use
* You need not but may include an acknowledgment to Tincat Group, Inc.
*/
body {
color: black;
font-size: 100.01%;
font-family: Verdana, Arial, sans-serif;
background-color: white;
top: 0;
left: 0;
width: 99%;
/* overflow-x: hidden */
}
img {
border: none;
}
small, sub, sup, address {
font-size: .85em;
}
big {
font-size: 1.15em;
}
address {
margin: 2px 0;
text-align: center;
font-size: .6em;
}
blockquote {
margin-top: 5px;
margin-bottom: 5px;
font-family: "Times, serif";
}
fieldset {
padding: 8px;
border: dashed 8px black;
margin-left: auto;
margin-right: auto;
width: 90%;
}
legend {
color: blue;
font-weight: bold;
background-color: #fff;
}
code, kbd, samp, tt {
font-size: .9em;
}
h1, h2, h3, h4, h5, h6, dl {
color: red;
background-color: inherit;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 1px 0 0;
}
dl {
margin: 10px 0;
}
dt {
margin: 10px 0 0 0;
font-weight: bold;
color: #333;
background-color: inherit;
}
dd {
color: #333;
background-color: inherit;
font-size: 0.8em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 5%;
}
li {
list-style-type: square;
}
h1 {
color: gray;
font-size: 4em;
font-style: normal;
font-weight: bold;
font-stretch: semi-expanded;
background-color: inherit }
h2 {
font-size: 1.75em;
text-align: right;
}
h3 {
font-size: 1.52em;
text-align: center;
}
h4 {
font-size: 1.33em;
}
h5 {
font-size: 1.15em;
font-weight: normal;
text-align: center;
margin-bottom: 2px;
}
h6 {
color: #333;
background-color: inherit;
font-size: 1em;
}
hr {
color: #333;
background-color: inherit;
text-align: center;
width: 60%;
height: 5px }
ol {
margin-left: 5%;
}
cite {
font-style: normal;
}
dfn, acronym, abbr {
font-style: normal;
border-bottom: 1px dotted #4c4b4b }
p {
color: #333;
background-color: inherit;
margin-top: 6px;
}
pre {
}
/* Link Styles */
a:link {
}
p a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
abbr {
speak: spell-out;
}
acronym {
speak: normal;
}
/* ids and classes */
#skip a {
color: white;
background: inherit;
font-size: .05em;
}
#skip p {
margin: 0px 0px 0px 0px;
}
#page {
background: white;
position: relative;
z-index: 200;
top: 12px;
margin: 0 auto;
width: 90%;
height: auto;
min-width: 600px;
max-width: 1200px;
border: solid 10px black;
}
#header {
color: inherit;
background: yellow;
position: relative;
height: 150px;
}
#headwords {
background-position: center;
display: inline;
position: absolute;
top: 12px;
left: 10%;
width: 80%;
height: 80px;
float: left;
}
#wordssw {
color: black;
background-color: inherit;
background-position: center;
text-align: center;
position: relative;
}
#wordssw.h3 {
text-align: right;
display: inline;
margin-top: 0px;
}
#wordsname {
background-position: center;
text-align: center;
position: relative;
width: 100%;
vertical-align: bottom;
}
#wordsname.h1 {
text-align: right;
display: inline;
}
#headcat {
background-position: center bottom;
display: inline;
margin-top: 12px;
margin-left: 70%;
padding-right: 10px;
position: relative;
float: right;
}
#menu {
font-size: 1em;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
margin: 0;
padding: 2px 0;
position: relative;
z-index: 200;
width: 100%;
min-height: 30px;
border-style: solid solid solid;
border-width: 0px 0px 10px;
border-color: blue black black;
}
/* dropdown menus */
#dropmenu {
font-weight: bold;
list-style-type: none;
margin: 0px;
padding: 0px;
z-index: 300;
}
#dropmenu li {
color: #333;
background-color: #f90;
background-repeat: repeat;
list-style-type: none;
float: left }
#dropmenu li li {
color: #333;
background-color: #fc3 }
#dropmenu ul {
font-weight: normal;
list-style-type: none;
display: none;
margin-top: -1px;
margin-left: 0;
padding: 0;
position: absolute;
z-index: 999;
width: 250px;
border-style: solid solid none;
border-width: 1px 2px 0 7px;
border-color: #fff #fff #4c4b4b #4c4b4b }
#dropmenu li a {
color: #333;
text-decoration: none;
text-align: center;
display: block;
padding: 3px;
width: 120px;
border-style: solid solid none;
border-width: 1px 1px 0;
border-color: #fff #fff }
#dropmenu ul a {
color: #333;
padding: 3px }
#dropmenu ul li a {
display: block;
width: 250px;
}
#dropmenu a:hover, #dropmenu li:hover {
color: #333;
font-weight: bold;
text-decoration: none;
background-color: #fc9;
background-repeat: repeat }
#dropmenu ul li:hover, #dropmenu ul li a:hover {
font-weight: bold;
text-decoration: none;
background-color: #ffc;
background-repeat: repeat }
#dropmenu li>ul {
top: auto;
left: auto;
}
#dropmenu ul ul {
display: none;
margin-top: -2px;
margin-left: 114px;
position: absolute;
}
#dropmenu ul li>ul, #dropmenu ul ul li>ul {
margin-top: -2px;
}
#dropmenu li:hover ul ul,
#dropmenu li:hover ul ul ul,
#dropmenu li:hover ul ul ul ul,
#dropmenu li:hover ul ul ul ul ul {
display: none;
}
#dropmenu li:hover ul,
#dropmenu ul li:hover ul,
#dropmenu ul ul li:hover ul,
#dropmenu ul ul ul li:hover ul,
#dropmenu ul ul ul ul li:hover ul {
display: block;
}
#dropmenu a.parentmenu {
background: url("../images/dropdown-triangle.gif") no-repeat right center }
/* css for classes */
li>ul {
top: auto;
left: auto;
}
.toppic {
float: left;
}
.toppic2 {
float: left;
margin: 0 0 0 20px;
}
.left {
color: #333;
background-color: inherit;
font-size: 0.9em;
padding-right: 10px;
padding-left: 10px;
width: 60%;
float: left;
}
.left li {
color: #333;
background-color: inherit;
margin-top: 6px;
}
.left a {
text-decoration: underline;
}
.right {
text-align: left;
margin-right: 0;
margin-left: 64%;
padding: 0 8px 2px }
.right p {
font-size: 0.8em;
}
.right li, .right a {
font-size: small;
}
.right p {
text-align: center }
#content {
background-color: #FFF;
color: inherit;
text-align: left;
text-indent: 0px;
display: block;
padding: 10px;
he\ight: 1%;
border: 0px;
}
dd li {
font-size: inherit;
}
#mygoogle {
background-color: #fff;
margin: 0;
padding: 2px 0;
position: relative;
width: 100%;
border-top: 10px solid #000 }
#primarytext {
/* margin: 10px; */
}
#pagename {
color: #333;
background-color: inherit;
text-align: left;
font-variant: small-caps;
margin: 10px 0 20px 0;
}
.datetime {
font-variant: small-caps;
}
#sidecolumn {
color: inherit;
background-repeat: repeat-x;
text-align: center;
padding-top: 10px;
}
#sidecolumn h3 {
color: #333;
background-color: inherit;
}
#sidecolumn ul {
text-align: left }
#sidecolumn li {
list-style-type: none;
}
.fieldset {
font-size: .7em;
}
.fieldset label {
text-align: right;
width: 70px;
padding: 0.2em;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0.3em;
}
.fieldset .nobr {
display: none;
}
.fieldset .textfield {
margin: 3px;
height: 20px;
width: 200px;
}
.fieldset .textarea {
margin: 3px;
height: 165px;
width: 200px;
}
#footer {
color: #333;
font-size: 0.85em;
font-family: "Trebuchet MS", sans-serif;
background-color: #fff;
text-align: center;
text-indent: 0;
position: relative;
display: block;
height: 48px;
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4c4b4b;
}
#footer p {
text-align: center;
position: absolute;
left: 10%;
width: 80%;
border: 0;
}
.example {
padding: 3px 3px 3px 10px;
border: dotted 1px #933;
}
.noscript {
font-size: small;
text-align: center;
margin-right: 25%;
margin-left: 25%;
border: 2px;
}
.horizontal-google {
text-align: center;
margin-left: auto;
margin-right: auto;
}
blockquote.pullquote {
color: #933;
font: 20px / 24px georgia, palatino, serif;
text-align: center;
margin: 10px 0 10px 15px;
padding: 0;
width: 150px;
float: right }
.complexsection:after {
content: ".";
clear: both;
height: 0px;
line-height: 0px;
visibility: hidden;
display: block;
}
]]>
Site-specific Colors Style Sheet site.css
<![CDATA[
<code>
/*
* CSS for Tincat Group, Inc. web site
*
* Author: Dawn Wolthuis
* Date: 5/17/05
* Updated: 12/20/05
*
* Last update to split out style.css for use with many sites
* and site.css for site-specific code and color overrides
*
* Many resources were consulted.
*
* Several tips were taken from Lowery's "CSS Hacks & Filters", 2005, Wiley
* css for dropdown menus was initially based on http://koivi.com/css-menus/
* You are encouraged to copy, clone, and adapt this for your own use
* You need not but may include an acknowledgment to Tincat Group, Inc.
*/
body {
color: #4c4b4b;
background-color: #669;
}
fieldset {
border: dashed 8px #4c4b4b;
}
legend {
color: #669;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6, dl {
color: #933;
background-color: inherit;
}
h1 {
color: #959595;
background-color: inherit;
}
/* ids */
#skip a {
color: #669;
background: inherit;
}
#page {
border: solid 10px #4c4b4b;
}
#header {
color: inherit;
background: #f93;
height: 146px;
}
#headwords {
background-position: center;
display: inline;
position: absolute;
top: 12px;
left: 10%;
width: 80%;
height: 80px;
float: left }
#wordssw {
color: #4c4b4b;
background-color: inherit;
background-position: center;
text-align: center;
position: relative;
}
#wordssw.h3 {
text-align: right;
display: inline;
margin-top: 0px;
}
#wordsname {
background-position: center;
text-align: center;
position: relative;
width: 100%;
vertical-align: bottom;
}
#wordsname.h1 {
text-align: right;
display: inline;
}
#headcat {
background-position: center bottom;
display: inline;
margin-top: 12px;
margin-left: 70%;
padding-right: 10px;
position: relative;
float: right;
}
#menu {
border-style: none solid solid;
border-width: 0 0 10px;
border-color: #4c4b4b }
/* css for dropdown menus */
#dropmenu li {
color: #333;
background-color: #f93;
}
#dropmenu li li {
color: #333;
background-image: url("../images/ltorange.gif");
}
#dropmenu ul {
border-color: #fff #fff #4c4b4b #4c4b4b;
}
#dropmenu a:hover, #dropmenu li:hover {
color: #333;
background-image: url("../images/mid-orange.gif");
background-repeat: repeat;
}
#dropmenu ul li:hover, #dropmenu ul li a:hover {
background-image: url("../images/lterorange.gif");
background-repeat: repeat;
}
#dropmenu a.parentmenu {
background: url("../images/dropdown-triangle.gif") center right no-repeat;
}
/* css for classes */
#mygoogle {
border-top-color: #4c4b4b;
}
#sidecolumn {
color: inherit;
background-image: url("../images/ltorangefade.gif");
background-repeat: repeat-x;
}
#sidecolumn h3,h6 {
color: #333;
background-color: inherit;
}
#headshot {
background-color: white;
color: inherit;
background-image: none;
}
#footer {
border-color: #4c4b4b;
}
]]>
Data Table Style Sheet datastyle.css
<![CDATA[
<code>
fieldset {
padding: 8px;
margin-left: auto;
margin-right: auto;
width: 90%;
border: 0;
}
legend {
color: #669;
font-size: 1em;
font-weight: bold;
background-color: #fff;
}
#lookupform {
margin-left: auto;
margin-right: auto;
}
table {
}
.datatable {
text-align: center;
border: 0;
width:90%;
background-color: white;
margin-left: auto;
margin-right: auto;
}
thead {
color: black;
font-weight: bold;
background-color: #f90 }
.datatable td {
vertical-align: top;
}
.cellright {
text-align: right;
}
.cellcenter {
text-align: center;
}
.cellleft {
text-align: left;
}
.clo {
color: #333;
background-color: #ffcd8e }
.cle {
color: #333;
background-color: #fff2e6 }
#mytable {
margin-top: 10px;
}
abbr, acronym, .help {
border-bottom: 1px dotted #333;
cursor: help;
}
#chatter {
border: outset 6px #669;
padding: 0px 10px 10px 10px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#chatter p {
font-family: Georgia, serif;
font-size: .7em;
color: #333;
margin: 0 0 0 20px;
padding: 0;
}
.info {
}
.error {
}
]]>