/********************************************************************************************** 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: Arial, Helvetica, 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.home {background:#fff url(../images/container-bg.jpg) 50% 0 no-repeat; } div#container {background:#fff url(../images/inner-container-bg.png) 50% 0 no-repeat; } /*---- Wrapper ----*/ div#container.home div.wrapper{width:978px; margin:0 auto; min-width:978px; } div.wrapper{width:956px; margin:0 auto; min-width:1000px; position:relative; } /*---- Header ----*/ div#header{ margin-bottom:18px;} /*---- Navigation ----*/ div#navigation{ background:url(../images/navigation/nav-bg.png) 0 0 repeat-x; height:42px; line-height:42px;} /*---- Content ----*/ div#container.home div#content{ padding-bottom:10px;} div#content{ padding-bottom:31px;} /*---- Footer ----*/ div#footer{ background:url(../images/footer/footer-bg.jpg) center top no-repeat; height:172px; padding-top:21px;} /*------------------------------------------ // 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 //------------------------------------------*/ /*----------box1--------*/ div.box1{ background:url(../images/content/box1-middle.jpg) 0 0 repeat-y;} div.box1 div.top{ background:url(../images/content/box1-top.jpg) 0 0 no-repeat;} div.box1 div.bottom{ background:url(../images/content/box1-bottom.jpg) 0 100% no-repeat;} /*----------box2--------*/ div.box2 div.top{ background:url(../images/content/box2-top-middle.jpg) 0 0 repeat-x; overflow:hidden;} div.box2 div.top div.left{ background:url(../images/content/box2-top-left.jpg) 0 0 no-repeat; height:1%;} div.box2 div.top div.right{ background:url(../images/content/box2-top-right.jpg) 100% 0 no-repeat; height:13px; line-height:13px;} div.box2 div.middle{ background:#f5f5f5 url(../images/content/box2-bg.jpg) 0 0 repeat-x;} div.box2 div.middle div.left{ background:url(../images/content/box2-middle-left.jpg) 0 0 repeat-y;} div.box2 div.middle div.right{ background:url(../images/content/box2-middle-right.jpg) 100% 0 repeat-y; height:1%;} div.box2 div.bottom{ background:url(../images/content/box2-bottom-middle.jpg) 0 0 repeat-x; margin-top:-7px;} div.box2 div.bottom div.left{ background:url(../images/content/box2-bottom-left.jpg) 0 0 no-repeat;} div.box2 div.bottom div.right{ background:url(../images/content/box2-bottom-right.jpg) 100% 0 no-repeat; height:13px; line-height:13px;} /*--------- Box3 --------*/ div.box3{margin-top:42px;} div.box3 div.box3-top-left{ background:url(../images/content/box3-top-left.gif) left top no-repeat; padding-left:20px; height:20px; line-height:20px;} div.box3 div.box3-top-left div.box3-top-right{ background:url(../images/content/box3-top-right.gif) right top no-repeat; padding-right:20px; height:20px; line-height:20px;} div.box3 div.box3-middle{ border-left:2px solid #eaeaea; background:#fff; border-right:2px solid #eaeaea; padding:1px 15px 1px 58px; } div.box3 div.box3-middle div.diseno{ background:url(../images/content/diseno_web.jpg) 0 0 no-repeat; ; height:75px; } div.box3 div.box3-middle div.diseno span.color{ padding-top:30px; position:absolute; padding-left:80px; border:none; text-decoration:none; color:#1D86D3; font-size:270%; } div.box3 div.box3-middle div.posicionamiento{ background:url(../images/content/posicionamiento.jpg) 0 0 no-repeat; ; height:75px; } div.box3 div.box3-middle div.posicionamiento span.color{ padding-top:30px; position:absolute; padding-left:80px; border:none; text-decoration:none; color:#1D86D3; font-size:270%; } div.box3 div.box3-middle div.programacion{ background:url(../images/content/programacion.jpg) 0 0 no-repeat; ; height:75px; } div.box3 div.box3-middle div.programacion span.color{ padding-top:30px; position:absolute; padding-left:80px; border:none; text-decoration:none; color:#1D86D3; font-size:270%; } div.box3 div.box3-bottom-left{ background:url(../images/content/box3-bottom-left.gif) left bottom no-repeat; padding-left:20px; height:20px; line-height:20px;} div.box3 div.box3-bottom-left div.box3-bottom-right{ background:url(../images/content/box3-bottom-right.gif) right bottom no-repeat; padding-left:20px; height:20px; line-height:20px;} div.box3 div.box3-middle span{ font-size:120%; color:#1D86D3;} /*--------- Box4 --------*/ div.box4 {position:relative;} div.box4 div.box4-top-left{ background:url(../images/content/box4-top-left.gif) left top no-repeat; padding-left:22px; height:22px; line-height:22px;} div.box4 div.box4-top-left div.box4-top-right{ background:url(../images/content/box4-top-right.gif) right top no-repeat; padding-right:22px; height:22px; line-height:22px;} div.box4 div.box4-middle{ border-left:2px solid #8fcddf; background:#fff; border-right:2px solid #8fcddf; padding:1px 11px;} div.box4 div.box4-bottom-left{ background:url(../images/content/box4-bottom-left.gif) left bottom no-repeat; padding-left:22px; height:22px; line-height:22px;} div.box4 div.box4-bottom-left div.box4-bottom-right{ background:url(../images/content/box4-bottom-right.gif) right bottom no-repeat; padding-left:22px; height:22px; line-height:22px;} /*---- Navigation ----*/ div#navigation div.wrapper{ position:relative;} div#container.home div#navigation ul{margin-left:164px;} div#navigation ul{ margin-left:109px; z-index:2; position:relative;} div#navigation ul li{ float:left; font-size:120%;} div#navigation ul li a{ color:#010000; display:block; line-height:31px; height:31px; padding:0 16px; text-decoration:none; float:left;} div#navigation ul li.pipe{ background:url(../images/navigation/pipe.jpg) 0 0 no-repeat; width:2px; height:29px;} /*---- Navigation Active/Hover----*/ div#navigation ul li.active, div#navigation ul li:hover{ background:url(../images/navigation/nav-right.jpg) 100% 0 no-repeat;} div#navigation ul li.active a, div#navigation ul li:hover a{background:url(../images/navigation/nav-left.jpg) 0 0 no-repeat; color:#FFF; } /*---- Navigation language ----*/ div#navigation div.language-bar ul{ margin-left:0; position:absolute; bottom:-12px; z-index:5; left:824px; } div#container.home div#navigation div.language-bar ul { margin-left:0; position:absolute; bottom:-12px; z-index:5; left:879px; } div#navigation div.language-bar ul li{ float:left; background:url(../images/navigation/flag-bg.png) 0 0 no-repeat; height:32px; width:32px; margin-right:7px; padding:8px 0 0 8px;} div#navigation div.language-bar ul li a{ background:none; padding:0;} /*---- Header - Logo ----*/ div#container.home div#header div.logo{margin:0 81px 0 21px;} div#header div.logo{ float:left; width:238px; margin:14px 54px 0 11px;} div#header div.logo h1 a{ width:238px; height:170px; display:block; margin-top:-9px; background:url(../images/header/logo.png) 0 0 no-repeat;} /*---- Header - Introduction ----*/ div#container.home div#header div.introduction{padding-top:15px;} div#header div.introduction{ float:left; width:600px; padding-top:34px;} div#container.home div#header div.introduction h1{margin-bottom:23px;} div#header div.introduction h1{ font-size:280%; color:#010000; margin-bottom:23px; font-weight:normal; line-height:35px; letter-spacing:2px;} div#header div.introduction h1 a{ color:#1d86c0; text-decoration:underline;} div#header div.introduction h1 a:hover{ text-decoration:none;} div#header div.introduction p{ font-size:140%; color:#010000; line-height:25px;} div#header div.introduction p a.customedia{ background:url(../images/header/customedia-bg.jpg) 0 0 repeat-x; padding:0 8px; font-weight:bold; color:#FFF; text-decoration:none; line-height:23px; display:block; float:left; margin-right:5px;} /*----------content-----------*/ div#content h1{ font-size:340%; color:#000; margin-bottom:10px; font-weight:normal;} div#content h2{ font-size:300%; color:#000; margin-bottom:10px; font-weight:normal;} div#content h3{ font-size:260%; color:#000; margin-bottom:10px; font-weight:normal;} div#content h4{ font-size:200%; color:#000; margin-bottom:10px; font-weight:normal;} div#content h5{ font-size:180%; color:#000; margin-bottom:10px; font-weight:normal;} div#content p{font-size:120%; color:#000; line-height:22px; margin-bottom:20px;} div#content p em{ color:#9d9d9d;} div#content ul{ margin:0 0 20px 10px;} div#content ul li{font-size:120%; color:#000; line-height:22px; list-style:disc; } div#content ol{ margin:0 0 20px 15px;} div#content ol li{font-size:120%; color:#000; line-height:22px; list-style:decimal; } div#content img.aligncenter{display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;} div#content img.alignleft{ float:left; margin:0 10px 10px 0;} div#content img.alignright{ float:right; margin:0 0 10px 10px;} /*---- Footer - Company-info ----*/ div#container div#footer div.company-info{ margin-right:9px;} div#footer div.company-info{ float:left; width:580px; margin-right:9px;} div#footer div.company-info p{ font-size:120%; color:#FFF; line-height:21px;} div#footer div.company-info p.copyright{ font-weight:bold; margin-top:43px;} /*---- Footer - Logo ----*/ div#footer div.logo{ float:left; width:188px; margin:16px 22px 0 -24px;} div#footer div.logo h1 a{ width:188px; height:129px; display:block; background:url(../images/footer/footer-logo.png) 0 0 no-repeat;} /*---- Footer - social-links ----*/ div#footer div#social-links{ float:left; width:139px;} div#footer div#social-links ul li{ padding-bottom:7px;} div#footer div#social-links ul li a{ font-size:130%; color:#FFF; text-decoration:none; line-height:36px; height:36px; padding-left:47px;} div#footer div#social-links ul li.twitter a{ background:url(../images/footer/twitter.jpg) 0 0 no-repeat; display:block;} div#footer div#social-links ul li.skype a{ background:url(../images/footer/skype.jpg) 0 0 no-repeat; display:block;} div#footer div#social-links ul li.facebook a{ background:url(../images/footer/facebook.jpg) 0 0 no-repeat; display:block;} div#footer div#social-links ul li.rss a{ background:url(../images/footer/rss.jpg) 0 0 no-repeat; display:block;} /*---- Footer - list1----*/ div#footer ul.list1{ float:left; width:160px; padding-top:12px;} div#footer ul.list1 li{ font-size:120%; color:#a8e5ff; margin-bottom:27px; font-style:italic;} div#footer ul.list1 li a{ color:#a8e5ff; } /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- services ----*/ div#services{ margin-bottom:20px;} div#services div.bottom{ padding:10px 10px 2px 65px;} div#services div.service{ width:255px; float:left; padding-left:38px; position:relative;} div#services div.service h2{ font-size:180%; color:#41a2cb; margin-bottom:8px; font-weight:normal;} div#services div.service h2 a{ color:#41a2cb;} div#services div.service h2 a:hover{ color:#41a2cb; text-decoration:underline;} div#services div.service p{ font-size:120%; color:#010000; line-height:17px; margin-bottom:10px;} div#services div#service1 img.leaf1{ position:absolute; left:-9px; top:-8px;} div#services div#service2{ padding-left:45px;} div#services div#service2 img.leaf1{ position:absolute; left:-14px; top:-4px;} div#services div#service3{ padding-left:77px; width:210px;} div#services div#service3 img.leaf1{ position:absolute; left:6px; top:4px;} /*----------projects-----------*/ div#projects{ position:relative; margin-bottom:7px;} div#projects div.middle div.right{ padding:0 15px;} div#projects h2{ font-size:280%; color:#000; margin:-8px 0 4px 0; font-weight:normal;} div#projects h2 span{ float:right; margin-top:17px; width:176px; margin-right:10px;} div#projects h2 span a{ font-size:50%; color:#8f8f8f; background:url(../images/content/arrow.gif) 0 3px no-repeat; padding-left:15px; font-style:italic; float:right; line-height:15px; text-decoration:none;} div#projects div.project{ background:url(../images/content/project-top.gif) 0 0 no-repeat; padding:17px 0px;} /*----------projects details-----------*/ div#projects div.project div.details{ float:left; width:358px;} div#projects div.project div.details div.description{ border-left:#e0e0e0 1px solid; padding:11px 0 0px 10px; margin:0 -1px 7px 0px; background:#fff; position:relative;} div#projects div.project div.details div.description div.bottom{ background:url(../images/content/description-bottom.gif) 0 100% no-repeat; margin-left:-11px; height:20px; margin-top:18px;} div#projects div.project div.details div.description h3{ font-size:180%; color:#0b8dc6; font-weight:normal; margin-bottom:17px;} div#projects div.project div.details div.description h3 span { font-size:85%; color:#b0b0b0; font-style:italic; float:right; line-height:15px;} div#projects div.project div.details div.description p{ font-size:140%; color:#000; line-height:23px; margin-bottom:29px;} div#projects div.project div.details div.description a{ font-size:140%; color:#0b8dc6; border-bottom:#dbdbdb 1px solid; background:url(../images/content/site-icon.gif) 100% 0 no-repeat; padding-right:20px; padding-bottom:2px; text-decoration:none;} div#projects div.project div.details div.description a:hover{ border:0;} /*----------projects details - tools-----------*/ div#projects div.project div.details div.tools{ padding:10px 0 0 7px; margin-bottom:30px; } div#projects div.project div.details div.tools img.left{padding-bottom:10px; margin-right:10px;} div#projects div.project div.details div.tools img.right{padding-bottom:10px; margin-left:10px;} div#projects div.project div.details div.tools h1{font-size:200%; color:#2A96C5; margin-bottom:10px; font-weight:normal;float:right;margin-right:10px; } div#projects div.project div.details div.tools h1 span{font-size:70%; color:#999999; margin-bottom:10px; font-weight:normal;float:right; margin-right:20px; } div#projects div.project div.details div.tools ul li{ float:left; width:148px; margin-bottom:17px; font-size:130%; color:#979797; line-height:24px; padding-left:27px;} div#projects div.project div.details div.tools ul li.dw{ background:url(../images/content/dw-icon.gif) 0 0 no-repeat;} div#projects div.project div.details div.tools ul li.fl{ background:url(../images/content/fl-icon.gif) 0 0 no-repeat;} div#projects div.project div.details div.tools ul li.ps{ background:url(../images/content/ps-icon.gif) 0 0 no-repeat;} div#projects div.project div.details div.tools ul li.ai{ background:url(../images/content/ai-icon.gif) 0 0 no-repeat;} /*----------projects gallery-----------*/ div#projects div.project div.gallery{ float:left; width:590px;} div#projects div.project div.gallery div.top{ padding:4px 0 0 44px; background:none; border:#e0e0e0 1px solid; border-top:0; border-bottom:0;} div#projects div.project div.gallery div.bottom{ background:url(../images/content/gallery-bottom.jpg) 0 0 no-repeat; height:31px; margin:0 0px 0 -8px;} /*----------projects button/controls-----------*/ div#projects a.detail-button{ position:absolute; left:10px; bottom:0px; color:#FFF; padding:28px 0 0 50px; background:url(../images/content/detail-button.png) 0 0 no-repeat; display:block; width:148px; height:30px; font-size:180%; text-decoration:none;} div#projects div.controls{ position:absolute; bottom:5px; left:276px;} div#projects div.controls a.previous{ background:url(../images/content/previous.gif) 0 0 no-repeat; width:42px; height:42px; margin-right:7px; display:block; float:left;} div#projects div.controls a.next{ background:url(../images/content/next.gif) 0 0 no-repeat; width:42px; height:42px; display:block; float:left;} /*----------content bugget/box3-----------*/ div#content div#budget.box3{ float:left; width:509px; padding:10px; margin:27px 0 0 -23px; position:relative;} div#content div#budget.box3 h2{ font-size:200%; color:#2a96c5; margin:-29px 0 30px 22px; font-weight:normal; border:0; position:relative; background:#FFF; padding:0 10px; z-index:1; float:left;} div#content div#budget.box3 div.tag{ background:url(../images/content/tag.png) 0 0 no-repeat; width:112px; height:80px; padding:38px 0 0 15px; z-index:5; float:right; margin:-33px -34px 0 5px; position:relative;} div#content div#budget.box3 p{ margin:0 0 16px 0; clear:none;} div#content div#budget div.box3-middle{ padding-left:14px;} div#content div#budget div.box3-bottom-left{ margin-top:-20px; position:relative;} /*----------content about-----------*/ div#content div.about{ float:right; width:455px;} div#content div.about h2{ font-size:340%; color:#000; margin-bottom:0px; font-weight:normal;} div#content div.about p{ padding-left:4px;} div#content div.about p a{ color:#2a96c5; font-weight:bold;} /*------------------------------------------ // 5: BUDGET PAGE SPECIFIC STYLES //------------------------------------------*/ div#content div.box3 h1{margin-top:-38px; position:relative; font-size:320%; color:#d7d7d7; line-height:35px; background:#fff; margin-left:30px; padding:0px 50px 0px 26px; float:left; font-weight:normal; } div#content div.box3 h2{font-size:250%; color:#43a4cd; line-height:16px; font-weight:normal; margin:0px 60px 20px 0px; border-bottom:1px solid #bde0ee;} div#content div.box3 h2 span{background:#fff; padding:0px 10px 0px 0px;} div#content div.box3 p{ font-size:120%; line-height:23px; margin:2px 0px 10px 0px; clear:both;} div.box3 p span{font-style:italic; color:#8e8e8e;} div.box3 p label{width:255px; display:block; float:left; color:#b7b7b7; font-size:125%; margin-top:15px; font-weight:bold;} div.box3 p span.textbox{background:url(../images/content/textbox.gif) left top no-repeat; height:56px; float:left; padding-left:15px; display:block;} div.box3 p span.textbox-right{background:url(../images/content/textbox.gif) bottom right no-repeat; height:56px; float:left; padding-right:15px; display:block;} div.box3 p span.textbox-right input.textbox{background:none; border:none; width:414px; padding:17px 0px;font-size:190%;color:#333333; padding-top:20px;} div.box3 p textarea{background:none; border:none; width:700px; padding:5px 0px;font-size:190%;color:#333333;} div.box3 p span.textarea{width:700px; display:block;} div.box3 p span.textarea-top-left{background:url(../images/content/textarea-top-left.gif) left top no-repeat; height:14px; line-height:14px; padding-left:14px; display:block;} div.box3 p span.textarea-top-left span.textarea-top-right{background:url(../images/content/textarea-top-right.gif) right top no-repeat; height:10px; line-height:14px; padding-right:14px; display:block;} div.box3 p span.textarea-middle{display:block; border-left:1px solid #e0e0e0; border-right:1px solid #e0e0e0; padding:1px 14px; background:#fcfcfc;} div.box3 p span.textarea-bottom-left{background:url(../images/content/textarea-bottom-left.gif) left bottom no-repeat; height:14px; line-height:14px; padding-left:14px; display:block;} div.box3 p span.textarea-bottom-left span.textarea-bottom-right{background:url(../images/content/textarea-bottom-right.gif) right bottom no-repeat; height:14px; line-height:14px; padding-right:14px; display:block;} div.box3 p span.textarea-middle textarea{background:none; border:none; width:615px;} div.box3 p input.button{margin:-9px 0 0 -27px; position:relative;} div#content div.box3 fieldset p{ margin-bottom:15px;} /*------------------------------------------ // 6: PORTFOLIO PAGE SPECIFIC STYLES //------------------------------------------*/ div#portfolio div.box3-middle{ padding:0 0 1px 5px;} div#portfolio div.box3-middle p{ padding:0 60px 20px 53px;} div#content ul#projects{ margin:0;} div#content ul#projects li{ width:455px; float:left; margin:0 11px 23px 6px; list-style:none;} div.image-frame{background:url(../images/content/image-frame.png) left top no-repeat; width:402px; height:226px; padding:4px 13px; position:relative; z-index:10; } div.image-frame img{border:1px solid #e9e9e9; vertical-align:bottom;} div.image-frame img.nuevo{ position:absolute; right:-6px; top:-10px; border:none;} ul#projects li div.box4 div.site-url{margin-bottom:12px; position:relative; z-index:10;} ul#projects li div.box4 div.site-url h2{font-size:140%; color:#1797cf; line-height:23px; font-weight:bold; margin:0px; border:none;} ul#projects li div.box4 div.site-url h2 span{color:#8a8a8a; font-style:italic; float:right; padding:0px; background:none; } ul#projects li div.box4 div.site-url h2 span a{color:#8a8a8a; text-decoration:underline; font-weight:normal;} ul#projects li div.box4 div.site-url h2 span a:hover{text-decoration:none; padding-left:5px;} ul#projects li div.box4 ul{ position:relative; z-index:10;} div#content ul#projects li div.box4 ul li{float:left; width:21px; margin:0px 2px 0px 0px;} div.box-bg{background:url(../images/content/box4-bg.png) left top no-repeat; width:361px; height:306px; position:absolute; bottom:2px; right:40px; z-index:3; } #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:978px; height:455px; overflow:hidden; } #prevBtn, #nextBtn{ display:block; width:30px; height:77px; position:absolute; left:276px; top:585px; } #nextBtn{ left:325px; } #prevBtn a, #nextBtn a{ display:block; width:42px; height:42px; background:url(../../interface/images/content/previous.gif) no-repeat 0 0; } #nextBtn a{ background:url(../../interface/images/content/next.gif) no-repeat 0 0; } /* // Easy Slider */