/** Name of file * @descr Lamure * @authors Joseph Carras * @date Wednesday, June 08, 2009 * @copyright Copyright (c) 2009 InnviWeb. All rights reserved. */ /* CSS Info * * Name: Basic Layout - With Comments.css (Original CSS) * Version: 4.1.0 * Info: Clean Basic Layout with Comments */ /* CSS Compatibility Notes: * * HACKS: display:block; height: 1%; * * inherit: Does not work for IE6 and IE7 so we can't use it. * * IE6: Has a bug were when you set the height less than that of the line height or the fond size, it * will not render the div right. In order to fix this you need to either reduce the line height * and the text size, or include overflow: hidden which is the preferred way. * * IE6: When you use absolute positioning and it does not display right, you must also add the number of * the paddings and margins of the parent div. IE6 measure some times the starting point from the * previous div and there is no fix for it. Then after you set the hacked distance, you need to use * the html>body #section hack in order to set the right distance for the rest of the browsers. * * IE6: For IE6 to render sites correctly you need to include the active * html #sections in the * Internet Explorer Style Sheets Section of this CSS (last part) with the height: 1%; style. * However if one section is inactive, you should comment it out because it will still render the * div when the rest of the browsers will just hide them. * * IE7: If a line of the parent div appears on the top section of a div with margins and paddings of 0px, * then add the overflow: hidden; and it should render the div correct. This is due to having * positive paddings. However you have to add it as a hack so it will not cause problems with IE6. * * IE6: You realy need to add the width and height of the png image in the logo section. Other than that * you dont have to do anything since PHP will take care of the rest. * * ALL It is wise to include css margins and paddings for all the ellements. IE and FireFox use * different so if you see different spacing between the two elements, try to add margins and * paddings on the section with the problem or the section after. */ /* CSS Format: * * ORDER OF PROPERTIES (For each section this is the order that the properties must occur) * * Background, Visibility Related (Color or Images that are for the background only and Visibility) * * Position Related (Position, Float, Fixed Positioning or all that set the placement of the content) * * Margins, Paddings, and Borders * * Height, and Width * * Font Related (Such as font color, decoration, etc) * * NOTE: Please note the empty space between each group. This line must be included. * * CSS SEMANTICS: (For all the CSS files to look exactly alike and all to understand the same format) * * Tabs: Follow the structure with tabs as set bellow. If you have questions contact JCarras. * * Properties: property: option; * * properties will be followed by the required ":" and then a space " " followed by the * option followed by the end of line delimiter ";". * * Sections: name { * } * * sections will be created in the right indentation (tabs) followed by the identifier * name followed by a space " " followed by the "{" character. In the next line all the * Properties will be placed following the correct order set above. In the end the * closing "}" will be inserted after setting the correct indention. * * Please keep the code clean. We work as a team. * We should be thinking differently, but speaking the same language! * Corrective action will be taken when the laying foundation is not followed. */ /**-------- XHTML Design --------------------------------------------------------------------------------------------------------------------------*/ html {overflow-y:scroll;} /* Set this to always display the right scroll in FireFox just like IE */ * {margin:0;padding:0;} ul {list-style:none;} li {} /* Additionally IE will not display bullets and decoration when they are located out of the content * box. To fix this we have to move the left padding by a small amount to bring it back into the * content box. In this layout using the default bullets the size needed is 17px, */ p {padding: 0 0 15px 0;} b {color:#fff;} img {border:0;vertical-align:top;text-align:left;} /* In order to display the images same to all browser you have also add display: block; */ hr {} /* hr is Buggy with IE7 and IE6. Dont use if you want perfect compatibility. */ br {} a {color:#fff;} a:hover{text-decoration:none;} h1 {margin:0 0 24px 19px;font-size:1.62em;color:#fff;text-transform:uppercase;font-weight:normal;} h2, h3 {font-family:"Times New Roman",Times,serif;font-weight:normal;font-style:italic;} h2 {margin-bottom:16px;font-size:1.85em;color:#fff;} h3 {margin:12px 0 14px 0;font-size:1.46em;color:#fff;line-height:1.26em;} h4 { color:#fff; font-size:1em; font-weight:normal;} /* All h font sizes and margin are different for FireFox and IE. Best to set them same. * Also IE6 uses different margins so we set them to 0 and instead play with paddings. */ .clear{clear:both;} .white{color:#FFF;} .hr{ } .bullet{ } .right{float:right;} .left{float:left;} .border{padding:5px;} /**-------- End of XHTML Design -------------------------------------------------------------------------------------------------------------------*/ /**-------- XHTML Section ------------------------------------------------------------------------------------------------------------------*/ body{ background:#296896; text-align:center; /* IE BUG. If you want the site centered you need this! */ line-height:1em; /* IE and FireFox have different defaults so set them to be the same */ font-family:Arial,Helvetica,sans-serif;font-size:100%;color:#000; } /** - - - - XHTML
wrapper Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #wrapper{ background:url(../images/wrapper.gif) repeat-x #eb5000; position:relative; /* Normaly use this */ /* position:absolute; top:50%;left:50%; /* For verticaly centering use line below */ margin:0 auto; /* Centered the site for FireFox like "text-align: center" does for IE */ /* margin:-300px 0 0 -475px; /* For centring wrapper vertically and horizontaly */ /* IE Bug. Cant change the margins here. Change body paddings instead */ width:980px; text-align:left; /* To fix the IE Centering BUG hack */ } /** - - - - XHTML
header Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #header{ position:relative; height:272px; /* 405 */ font-size:0.814em; } /*-- Start of
header Designs */ #header_logo{float:left;width:285px;height:inherit;} #header_logo .emblem{margin:30px 0 0 83px;} #header_logo img{margin:17px 0 0 17px;} #header_wrapper{background:#296896;float:left;width:695px;height:inherit;} #languages{position:absolute;top:21px;left:300px;color:#fff} #languages li{float:left;padding:0 2px} #header_url{height:61px;} #header_url .emblem{padding:26px 27px 0 0; float: right;} #header_url a,#languages a{color:#fff;text-decoration:none;} #header_url a:hover, #languages a:hover{color:#000;} #header_image{background:url(../images/header_image.jpg) no-repeat;height:128px;} /*-- End of
copyright Designs */ /** - - - - End of XHTML
header Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ /** - - - - XHTML
main Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #main{ position:relative; font-size:0.814em; line-height:1.38em; } /*-- Start of
header Designs */ #main_wrapper{float:left; width:285px;} #main_wrapper h1{padding:75px 0 0 60px;} #main_wrapper ul{padding:0 0 0 60px;} #main_content{ float:left; background:#296896; padding:13px 10px 20px 15px; /*height:523px;width:695px;*/ min-height: 460px; height:auto !important; height:560px;width:670px; } /*-- End of
copyright Designs */ /** - - - - End of XHTML
main Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ /** - - - - XHTML
footer Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ #footer{ background:#fe9400;position:relative; height:60px; font-size:.75em;color:#5e0303; } /*-- Start of
copyright Designs */ #copyright{background:#eb5000; float:left; width:285px; height:60px;} #copyright p{padding:15px 0 0 36px;} #copyright a{color:#fac802;text-decoration:none;} #innviweb{padding:0 0 0 36px;} #footer_weather{float:left; padding:5px;} /*-- End of
copyright Designs */ /** - - - - End of XHTML
footer Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ /** - - - - End of XHTML
wrapper Section - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /**-------- End of XHTML Section -----------------------------------------------------------------------------------------------------------*/ /**-------- XHTML
    errors Section -------------------------------------------------------------------------------------------------------------*/ #errors { height:1%; } /*-- Start of
    errors Design */ .error, #errors ul, #errors p{ background:url(../images/alert.gif) repeat #ff6701; overflow:hidden; margin:0 0 10px 0;padding:5px 0 5px 10px; color:#000; } /*-- End of
    errors Design */ /**-------- End of XHTML
      errors Section ------------------------------------------------------------------------------------------------------*/ /**-------- XHTML
        navigation Section ---------------------------------------------------------------------------------------------------------*/ #navigation{ height:83px; } /*-- Start of
      • navigation Design */ #navigation li{float:left;padding-left:1px;} #navigation a{ background:#fe9400; padding:34px 0 30px 0; /*width:138px;*/ width:230px; font-size:1.15em;text-transform:uppercase;color:#000;display:block;float:left;text-align:center;text-decoration:none; } #navigation a:hover,#navigation a.active{background:url(../images/hover.gif) no-repeat; color:#fff;} /*-- End of
      • navigation Design */ /**-------- End of XHTML
          navigation Section --------------------------------------------------------------------------------------------------*/ /**-------- XHTML
            categories Section ---------------------------------------------------------------------------------------------------------*/ #categories{} /*-- Start of
          • categories Design */ #categories li{background:url(../images/bullet.gif) no-repeat left 6px; padding:0 0 4px 21px;} #categories a{color:#5e0303;font-size:.92em;line-height:1.08em;} /*-- End of
          • categories Design */ /**-------- End of XHTML
              categories Section --------------------------------------------------------------------------------------------------*/ /**-------- Start of XHTML
              main_content Section ---------------------------------------------------------------------------------------------*/ #main_content { } /*-- Start of
              main_content Designs */ #main_content ul{padding: 0 0 5px 15px;list-style:disc} #main_humans,#main_cars,#main_coverage1,#main_coverage2,#main_free1,#main_free2 ul{float:left; width:295px; margin: 0 15px 0 0;} #main_insurance,#main_coverage,#main_free{clear:both; display:block;} /*-- End of
              main_content Designs */ /**-------- End of XHTML
              main_content Section -----------------------------------------------------------------------------------------------*/ /**-------- Start of CSS Classes ------------------------------------------------------------------------------------------------------------------*/ .icon_box {font-size:1.23em;color:#fff;line-height:1.375em;padding:10px 60px 60px 112px;} .icon_1 {background:url(../images/icon_1.gif) no-repeat #296896;} .icon_2 {background:url(../images/icon_2.gif) no-repeat #296896;} .icon_3 {background:url(../images/icon_3.gif) no-repeat #296896;} .offer_box {background:url(../images/alert.gif) #ff6701;margin-bottom:25px; text-align:center; display:block; height:65px; width:390px;padding:5px;} .offer_box img, .offer_box p {float:left;} .offer_box p {font-size:1.4em;color:#000;line-height:1.375em; padding:5px;} .offer_box b {font-family:"Times New Roman",Times,serif;font-style:italic;margin-bottom:16px;font-size:1.4em;color:#fff;} .offer_box a {color:#000;} .image_box {background:#296896 url(../images/image_box.gif) repeat-x top;float:left;margin:0 30px 30px 0;width:284px;/*height:386px*/} .image_box h2{background:url(../images/image_box_header.gif) no-repeat left top;padding:19px 0 0 19px;font-weight:bold;} .image_box a{display:block;padding:0 25px 0 20px;} .image_box p{padding:0 25px 10px 20px;} .image_box h3{padding:0 25px 0px 20px;} .image_box img{padding:0 0 25px 0;} .anchor{color:#d6d5d5;text-decoration:none;font-size:.85em;font-weight:bold;} .clear_list{list-style:none; margin:0 0 0 -12px;} .partners img{margin:0 0 5px 5px;float:left;} .company br{margin:0 0 30px 0;} #main_information .contact {width: 210px;} #main_information .left{width:90px;float:left;} #main_information .right{width:120px;float:left;} #main_information .right a{padding:0;} input, select {vertical-align:middle; font-weight:normal;} #form {padding:0 25px 0 20px;} .form { margin:0 0 5px 0; width:234px; padding:2px 0 2px 3px; background:none; border:1px solid #a4a4a4; color:#000; font-size:.85em;} textarea { width:234px; height:72px; background:none; overflow:auto; border:1px solid #a4a4a4; padding:2px 0 0 3px;color:#000;} #form .menu{padding:2px 2px 0 0;margin:0;display:block;} #form .category_p{width:50px; float:left;} #form .category_i{width:170px; float:right;} #form .time_p{width:110px; float:left;} #form .time_i{width:120px; float:right;} .link {float: right; color:#d6d5d5;text-decoration:none;font-size:.85em;font-weight:bold;} /**-------- End of CSS Classes --------------------------------------------------------------------------------------------------------------------*/