/* ( template update 21 Nov 2007 // v1.1 ) /* CSS StyleSheet developed by Cezar Berea // webstarsltd, cezar@webstarsltd.com /* global ----------------------------------------- */ *{margin:0; padding:0; } a{ text-decoration: none; outline: none; } html, body{ margin:0!important; padding:0!important; font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } body{ background: url('../images/bg-page.gif') repeat-x top center; } #page-container{ width: 801px; margin: 0 auto; } /* text ------------------------------------------*/ #text{ clear: both; padding: 25px; } #text p.bullet{ background: url("../images/bullet4.gif") no-repeat left center; padding-left: 10px; margin-left: 20px; } /* header & navigation ----------------------------------------- */ #header{ width: 801px; float: left; height: 187px; background: url("../images/bg-header.gif") no-repeat left center; position: relative; } /* added by roberto on feb 12 robertogalan@gmail.com ----------------------------------------- */ #headtxt{ color:#CC0033; font-size: 1em; width: 450px; position: absolute; bottom: 75px; right: 5px; } #headtxt h2{ font-size: 1.5em; } /*----------------------------------------- */ #logo{ position: absolute; left: 0px; top: 60px; width: 310px; height: 80px; } #logo a{ text-indent: -9999px; display: block; height: 100%; width: 100%; } #navigator{ position: absolute; width: 100%; bottom: 4px; left: 7px; } #navigator li{ display: inline; list-style: none; font: bold 14px Arial, sans-serif; padding: 0 6px; background: url("../images/menu_separator.gif") no-repeat right center; } #navigator li.last{ background: none; } #navigator li a{ color: #7a0e30; } /* content & sidebars ----------------------------------------- */ #content{ width: 780px; float: left; } #content h1{ color: #8C334A; font-size: 1.9em; margin: 0 0 10px; } #content h2{ color: #333; font-size: 1.7em; margin: 15px 0 5px; } #content p{ margin: 10px 0; color: #333; font-size: 1.4em; } #welcome-text{ background: #f5f9df url("../images/bg-welcome.gif") no-repeat top left; padding: 50px 10px 10px; font: bold 15px/20px "Trebuchet MS", Verdana, sans-serif; margin: 25px 0; color: #8c334a; } #welcome-text p{ margin: 10px auto; font-size: 1em; } /* forms ----------------------------------------- */ form{ margin: 10px 0; } form label{ display: block; float: left; width: 100%; margin: 3px 0; } form h2{ float: left; width: 100%; } form h2 small{ font-size: .7em; } form label span em{ color: #800; } form label.checkbox input{ float: none; display: inline; } form label span, form label input{ display: block; float: left; } form label span{ width: 120px; } form label span.smaller{ width: 80px; } form label.block span, form label.block input{ display: inline; margin: 0 5px; width: auto; } form label input.text, form label textarea{ width: 180px; margin: 0; display: block; float: left; } form input.text, form textarea{ border: 1px solid #DAA520; } form .submit{ float: left; width: 100%; margin-top: 10px; } form .submit input{} form .cancel{ color: #333; } form fieldset{ border: 0; } #buy-form .submit{ text-align: right; width: 180px; } #buy-form{ position: relative; clear: both; width: 250px; } /* footer ----------------------------------------- */ #footer{ width: 782px; height: 39px; float: left; background: url("../images/bg-footer.gif") no-repeat left top; clear: both; font: bold 15px "Trebuchet MS", Verdana, sans-serif; color: #fff; } #footer *{ position: relative; top: 10px; word-spacing: -3px; letter-spacing: -.3px; } #footer p{ margin-left: 10px; float: left; } #footer ul{ float: left; } #footer ul *{ list-style: none; top: 0; color: #fff; } #footer ul li{ display: inline; padding: 0 0 0 9px; background: url("../images/bullet3.gif") no-repeat 0 5px; margin-left: 8px; } /*____________________________________________*/ /* clearfix ----------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* global classes ----------------------------------------- */ .clear{ clear: both; } .b{ font-weight: bold; } .hide{ display: none; } .fl{ float: left; } .fr{ float: right; } .frImg{ float:right; margin: 0 0 8px 8px; clear: right; } .flImg{ float:left; margin: 0 8px 8px 0; clear: left; } .buy-now{ display: block; text-indent: -9999px; width: 92px; height: 30px; background: url("../images/btn_buy-now.gif") no-repeat left center; } .bullet2{ background: url("../images/bullet2.gif") no-repeat left center; padding-left: 10px; } /* PAGE: home ----------------------------------------- */ #services{ width: 100%; float: left; margin-bottom: 35px; position: relative; left: 20px; } #services li{ float: left; width: 235px; color: #ad2e51; list-style: none; display: block; margin-right: 25px; position: relative; } #services li h2{ height: 207px; text-indent: -9999px; margin-bottom: 17px; } #services li a{ float: left; position: relative; text-decoration: underline; left: 6px; } #services li a.bullet2{ top: 5px; margin-right: 5px; color: #ad2e51; clear: left; } #services li a.buy-now{ position: relative; top: 5px; } #services div.fl{ margin-right: 10px; } #services img.fl{ margin-right: 5px; position: relative; top: -2px;} #services li .mask{ width: 101%; height: 100%; background: #fff; position: absolute; z-index: 10; left: 0; top: 0; } #services li .form{ position: absolute; display: none; left: 25px; width: 250px; top: 20px; z-index: 11; } #services.vertical div.box{ float: left; width: 235px; margin-right: 30px; } #services.vertical div.text{ float: left; width: 430px; } #services.vertical li{ width: auto; margin: 0; } #service-card-site h2{ background: url("../images/service-card_site.gif"); } #service-brochure-site h2{ background: url("../images/service-brochure_site.gif"); } #service-e-shop h2{ background: url("../images/service-e-shop.gif"); margin-right: 0; } /* added by roberto on feb 12 robertogalan@gmail.com */ /* ---------------------------------------------------------------------*/ #service-card-site-google h2{ background: url("../images/service-card_site-google.gif"); } #service-brochure-site-google h2{ background: url("../images/service-brochure_site-google.gif"); } #service-e-shop-google h2{ background: url("../images/service-e-shop-google.gif"); margin-right: 0; } /* ---------------------------------------------------------------------*/ #hdr-why-choose-rasp{ background: url("../images/titles/hdr_why-choose-rasp.gif") no-repeat left center; width: 380px; height: 54px; text-indent: -9999px; } .why-raspberry li{ display: block; list-style: none; background: url("../images/bullet1.gif") no-repeat left center; font-weight: bold; font-size: 15px; padding-left: 25px; margin: 10px 0; } #content .faq h2{ font-size: 1.4em; margin: 15px 0 0; cursor: pointer; } #content .faq p{ margin: 5px 0 10px 20px; } #portfolio{ width: 100%; float: left; background: #F5F9DF url("../images/bg-portfolio.gif") no-repeat top left; margin-bottom: 10px; padding: 80px 0 10px; } #portfolio li{margin: 0 40px 30px; position: relative; left: 40px; display: block; float: left; list-style: none; background: url("../images/portfolio_slot.gif") no-repeat top left; width: 235px; height: 207px; } #portfolio li a{ display: block; width: 175px; margin: 13px auto 0; } #portfolio li a img{ display: block; width: 175px; height: 175px; border: 0; padding: 3px; background: none; } #portfolio li a:hover img{ background: #fff!important; } #portfolio-preview-shadow{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; z-index: 10; display: none;} #portfolio-preview{ display: none; width: 700px; position: absolute; left: 50%; top: 10px; padding: 15px 15px 50px 15px; background: #fff url("../images/loading.gif") no-repeat center center; margin-left: -370px; z-index: 20; } #portfolio-preview{ display: block; clear: both; } #portfolio-preview h2{ position: relative; top: 30px; left: 20px; font-size: 1.4em; float: left; } #portfolio-preview h2 a{ color: #333; } #portfolio-preview h2 small{ font-size: .6em; font-weight: normal; margin-left: 10px; } #portfolio-preview a.close{ cursor: pointer; position: relative; right: 20px; float: right; top: 30px; background: #333; color: #fff; font-weight: bold; padding: 2px 5px; } .seo-tools li{ display: block; list-style: none; float: left; width: 100%; } .seo-tools ul{ margin-left: 35px; } .seo-tools li li{ list-style: disc; display: list-item; float: none; width: auto; } .seo-tools .h{ cursor: pointer; border-bottom: 1px solid #e0e0e0; background: #D7E085; position: relative; padding: 10px; color: #333; } .seo-tools .hon, .seo-tools .h:hover{ background: #333; color: #fff; } .seo-tools .hsel{ background: #BC2D5A !important; color: #fff; } .seo-tools .h img{ position: absolute; right: 15px; top: 50%; margin-top: -29px; } .seo-tools .tool{ text-align: center; } #content .seo-tools .h h2{ margin: 0 0 10px 0; color: inherit; font-size: 1.4em; } dl{ margin-bottom: 10px; } dl dt, dl dd{ width: 30%; float: left; font-size: 1.4em; } dl dd{ width: 69%; } .w300{ width: 300px; } .w350{ width: 350px; } .w200{ width: 200px; } .red{ color: #BC2D5A!important; } .green{ color: #B9C155!important; } .gap{ margin-top: 35px!important; } .gray{ color: #666; } label.error{ color: #c00!important; text-align: right; width: 300px; } .paging{ margin: 20px 0 0; padding-top: 3px; border-top: 1px solid #666; } .paging li{ display: block; float: left; list-style: none; } .paging li a{ display: block; padding: 5px 10px; background: #333; color: #fff; margin: 0 1px; } .paging li a:hover{ background: #BC2D5A; } .paging li a.disabled, .paging li a.disabled:hover{ background: #ccc; color: #999; cursor: default; } #product{ margin-bottom: 2em; } #product h2, #product h3{ color: #BC2D5A; margin-bottom: .5em; margin-top: 0; } #product h3{ font-size: 1.4em; font-weight: normal; } #product .gray{color: #666;} #product a{ color: #BC2D5A; } #product .right{ padding-left: 15px; width: 400px; } #product .left{ width: 300px; } #product .left img{ display: block; margin-bottom: 1em; } #product ul{ list-style: none; margin-left: 30px; font-weight: bold; font-size: 1.2em;}