/* Site Design and CSS development: Swavek Mokrzycki email: swavekm@yahoo.com ------------------------------------------------- */ /* Global ------------------------------------------------- */ * { font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 16px; margin: 0; padding: 0; color: #333; } body { margin: 20px 0; background: #b5b5b5 url('imgs/bodyBackground.gif') repeat-x top center; } #body_area { width: 100%;} #shadow { background: url('imgs/wrapperShadow.gif') repeat-y right top; padding-right: 10px; height: 100%; } #shadowApp { background: url('imgs/wrapperShadowApp.gif') repeat-y right top; padding-right: 10px; height: 100%; } a { color: #77a735; } a:hover { color: #517231; } p { margin-bottom: 10px; } hr { margin: -5px 0 0 0; height: 1px; background: #fff; color: #fff; border: none; border-top: 1px solid #c8cacd; height: 10px; } blockquote { margin-left: 70px; } /* Headers ------------- */ h1 { font-family: "Trebuchet MS", sans-serif; color: #77a735; font-size: 22px; font-weight: 600; line-height: 1.2em; letter-spacing: -1px; padding-bottom: 12px; } h2 { background: url('imgs/bullet1.gif') no-repeat left top; list-style: none; text-decoration: none; padding: 5px 0 5px 30px; font-size: 16px; font-weight: 600; color:#000; line-height: 110%; } h3 { font-size: 13px; font-we ight: 600; line-height: 1.1em; letter-spac ing: -1px; padding-bottom: 4px; } h4 { color: #000; font-size: 18px; line-height: 1.1em; padding-bottom: 5px; padding-top: 5px; /*text-transform: uppercase;*/ margin-left: 25px;} h4 a { color: #27598b; font-size: 12px; font-weight: bold; line-height: 1.1em; letter-spacing: -1px; text-decoration: none; } h5 { font-family: arial, helvetica, sans-serif; padding-left: 17px; font-size: 12px; color: #27598b; font-weight: bold; } .flashArea { margin-top: 6px; border-bottom: 8px solid #000; padding: 0 0 2px 0 } /* Header Areas ------------- */ .headArea_{ padding: 0 10px 10px 10px} /* ------------- */ .alignLeft { text-align: left; } .alignLeftPadR8 { text-align: left; padding: 0 8px 0 0; } .alignCenter { text-align: center; } .alignCenterPadLR4 { text-align: center; padding: 0 4px; } .alignRight { text-align: right; } .alignRightPadL8 { text-align: right; padding: 0 0 0 8px; } .alignRightPadR30 { text-align: right; padding-right: 30px;} .v_alignBottom { vertical-align: bottom; } .v_alignTop { vertical-align: top; } .width100prc { width: 100%; } .width95prc { width: 95%; }.width90prc { width: 90%; } .width80prc { width: 80%; } .width70prc { width: 70%; } .width60prc { width: 60%; } .width50prc { width: 50%; } .width40prc { width: 40%; } .width30prc { width: 30%; } .width20prc { width: 20%; } .width10prc { width: 10%; } .width300 { width: 300px; } .width290 { width: 290px; } .width280 { width: 280px; } .width270 { width: 270px; } .width260 { width: 260px; } .width250 { width: 250px; } .width240 { width: 240px; } .width230 { width: 230px; } .width220 { width: 220px; } .width210 { width: 210px; } .width200 { width: 100px; } .width190 { width: 190px; } .width180 { width: 180px; } .width170 { width: 170px; } .width160 { width: 160px; } .width150 { width: 150px; } .width140 { width: 140px; } .width130 { width: 130px; } .width120 { width: 120px; } .width110 { width: 110px; } .width100 { width: 100px; } .width90 { width: 90px; } .width80 { width: 80px; } .width70 { width: 70px; } .width60 { width: 60px; } .width50 { width: 50px; } .width40 { width: 40px; } .width30 { width: 30px; } .width20 { width: 20px; } .width10 { width: 10px; } .floatLeft { float: left; } .floatRight { float: right; } /* End Global ------------------------------------------------- */ /* /* Form Global ------------------------------------------------- */ form { font-family: Tahoma; font-size: 11px; } input { font-family: Tahoma; font-size: 11px; border: 1px solid #0868ac; margin:0 8px 0 0; padding: 0px 2px 3px 2px; background: #dce6f5; } .customCheckbox { border: none; padding-left: 2px; width: 22px; height: 22px;} .customRadiobutton { border: none; position: relative; top: 2px; margin: 0; } select { font-family: Tahoma; font-size: 11px; border: 1px solid #003471; margin:0 8px 0 0; } label { font-family: Tahoma; font-size: 11px; color: #0868ac; } caption { text-align: left; font-size: 11px; font-weight: bold; color: #77a735; padding: 0; line-height: 12px; } textarea { } form table { border-collapse: collapse; } form a { font-family: Tahoma; font-size: 11px; font-weight: normal; margin: 0px; } .alignButton { vertical-align: bottom; padding-bottom: 2px; } /* End Form Global ------------------------------------------------- */ /* Bullets ------------------------------------------------- */ /* Bullet 1 ------------- */ .bullet1 { float: left; margin-right: 30px; } .bullet1 li { background: url('imgs/bullet1.gif') no-repeat left top; list-style: none; text-decoration: none; padding: 5px 0 5px 30px; font-size: 16px; font-weight: 600; color:#000; line-height: 110%; } .bullet1 li a { text-decoration: none; color:#77a735; line-height: 110%; } .bullet1 li a:hover { color: #77a735; } #cornerBlue_L { position: absolute; margin-top: 1px; background: url('imgs/pageContent_L.gif') no-repeat left top; padding:5px; margin: -10px 0 0 -12px; } #cornerBlue_R { position: relative; background: url('imgs/pageContent_R.gif') no-repeat right top; float: right; width: 10px; height: 10px; top: -10px; } /* Bullet 2 ------------- */ .bullet2{ margin: 0 0 10px 0; } .bullet2 li { background: url('imgs/bullet2.gif') no-repeat left 3px; list-style: none; text-decoration: none; padding-left: 15px; padding-bottom: 7px; line-height: 110%; } .bullet2 li a { font-family: arial, helvetica, sans-serif; text-decoration: none; color: #77a735; line-height: 110%; } .bullet2 li a:hover { color: #77a735; } .bullet2 ol li { list-style-type: decimal; padding-left: 0; background: none; } /* Numbered ------------- */ ol li { list-style-type: decimal; text-decoration: none; margin-left: 25px; } /* Link More ------------- */ .linkMoreArea { padding: 0 6px 2px 0; text-align: right; white-space: nowrap; height: 20px; } .linkMore a { font-family: Tahoma; float: right; font-weight: bold; color: #77a735; text-decoration: none; background: url('imgs/bulletLinkMore.gif') no-repeat right; padding-left: 12px; padding-right: 17px; } .linkMore a:hover, #linkMore2 a:hover { color: #ffba53 ;background: url('imgs/bullet5on.gif') no-repeat right; } .linkMore2 a { font-family: Tahoma; float: left; font-weight: bold; color: #77a735; text-decoration: none; background: url('imgs/bullet5.gif') no-repeat right; padding-left: 17px; padding-right: 17px; } .linkMore2 a:hover, #linkMore2 a:hover { color: #ffba53 ; background: url('imgs/bullet5on.gif') no-repeat right; } /* End Bullets ------------------------------------------------- */ /* Wrappers ------------------------------------------------- */ #wrapper { width: 870px; text-align: left; } #wrapperapp { width: 870px; text-align: left; } .logo_wrapper { height: 70px; text-align: left; display: table;} .price_wrapper { margin-top: 5px; margin-bottom: 10px; } .priceLarge_buttonWrapper { margin-top: 20px; margin-left: 8px; } .portlet_wrapper { margin: 0 0 10px 0; border-top: 1px solid #dad4be; border-right: 1px solid #dad4be; border-bottom: 0px solid #fff; border-left: 1px solid #dad4be; height: auto; background: #fff; padding-bottom: 0px; } .partnerArea_wrapper { margin: 0 0 10px 0; border-top: 1px solid #9fa3a2; border-right: 1px solid #9fa3a2; border-bottom: 0px solid #fff; border-left: 1px solid #9fa3a2; height: auto; background: #fff; } .portlet_wrapperGray { margin: 0; padding: 0; border-top: 1px solid #dad4be; border-right: 1px solid #dad4be; border-bottom: 1px solid #fff; border-left: 1px solid #dad4be; height: 100%; background: url('imgs/gradientGray.gif') repeat-y right top;} .portlet_wrapperBlue { margin: 0 0 18px 0; padding: 0; border-top: 1px solid #dad4be; border-right: 1px solid #dad4be; border-bottom: 1px solid #fff; border-left: 1px solid #dad4be; height: 100%; background: #fff url('imgs/gradientLightBlue.gif') repeat-y right top;} /* End Wrappers ------------------------------------------------- */ /* Main Layout ------------------------------------------------- */ #gradient_L { position: absolute; left: 0; width: 30px; height: 505px; background: url('imgs/gradient_L.gif') no-repeat left top ; } #gradient_R { position: absolute; right: 0; width: 30px; height: 505px; background: url('imgs/gradient_R.gif') no-repeat left top ; } #container { position: relative; width: 100%; border-left: 5px solid #fff; border-right: 5px solid #fff; background: #fff url('imgs/leftColumn.gif') repeat-y left top ; margin-left: -5px; min-he ight: 500px; } #containerHome, #containerSubcategory { position: relative; background: #fff url('imgs/pageContent_L.gif') repeat-y left top; margin: 0 -5px; padding-left: 40px; } #imgHome { background: #f3edd1 url('imgs/imgHome.jpg') no-repeat center top; width: 100%; height: 302px; clear: both; } #containerHome .left_col { width: 36%; float: left; border-right: 1px solid #000; margin: 20px 0; padding: 0 15px; } #containerHome .right_col { width: 55%; float: right; } #content { min-height: 450px; padding: 15px 0; background: url('imgs/pageContent_R.gif') repeat-y right top; padding-right: 40px; } #containerHome #content { padding-bottom: 0; } #containerSubcategory #content { padding-left: 20px; padding-r ight: 60px;padding-top: 35px} #containerSubcategory #content p, #containerSubcategory ul { padding-left: 30px;} #left_col { width: 173px; position: absolute; top: 85px; padding: 0; } #right_col { position: absolute; right: 0px; top: 0px; padding: 16px 9px 0 0; width: 179px; } #page_corner_L { position: absolute; margin-top: 1px; background: url('imgs/pageContent_L.gif') no-repeat right top; padding:5px; margin-left: -20px; } #page_corner_R { position: relative; right: -20px; background: url('imgs/pageContent_R.gif') no-repeat right top; float: right; width: 10px; height: 10px } #page_content { margin-left: 9px; margin-right: 0; padding: 15px 20px; background: url('imgs/pageContent.gif') no-repeat right top; } /*#page_content_L { margin-left: 9px; margin-right: 201px; padding: 15px 20px; background: url('imgs/pageContent.gif') repeat-x right top; }*/ /*#page_content_C { margin-left: 190px; margin-right: 201px; padding: 15px 20px; background: url('imgs/pageContent.gif') repeat-x right top; }*/ #page_content_R { padding: 8px 20px 11px 192px; background: url('imgs/pageContent.gif') repeat-x right top; } /* /* End Main Layout ------------------------------------------------- */ /* Head ------------------------------------------------- */ #masthead { height: 196px; background: url('imgs/headerArea.gif') repeat-x left bottom; margin: 0 5px; } #headerArea_L { height: 196px; width: 46px; background: url('imgs/headerArea_L.gif') no-repeat left bottom; position: absolute; margin-left: -10px; } #headerArea_R { height: 196px; width: 46px; background: url('imgs/headerArea_R.gif') no-repeat right bottom; position: relative; right: -10px; float: right; margin-bottom: -120px; } /* ----------- */ #logo { background: url('imgs/logo.gif') no-repeat scroll left top; width: 267px; height: 40px; position: relative; left: 35px; top: 67px; z-index: 0; margin: 0; padding: 0; } #logo a { display: block; text-decoration: none; width: 267px; height: 40px; position: relative; } h1#logo { text-indent: -999em; } /* ----------- */ #util { position: relative; text-align: center; top: 10px; height: 0; z-index: 100; } #util li { list-style: none; display: inline; font-family: Tahoma; font-size: 10px; font-weight: bold; text-transform: uppercase; line-height: 22px; padding: 2px 0 0 10px; } #util li a { text-decoration: none; padding: 5px 0 5px 22px; color: #fff; } #util li a:hover { text-decoration: none; padding: 5px 0 5px 22px; color: yellow; } #util li.email { background: url('imgs/iconEmail.gif') no-repeat left 50%; } #util li.home { background: url('imgs/iconHome.gif') no-repeat left 50%; } /* ----------- / /* End Head ------------------------------------------------- */ /* Top Nav ------------------------------------------------- */ #top_nav {margin-top: 116px; padding-left: 60px; font-weight: bold; border-bottom: 1px solid #d6d6d6; } #top_nav ul { border: none; border-collapse: collapse; text-indent: -19px; margin: 0; padding: 10px 0 8px 0; } #top_nav li { display: inline; padding: 11px 0 8px 0; border-right: #e6e6e6 solid 1px; border-left: #9f9f9f solid 1px; margin: 0 -1px 0 -2px; } #top_nav li.sel { position: relative; top: -4px; padding: 11px 0 12px 0; } #top_nav li.sel, #top_nav li.sel :hover{ margin: 0 -5px; background: url('imgs/navTopSel_L.gif') no-repeat left top; border: none; } #top_nav li.sel a, #top_nav li.sel a:hover{ font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; background: url('imgs/navTopSel_R.gif') no-repeat right top; padding: 12px 15px 14px 15px; margin: 0; color: #000; } #top_nav li a { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; padding: 11px 15px 9px 15px; ma rgin: 0 -1px; color: #000; } #top_nav li a:hover { padding: 11px 15px 9px 15px; background: #9b9b9b url('imgs/navTopHover.gif') repeat-x left top; color: #000; } #top_nav li.separator_L { padding: 11px 0 8px 0; border-right: #e6e6e6 solid 1px; border-left: none; position: relative; margin-right: 2px; } #top_nav li.separator_R { padding: 11px 0 8px 0; border-left: #9f9f9f solid 1px; border-right: none; } /* End Top Nav ------------------------------------------------- */ /* Left Nav ------------------------------------------------- */ #left_nav { width: 173px; border-bottom: 20px; solid: #77a735; background: #fff; } #left_nav ul { list-style: none; } #left_nav li { font-family: tahoma; font-size: 10px; font-weight: bold; background: #e2e1d8 url('imgs/navLeftBackground.gif') repeat-x left top; padding: 0; margin: 0; border-bottom: 1px solid #c4c4c4; } /*#left_nav li.sel { color: #fff; text-decoration: none; padding: 4px 3px 4px 12px; margin: 0; height: 16px; background: #729331; }*/ #left_nav li a { font-family: tahoma; font-size: 10px; font-weight: bold; color: #6f6e62; text-decoration: none; display: block; padding: 4px 3px 4px 12px; } #left_nav li a:hover { color: #000; } .navLeft_Top { background: url('imgs/navLeft_Top.gif') no-repeat left top; height: 12px; margin-bottom: 2px;} .navLeft_Bottom { background: url('imgs/navLeft_Bottom.gif') no-repeat left top; height: 77px; margin-top: 2px; } .navLeft_BottomGrad { background: #f3edd1 url('imgs/navLeft_BottomGrad.gif') repeat-x left top; height: 100px; margin-top: 20px; position: relative; left: -18px; width: 192px; } /* End Left Nav ------------------------------------------------- */ /* Bread Crumb ------------------------------------------------- */ #contentBreadCrumb { margin-bottom: 35px; white-space: normal; padding: 2px 0;} #contentBreadCrumb li { font-size: 11px; display: inline; padding: 0 2px; color: yellow; text-indent: -2px; } #contentBreadCrumb li.separator { color: yellow; } #contentBreadCrumb li a { padding: 0; text-decoration: none; color: #fff; } #contentBreadCrumb li a:hover { text-decoration: underline; } /* End Bread Crumb ------------------------------------------------- */ /* Content Layout ------------------------------------------------- */ .container_Content { display: table; width: 100%; margin:-7px 0 5px 0 ; } /* 2 Column Equal ------------------ */ .left_2colContent { width: 49%; float: left; } .right_2colContent { width: 48%; float: right; } /* 3 Column Equal ------------------ */ .left_3colContent { width: 32%; float: left; margin-right: 3%; } .center_3colContent { width: 32%; float: left; } .right_3colContent { width: 30%; float: right; } /* 4 Column Equal ------------------ */ .left_1_4colContent { width: 23%; float: left; margin-right: 3%; } .left_2_4colContent { width: 23%; float: left; margin-right: 3%; } .right_1_4colContent { width: 23%; float: left; margin-right: 2%; } .right_2_4colContent { width: 22%; float: right; } /* 2 Column ------------------ */ .left_2colContentCollapsed { width: 130px; float: left; } .right_2colContentExpanded { float: right; width: 73%; } .left_2colPriceCollapsed { width: 40px; float: left; } /* 3 Column ------------------ */ .left_3col{ width: 230px; float: left; margin-right: 3%; } .left_3col_2{ width: 234px; float: left; } .center_3col { margin-left: 240px; margin-right: 200px;} .center_3col_2 { margin-left: 250px; margin-right: 235px;} .center_3col_3 { margin-left: 65px; margin-right: 105px;} .right_3col { width: 190px; float: right; } .right_3col_2 { width: 190px; float: right; background: #d5d5d5; } .right_3col_3 { width: 95px; float: right; } /* End Content Layouts; ------------------------------------------------- */ /* Portlets ------------------------------------------------- */ .portlet_content { padding: 0 6px; } .portlet_corner_TL { position: absolute; background: url('imgs/portletCorner_TL.gif') no-repeat left top; margin: -1px; width: 12px; height: 12px} .portlet_corner_TR { position: relative; background: url('imgs/portletCorner_TR.gif') no-repeat right top; float: right; margin: -1px; width: 12px; height: 12px} .portlet_corner_BL { border: none; border-collapse: collapse; position: relative; background: url('imgs/portletCorner_BL.gif') no-repeat left bottom; margin-top: -6px; margin-left: -1px; margin-bottom: -3px; width: 100%; height: 12px; } .portlet_corner_BR { border: none; position: relative; background: url('imgs/portletCorner_BR.gif') no-repeat right top; float: right; margin-top: -12px; margin-right: -1px; margin-bottom: -3px; width: 12px; height: 12px} .portlet_cornerBlue_TL { position: absolute; background: url('imgs/portletCornerBlue_TL.gif') no-repeat left top; margin: -1px; width: 12px; height: 12px} .portlet_cornerBlue_TR { position: relative; background: url('imgs/portletCornerBlue_TR.gif') no-repeat right top; float: right; margin: -1px; width: 12px; height: 12px} /* Portlet Titles ------------------ */ .portlet_titleGreen { font-size: 14px; font-weight: bold; color: #466e1c; background: url('imgs/gradientGreen.gif') repeat-y right top; padding: 6px; } .portlet_titleBlue { font-size: 14px; font-weight: bold; color: #77a735; background: url('imgs/gradientBlue.gif') repeat-y right top; padding: 6px; } .portlet_titlePink { font-size: 14px; font-weight: bold; color: #c57b0d; background: url('imgs/gradientPink.gif') repeat-y right top; padding: 6px; } .portlet_titleTranspBlue { font-size: 14px; font-weight: bold; color: #27598b; margin: 0 15px; padding: 10px 0 4px 0; border-bottom: 1px solid #dad4be; } .portlet_titleTransp#77a735 { font-size: 14px; font-weight: bold; color: #77a735; margin: 0 15px; padding: 10px 0 4px 0; border-bottom: 1px solid #dad4be; } .portlet_titleTransp#77a735L { font-size: 14px; font-weight: bold; color: #77a735; margin-right: 15px; padding: 10px 0 10px 0; border-bottom: 1px solid #dad4be; } .portlet_titleTransp#77a735R { font-size: 14px; font-weight: bold; color: #77a735; padding: 10px 0 10px 0; border-bottom: 1px solid #dad4be; } .portlet_titleTranspGreen { font-size: 14px; font-weight: bold; color: #466e1c; margin: 0 15px; padding: 10px 0 4px 0; border-bottom: 1px solid #dad4be; } .portlet_titleTranspMaroon { font-size: 14px; font-weight: bold; color: #ab4948; margin: 0 15px; padding: 10px 0 4px 0; border-bottom: 1px solid #dad4be; } .portlet_titleGray_L { font-size: 15px; font-weight: bold; color: #77a735; font-style: italic; padding: 10px 6px 2px 6px; letter-spacing: -1px; } .portlet_titleGray_R { font-size: 26px; font-weight: bold; color: #27598b; font-style: italic; padding: 6px 15px 6px 6px; letter-spacing: -2px; text-align: right; } .partnerArea_title { font-size: 11px; font-weight: bold; color: #c57b0d; padding: 6px; } .partnerArea_content { padding: 0 6px; text-align: center; } .partnerArea_corner_TL { position: absolute; background: url('imgs/partnerAreaCorner_TL.gif') no-repeat left top; margin: -1px; width: 10px; height: 10px; } .partnerArea_corner_TR { position: relative; background: url('imgs/partnerAreaCorner_TR.gif') no-repeat right top; float: right; margin: -1px; width: 10px; height: 10px; } /* End Portlet Titles ------------------ */ .partnerArea_corner_BL { border: none; border-collapse: collapse; position: relative; background: url('imgs/partnerAreaCorner_BL.gif') no-repeat left top; margin-left: -1px; margin-bottom: -3px; width: 100%; height: 13px; } .partnerArea_corner_BR { border: none; position: relative; background: url('imgs/partnerAreaCorner_BR.gif') no-repeat right top; float: right; margin-top: -10px; margin-right: -1px; width: 10px; height: 10px; } /* End Portlets ------------------------------------------------- */ /* Footer ------------------------------------------------- */ #footer { height: 53px; background: url('imgs/footer.gif') repeat-x top left; position: relative; width: 100%; } #footer ul { margin: 0 30px;} #footerContent li, #footer a{ font-size: 10px; font-weight: normal; } #footerContent { height: 28px; padding-top: 22px; margin-right: 23px; margin-left: 15px; text-align: center; } #footerContent li { padding: 5px; color: #666; display: inline; font-size: 10px; font-weight: normal; } #footer_L { height: 50px; background: url('imgs/footer_L.gif') no-repeat top left; width: 194px; position: absolute; left: -5px; top: 0px; } #footer_R { height: 53px; width: 45px; background: url('imgs/footer_R.gif') no-repeat top right; position: absolute; top: 0px; right: -5px; } #footerHome_L { height: 53px; width: 45px;background: url('imgs/footerHome_L.gif') no-repeat top left; position: absolute; left: -5px; top: 0px; } /* End Footer ------------------------------------------------- */ #tableArea1 { background: #abc2df url('../images/tableGradient.gif') repeat-y; padding: 10px 20px; } #tableArea2 { background: #abc2df url('../images/tableGradient.gif') repeat-y; padding: 15px 5px; } #table1{ background: #9aacc2; width: 100%; border-collapse: collapse; border: 1px solid; } #table1 th { text-align: left; font-family: tahoma; font-size: 11px; color: #fff; text-transform: uppercase; background: #77a735; border: 1px solid; padding: 10px 6px; } #table1 tr { background: #708aa9; } #table1 tr.odd { background: #5a7595; } #table1 td { font-family: tahoma; font-size: 11px; color: #e0dfe3; border: 1px solid #bdc5ce; padding: 4px 6px; } #table1 td a { font-family: tahoma; font-size: 11px; color: #ffff00; text-decoration: none; font-weight: bold; } #table1 td a:hover { color: #fff; } table.twoColumnEqual, table.threeColumnEqual { border-collapse: padding: 0; margin: 10px 0 0 0; collapse; width: 100%; } .threeColumnEqual th { vertical-align: top; padding: 0 15px 0 0; vertical-align: top; border-bottom: 1px solid #abc2df; border-right: 15px solid #fff; } .threeColumnEqual td { width: 33%; vertical-align: top; padding: 10px 15px 0 0px; vertical-align: top;} .threeColumnEqual div { padding: 0 15px; text-align: left; line-height: 12px;} .threeColumnEqual div p { line-height: 14px;} .threeColumnE qual img { text-align: right !important;} .twoColumnEqual td { width: 48%; vertical-align: top; padding: 0px 15px 15px 0px; vertical-align: top;} .emphasizedBlue { font-size: 14px; color: #77a735; font-weight: bold; }