Forum Moderators: not2easy
i'm not a css guru and i am coming into this project to support it. hope you can help.
here is the HTML tell me which css you'd like to see and i'll provide it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-us" />
<meta name="description" content="Please remember, by contacting us, there is no obligation on your part." />
<meta name="keywords" content=""></title>
<link rel="stylesheet" type="text/css" media="all" href="contact-files/global.css" />
<link rel="stylesheet" type="text/css" media="all" href="contact-files/contact-us.css" />
<link rel="stylesheet" type="text/css" media="print" href="contact-files/print.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="all" href="contact-files/ie.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="all" href="contact-files/ie6.css" /><![endif]-->
</head>
<body>
<div id="bkgrnd"></div>
<div id="container">
<br class="clear" />
<span id='top-print-expand' class='float-right'><a id='print-text' href='#print'>PRINT</a><a
href='#print' id='print-icon' class='print'><span>print</span></a></span><br class="clear" />
<div class="col-580 col-bot stnd-txt">
<div class="hd-intro">
<h4>Learn more about life in the scouts</h4>
<p>Thank you for your interest in the scouts. To determine which program is right for you, we will need a little more
information about your education. Please fill out the short form below.</p>
</div>
<form name="infoform" method="POST" action="submit3.php">
<ol class="form">
<li>
<label>* Degree Type:</label>
<div class="field mixed">
<select name="degree type" class="boxes">
<option value="">Science or Engineering</option>
<option value='01' >Healthcare</option>
<option value='02' >Other</option>
</select>
</div>
<div class="clear"></div>
</li>
<li>
<label>* Major:</label>
<div class="field text">
<input type="text" name="major" size="25" maxlength="32" value="" class="boxes">
</div>
<div class="clear"></div>
</li>
<li>
<label>* GPA:</label>
<div class="field text">
<input type="text" name="gpa" size="25" maxlength="32" value="" class="boxes">
</div>
<div class="clear"></div>
</li>
<li class="submit">
<input type="hidden" name="m" value="" />
<input type="submit" name="submit" value="SUBMIT" class="button">
</li>
</ol>
</form>
<div class="sml-txt">
<p>* All fields marked with the asterisk symbol (*) are required.</p>
<p></p>
</p>
</div>
</div>
<br class="clear" />
</body>
</html>
/* styles necessary for fixed full-screen flash background in IE6 */
body {
height: 100%;
text-align: center;
}
#bkgrnd {
width: 100%;
height: 100%;
text-align: left;
position: fixed;
left: 0;
top: 0;
overflow: auto;
}
ul#sub-menu, ul.summaries, ul.summaries li, ul.summary, ul.summary li, ul.category-summaries, ul.flexible-message-areas, ul.footer, ul.footer-sub, div#chart-title {
height: 1%;
}
ul#sub-menu {
}
ul.summaries {
padding: 10px 0;
}
ul.summary {
margin: 10px 0;
}
ul.nav-sub li a {
border-bottom: none;
padding-bottom: 6px;
}
ul.nav-sub li a:hover {
/* padding-bottom: 4px; */
}
div#column-alpha table#pay-chart-enlisted, div#column-alpha table#pay-chart-officer, div#column-alpha table#height-chart {
font-size: 1em;
}
div#column-alpha div#pay-chart-col-a, div#column-alpha div#pay-chart-col-b, div#column-alpha div#height-chart-col-a {
font-size: 1.1em;
}
html div#column-alpha div#height-chart-col-a p.close {
margin-bottom: 13px;
text-align: right;
}
ul#search-links input#find {
font-size: 1em;
margin-top: -2px;
}
ul#search-links li.button {
margin-right: 0;
padding-right: 27px;
}
* {
margin: 0;
padding: 0;
color: #737373;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
fieldset, img {
border: 0;
}
ul li {
list-style: none;
padding: 0;
margin: 0;
}
ol li{margin-left:20px;padding-bottom:10px;}
form {
margin: 0;
padding: 0;
}
#column-alpha p{margin:1em 0;line-height:1.6;color:#737373}
/*
----------------------------------------------------
HEADERS
----------------------------------------------------
*/
h1#hd-error{font-size:200%;padding-top:20px;}
h2 span,
h3 span { display: none; }
h2.hd-contact-us,
h2.hd-search-result {
background-color: transparent;
background-repeat: no-repeat;
height: 26px;
margin: 15px 0 10px 0;
}
h2.hd-contact-us {
background-image: url(headers/h2_contact_us.png);
width: 153px;
}
h2.hd-search-result {
background-image: url(headers/h2_search_result.png);
width: 204px;
}
h3 {
color:#999;
background-color: transparent;
background-repeat: no-repeat;
margin: 2em 0 1em;
}
h4 {
font-size:.95em;
font-weight: bold;
color:#999;
}
h5 {
color: #fff;
font-size: 10px;
margin: 0;
}
/* structural elements */
.clear, .clear-ie {
clear: both;
height: 0;
line-height: 0;
display: block;
}
.clear-ie {
display: none;
}
.hidden{display:none !important;}
.show{display:block !important;}
h2.clear{clear:both;}
body {
text-align: center;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
color: #bfbfbf;
background: url(bg-default.jpg) repeat fixed center top;
height: 100%;
text-align: center;
}
#bkgrnd {
width: 100%;
height: 100%;
text-align: left;
position: fixed;
left: 0;
top: 0;
overflow: auto;
display: block;
}
div#container { /* container for entire layout */
position: relative;
width: 965px;
text-align: left;
margin: 0 auto;
padding-bottom: 10px;
font-size: 0.94em;
z-index: 100;
text-align: left;
}
div#top-controls {
position: relative;
width: 965px;
text-align: right;
margin-top: 15px;
}
form#search-form input {
margin-right: 10px;
background: #2c2c2c;
border: 1px solid #474747;
width: 135px;
margin-top: -2px;
}
ul#search-links li {
text-transform:uppercase;
float: right;
margin-right: 15px;
padding-top: 4px;
font-size: 0.7em;
}
ul#search-links li span#sharethis_0 a span.stbuttontext{color:#BFBFBF !important;padding-top:2px;}
ul#search-links li span#sharethis_0 a{padding-left:22px;}
ul#search-links li span#sharethis_0{padding-right:5px;}
ul#search-links li.field {
padding-top: 3px;
margin-right: 0;
}
ul#search-links li#sharethis {
padding-right: 10px;
}
ul#search-links li.button {
margin-right: 25px;
}
ul#search-links li img {
margin-right: 4px;
margin-bottom: -3px;
}
ul#search-links input#find {
font-size: 1.2em;
margin-top: -1px;
}
div#flash-nav {
width: 965px;
height: 125px;
position: relative;
margin: 15px 0 5px 0;
padding-bottom: 50px;
}
div.flash-header {
margin-top: 0px;
}
div#flash-header-enlisted {
width: 382px;
height: 49px;
}
div#column-alpha {
padding-top:15px;
}
div#column-beta {
margin-top: 30px;
width: 150px;
float: left;
}
div.column-side-menu {
float: left;
width: 135px;
}
div.column-content {
float: left;
width: 430px;
}
/* COLUMNS */
.col-top-bot {
border-bottom: 1px solid #242424;
border-top: 1px solid #242424;
padding: 10px 0;
}
.col-bot {
background: url(transparent-1-bg.png) left bottom repeat-x;
padding-bottom: 10px;
}
.col-630 { width: 630px; }
.col-594 { width: 594px; }
.col-580{ width:580px; }
.col-530{width:530px}
.col-484 { width: 484px; }
.col-380{width:380px !important;}
.col-100{ width:100px !important; }
.col-815{width:815px !important;}
div.careers-thumbnails {
float: right;
width: 772px;
}
div#container div.column-careers {
width: 450px;
}
div#container div.column-list {
width: 450px;
float:left;
}
div#container div.column-careers h2.careers {
margin-top: 20px;
}
div#container div.column-enlisted {
width: 632px;
}
ul.menu {
margin: 1em 1em 1em 1.5em;
}
ul.menu li {
list-style: none;
padding-left: 8px;
margin-bottom: 0.1em;
}
ul.menu li.head {
font-weight: bold;
margin-bottom: 0.5em;
padding-left: 0;
background: none;
}
h1 {
font-size: 1.4em;
margin-bottom: 20px;
text-transform: uppercase;
color:#999;
}
h1.no-case{text-transform:none;}
ul.nav-sub {
background: url(transparent-1-bg.png) left bottom repeat-x;
font-size: 1em;
margin: 0px 0 20px 0;
padding-bottom: 1px;
}
ul.nav-sub li {
float: left;
margin-right: 1em;
}
ul.nav-level-three {
margin-top: 30px;
padding-right:10px;
}
ul.nav-level-three li {
text-transform:uppercase;
margin-bottom:1em;
}
h2 {
color:#999;
font-size: 1.2em;
margin-bottom: 20px;
}
h2.no-margin{margin-bottom:-1em;margin-top:1.5em;}
h3.no-margin{margin-top:0 !important;}
p.intro {
font-size: 1.2em;
color: #737373;
}
ul.summaries {
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
margin: 20px 0;
}
ul.summary {
margin: 25px 0;
}
ul.summary li.photo {
float: left;
width: 125px;
}
ul.summary li.head {
font-weight: bold;
margin-bottom: 2px;
}
ul.summary li.body {
color: #646464;
}
ul#careers-enlisted-summaries {
margin: 330px 0 25px 0;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
padding: 22px 0 15px 0;
}
ul.category-summaries {
font-size: 0.85em;
}
ul.category-summaries li.category-item {
width: 193px;
float: left;
margin: 0 20px 20px 0;
}
ul.category-summaries li.right {
margin-right: 0;
}
ul.category-summaries li.left {
clear:left;
}
/* flexible message areas */
ul.flexible-message-areas {
margin-top: 10px;
padding-top: 40px;
}
ul.flexible-message-areas li {
float: left;
margin-right: 15px;
}
ul.flexible-message-areas li.last {
margin-right: 0;
}
/* footers */
ul.footer {
display:block;
clear:both;
margin-top: 40px;
}
ul.footer-sub {
margin: 5px 0;
}
ul.footer li, ul.footer-sub li {
font-size: 0.8em;
float: left;
margin-right: 2em;
color: #696969;
}
/* links */
a {
text-decoration: none;
color: #bfbfbf;
}
ul.nav-sub li a {
padding: 4px 0px;
display: block;
color: #878987;
margin: 0px 6px;
text-transform: uppercase;
}
ul.nav-sub li a.first {
margin-left: 0;
}
ul.nav-level-three li a {
color: #878987;
}
ul#sub-menu a:hover,
ul#sub-menu li.on a,
ul#sub-menu li a.at {
color: #fff;
background: url(transparent-2-bg.png) left bottom repeat-x;
}
ul.nav-level-three li a:hover, ul.nav-level-three li.on a {
color: #fff;
}
ul.summary li.head a:hover {
text-decoration: underline;
}
ul.footer a, ul.footer-sub a {
text-decoration: underline;
color: #696969;
}
/* icons */
a.print, a.print-hover {
display: block;
width: 17px;
height: 16px;
background: url(icon-print.png);
cursor: pointer;
}
a.print-hover {
background: url(icon-print-hover.png);
}
a.arrow-left, a.arrow-right, a.arrow-up, a.arrow-down, a.arrow-left-hover, a.arrow-right-hover, a.arrow-up-hover, a.arrow-down-hover {
display: block;
width: 17px;
height: 17px;
cursor: pointer;
}
a.arrow-left span, a.arrow-right span, a.arrow-up span, a.arrow-down span, a.arrow-left-hover span, a.arrow-right-hover span, a.arrow-up-hover span, a.arrow-down-hover span, a.print span, a.print-hover span {
display: none;
}
a.arrow-left {
background: url(arrow-left.png);
}
a.arrow-left:hover, a.arrow-left-hover {
background: url(arrow-left-hover.png);
}
a.arrow-right {
background: url(arrow-right.png);
}
a.arrow-right:hover, a.arrow-right-hover {
background: url(arrow-right-hover.png);
}
a.arrow-up {
background: url(arrow-up.png) no-repeat 0 2px;
padding-left:23px;
width:5em;
height:20px;
text-decoration:none !important;
}
a.arrow-up:hover, a.arrow-up-hover {
background: url(arrow-up-hover.png) no-repeat 0 2px;
padding-left:23px;
width:5em;
height:20px;
text-decoration:none !important;
}
a.arrow-down {
background: url(arrow-down.png);
}
a.arrow-down:hover, a.arrow-down-hover {
background: url(arrow-down-hover.png);
}
div.go-button {
font-weight: bold;
display: inline;
}
div.go-button a {
float: left;
}
div.go-button a.go-link {
margin-left: 4px;
}
div#column-alpha div.go-button a:hover {
text-decoration: none;
}
a.go-button span {
display: inline;
font-weight: bold;
color: #999;
}
/* faq 'back to top' links */
.back-to-top a {
padding-top: 1px;
padding-right: 10px;
text-decoration: underline;
/*background-image: url(arrow-up.gif);
background-repeat: no-repeat;
background-position: right; */
}
#column-alpha ul{line-height:1.6;color:#737373;margin:1em 0;}
#column-alpha a:hover{text-decoration:underline;}
#column-alpha img.float-left,
div.float-left,
#column-alpha a.float-left{float:left;display:block;margin-right:15px;}
#column-alpha img.float-right,
#column-alpha a.float-right{float:right;display:block;margin-left:15px;margin-bottom:5px;}
#column-alpha p.bigger{font-size:1.15em;}
/* hide-show container stuff */
.show-link{background: url(transparent-1-bg.png) top left repeat-x;}
.expand-on{background: url(transparent-3-bg.png) top left repeat-x;}
.expand-on a.arrow{background-image: url(arrow-minus.gif) !important;}
.show-link{padding-top:1em;margin-bottom:1em;}
.show-link a{outline:none;text-transform:uppercase;}
.hide-show-container{background: url(transparent-1-bg.png) left bottom repeat-x;overflow:hidden;}
#column-alpha .hide-show-container h3{text-transform:uppercase;}
#column-alpha .hide-show-container h4{text-transform:none;}
#column-alpha .hide-show-container p{margin-top:0;}
#column-alpha .hide-show-container ul {margin:1em 1.5em;}
#column-alpha .hide-show-container ul li {line-height:1.6em;list-style: disc;margin-bottom:.5em;}
#column-alpha .hide-show-container div.right-list{float:right;width:170px;clear:right;margin-right:5px;font-size:.95em;padding-left:10px;}
#column-alpha .hide-show-container div.right-list li{margin-bottom:0;}
#column-alpha .long-content-col h3{text-transform:uppercase;}
#column-alpha .long-content-col h4{text-transform:none;}
#column-alpha .long-content-col p{margin-top:0;}
#column-alpha .long-content-col ul {margin:1em 1.5em;}
#column-alpha .long-content-col ul li {line-height:1.6em;list-style: disc;margin-bottom:.5em;}
#column-alpha .long-content-col div.right-list{float:right;width:155px;clear:right;margin-right:5px;font-size:.95em;padding-left:10px;}
#column-alpha .long-content-col div.right-list li{margin-bottom:0;}
#column-alpha a:hover{text-decoration:underline;}
/* LEARN ABOUT */
#landing-summaries{background: url(transparent-bg.png) top left repeat-x;padding-top:2em;overflow:hidden;padding-bottom:1em;}
#landing-summaries li.category-item{width:180px;margin-bottom:15px;margin-top:0;}
#landing-summaries li.category-item h2{margin-top:0;margin-bottom:-1em;}
#landing-summaries li.category-item p{margin-bottom:5px;line-height: 1.4em;}
/* Our History Landing */
.column-section{overflow:hidden;}
#column-alpha .column-section a.image-left{display:block;float:left;margin-right:10px;margin-bottom:35px;}
#column-alpha .column-section h2{font-size:.94em;margin-bottom:-1em;margin-top:0;text-transform:uppercase;}
#column-alpha .column-section p{margin-left:170px;line-height:1.5em ;margin-bottom:0;}
#video img{float:right;display:block;padding-top:3em;}
hr.history-line{background: url(hr-historyLine.gif) no-repeat scroll top left;margin-bottom:2em;border:0;display:block;height:1px;}
.column-sub-history{width:500px;float:left;}
.close-expand{margin-left:533px;margin-top:-37px;position:absolute;}
#column-alpha a.close-expand{font-size:9px;}
span.close-x {background: url(transparent-bg.png);padding: 2px;font-weight: bold;margin-left: 3px;}
p.close a{text-decoration:none !important;}
#print-expand{background-position:top right;text-align:right;margin-left:463px;margin-top:-40px;position:absolute;width:60px;font-size:9px; text-transform:uppercase;background-repeat:no-repeat;padding:0 22px 0 0;}
#print-icon{float:left;}
#print-text{float:left;margin-right:5px;margin-top:3px;}
#career-print-expand{background-position:top right;text-align:right;width:50px;font-size:9px; text-transform:uppercase;background-repeat:no-repeat;padding:3px 22px 0 0;}
#top-print-expand{background-position:top right;text-align:right;width:50px;font-size:9px; text-transform:uppercase;background-repeat:no-repeat;padding:3px 22px 0 0;position:absolute;margin-top:-10px;margin-left:915px;}
/* GLOBE AND SWIL */
body#globe div#footer-wrapper, body#swil div#footer-wrapper {
position: absolute;
top: 700px;
width:965px;
margin:0 auto;
}
body#globe div.html-line, body#swil div.html-line {
width: 0;
background: none;
height: 0;
}
body#globe{background:#000;}
body#swil{background:#07171b;}
body#globe div#container,
body#swil div#container{position:absolute;top:0;margin-left:-482px;left:50%;}
body#globe #bkgrnd,
body#swil #bkgrnd{height:800px;position:relative;}
/* /contact-us/faq/ section styles */
ul.faq-content {
}
ul.faq-content li {
margin-left: 1.2em;
line-height: 1.6em;
list-style: disc;
}
ol.faq-content {
color:#737373;
margin-left: 1.9em;
}
ol.faq-content li {
line-height: 1.6em;
}
ul.summary-links a {
text-decoration: underline;
color: #737373;
}
#print-site{overflow:hidden;margin-top:-1em;padding-bottom:2em;}
#print-site a{display:block;float:right;}
ul.career-list li{width:380px;float:left;padding-right:25px;margin-bottom:10px;}
.gsc-input input{text-transform:uppercase;}
#searchcontrol input.gsc-search-button {background:transparent none repeat scroll 0 0;border:0 none;color: #bfbfbf !important;text-transform:uppercase;}
div.gsc-clear-button{display:none;}
#searchcontrol input.gsc-input{padding:3px 7px !important;}
.indented{margin-left:25px;}
ul#site-map{margin:0 0 10px 20px !important;}
ul#site-map ul{margin:0 0 10px 20px !important;}
ul#site-map li{list-style:disc !important;}
ul#site-map li h3{margin:0 !important;}
#next-steps {margin-left:320px;margin-top:-16px;position:absolute;text-align:right;z-index:101;}
.html-line{width:965px;background: url(transparent-bg.png) top left repeat;height:1px;}
.narrow-line{margin-bottom:2em;border:0;display:block;height:1px;width:auto}
#flash-nav #html-nav{width:915px;background:#4d677a;background: url(transparent-bg.png) top left repeat;font-size:.90em;padding:25px;overflow:auto;}
#flash-nav #html-nav ul{text-transform:uppercase;text-align:right;font-weight:bold;float:right;width:200px;}
#flash-nav #html-nav ul li{margin-bottom:.5em;}
#flash-nav #html-nav ul li a{display:block;padding:2px;color:#fff !important;}
#flash-nav #html-nav ul li a:hover{background-color:#5f717f;}
#flash-nav #html-nav ul li.last{margin-bottom:0em;}
#flash-nav #html-nav div.logo-holder{float:left;width:200px;}
a#af-logo {display: block;width: 101px;height: 83px;background: url(af-logo.png);float: left;margin: 0 25px 15px 0;}
a#af-logo span {display: none;}
.stnd-txt p {
font-size: 11px;
line-height: 160%;
margin: 16px 0;
}
.sml-txt p {
font-size: 10px;
line-height: 120%;
margin: 10px 0;
}
.hd-intro { margin-bottom: 25px; }
.hd-intro h4 { color: #bfbfbf; }
.hd-intro p { margin: 2px 0; }
/* CONTACT US OVERVIEW */
.summary-pane {
border-top: 1px solid #242424;
padding: 23px 0;
}
.summary-pane ul li p,
.summary-pane ul li h3 {
font-size: 10px;
line-height: 150%;
margin: 0;
}
.summary-pane ul li {
float: left;
margin: 0 15px 15px 0;
width: 200px;
}
.summary-pane ul li.last { margin-right: 0 !important; }
.summary-pane .summary-row-bottom ul li { margin-bottom: 0; }
.summary-pane ul li h3 a { color: #fff; }
.summary-pane ul li h3 a:hover { text-decoration: underline; }
.summary-pane ul li p { color: #737373; }
/* LOCATOR BUTTONS */
a.recruiter-locator,
a.base-locator {
background-repeat: no-repeat;
display: block;
margin: 30px 0 30px 20px;
}
a.recruiter-locator span,
a.base-locator span { display: none; }
a.base-locator {
background-image: url(/i/contact_us/base_locator.png);
height: 252px;
width: 435px;
}
a.recruiter-locator {
background-image: url(/i/contact_us/recruiter_locator.png);
height: 225px;
width: 446px;
}
/*
----------------------------------------------------
FORMS
----------------------------------------------------
*/
ol.form {
list-style: none;
}
ol.form input,
ol.form textarea,
ol.form select,
ol.form option {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
ol.form select {
padding: 2px;
}
ol.form .field input,
ol.form .field textarea,
ol.form .field select,
ol.form .field option {
color: #000;
}
ol.form .text input,
ol.form .mixed input,
ol.form .textarea textarea {
background-color: #fff !important;
border: 1px solid #9a9a9a;
padding: 2px;
}
ol.form li {
font-size: 10px;
line-height: 180%;
padding: 5px 0;
}
ol.form li label,
ol.form li div.field {
color: #fff;
float: left;
}
ol.form li label {
display: block;
padding: 0 18px 0 22px;
text-align: right;
width: 210px;
}
/* RADIO BUTTONS */
ol.form li .radio li {
float: left;
padding: 0;
width: auto;
}
ol.form .radio input {
float: left;
margin-top: 2px;
}
ol.form .radio label {
padding: 2px 12px 0;
text-align: left;
width: auto;
}
ol.form li .radio span {
margin-top: -4px;
}
/* SUBMIT */
ol.form li.submit {
padding: 27px 0 27px 250px;
}
ol.form li.submit input {
border: none;
background-color: #668298;
color: #fff;
font-weight: bold;
padding: 4px 11px;
}
ul.contact-info {
margin-bottom: 15px;
}
h5.contact-header {
font-weight: bold;
font-size: 1em;
margin-bottom: 15px;
color: #bfbfbf;
}
