/* MASTER STYLE SHEET FOR ADMIN.STUDENTGENERATOR.COM FORM LAYOUT StudentGenerator.Master #wrapper |20|<-------------------------------- 900 px --------------------------------->|20| +---------------------------------------------------------------------------+ ^ |#header | | |+-------------------------------------++----------------------------------+| | ||#banner ||#welcome || | ||<----------------------------------->||<-------------------------------->|| | || || || | 147px - note tabstrip uses -ve vertical || || || | margin to position within header |+-------------------------------------++----------------------------------+| | |+-------------------------------------------------------------------------+| | ||#tabStrip || | || || | |+-------------------------------------------------------------------------+| | +---------------------------------------------------------------------------+ | +---------------------------------------------------------------------+ | 20 |#subMenu | 20 | | p ul | | +---------------------------------------------------------------------+ | +---------------------------------------------------------------------------+ | |#breadCrumb | | | p.left p.right | | +---------------------------------------------------------------------------+ V +---------------------------------------------------------------------+ |#content | 20 |<------------------------------ 860 px ----------------------------->| 20 | | | Placeholder - theContent | | | +---------------------------------------------------------------------+ +---------------------------------------------------------------------------+ |#footer | | | +---------------------------------------------------------------------------+ Notes i) Default font size for all elements is 11px. */ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - GENERIC STYLES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* --------- defaults --------- */ * { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;} /* --------- font size (10px = 62.5% or 16px) & colour --------- */ html {font-size: 100%;} body {color: #336; background-color: #AAAAAA;} body {font-size: 62.5%;} p, th, td, li {font-size: 1.1em;} /* default = 11px*/ input, select, textarea {font-size: 1.1em} /* default = 11px*/ td p, li p, li li {font-size: 1.0em;} /* nested elements inherit the same font-size as their parent */ p {line-height: 1.5em; margin: 5px 0px;} td {line-height: 1.5em;} p.large {font-size: 1.2em; margin-bottom: 10px;} /* --------- Header Styles--------- */ h1 {font-size: 2.6em; color: #333366; font-weight: normal; letter-spacing: .1em;} h2 {font-size: 1.3em; color: #333366; margin: 20px 0px 8px 0px;} h3 {font-size: 1.2em; color: #333366; letter-spacing: .1em; margin: 20px 0px 8px 0px;} h4 {font-size: 1.2em; color: #555; letter-spacing: .1em; margin: 20px 0px 8px 0px;} h5 {color: #F96D16; font-size: 1.1em; margin-top: 5px;} /* used for error messages */ h6 {color: #555; font-size: 1.1em; margin-top: 30px; margin-left: -5px;} /* sub headers in forms that serve quotations */ h2.first, h3.first, h4.first, h5.first, h6.first {margin-top: 0px;} /* --------- useful styles --------- */ .bold {font-weight: bold;} .italic {font-style: italic;} .center {text-align: center;} .right {text-align: right;} .box {border: solid 1px #666;} .grayedOut {color: #999;} .red {color: Red;} ul.nobullets {list-style: url(none) none;} img.icon {margin-bottom: -3px; margin-right: 3px; margin-left: 2px;} /* This aligns image icons used in links */ .button {float: right;} h2.nomargin {margin: 50 0;} /* ---------- Form styles ----------- */ div.formRow {clear: both;} .caption, .data, .text, .checkbox, .radioButton, .radioCaption {float: left;} .caption {font-weight: bold; text-align: right;} .checkbox {text-align: right;} input {padding: 1px;} option {padding-right: .6em;} /* Stops dropdown arrow hiding the values in FireFox */ span.radio input {height: 15px; width: 15px;} span.radio {margin: 0 3px;} /* --------- default link styles --------- */ a {color: #333366;} a img {border: none;} a:link, a:visited {text-decoration:none;} a:hover, a:active {text-decoration:underline;} a.plain {text-decoration: none;} /* --------- feature: error message --------- */ #errorMessage {border: solid 1px #999;} #errorMessage h3 {color: #F00;} #errorMessage ul {list-style: disc; margin-left: 40px;} #errorMessage li {color: #336; margin: 5px; line-height: 1.5em;} /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - STRUCTURE & APPEARANCE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* --------- structure --------- */ #outerFrame {width: 940px; margin: 5px auto;} #wrapper {width: 900px; padding: 0px 20px; background-color: White; float: left;} #header, #welcome, #banner, #tabStrip, #subMenu, #breadcrumb, #footer {float: left;} #content {float: left;} #footer {clear: both;} /* --------- sizings (heights, widths, margins and padding) --------- */ #header, #footer {width: 900px;} #content, #subMenu {width:860px; padding: 0px 20px;} #welcome, #banner {height: 85px;} #banner {width: 380px; padding-left: 130px;} #welcome {width: 380px; margin-right: 10px;} #tabStrip {height: 24px; width: 880px; padding: 0 10px; margin: -24px 0 0 0;} #subMenu {height: 25px;} #breadcrumb {height: 20px; width: 880px; margin: 2px 10px 25px 10px;} #content {min-height: 400px;} #footer {height: 60px; margin-top: 20px; padding: 5px 0 20px 0;} #footer p {float: left; width: 440px; padding: 0px 5px; margin: 0;} /* --------- banner --------- */ #banner p {font-size: 1.2em; letter-spacing: .1em; margin: 10px;} #banner h1 {} #banner { background-image: url(../images/imgBanner.jpg); background-repeat: no-repeat; background-position: left bottom;} /* --------- welcome --------- */ #welcome {letter-spacing: .05em; text-align: right;} #welcome a {text-decoration:underline;} /* --------- tabbed navigation (top menu) --------- */ #tabStrip {letter-spacing: .05em;} #tabstrip ul {margin:0; padding:0; list-style: url(none) none;} #tabStrip li {display:inline; margin: 0 3px; padding: 0; float:right;} #tabStrip a {float:left; margin:0px; padding: 0px 10px 0px 10px; text-decoration:none;} #tabStrip a span {float: left; display:block; padding:5px 15px 6px 6px; color:#FFF;} #tabStrip a.tabOff {background:url(../images/_tableft.gif) no-repeat left top; background-position: 0% -51px;} #tabStrip a.tabOn {background:url(../images/_tableft.gif) no-repeat left top; background-position: 0% 0px;} #tabStrip a.tabOff span {background:url(../images/_tabright.gif) no-repeat right top; background-position: 100% -51px;} #tabStrip a.tabOn span {background:url(../images/_tabright.gif) no-repeat right top; background-position: 100% 0px;} #tabStrip a:hover span {color:#FFF;} #tabStrip a:hover {background-position: 0% 0px;} #tabStrip a:hover span {background-position: 100% 0px;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabStrip a span {float:none;} #tabStrip #active a { /*Selected Tab style*/ background-position: 0 0px; /*Shift background image up to start of 2nd tab image*/ } #tabStrip #active a span{ /*Selected Tab style*/ background-position: 100% 0px; /*Shift background image up to start of 2nd tab image*/ color: #fff; } /* End IE5-Mac hack */ #tabStrip {border-bottom: solid 5px #336;} /* --------- bottom navigation (educator name & service items) --------- */ #subMenu {background-color: #CCC;} #subMenu p {width: 250px; float:left;} #subMenu ul {margin: 0px; padding:0px; list-style: url(none) none;} #subMenu li {display:inline; margin: 5px 10px; padding: 0; float:right;} #subMenu a.tabOn {text-decoration: underline;} /* --------- breadcrumb --------- */ #breadcrumb {letter-spacing: .1em;} #breadcrumb p {float: left;} #breadcrumb p.left {width: 800px;} #breadcrumb p.right {width: 80px;} /* --------- footer --------- */ #footer {border-top: 1px solid #333366;} #footer a {color: #333;}