/* ------------------------------------------------------------ */ /* main.css */ /* ------------------------------------------------------------ */ /* CSS Style Sheet */ /* For WorkDay, Inc. website: www.workdaytest.com */ /* ------------------------------------------------------------ */ /*------------------------------------------------------------- */ /* BROWSER NORMALIZATION */ /*------------------------------------------------------------- */ /* Override all the browser styles., which appear if you do not */ /* provide a style. Different browsers have different style */ /* defaults. By overriding or normalizing the way elements are */ /* styled by the browser, you gain far more control - both */ /* within the CSS and across the browsers that interpret it. */ /*------------------------------------------------------------- */ /* Normalizes margin, padding */ th { margin : 0; padding : 0; } blockquote { margin : 0; padding : 0; } p { margin : 0; padding : 0; } input { margin : 0; padding : 0; } fieldset { margin : 0; padding : 0; } form { margin : 0; padding : 0; } pre { margin : 0; padding : 0; } h6 { margin : 0; padding : 0; } h5 { margin : 0; padding : 0; } h4 { margin : 0; padding : 0; } h3 { margin : 0; padding : 0; } h2 { margin : 0; padding : 0; } h1 { margin : 0; padding : 0; } li { margin : 0; padding : 0; } ol { margin : 0; padding : 0; } ul { margin : 0; padding : 0; } dd { margin : 0; padding : 0; } dt { margin : 0; padding : 0; } dl { margin : 0; padding : 0; } div { margin : 0; padding : 0; } body { margin : 0; padding : 0; } /* Normalizes font-size for headers */ h6 { font-size : 100%; } h5 { font-size : 100%; } h4 { font-size : 100%; } h3 { font-size : 100%; } h2 { font-size : 100%; } h1 { font-size : 100%; } /* Removes list-style from lists */ ul { list-style : none; } ol { list-style : none; } /* Normalizes font-style and font-weight to normal */ var { font-style : normal; font-weight : normal; } th { font-style : normal; font-weight : normal; } strong { font-style : normal; font-weight : normal; } em { font-style : normal; font-weight : normal; } dfn { font-style : normal; font-weight : normal; } code { font-style : normal; font-weight : normal; } cite { font-style : normal; font-weight : normal; } caption { font-style : normal; font-weight : normal; } address { font-style : normal; font-weight : normal; } /* Collapse tables */ table { border-collapse : collapse; border-spacing : 0; } /* Removes border from fieldset and img */ img { border : 0; } fieldset { border : 0; } /* Form */ form { margin: 0; padding: 0; } /* Left-aligns text in caption and th */ th { text-align : left; } caption { text-align : left; } /* Removes quotation marks from q */ q:after { content :''; } q:before { content :''; } /*------------------------------------------------------------- */ /*------------------------------------------------------------- */ /* CONTENT LAYOUT AND POSITIONING */ /*------------------------------------------------------------- */ /*------------------------------------------------------------- */ /*------------------------------------------------------------- */ /* BODY */ /*------------------------------------------------------------- */ /* Usually an outer container or wrapper is used to constrain */ /* the design to the center of the browser window. Here we */ /* eliminate the need for this division by using the the */ /* and elements to fix and center our layout. */ /* */ /* Because this design will use , rather than a container */ /*
, to center the design, we apply relative positioning */ /* to the element to establish it as a positioning */ /* context for other positional elements within the design. */ /*------------------------------------------------------------- */ html { background-color : #fff; /* white */ text-align : center; } body { position : relative; width : 800px; margin : 0 auto; text-align: left; } /*---------------------------------------------------------------------------------- */ /* body >> HEADING - contains branding, logo, and tag lines, marketing visuals, etc. */ /*---------------------------------------------------------------------------------- */ #heading { position: relative; width: 100%; z-index: 1; } /*-------------------------------------------- */ /* body >> heading >> BRANDING - contains logo */ /*-------------------------------------------- */ #branding { position: relative; width: 100%; height: 86px; margin: 0px; padding:: 0px; z-index: 2; } /*------------------------------------------------------------------------------------- */ /* body >> heading >> SUBBRANDING - contains supplemental marketing visuals and content */ /*------------------------------------------------------------------------------------- */ #subbranding { position: relative; width: 100%; z-index: 2; } /*------------------------------------------------------------ */ /* body >> NAVIGATION - contains main menu and site navigation */ /*------------------------------------------------------------ */ #navigation { position: relative; clear:both; width: 100%; height: 31px; background-image: url('../images/menubg.png'); background-repeat: no-repeat; background-position:center; font-family: "Lucida Sans", "Trebuchet MS", "MS Sans Serif"; font-size: 110%; font-weight: bold; text-align: center; z-index: 100; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation li { float: left; margin: 0; padding: 0; } #navigation a { display: block; width: 100px; height: 26px; text-align: center; padding-top: 3px; } #navigation a:hover { color: #ffffff; text-decoration: none; background-image: url('../images/menubg_on.png'); background-repeat: no-repeat; } #navigation a:visited { color: #ffffff; text-decoration: none; } #navigation a:link { color: #ffffff; text-decoration: none; } #navigation a:active { color: #ffffff; text-decoration: none; } #current a:active { color: #ffffff; text-decoration: none; background-image: url('../images/menubg_on.png'); background-repeat: no-repeat; } #current a:hover { color: #ffffff; text-decoration: none; background-image: url('../images/menubg_on.png'); background-repeat: no-repeat; } #current a:visited { color: #ffffff; text-decoration: none; background-image: url('../images/menubg_on.png'); background-repeat: no-repeat; } #current a:link { color: #ffffff; text-decoration: none; background-image: url('../images/menubg_on.png'); background-repeat: no-repeat; } /*-------------------------------------------------------------------------------------- */ /* body >> MAINCONTENT - contains web site contents, including additional layout columns */ /*-------------------------------------------------------------------------------------- */ #maincontent { position: relative; clear:both; margin-top: 10px; margin-bottom: 10px; width: 100%; z-index: 1; } /*---------------------------------------------------------- */ /* body >> maincontent >> LEFTCOLUMNN - left contents column */ /*---------------------------------------------------------- */ #leftcolumn { position: relative; float: left; padding-left: 14px; width: 385px; z-index: 2; } /*----------------------------------------------------------- */ /* body >> maincontent >> RIGHTCOLUMN - right contents column */ /*----------------------------------------------------------- */ #rightcolumn { position: relative; float: left; border-left:1px #CECECE solid; padding-left: 10px; padding-right:15px; width: 375px; z-index: 2; } #featurebutton1 ul { margin: 0; padding: 0; float:left; list-style-type: none; width: 76px; height: 76px; } #featurebutton1 li { float: left; margin: 0; padding: 0; } #featurebutton1 a { display: block; width: 76px; height: 76px; line-height: 76px; text-align: center; background-image:url('../images/f1_off.gif'); background-repeat:no-repeat; } #featurebutton1 a:hover { display:block; width: 76px; height: 76px; background-image: url('../images/f1_on.gif'); background-repeat: no-repeat; } #featurebutton2 ul { margin: 0; padding: 0; float:left; list-style-type: none; width: 76px; height: 76px; } #featurebutton2 li { float: left; margin: 0; padding: 0; } #featurebutton2 a { display: block; width: 76px; height: 76px; line-height: 76px; text-align: center; background-image:url('../images/f2_off.gif'); background-repeat:no-repeat; } #featurebutton2 a:hover { display:block; width: 76px; height: 76px; background-image: url('../images/f2_on.gif'); background-repeat: no-repeat; } #featurebutton3 ul { margin: 0; padding: 0; float:left; list-style-type: none; width: 76px; height: 76px; } #featurebutton3 li { float: left; margin: 0; padding: 0; } #featurebutton3 a { display: block; width: 76px; height: 76px; line-height: 76px; text-align: center; background-image:url('../images/f3_off.gif'); background-repeat:no-repeat; } #featurebutton3 a:hover { display:block; width: 76px; height: 76px; background-image: url('../images/f3_on.gif'); background-repeat: no-repeat; } #pods a { text-align: center; font-size: 100%; } #pods a:hover { color: #FF0000; } #pods a:visited { color: #FF0000; } #pods a:link { color: #FF0000; } #pods a:active { color: #FF0000; } /*---------------------------------- */ /* body >> FOOTER - page footer area */ /*---------------------------------- */ #footer { position: relative; clear:both; width: 100%; z-index: 1; } #footer p { font-size: 100%; color: #333333; } #footer ul { margin: 0; padding: 0; list-style: none; } #footer li { float: left; margin: 0; padding-right: 10px; } #footer a { text-align: center; } #footer a:hover { color: #333333; } #footer a:visited { color: #333333; } #footer a:link { color: #333333; } #footer a:active { color: #333333; } #product_menu ul { display:block; font-weight:bold; } #product_menu li { height: 25px; width: 100%; } #product_menu a { text-decoration:none; font-size:100%; font-weight:bold; color:#4D4D4D; } #product_menu a:link { text-decoration:none; } #product_menu a:visited { text-decoration: none; } #product_menu a:hover { text-decoration: none; color:#FF0000; } #product_menu a:active { text-decoration: none; } #current_product { height: 25px; width:100% } #current_product a:link { text-decoration: none; font-size:100%; font-weight:bold; color:#FF0000; } #current_product a:visited { text-decoration: none; font-size:100%; font-weight:bold; color:#FF0000; } #current_product a:hover { text-decoration: none; font-size:100%; font-weight:bold; color:#FF0000; } #current_product a:active { text-decoration: none; font-size:100%; font-weight:bold; color:#FF0000; } /*------------------------------------------------------------- */ /* STYLING */ /*------------------------------------------------------------- */ /*------------------------------------------------------------- */ /* TYPOGRAPHY */ /*------------------------------------------------------------- */ body { font : 72%/1.5 "Trebuchet MS", "Lucida Grande","Lucida Sans Unicode", Verdana, sans-serif; color : #333; } p { font-size : 110%; }