/* -------------------------------------------------------------- Blueprint CSS Framework [bjorkoy.com/blueprint] * Screen & Projection Styles * This is the main CSS-file for the framework. Include this in the of every page. See the Readme file in this directory for further instructions. -------------------------------------------------------------- */ /* Import stylesheets and hide from IE/Mac \*/ @import "lib/reset.css"; @import "lib/typography.css"; @import "lib/grid.css"; @import "lib/buttons.css"; /* End import/hide */ /* Compressed version: [http://teenage.cz/acidofil/tools/cssformat.php] Comment out @import statements above, and add this one when your site has launched (Ca 60% compressed): @import "lib/compressed.css"; */ /* Uncomment the line below to see the grid and baseline. (Assuming you've wrapped your columns in a container). .container { background: url(lib/img/grid.png); }*/ /* ----------------------------------------------- Copyright (c) 2007 August Ash Inc. (http://www.augustash.com) Screen Styles ----------------------------------------------- */ body { background-color:#0065CE; margin:0; color:#000; text-align:center; } table {margin:1em 0;} img {border:0;} p {margin:1em 0;} ul {list-style:none;} .access, hr {display:none;} .clearer {clear:both; height:1%; line-height:1%; font-size:1%;} .req {font-weight:bold; color:#f00;} .float-left {float:left; display:inline; margin:1em 1.2em 2em 0;} .float-right {float:right; display:inline; margin:1em 0 1em 2em;} /* =Base Layout ----------------------------------------------- */ div#wrap {background:#FFF url(../img/tpl/bg_middle.jpg) top left repeat-x; margin-top:1em;} div#header {background:#FFF url(../img/tpl/bg_header.jpg) top left repeat-x;position:relative;height:198px;} div#cwrap {background:#FFF url(../img/tpl/bg_cwrap.png) top right repeat-y; padding-bottom:2em;} div#side {float:left; display:inline; background:#00448B url(../img/tpl/bg_side.png) top left no-repeat;} div#main {float:left; display:inline;} div#footer {background:#0065CE url(../img/tpl/bg_footer.jpg) top left repeat-x;padding-top:54px;color:#FFF;} .calculator div#wrap { margin: 1em 0 0;} .calculator div#cwrap { padding:0pt 0pt 15px 0px;} .calculator table td {padding:6px 3px 5px;} .calculator .border-bottom td, .calculator div.border-bottom, .calculator td.border-bottom {border-bottom:1px solid #BDDB7D;border-right:1px solid #BDDB7D;} .calculator .border-right td, .calculator td.border-right {border-right:1px solid #BDDB7D;} .calculator .border-top td, .calculator td.border-top {border-top:1px solid #BDDB7D;} .calculator th {font-weight: bold; font-size:17px; color: #00448b; border:1px solid #BDDB7D; padding-left: 5px; background: #d8e8f7; } body.smx div#side {width:165px;} body.smx div#main {padding:34px 20px 0 25px;width:350px;} body.smx div#xtra {width:235px; padding:40px 0 0 25px; background:transparent url(../img/tpl/bg_xtra_grey.png) top right no-repeat; text-align:center;} body#home div#xtra { background:transparent url(../img/tpl/bg_xtra.png) top right no-repeat; text-align:center;} body.smx div#main { background:transparent url(../img/tpl/bg_main_grey.png) top right no-repeat; } body.smx#home div#main { background:transparent url(../img/tpl/bg_main.png) top right no-repeat; } body.sm div#side {width:165px;} body.sm div#main {padding:24px 45px 0 35px;width:575px;} body.sm div#main { background:transparent url(../img/tpl/bg_main_corner.png) top right no-repeat; } /* =Headings ----------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family:Arial, Helvetica, sans-serif; color:#BDDB7D; border-bottom:1px solid #BDDB7D; } h1 {font-size:189%;} h2 {font-size:250%; font-family:"Century Gothic", "Trebuchet MS", Times, Serif; margin-bottom:20px;} h3 {font-size:175%; color:#6C7073; font-style:italic; border-bottom:1px solid #6C7073; line-height:25px;} h4 {font-size:130%; border-bottom:none; padding:10px 0 0 0;} h5 {font-size:125%;} h6 {font-size:100%;} div#main h2, div#main h3 {font-weight:normal !important;} div#main h2 {color:#93AF57; border-bottom:1px solid #93AF57;} div#main h2.errors {font-size:22px} /* =Links ----------------------------------------------- */ a:link, a:visited {text-decoration:none;} a:hover, a:active {text-decoration:underline;} div#main .more-btn, div#main .more-btn-rgt { background:url(../img/tpl/btn_bg_lft.png) top left no-repeat; display:inline; float:left; margin:0; padding:0 0 0 15px; } div#main .more-btn-rgt {float:right;} div#main .more-btn a, div#main .more-btn-rgt a { background:url(../img/tpl/btn_bg_rgt.png) top right no-repeat; display:inline; margin:0; padding:13px 50px 15px 0; height:45px; white-space:nowrap; line-height:42px; font-size:1.1em; font-weight:bold; color:#FFF !important; } div#main .more-btn a:link, div#main .more-btn a:visited, div#main .more-btn-rgt a:link, div#main .more-btn-rgt a:visited {text-decoration:none;} div#main .more-btn a:hover, div#main .more-btn a:active, div#main .more-btn-rgt a:hover, div#main .more-btn-rgt a:active { background-position:top right; text-decoration:underline; } /* =Header ----------------------------------------------- */ div#header h1 {border-bottom:0;} div#header h1 a:link, div#header h1 a:visited { display:block; position:relative; top:72px; left:36px; width:200px; height:0px; padding-top:116px; overflow:hidden; font-size:1px; border:0; text-decoration:none; } div#header div.container { background:url(../img/tpl/rpm_logo.png) 36px 72px no-repeat; height:198px; } div#header div#flashcontent { position:absolute; top:60px; right:0; margin:0; padding:0; width:510px; height:131px; } div#header ul#Categories li a, div#header ul#aboutCategories li a { display:block; position:absolute; width:119px; height:0px; padding-top:130px; overflow:hidden; font-size:1px; text-decoration:none; z-index:20; } div#header ul#Categories li.link1 a {background: url("/uploads/images/splash/head_placeholder.jpg") no-repeat 10px 0px; top:0px; left:0px;} div#header ul#Categories li.link2 a {background: url("/uploads/images/splash/head_placeholder.jpg") no-repeat -124px 0px; top:0px; left:130px;} div#header ul#Categories li.link3 a {background: url("/uploads/images/splash/head_placeholder.jpg") no-repeat -252px 0px; top:0px; left:260px;} div#header ul#Categories li.link4 a {background: url("/uploads/images/splash/head_placeholder.jpg") no-repeat -391px 0px; top:0px; left:390px;} div#header ul#aboutCategories li.link1 a {background: url("/uploads/images/splash/about_placeholder.jpg") no-repeat 0px 0px; top:0px; left:0px;} div#header ul#aboutCategories li.link2 a {background: url("/uploads/images/splash/about_placeholder.jpg") no-repeat -134px 0px; top:0px; left:130px;} div#header ul#aboutCategories li.link3 a {background: url("/uploads/images/splash/about_placeholder.jpg") no-repeat -271px 0px; top:0px; left:260px;} div#header ul#aboutCategories li.link4 a {background: url("/uploads/images/splash/about_placeholder.jpg") no-repeat -396px 0px; top:0px; left:390px;} /* =Header Nav ----------------------------------------------- */ div#header ul#nav { position:absolute; top:18px; right:0; margin:0; padding:0; height:54px; list-style-type:none; } ul#nav li { background:url(../img/tpl/btn_nav_rgt.png) top right no-repeat; float:left; display:inline; margin:0 1px; padding:0; list-style-type:none; } ul#nav li a { background:url(../img/tpl/btn_nav_lft.png) top left no-repeat; display:block; padding:0 18px; width:1%; white-space:nowrap; height:36px; line-height:36px; font-family:Verdana, Tahoma, Helvetica, Sans-serif; font-size:1.1em; color:#FFF; } ul#nav li#active {background:url(../img/tpl/btn_nav_rgt.png) 100% -36px no-repeat;} ul#nav li#active a {background:url(../img/tpl/btn_nav_lft.png) 0 -36px no-repeat; color:#000; font-weight:bold;} ul#nav li a:link, ul#nav li a:visited {text-decoration:none;} ul#nav li a:hover, ul#nav li a:active {text-decoration:underline;} /* =Side ----------------------------------------------- */ div#side h3 { height:36px; line-height:36px; font-size:1.2em; font-weight:bold; text-align:center; color:#BDDB7D; } div#side ul { list-style-type:none; margin:0; padding:0; } div#side ul li { background-color:#1A5797; margin:0; padding:0; height:34px; list-style-type:none; border:1px solid #FFF; border-width:1px 0; color:#FFF; } div#side ul li a { background:transparent url(../img/tpl/bul_arrow.png) no-repeat left 2px; display:block; margin:10px 0 0 1.2em; padding:0 0 0 1.2em; height:34px; color:#FFF; } div#side ul li.active { background:transparent url(../img/bg_side_on.jpg) repeat-y left top; } div#side ul li.active a { color: #000; background:transparent url(../img/bul_white.jpg) no-repeat left 2px; } div#side ul li a:link, div#side ul li a:visited {text-decoration:none;} div#side ul li a:hover, div#side ul li a:active {text-decoration:underline;} div#side #searchForm {margin:20px 0 0 11px;} div#side #searchForm input {width:140px;} div#side #searchForm input.submitBtn {margin:5px 0 0 35px; width:70px;} div#side .side-btn { background:url(../img/btn_sidebar.jpg) top left no-repeat; display:inline; float:left; margin:20px 0 0 6px; padding:0 0 0 15px; width:153px; height:45px; } div#side .side-btn a { display:block; margin:0; padding:0 0 0 0; width:150px; height:45px; white-space:nowrap; line-height:39px; font-size:1.1em; font-weight:bold; color:#FFF !important; } div#side .side-btn a:link, div#side .side-btn a:visited {text-decoration:none;} /* =Main ----------------------------------------------- */ div#main div#news {position:relative;} div#news p { position:absolute; top:18px; right:0; height:18px; } div#news p a {text-transform:lowercase; color:#1C76D4;} div#main ul, div#main ol { margin:1em 0; padding:0 0 0 2em; list-style-type:disc; list-style-position:outside; } div#main ol {list-style-type:decimal;} div#main ul#news-list { margin:0; padding:0; list-style-type:none; } ul#news-list li { background:url(../img/tpl/bg_news.png) top left repeat-x; margin:0 0 2px; height:36px; line-height:36px; } ul#news-list li a { display:block; padding-left:1.2em; font-weight:bold; color:#1F78D4; } ul#news-list li a:link, ul#news-list li a:visited {background:url(../img/tpl/bg_news_arrow.png) top right no-repeat;} ul#news-list li a:hover, ul#news-list li a:active {background:url(../img/tpl/bg_news_arrow.png) 100% -36px no-repeat;} ul#news-list li a .date {color:#000; text-decoration:none;} div#main p.btnBlue {background:url(../img/btn_blue.jpg) top left no-repeat; width:307px; height:45px; margin-top:20px;} div#main p.btnBlue a:link, div#main p.btnBlue a:visited { display:block; color:#fff; text-align:center; font-size:14px; font-weight:bold; padding:10px 20px 0 0; } div#main div.text-indent {padding:0 20px;} div#main div.text-indent b {color:#3366CC;} div#main .prod-wrap, div#main .prodPage-wrap { float:left; display:inline; width:125px !important; height:150px; border:1px solid #ccc; margin:0 8px 10px; padding:3px 0px; font-weight:bold; text-align:center; line-height:13px; } div#main .prodPage-wrap {height:235px;} div#main .prodPage-wrap ul {margin:8px 0 0 20px; padding:0; font-size:11px; text-align:left;} div#main .prodPage-wrap li {margin:0; padding:0 0 4px 0;} div#main .prod-wrap img, div#main .prodPage-wrap img {margin:0; padding:0;} div#main div.contactform label {width:100%; display:block; margin:8px 8px 0 0;} /* =Xtra ----------------------------------------------- */ div#xtra h3 { width:229px; height:39px; line-height:39px; border-bottom:0; font-size:1.4em; font-weight:bold; text-align:center; color:#FFF; } div#xtra img {margin:0 !important; padding:0 !important;} div#xtra div#sample-uses { margin:.6em auto 0; width:190px; } div#sample-uses img {margin:0;} div#sample-uses .sample-title { font-family:"Century Gothic", "Trebuchet MS", Times, Serif; font-size:1.25em; font-weight:bold; text-align:center; color:#4A4A4A; } div#xtra #photodiv #photoimg { padding:0; margin:0; height:264px; width:201px; } div#xtra #photodiv { padding:0; margin:30px 0 0 15px; height:264px; width:201px;} div#xtra .more-btn { background:url(../img/tpl/btn_bg_side.jpg) top left no-repeat; display:inline; float:right; margin: 15px 0 0 0; padding:0 0 0 15px; width:205px; height:45px; } div#xtra .more-btn a { display:block; margin:0; padding:0 0 0 0; width:175px; height:45px; white-space:nowrap; line-height:39px; font-size:1.1em; font-weight:bold; color:#FFF !important; } div#xtra .more-btn a:link, div#xtra .more-btn a:visited {text-decoration:none;} div#transportation-image img {margin:0 0 0 -25px;} div#prodInfo div#price img { margin-top:-20px; margin-bottom:28px;} /* =Footer ----------------------------------------------- */ div#footer div#custom { background:transparent url(../img/tpl/hinge.jpg) 25px 15px no-repeat; padding:0 30px 0 165px; width:402px; border-left:1px solid #408CDA; } div#footer div#custom h3, div#footer div#custom h4 { font-family:"Century Gothic", "Trebuchet MS", Times, Serif; margin:0; padding:0; color:#BDDB7D; font-style:normal; border-bottom:1px solid #BDDB7D; } div#footer div#custom h3 {line-height:22px; font-size: 20px; font-weight:bold;} div#footer div#custom h3 a {color:#BDDB7D;} div#footer div#custom h4 {font-size: 15px; font-weight:normal; font-style:italic; border-bottom:none;} div#footer div#custom .more-btn-rgt {margin-top:-40px;} div#footer div#copyright { padding:0 20px 0 20px; width:180px; border:1px solid #408CDA; border-width:0 1px; } div#footer div#copyright p {text-align:center;} div#footer a {color:#CAE4F8;} div#footer .more-btn, div#footer .more-btn-rgt { background:url(../img/btn_bg_lft.jpg) top left no-repeat; display:inline; float:left; margin:0; padding:0 0 0 15px; } div#footer .more-btn-rgt {float:right;} div#footer .more-btn a, div#footer .more-btn-rgt a { background:url(../img/btn_bg_rgt.jpg) top right no-repeat; display:block; margin:0; padding:0 50px 0 0; height:45px; white-space:nowrap; line-height:36px; font-size:1.1em; font-weight:bold; color:#FFF !important; } body.calculator table table td { border:1px solid #BDDB7D; } body.calculator table table { border-collapse: collapse;margin: 0 auto; float:left; } .calculator .container { width: 660px; margin: 0 auto; } .calculator #wrap { width: 100%; } .calculator #cwrap { border-left: solid 4px #00448b; border-right: solid 4px #c5c5c6; background: transparent; background: #FFF; } .calculator table table p { margin: 0; }