/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(base.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; font-family: Helvetica bold, Arial, sans-serif;} h1, h2, h3, h4, h5, h6, p, li { line-height:1.2em; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { padding-bottom:10px; min-width:990px;} /*---- wrapper ----*/ div.wrapper{ width:990px; margin:0 auto; } /*---- Header ----*/ div#header { border-top:#000 4px solid; padding-bottom:4px; } /*---- Main Navigation ----*/ div#main-navigation { float:right; width:605px; } /*---- Content ----*/ div#content { padding-bottom:34px; } /*---- Main ----*/ div#main { float:left; width:782px;} /*---- Sidebar ----*/ div#sidebar { float:right; width:205px; } div#content.home div#sidebar{padding-top:10px;} /*---- Footer ----*/ div#footer div.wrapper { background:url(../images/footer/footer-middle.jpg) 0 0 repeat-x; } div#footer div.wrapper div.left{ background:url(../images/footer/footer-left.jpg) 0 0 no-repeat;} div#footer div.wrapper div.right{ background:url(../images/footer/footer-right.jpg) 100% 0 no-repeat; height:36px; padding:12px 15px 12px 12px;} /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Logo ----*/ div#header div.logo{ float:left; width:281px; margin-top:10px;} div#header div.logo h1 a {width:281px; height:0px; padding-top:61px; overflow:hidden; display:block; background:url(../images/header/logo.jpg) 0 0 no-repeat; } /*---- Header - login-form ----*/ div#login-form{ background:url(../images/header/login-middle.jpg) 0 0 repeat-x; float:right; width:460px; margin-bottom:16px;} div#login-form div.left{ background:url(../images/header/login-left.jpg) 0 0 no-repeat;} div#login-form div.left div.right{ background:url(../images/header/login-right.jpg) 100% 0 no-repeat; height:24px; padding:0 10px;} div#login-form label{ color:#c3c3c3; font-size:130%; margin-right:5px; line-height:20px; float:left; font-weight:bold;} div#login-form input.textbox{ border:#888888 1px solid; height:13px; padding:0px 3px 3px; float:left; margin-right:5px; width:115px;} div#login-form span{ float:right; width:93px;} div#login-form a.registration{ font-size:110%; color:#fffffe;} div#login-form a.password{ font-size:110%; color:#a7c761;} /*---- Header - no-login-form ----*/ div#no-login{ background:url(../images/header/no-login-middle.jpg) 0 0 repeat-x; float:right; width:460px; margin-bottom:10px; height:18px;} /*---- Header - user-login ----*/ div#user-login{ background:url(../images/header/login-middle.jpg) 0 0 repeat-x; float:right; width:460px; font-size:120%; color:#fffffe; text-align: center;} div#user-login div.left{ background:url(../images/header/login-left.jpg) 0 0 no-repeat;} div#user-login div.left div.right{ background:url(../images/header/login-right.jpg) 100% 0 no-repeat; height:24px; padding-top:6px; margin-bottom:10px;} div#user-login span{ float:right; width:93px;} div#user-login a.password{ color:#a7c761;} /*---- Main Navigation ----*/ div#main-navigation a.social{ float:right; margin-left:15px;} div#main-navigation ul li{ float:left; margin-right:8px;} div#main-navigation ul li a { float:left; text-decoration:none; font-size:130%; font-weight:bold; padding:0 10px; display:block; color:#373737; height:25px; line-height:25px; } div#main-navigation ul li.active, div#main-navigation ul li:hover{ background:#2273a2 url(../images/header/navigation.jpg) 0 0 no-repeat;} div#main-navigation ul li.active a, div#main-navigation ul li:hover a{ background:url(../images/header/navigation.jpg) 100% -26px no-repeat; color:#FFF;} /*---- banner-large---*/ div#banner.large{ background:url(../images/content/banner-shadow.jpg) 50% 0 no-repeat; height:184px; padding:7px 0 9px; margin-bottom:13px;} div#banner.large div.outer-wrapper{ background:url(../images/content/banner-bg.jpg) 0 0 repeat-x;} div#banner.large div.outer-wrapper div.wrapper{ height:184px; background:url(../images/content/banner-logo.jpg) 100% 0 no-repeat;} div#banner.large img{ float:left; margin:-6px 0px 0 0;} div#banner.large div.banner-entry{ padding-top:22px; margin-left:204px;} div#banner.large h1{ background:url(../../assets/images/headings/banner-heading.png) 0 0 no-repeat; height:0; padding-top:53px; overflow:hidden;} div#banner.large p{ font-size:220%; color:#FFF; line-height:26px; font-weight:bold; padding-left:63px;} div#banner.large p span{ font-size:150%;} /*---- banner-small---*/ div#banner-small{ background:url(../images/content/banner-small-shadow.jpg) 50% 0 no-repeat; padding:6px 0; margin-bottom:22px; height:43px;} div#banner-small div.outer-wrapper{ background:url(../images/content/banner-small-bg.jpg) 0 0 repeat-x;} div#banner-small div.outer-wrapper div.wrapper{ height:35px; background:url(../images/content/banner-small-logo.jpg) 50px 0 no-repeat; padding-left:140px; width:850px; padding-top:8px;} div#banner-small h1{ background:url(../../assets/images/headings/banner-small-heading.png) 0 0 no-repeat; height:0; padding-top:32px; overflow:hidden; float:left; width:297px; margin-right:10px;} div#banner-small p{ font-size:180%; color:#FFF; float:left; margin-right:43px;} div#banner-small a.button1{ float:left;} div#banner-small a.button1 span{ width:55px;} /*---- main ---*/ div#main h1{ font-size:240%; color:#2c3320; line-height:26px; margin-bottom:10px; background:url(../images/content/main/dots.gif) 0 100% repeat-x; padding-bottom:8px;} /*---- sidebar contact ---*/ div#contact{ margin-bottom:17px;} div#contact h2{ font-size:160%; color:#FFF; margin-bottom:4px;} div#contact p{ font-size:130%; color:#525050; margin-bottom:5px;} div#contact p a.email{ background:url(../images/content/sidebar/mail-icon.gif) 0 3px no-repeat; padding-left:20px; color:#2273a2; font-size:115%; font-weight:bold; display:block; margin-bottom:15px;} div#contact p span.phone{ font-size:120%; font-weight:bold; color:#000; background:url(../images/content/sidebar/phone.gif) 0 3px no-repeat; padding-left:20px; display:block; line-height:24px;} /*---- sidebar twitter ---*/ div#twitter{ margin-bottom:20px;} div#twitter h2{ font-size:160%; color:#525050; padding-left:34px; position:relative; margin-bottom:3px;} div#twitter h2 img{ position:absolute; left:0; top:-4px;} div#twitter div.box2{ margin-bottom:6px;} div#twitter div.box2 p{font-size:120%; color:#525050; padding-left:30px;} div#twitter p a{ font-size:110%; color:#067284; width:70px; display:block; float:right; text-align:right;} div#twitter p img{ margin-top:5px;} div#twitter ul.list2{ padding-top:6px;} /*---- sidebar comming-soon ---*/ div#comming-soon h2{ font-size:160%; color:#525050; margin-bottom:4px; padding-left:7px;} div#comming-soon a.more{ font-size:150%; color:#84aa2f; font-weight:bold;} div#content div#comming-soon div.box2 div.middle{ padding-bottom:5px;} /*---- footer ---*/ div#footer div.partners{ float:left; margin-right:20px;} div#footer div.partners a{ margin-right:10px;} div#footer div.partners a img{ vertical-align:top;} div#footer p{ font-size:120%; color:#a0a0a0; width:300px; float:left; margin-top:3px;} /*---- Footer - Navigation ---*/ div#footer div#footer-navigation { text-align:center; float:right; margin-top:10px;} div#footer div#footer-navigation ul li { display:inline; font-size:120%; color:#FFF; } div#footer div#footer-navigation ul li a{ color:#fff; } div#footer div#footer-navigation ul li.devider { margin:0 1px; } /*---- Post ---*/ div.post h1 { font-size:240%; margin-bottom:10px; color:#2c3320;} div.post h2 { font-size:220%; margin-bottom:10px; color:#2c3320;} div.post h3 { font-size:160%; margin-bottom:10px; color:#2c3320;} div.post h4 { font-size:140%; margin-bottom:10px; color:#2c3320;} div.post p { color:#4a4a4a; line-height:1.2em; font-size:120%; margin-bottom:20px; display:block; width:440px; } div.post p:after { content: "."; display: block; font-size:0; height: 0; clear: both; visibility: hidden;} div.post p a { color:#000; } div.post blockquote { margin-bottom:20px; } div.post blockquote p{ margin-bottom:5px; font-style:italic;} div.post blockquote p cite{ font-weight:bold; text-align:right; display:block;} div.post p img { max-width:100%; } div.post p img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;} div.post p img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;} div.post p img.aligncenter{ display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;} div.post ul { margin:0 0 20px 14px; list-style:disc; } div.post ol { margin:0 0 20px 18px; list-style:decimal; } div.post li { line-height:1.2em; font-size:120%; color:#4a4a4a; } div.post li ul, div.post li ol { margin-bottom:0px; } div.post li li, div.post li p { font-size:100%; margin-bottom:0px; color:#4a4a4a; } /*---- Post - Custom Lists ---*/ div.post ul.list1 { margin:0; padding:0; } div.post ul.list1 li { margin:0; padding:0; } div.post ol.list2 { margin:0; padding:0; } div.post ol.list2 li { margin:0; padding:0; } /*---- Common Boxes & Containers ----*/ /*---- box1 ---*/ div.box1 div.top{ background:url(../images/content/box1-top-middle.gif) 0 0 repeat-x;} div.box1 div.top div.left{ background:url(../images/content/box1-top-left.gif) 0 0 no-repeat;} div.box1 div.top div.right{ background:url(../images/content/box1-top-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} div.box1 div.middle{background:#60a4d6; padding:0px 5px;} div.box1 div.bottom{ background:#60a4d6 url(../images/content/box1-bottom-left.gif) 0 0 no-repeat;} div.box1 div.bottom div.right{ background:url(../images/content/box1-bottom-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} /*---- box2 ---*/ div#content div.box2 div.top{ background:url(../images/content/box2-top-left.gif) 0 0 no-repeat; padding-left:5px; height:5px;} div#content div.box2 div.top div.right{ background:url(../images/content/box2-top-right.gif) 100% 0 no-repeat; padding-right:5px; height:5px;} div#content div.box2 div.top div.center{ background:#fff; height:5px; line-height:5px;} div#content div.box2 div.middle{ background:#FFF; padding:0 5px 1px;} div#content div.box2 div.bottom{ background:url(../images/content/box2-bottom-left.gif) 0 0 no-repeat; padding-left:5px;} div#content div.box2 div.bottom div.right{ background:url(../images/content/box2-bottom-right.gif) 100% 0 no-repeat; padding-right:5px;} div#content div.box2 div.bottom div.center{ background:#fff; height:5px; line-height:5px;} /*---- box3---*/ div.box3 div.top{ background:url(../images/content/box3-top-middle.gif) 0 0 repeat-x;} div.box3 div.top div.left{ background:url(../images/content/box3-top-left.gif) 0 0 no-repeat;} div.box3 div.top div.right{ background:url(../images/content/box3-top-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} div.box3 div.middle{background:#bdeaf3; padding:0px 5px;} div.box3 div.bottom{ background:#bdeaf3 url(../images/content/box3-bottom-left.gif) 0 0 no-repeat;} div.box3 div.bottom div.right{ background:url(../images/content/box3-bottom-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} /*---- box4---*/ div.box4 div.top{ background:url(../images/content/box4-top-middle.gif) 0 0 repeat-x;} div.box4 div.top div.left{ background:url(../images/content/box4-top-left.gif) 0 0 no-repeat;} div.box4 div.top div.right{ background:url(../images/content/box4-top-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} div.box4 div.middle{background:#cccccc; padding:0px 5px;} div.box4 div.bottom{ background:#cccccc url(../images/content/box4-bottom-left.gif) 0 0 no-repeat;} div.box4 div.bottom div.right{ background:url(../images/content/box4-bottom-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} /*---- box5---*/ div.box5 div.top{ background:url(../images/content/box5-top-middle.gif) 0 0 repeat-x;} div.box5 div.top div.left{ background:url(../images/content/box5-top-left.gif) 0 0 no-repeat;} div.box5 div.top div.right{ background:url(../images/content/box5-top-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} div.box5 div.middle{background:#d69260; padding:0px 5px;} div.box5 div.bottom{ background:#d69260 url(../images/content/box5-bottom-left.gif) 0 0 no-repeat;} div.box5 div.bottom div.right{ background:url(../images/content/box5-bottom-right.gif) 100% 0 no-repeat; height:6px; line-height:6px;} /*---- Buttons ----*/ /*---- Button1 ----*/ a.button1{ background:url(../images/content/main/button1.gif) 100% -22px no-repeat; padding-right:5px; display:block; float:left; font-size:130%; color:#FFF; text-decoration:none; position:relative;} a.button1 span{ background:url(../images/content/main/button1.gif) 0 0 no-repeat; height:21px; line-height:21px; padding:0 20px 0 6px; display:block; float:left; font-weight:bold;} a.button1:hover{ text-decoration:none;} a.button1 img{ position:absolute; right:-10px; top:-1px;} /*---- Lists ----*/ /*---- List1 ----*/ ul.list1 li{ float:left; background:url(../images/content/main/dots.gif) 0 100% repeat-x; padding: 0 36px 20px 4px; width:360px; margin-bottom:13px;} ul.list1 li.last{ padding-right:15px;} ul.list1 li h2{ font-size:160%; color:#0e527a; margin-bottom:5px;} ul.list1 li div.image{ float:left; margin-right:10px;} ul.list1 li div.image img{ border:#c2c2c2 1px solid;} ul.list1 li div.description{ margin-left:172px;} ul.list1 li div.description a.friend{ float:right; margin-left:10px;} ul.list1 li p{ font-size:120%; color:#4a4a4a; margin-bottom:5px;} ul.list1 li p span.price{ font-size:230%; color:#84aa2f; font-weight:bold; line-height:35px;} ul.list1 li p span.discount{ width:69px; height:13px; line-height:13px; text-align:center; font-size:96%; color:#FFF; display:block; background:url(../images/content/main/discount.gif) 0 0 no-repeat;} /*---- List2 ----*/ ul.list2 li{ color:#525050; margin-bottom:15px;} div#content ul.list2 li p{ margin-left:30px; padding:0;} div#content ul.list2 li p a{ float:none; display:inline;} ul.list2 li img{ float:left;} ul.list2 li a{ color:#067284;} /*---- List3 ----*/ ul.list3{ padding-top:8px; margin-bottom:15px;} ul.list3 li{ background:url(../images/content/main/dots.gif) 0 100% repeat-x; padding-bottom:11px; margin-bottom:11px;} ul.list3 li img{ float:left;} ul.list3 li div.details{margin-left:50px;} ul.list3 li h3{ font-size:120%; color:#2f2f2f;} ul.list3 li h3 a{color:#2f2f2f;} ul.list3 li p{ font-size:120%; color:#2f2f2f;} ul.list3 li p span.discount{ margin-left:5px; font-size:110%; color:#84aa2f; font-weight:bold;} /*---- List4 ----*/ div#content ul.list4 { margin:0 0 10px 10px;} div#content ul.list4 li{font-size:120%; color:#4a4a4a; margin-bottom:15px; background:url(../images/content/main/list-icon.gif) 0 0 no-repeat; padding-left:22px; list-style:none;} /*------------------------------------------ // 4.2 INNER PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- product ----*/ div#main div.product{ padding:20px 20px 0 0;} div#main div.product div.image{ float:left; margin-bottom:13px;} div#main div.product div.image img{ border:#c2c2c2 1px solid; } div#main div.product div.details{ float:right; width:440px;} div#main div.product div.details p{ margin-bottom:6px;} div#main div.product h2{ font-size:160%; color:#0e527a; background:#e8f1f6 url(../images/content/main/h2-left.gif) 0 0 no-repeat; margin-bottom:6px;} div#main div.product h2 span{ background:url(../images/content/main/h2-right.gif) 100% 0 no-repeat; padding:0 3px; display:block; line-height:21px; height:21px;} div#main div.product div.buynow{ float:right; position:relative; border:0; background:url(../images/content/main/comment-button-large.gif) 0 0 no-repeat; color:#FFF; font-weight:bold; padding: 0 6px; cursor:pointer; height:21px; font-size:80%; } div#main div.product p{ font-size:120%; color:#4a4a4a; margin-bottom:12px;} div#main div.product p span.price{ font-size:280%; color:#84aa2f; font-weight:bold;} div#main div.product p.price span.discount{ color:#FFF; background:url(../images/content/main/discount.gif) 0 0 no-repeat; height:13px; width:69px; display:block; text-align:center; line-height:13px; margin-top:7px;} div#main div.product p.price span{ float:left; margin-right:10px; line-height:30px;} div#main div.product div.shopping-form p label{ margin-right:5px;} div#main div.product div.shopping-form a.button1{ float:right; margin-right:20px;} div#main div.product ol li a{ color:#067184; } div#main div.product ol li a:visited{ color:#6AAAB5; } div#main div.product ul{ margin-right:20px; color:#4A4A4A } div#main div.product ol{ color:#067184; } div#main div.product table { font-size:120%; margin-bottom:10px;} div#main div.product table a{ color:#067184; } div#main div.product input.submit-button{ border:0; background:url(../images/content/main/comment-button-large.gif) 0 0 no-repeat; height:21px; color:#FFF; font-weight:bold; padding-bottom:4px; cursor:pointer;} /*---- comments ----*/ div#comentarios{ margin-top:35px;} div#comentarios div.comment{ background:url(../images/content/main/dots.gif) 0 100% repeat-x; padding:0 0 1px 6px; margin-bottom:10px;} div#comentarios div.comment img{ float:left; padding:3px; border-color:#f4f4f4; border-width:0 1px; border-style:solid; border-bottom:#dfdfdf 1px solid;} div#comentarios div.comment div.entry{ margin-left:60px;} div#comentarios div.comment h3{ font-size:200%; color:#3f67b2; margin:0 0 4px 0px;} div#comentarios div.comment h3 span{color:#4a4a4a; font-size:70%; font-weight:normal; margin-left:10px;} div#comentarios div.comment p{ margin-left:0px;} div#comentarios div.comment a.reply{ background:url(../images/content/main/reply.gif) 100% 0px no-repeat; padding-right:15px; color:#9aaace; font-weight:bold;} /*---- comment form ----*/ div#comment-form{ margin-top:20px;} div#main div#comment-form p{ float:left; width:360px; margin-bottom:7px;} div#main div#comment-form p.full{ width:100%;} div.form label{ display:block; margin-bottom:4px; color:#4a4a4a;} div.form input.textbox{border-color:#bababa; border-width:0 1px; border-style:solid; border-bottom:#f0f0f0 1px solid; border-top:#898989 1px solid; width:320px; padding:0 3px 2px;} div.form input.submit-button{ border:0; background:url(../images/content/main/comment-button.gif) 0 0 no-repeat; width:80px; height:21px; color:#FFF; font-size:120%; font-weight:bold; padding-bottom:4px; cursor:pointer;} div#comment-form textarea{border-color:#bababa; border-width:0 1px; border-style:solid; border-bottom:#f0f0f0 1px solid; border-top:#898989 1px solid; width:750px; padding:3px; height:103px; margin-bottom:11px;} div#comment-form p.button{background:#e8f1f6 url(../images/content/main/h2-left.gif) 0 0 no-repeat;} div#comment-form p.button span{ background:url(../images/content/main/h2-right.gif) 100% 0 no-repeat; padding:0 4px; display:block; line-height:21px; height:21px;} /*---- friend tip----*/ div#friend-tip{ margin-bottom:30px;} div#friend-tip div.box2 div.middle{ padding-top:10px;} div#friend-tip p{ margin-bottom:6px;} div#friend-tip h2{ font-size:160%; color:#FFF; margin-bottom:3px;} div#friend-tip label{ font-size:120%;} div#friend-tip input.textbox{ width:100px; width:166px;} div#friend-tip input.submit-button{ background:url(../images/content/main/submit.jpg) 0 0 no-repeat; width:87px; height:21px; border:0; margin-right:5px;} /*---- ppal ----*/ div#ppal { font-size:120%;;} div#ppal table{ padding:20px 20px 0 0;} div#ppal td{ padding-top:5px; padding-bottom:5px;} div#ppal a{ color:#067184; } /*---- imagen banner ----*/ .banner_home {float:left; margin:-6px 0px 0 0; background:url(../interface/images/banner.jpg) 0 0 no-repeat; width: 451; height: 184;} /*--- loading ---*/ #cargando { background:url(../images/ico_loading.gif) no-repeat scroll center center #FFFFFF; font:12px Arial,Helvetica,sans-serif; height:100%; opacity:0.8; padding:10px; position:absolute; text-align:center; top:0; left:0; width:100%; z-index:100; }