Style Sheet for Responsive, Parallax Website

This is the style sheet I hand-coded for the Million Members/Million Hours of Service website described here.

/** DESKTOP STYLES **/
/* Fonts hosted on our server. */
@import url(/Style%20Library/fonts/PerspectiveSansRegular/stylesheet.css);
@import url(/Style%20Library/fonts/perspectivesans_bold/stylesheet.css);

body {
font-family: ‘perspective_sansregular’, Arial, Helvetica, sans-serif;
background-color:#ffffff;
font-size:16px;
font-weight:normal;
margin-bottom:50px;
}

/* This styles a div tag that serves the purpose of allowing us to link back up to the top of the document and land just under the menu. */
#topOfPage {
position:absolute;
top:-100px;
}

/* This style displays some space below the footer since the footer on the bottom of the page does not display full height in some browsers. */
#bottomOfPage {
margin-bottom: 100px;
}

 

/**************** BEGIN Main Menu at top of site. **********************/

/* Outer Container */
#navContainer {
z-index:-1;
background-color:#0099CC;
position: absolute;
width: 100%;
height: 45px;
right: 0px;
top:72px;
background-image:url(‘../images/2419-14_mmmh_gradient_nav_v3.png’);
background-repeat:repeat-x;
}

/* Inner Container */
#navInnerContainer {
margin:-5px auto 0;
height:25px;
width:55%;
font-size:18px;
line-height:18px;
}

/* Unordered List Tag */
#navUL {
height:25px;
list-style-type: none;
color:#ffffff;
text-align:center
}

/* List Item Tags */
.navLIVerticalBar {
float:left;
width:5%;
}

/* Home Menu Option*/
#navLIHome {
float:left;
width:13%;
/*margin:auto;*/
vertical-align:middle;
}

/* Teaching Kids to Give Back Menu Option*/
#navLITeachingKids {
float:left;
width:33%;
/*margin:auto;*/
vertical-align:middle;
}

/* About MMMHS Menu Option*/
#navLIAboutMMMHS {
float:left;
width:23%;
/*margin:auto;*/
vertical-align:middle;
}

/* One Hour Equals Menu Option*/
#navLIOneHourEquals {
float:left;
width:22%;
/*margin:auto;*/
vertical-align:middle;
}

/* Dropdown menu that replaces main menu on mobile devices */
#navSelect {
font-size:16px;
float:right;
margin-right:20px;
margin-top:10px;
display: none;
}
/**************** END Main Menu at top of site. **********************/

 

 

/**************** BEGIN Slide One **********************/
#slideOneOuterContainer {
background:url(‘../images/2419_mmmh_background_topscreen.jpg’) repeat;
height:100%;
padding-top:80px;
width:100%;
}

#slideOneContainer {
margin-left:auto;
margin-right:auto;
width:1004px;
min-height:339px;
min-height:740px;
padding-left:20px;
font-family: ‘perspective_sansregular’, Arial, Helvetica, sans-serif;
font-size:16px;
}

#slideOneLeftCol {
float:left;
width:70%;
margin-right:30px;
margin-bottom:30px;
}

#slideOneLeftColImg {
z-index:0;
max-width:100%;
}

#slideOneLeftColHeading {
color:#ea1945;
font-size:20px;
line-height:24px;
}

#slideOneLeftColBtn {
width:130px;
vertical-align:text-top;
float:right;
}

#slideOneRightCol {
float:right;width:25%;max-width:100%;margin:30px 20px 20px 0;line-height:24px;
}

#slideOneRightColImg {
max-width:100%;
}

.slideOneRightColLink {
line-height:18px;
}

#slideOneRightColHdrImg {
width:261px;
margin-top:10px;
margin-bottom:20px;
}
/**************** END Slide One **********************/
/**************** BEGIN Slide Two **********************/
#slideTwoContainer {
background:url(‘../images/2419-14_mmmh_background_kids.jpg’) repeat-x;
height:auto;
min-height:525px;
width:100%;
}

#slideTwoInnerContainer {
max-width:984px;
margin-left:auto;
margin-right:auto;
min-height:525px;
padding-left:20px;
padding-right:20px;
}

#slideTwoLeftCol {
font-size:18px;
line-height:22px;
color:#585858;
float:left;
width:60%;
}

#slideTwoLeftColHdrImg {
max-width:100%;
margin:40px auto 0px;
padding-top:40px;
}

#slideTwoRightColBtn {
width:106px;
vertical-align:text-top;
float:right;
margin-right:20px;
}

#slideTwoRightColImg {
float:right;
width:40%;
max-width:100%;
margin-top:40px;
}
/**************** END Slide Two **********************/

 

 

 

/**************** BEGIN Slide Three **********************/
#slideThreeContainer {
margin-left:auto;
margin-right:auto;
width:984px;
max-height:514px;
min-height:339px;
height:auto;
padding-right:20px;
padding-left:20px;
}

#slideThreeBackground {
background:url(‘../images/2419-14_mmmh_background_about.jpg’);
margin-left:auto;
margin-right:auto;
max-width:2002px;
min-height:568px;
}

#slideThreeHdrImg {
max-width:100%;
margin-top:60px;
margin-bottom:30px;
}

#slideThreeLogoImg {
float:left;
width:25%;
max-width:100%;
padding-right:20px;
}

#slideThreeRightCol {
float:right;
width:70%;
max-width:100%;
font-size:16px;
font-weight:normal;
line-height:20px;
vertical-align:text-top;
font-family: ‘perspective_sansregular’, Arial, Helvetica, sans-serif;”
}

#slideThreeRightColBtn {
vertical-align:text-top;float:right;margin-top:30px;
}

#slideThreeRightColBtnImg {
width:228px;
vertical-align:text-top;
}
/**************** END Slide Three **********************/
/**************** BEGIN Footers **********************/
.slideFooterContainer {
background-color:#2190cf;
clear:both;
}

.slideFooter {
margin:auto;
max-width:1057px;
}

.slideFooterImg {
width:100%;
margin:auto;
max-width:100%;
}
/**************** END Footers **********************/
/** MOBILE STYLES **/
/***********************************************************************************/
/*************** BEGINNING of @media screen and (max-width:1024px) *****************/
/***********************************************************************************/
/******** BEGIN main menu resizing ********/
@media screen and (max-width: 1350px) {
#navInnerContainer {
width:65%
}
}

/* Leave room on left for logo to display over menu. */
@media screen and (max-width: 1230px) {
#navInnerContainer {
margin-left:250px;
}
}

@media screen and (max-width: 1140px) {
#navInnerContainer {
width:75%
}
}
/******** END main menu resizing ********/

 

@media screen and (max-width: 990px) {
/* Display Main Menu as a dropdown menu. */
#navInnerContainer {
display: none;
}

#navSelect {
display: inline;
}
}
/******** BEGIN iPad/tablet portrait styles ********/
@media screen and (max-width: 768px) {

#slideOneContainer {
width:748px;
padding-left:20px;
height:1040px; /* Height required because of repeated background image. */
}

/* Slide One has a left and right column. In portrait mode, we will make the left column full width and move the right column below the left column. */
#slideOneLeftCol {
float:left;
width:728px;
margin-right:20px;
margin-bottom:30px;
}

/* Move right column from right side of Slide One to bottom of Slide One (full width). */
#slideOneRightCol {
float:none;
width:768px;
}

/* Float image, originally in right column, to the left at bottom of Slide One. */
#slideOneRightColImg {
float:left;
}

/* Float headline, originally in right column, to the right at bottom of Slide One. */
#slideOneRightColHeadlines {
float:right;
width:60%;
}
/* Slide Two has a left and right column. In portrait mode, we will make the left column full width and move the right column below the left column. */
#slideTwoContainer {
/*width:768px;*/
}

#slideTwoInnerContainer {
width:728px;
padding:0 20px 0;
}

 

/* Slide Three */
#slideThreeOuterContainer {
margin-left:0;
width:768px;
min-height:600px;
padding:0;
}

#slideThreeContainer {
width:728px;
max-height:564px;
min-height:339px;
padding:0 20px 0;
}
/* Footer */
.slideFooter {
width:768px;
}

}
/******** END iPad/tablet portrait styles ********/