/*------------------------------------------------------------------------------------------- It is imparative as a web development company that we use clean CSS and that we use it to our full potential. The idea is to use basic tables for layout, and have CSS control 100% the rest of your content, from content layout, fonts, navigations and everything possible! To get more information on CSS use these links: -- Everything CSS - http://www.w3.org/Style/CSS/ -- Learn CSS - http://www.w3.org/Style/CSS/learning -- CSS Specs - http://www.w3.org/Style/CSS/#specs Take charge and educate yourself on usefull CSS implementation. ---------------------------------------------------------------------------------------------*/ /*------------------------------------ This is the body tags you must use this to set the website parameters, do NOT put info inside of the tag, use css instead. ------------------------------------*/ body { background: url(../images/bg_body.jpg) #f2efc3 50% 0 repeat-x; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #000; } img { border: 0; margin: 0px; padding: 0px; } /*------------------------------------ This is CSS for the main container divs on the site ------------------------------------*/ div.page { margin: auto; width: 773px; } div.header { width: 100%; color: #107263; background: url(../images/bg_header.jpg) 100% 0 no-repeat; } div.content { width: 755px; padding-top: 10px; padding-left:15px; padding-right:15px; } div.footer { width: 742px; height: 250px; background-image: url('../images/footer_bg.gif'); background-repeat: no-repeat; color: #fff; font-size: 10px; text-align:center; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; } .footer_top{ width: 780px; height: 20px; background-image: url('../images/footer_bg_top.jpg'); background-repeat: no-repeat; } .footer_bottom{ width: 780px; height: 20px; background-image: url('../images/footer_bg_bottom.jpg'); background-repeat: no-repeat; margin:auto; } div.footer_sub { width: 780px; height: 100%; background-image: url('../images/footer_bg_line.jpg'); background-repeat: repeat-y; color: #fff; font-size: 10px; text-align:center; padding-top: 10px; padding-bottom: 10px; } #flashcontent { float: right; width: 584px; } div.header_links { float: right; } div.main_nav { float: left; width: 189px; } .float_left { float: left; } .float_right { float: right; } .spacer10 { clear: both; height: 10px; } .spacer { clear: both; } .white_line { width: 771px; height: 6px; background: #fff; clear: both; border-left: 1px solid #587B63; border-right: 1px solid #587B63; } .white_line_sub { width: 771px; height: 6px; background: url(../images/separator.jpg); clear: both; border-left: 1px solid #587B63; border-right: 1px solid #587B63; } div.featured_area { background: url(../images/bg_featured.jpg) 0 0 repeat-y; width: 100%; color: #fff; font-size: 10px; } .submit_button{ padding-left:2px; } .submit_button_2{ padding-left:6px; } div.featured_availability { width: 240px; float: left; padding-left:19px; padding-top:5px; } div.featured_deals { width: 237px; float: left; padding-top:5px; text-align:center; } div.featured_enews { width: 232px; float: left; padding-left:25px; } div.featured_header { font-size: 16px; color: #fff; font-style: italic; } div.featured_area_sub { width: 100%; color: #fff; font-size: 10px; } div.featured_availability_sub { width: 240px; float: left; padding: 8px 8px 0px 12px; } div.featured_deals_sub { width: 223px; float: left; padding: 8px 8px 0px 8px; text-align:center; } div.featured_enews_sub { width: 222px; float: left; padding: 8px 8px 0px 8px; } div.featured_header_sub { font-size: 16px; color: #fff; font-style: italic; } div.featured_header_large_sub { font-size: 22px; color: #fff; font-family:"Times New Roman", Times, serif; font-weight:bold; } div.featured_header_large { font-size: 22px; color: #fff; font-family:"Times New Roman", Times, serif; font-weight:bold; } div.main_content { width: 570px; text-align: justify; } div.main_directions { width: 450px; text-align: justify; } div.specials_content { background: url(../images/featured.gif); background-color: #27897a; background-position: 0 0; background-repeat: repeat-x; height:auto; min-height: 150px; width: 700px; padding: 15px; } div.email_form { width: 300px; } div.sidebar { width: 173px; } div.directions { width: 270px; } .left { float: left; } .right { float: right; } /*------------------------------------ Set your links here. There are two examples. The main links for the website and a specific link class to use. ------------------------------------*/ A:link { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #107263;} A:visited { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #107263;} A:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: underline; color: #107263;} A.footerlinks:link { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #fff;} A.footerlinks:visited { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #fff;} A.footerlinks:hover { text-decoration:underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #fff;} .header_links a:link { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #107263;} .header_links a:visited { text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #107263;} .header_links a:hover { text-decoration:underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #107263;} .main_nav a:link, .main_nav a:visited, .main_nav a:hover { margin: 0px; padding: 0px; } a.button:link{ border: 2px solid #333; color: #333; background: #7CBDB7; padding: 1px 2px 1px 2px; font-weight: bold; text-decoration: none; } a.button:visited { border: 2px solid #333; color: #333; background: #7CBDB7; padding: 1px 2px 1px 2px; font-weight: bold; } a.button:hover { border: 2px solid #333; color: #333; background: #89EBDE; padding: 1px 2px 1px 2px; font-weight: bold; } /*------------------------------------ Text formatting. Use this area for all of your text formatting. Use this for coontent tags, footer tags, etc. ------------------------------------*/ .content { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; line-height: 15px;} .boldtext { font-weight: bold; color: #107263; } .specials_header { font-weight: bold; color: #107263; font-size: 13px; } .specials_title { font-weight: bold; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: 25px; } .specials_title1 { font-weight: bold; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: 18px; } .specials_content { font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size: 14px; } /*------------------------------------ Keep your title formatting seperate from your text for organization. Format your titles below. ------------------------------------*/ .page_title{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #107263; } /*------------------------------------ In many of our websites, we format the submit buttons. Below is example css to format those buttons. ------------------------------------*/ .formbutton { background-color: #6e0202; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color: #ffffff; border: 2px solid #ffffff; padding: 3px; } /*------------------------------------ If you are formatting tables, IE, backgrounds, text, or anything as such, use the code samples listed below. ------------------------------------*/ .footertable { background-image:url(../images/footerbg.jpg); background-position:bottom; background-repeat:repeat-x; background-color: #9d001d; padding: 10px; border-top: 4px solid #ffffff; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } /*------------------------------------ If you have additionall css that does not fall in the scope above use that down here. This can include anything, such as css dropdown text, div layers, etc. ------------------------------------*/ .bordered { border: 6px solid #fff; } .additional{ } /*------------------------------------ Use the code below if you will be using an additional css file seperate from this file. This can be used for our dropdown menu system or the tab content system. Customize for your own development. ------------------------------------*/ /* @import url('dropdown_menu.css'); /* IE4 can understand, but not NN4 */