/********************************************************************************************** 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; background:#d97402; } h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div.wrapper { width:1032px; margin:0 auto; } /*---- Header ----*/ div#header { background:url(../images/header/header-bg.jpg) left top repeat-x; z-index:400; position:relative; } div#header div.wrapper{ position:relative; z-index:70;} /*---- Main Navigation ----*/ div#main-navigation { float:right; margin-top:27px; position:relative; z-index:20; } /*---- Content ----*/ div#content { background: url(../images/content/content-bg.gif) left top repeat-x; top:-30px; position:relative; z-index:300; } div#content div.wrapper { background:url(../images/content/content-inner.gif) left top no-repeat; position:relative; padding:32px 0px 0px; margin-bottom:-90px; } /*---- Main ----*/ div#main { float:left; width:740px; margin-top:-10px; position:relative; } /*---- Sidebar ----*/ div#sidebar { float:left; width:195px; padding-top:10px; margin-right:20px; } /*---- Footer ----*/ div#footer { background:#904d01 url(../images/footer/footer-bg.jpg) 0px 0px repeat-x; position:relative; padding-bottom:10px; z-index:20; margin-top:-39px; } div#footer div.wrapper { background:url(../images/footer/footer-bg.gif) left top no-repeat; padding:16px 34px 10px;} /*------------------------------------------ // 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 { width:272px; float:left; position:relative; z-index:14; } div#header div.logo h1 a { width:272px; height:0; padding-top:192px; overflow:hidden; display:block; background:url(../images/header/logo.png) left top no-repeat; } /*---- Main Navigation ----*/ div#main-navigation ul li{ float:left; margin-right:4px; } div#main-navigation ul li a { float:left; display:block; background:url(../images/navigation/tabs.png) left -84px no-repeat; height:42px; margin-right:32px; } div#main-navigation ul li a span { display:block; float:left; background:url(../images/navigation/tabs.png) right bottom no-repeat; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; letter-spacing:-1px; height:42px; margin-right:-30px; position:relative; line-height:42px; font-size:180%; color:#fff; } div#main-navigation ul li.parent:hover a { background:url(../images/navigation/tabs.png) left top no-repeat; text-decoration:none; } div#main-navigation ul li.parent:hover a span { background:url(../images/navigation/tabs.png) right -42px no-repeat; } div#main-navigation ul li a:hover span{ text-decoration:none; color:#D97402; } div#main-navigation ul li a:hover { text-decoration:none; color:#D97402; } div#main-navigation ul li.active a{ background:url(../images/navigation/tabs.png) left top no-repeat; text-decoration:none; } div#main-navigation ul li.active a span{ background:url(../images/navigation/tabs.png) right -42px no-repeat; } div#main-navigation ul li.parent{ position:relative; } div#main-navigation ul li.parent ul.child{ position:absolute; left:0px; top:42px; display:none; } div#main-navigation ul li.parent ul.child li { float:none; display:block; margin:0px; padding-bottom:2px; background:url(../images/navigation/drop-down-bg.png) left top repeat; } div#main-navigation ul li.parent ul.child li a{ float:none; display:block; background:none; margin:0px; padding:0; height:auto; } div#main-navigation ul li.parent ul.child li a span{ float:none; display:block; line-height:25px; background:none; font-size:110%; color:#412c13; padding:0; margin:0; height:auto; letter-spacing:normal; } div#main-navigation ul li.parent:hover ul.child { display:block; } div#main-navigation ul li.parent ul.child2{ position:absolute; left:20px; top:42px; display:none; } div#main-navigation ul li.parent ul.child2 li { float:none; display:block; margin:0px; padding-bottom:2px; background:url(../images/navigation/drop-dowsn-bg.png) left top repeat; } div#main-navigation ul li.parent ul.child2 li a{ float:none; display:block; background:none; margin:0px; padding:0; height:auto; } div#main-navigation ul li.parent ul.child2 li a span{ float:none; display:block; line-height:25px; background:none; font-size:110%; color:#412c13; padding:0; margin:0; height:auto; letter-spacing:normal; } div#main-navigation ul li.parent:hover ul.child2 { display:block; } /*---- Services ---*/ div#main-navigation ul li#services a{ padding-left:18px; } div#main-navigation ul li#services a span{ padding-right:58px; } div#main-navigation ul li#services ul.child{ width:142px; background:url(../images/navigation/services-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none; } div#main-navigation ul li#services ul.child li a { padding-left:2px; } div#main-navigation ul li#services ul.child li a span{ padding-right:2px; } div#main-navigation ul li#services.parent:hover ul.child{ display:block; } /*---- Agency ---*/ div#main-navigation ul li#agency a{ padding-left:21px; } div#main-navigation ul li#agency a span{ padding-right:40px; } div#main-navigation ul li#agency ul.child{ width:122px; background:url(../images/navigation/agency-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none;} div#main-navigation ul li#agency ul.child li a { padding-left:8px; } div#main-navigation ul li#agency ul.child li a span{ padding-right:8px; } div#main-navigation ul li#agency.parent:hover ul.child{ display:block; } /*---- Clients ---*/ div#main-navigation ul li#clients a{ padding-left:22px; } div#main-navigation ul li#clients a span{ padding-right:39px; } div#main-navigation ul li#clients ul.child{ width:122px; background:url(../images/navigation/agency-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none; } div#main-navigation ul li#clients ul.child li a { padding-left:8px; } div#main-navigation ul li#clients ul.child li a span{ padding-right:8px; } div#main-navigation ul li#clients.parent:hover ul.child{ display:block; } /*---- Portfolio ---*/ div#main-navigation ul li#portfolio a{ padding-left:18px; } div#main-navigation ul li#portfolio a span{ padding-right:34px; } div#main-navigation ul li#portfolio ul.child{ width:126px; background:url(../images/navigation/portfolio-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none;} div#main-navigation ul li#portfolio ul.child li a { padding-left:8px; } div#main-navigation ul li#portfolio ul.child li a span{ padding-right:8px; } div#main-navigation ul li#portfolio.parent:hover ul.child{ display:block; } /*---- Contact ---*/ div#main-navigation ul li#contact a{ padding-left:18px; } div#main-navigation ul li#contact a span{ padding-right:34px; } div#main-navigation ul li#contact ul.child{ width:122px; background:url(../images/navigation/agency-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none; } div#main-navigation ul li#contact ul.child li a { padding-left:8px; } div#main-navigation ul li#contact ul.child li a span{ padding-right:8px; } div#main-navigation ul li#contact.parent:hover ul.child{ display:block; } /*---- Blog ---*/ div#main-navigation ul li#blog a{ padding-left:19px; } div#main-navigation ul li#blog a span{ padding-right:34px; } div#main-navigation ul li#blog ul.child{ width:86px; background:url(../images/navigation/blog-bottom.png) left bottom no-repeat; padding-bottom:14px; display:none;} div#main-navigation ul li#blog ul.child li a { padding-left:8px; } div#main-navigation ul li#blog ul.child li a span{ padding-right:8px; } div#main-navigation ul li#blog.parent:hover ul.child{ display:block; } /*---- Tagline ---*/ div#tagline { margin-right:44px; text-align:right; } div#tagline h1 { background:url(../images/content/google-ad.png) right top no-repeat; height:0px; overflow:hidden; padding-top:28px; } /*---- Sidebar ---*/ h1.heading1{ font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; letter-spacing:-1px; background:url(../images/content/main/heading2-bg.gif) left top repeat-x; height:45px; line-height:45px; padding:0px 6px; font-size:280%; font-weight:normal; color:#3a332b; margin-bottom:14px; } h2.heading2{ background:url(../images/content/main/heading-arrow.gif) right top no-repeat; padding:24px 61px 0px 0px; float:left; font-weight:normal; position:relative; z-index:10; font-size:220%; margin-bottom:24px; color:#f09100; line-height:24px; } h2.heading1{ background:url(../images/content/sidebar/tab.gif) left top no-repeat; height:43px; line-height:43px; padding:0px 36px; font-size:140%; font-weight:normal; color:#91837c; margin-bottom:12px; } div#main h1{ font-size:280%; font-weight:normal; color:#d97402; margin-bottom:18px; } /*---- Post ---*/ div.post h1 { font-size:220%; margin-bottom:8px; color:#f09100; line-height:24px; } div.post h2 { font-size:260%; margin-bottom:10px;} div.post h3 { font-size:240%; margin-bottom:10px;} div.post h4 { font-size:220%; margin-bottom:10px;} div.post h5 { font-size:200%; margin-bottom:10px;} div.post h5 { font-size:180%; margin-bottom:10px;} div.post p { color:#999999; line-height:20px; font-size:120%; margin-bottom:20px; display:block; } 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 img { max-width:100%; } div.post img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;} div.post img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;} div.post 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%; } 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; } /*---- 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; } /*---- Footer - Logo ---*/ div#footer div.logo { width:172px; float:left; margin-right:20px; position:relative; z-index:100; } div#footer div.logo h1 a { display:block; background:url(../images/footer/logo.png) left top no-repeat; width:172px; height:0px; padding-top:130px; overflow:hidden; } /*---- Footer - Navigation ---*/ div#footer div#footer-navigation { float:left; margin-top:24px; position:relative; z-index:100; } div#footer div#footer-navigation p { line-height:25px; font-size:130%; color:#412c13; font-weight:bold; } div#footer div#footer-navigation p a , div#footer div#footer-navigation ul li a{ color:#412c13; } div#footer div#footer-navigation ul li { float:left; font-size:130%; color:#412c13; line-height:25px; } div#footer div#footer-navigation ul li.divider { margin:0 6px; background:url(../images/footer/divider.gif) left center no-repeat; width:13px; } /*---- Footer - Ads ---*/ div#footer div.ads { background:url(../images/footer/arrow.png) left top no-repeat; float:right; padding:20px 0px 0px 92px; position:relative; z-index:10000; } div#footer div.ads img{ margin-left:4px; } /*---- Common Boxes & Containers ----*/ /*---- Box1 ----*/ div.box1 { margin-top:-15px; width:100%; overflow:hidden;} div.box1 div.top-left { background:url(../images/content/box1-top-left.png) left top no-repeat; height:40px; line-height:40px; padding-left:229px; } div.box1 div.top-left div.top-right{ background:url(../images/content/box1-top-right.png) right top no-repeat; height:40px; line-height:40px; padding-right:40px; } div.box1 div.top-left div.top-right div.top-middle{ background:url(../images/content/box1-top-middle.png) left top repeat-x; height:40px; } div.box1 div.middle-left { background:url(../images/content/box1-middle-left.png) left top repeat-y; padding-left:24px; } div.box1 div.middle-left div.middle-right{ background:url(../images/content/box1-middle-right.png) right top repeat-y; padding-right:24px; } div.box1 div.middle-left div.middle-right div.middle{ background:#fff url(../images/content/box1-middle.gif) left top repeat-y; padding:1px 10px; } div.box1 div.bottom-left { background:url(../images/content/box1-bottom-left.png) left bottom no-repeat; height:53px; line-height:53px; padding-left:229px; } div.box1 div.bottom-left div.bottom-right{ background:url(../images/content/box1-bottom-right.png) right bottom no-repeat; height:53px; line-height:53px; padding-right:40px; } div.box1 div.bottom-left div.bottom-right div.bottom-middle{ background:url(../images/content/box1-bottom-middle.png) right bottom repeat-x; height:53px; line-height:53px; } /*---- Box2 ----*/ div.box2 div.top { background:url(../images/content/box2-top-middle.gif) left top repeat-x; height:18px; } div.box2 div.top div.top-left{ background:url(../images/content/box2-top-left.gif) left top no-repeat; height:18px; } div.box2 div.top div.top-left div.top-right{ background:url(../images/content/box2-top-right.gif) right top no-repeat; height:18px; line-height:18px; } div.box2 div.middle-left { background: url(../images/content/box2-middle-left.gif) left top repeat-y; padding-left:14px; } div.box2 div.middle-left div.middle-right{ background:#fff url(../images/content/box2-middle-right.gif) right top repeat-y; padding:1px 3px; } div.box2 div.bottom { background:url(../images/content/box2-bottom-middle.gif) left bottom repeat-x; height:18px; } div.box2 div.bottom div.bottom-left{ background:url(../images/content/box2-bottom-left.gif) left bottom no-repeat; height:18px; } div.box2 div.bottom div.bottom-left div.bottom-right{ background:url(../images/content/box2-bottom-right.gif) right bottom no-repeat; height:18px; line-height:18px; } /*---- Box3 ----*/ div.box3 div.top { background:url(../images/content/box3-top-middle.gif) left top repeat-x; height:18px; } div.box3 div.top div.top-left{ background:url(../images/content/box3-top-left.gif) left top no-repeat; height:18px; } div.box3 div.top div.top-left div.top-right{ background:url(../images/content/box3-top-right.gif) right top no-repeat; height:18px; line-height:18px; } div.box3 div.middle-left { background: url(../images/content/box3-middle-left.gif) left top repeat-y; padding-left:4px; } div.box3 div.middle-left div.middle-right{ background:#e1dbd8 url(../images/content/box3-middle-right.gif) right top repeat-y; padding:1px 10px; } div.box3 div.bottom { background:url(../images/content/box3-bottom-middle.gif) left bottom repeat-x; height:18px; } div.box3 div.bottom div.bottom-left{ background:url(../images/content/box3-bottom-left.gif) left bottom no-repeat; height:18px; } div.box3 div.bottom div.bottom-left div.bottom-right{ background:url(../images/content/box3-bottom-right.gif) right bottom no-repeat; height:18px; line-height:18px; } /*---- Buttons ----*/ a.button1{ background:url(../images/content/button1.gif) left top no-repeat; display:block; float:left; padding-left:10px; height:35px; } a.button1 span{ background:url(../images/content/button1.gif) right bottom no-repeat; display:block; float:left; padding-right:10px; height:35px; line-height:30px; font-size:110%; color:#d97402; font-weight:bold; } a.button1:hover{ text-decoration:none; } /*---- Lists ----*/ /*---- List1 ----*/ ul.list1 { margin-left:15px; } ul.list1 li { background:url(../images/content/sidebar/note-icon.gif) left top no-repeat; padding-left:21px; line-height:16px; font-size:140%; color:#fff; margin-bottom:26px; } ul.list1 li ul.child { margin:10px 0px 0px 0px; } ul.list1 li ul.child li { background:url(../images/content/sidebar/border-icon.gif) left top no-repeat; padding-left:16px; font-size:80%; color:#fff; margin-bottom:11px; } ul.list1 li ul.child2 { margin:10px 0px 0px 0px; } ul.list1 li ul.child2 li { background:url(../images/content/sidebar/border-icon2.gif) left top no-repeat; padding-left:36px; font-size:80%; color:#fff; margin-bottom:11px; } ul.list1 li a { color:#fff; } /*---- List2 ----*/ ul.list2 li{ float:left; margin:0px 30px 10px 0px; min-height:70px; } ul.list2 li a { color:#fff; } /*---- List3 ----*/ ul.list3 li{ background:url(../images/content/border.gif) left bottom repeat-x; padding-bottom:5px; margin-bottom:9px; } ul.list3 li img { float:left; margin-right:11px; } ul.list3 li h6{ font-size:130%; color:#d97402; line-height:20px; } ul.list3 li p { font-size:110%; color:#766551; line-height:20px; } ul.list3 li a { color:#d97402; text-decoration:underline; } ul.list3 li a:hover{ text-decoration:none; } ul.list3 li.last { background:none; } /*---- List4 ----*/ ul.list4 { margin-bottom:26px; clear:both; } ul.list4 li{ background:url(../images/content/arrow.gif) left center no-repeat; padding-left:21px; font-size:120%; color:#434343; line-height:38px; } ul.list4 li a { color:#e18800; font-weight:bold; } /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Profile ----*/ div#profile { margin-bottom:8px; } div#profile div.description{ position:relative; z-index:20; width:472px; } div#profile div.description p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 104px; clear:both; } div#profile img.company1 { margin:16px -472px 0px 0px; z-index:1; } /*---- Stand ----*/ div#partners { position:relative; height:258px; } div#partners img.partner1{ position:absolute; left:5px; top:60px; } div#partners img.partner2{ position:absolute; left:174px; top:80px; } div#partners img.partner3{ position:absolute; left:355px; top:54px; } div#partners img.partner4{ position:absolute; left:460px; top:82px; } div#partners img.partner5{ position:absolute; left:5px; top:155px; } div#partners img.partner6{ position:absolute; left:185px; top:131px; } div#partners img.partner7{ position:absolute; left:341px; top:120px; } div#partners img.partner8{ position:absolute; left:548px; top:105px; } div#partners img.partner9{ position:absolute; left:5px; top:201px; } div#partners img.partner10{ position:absolute; left:174px; top:210px; } div#partners img.partner11{ position:absolute; left:320px; top:181px; } div#partners img.partner12{ position:absolute; left:500px; top:152px; } /*---- Portfolio ----*/ div#portfolio-content.box2{ float:left; width:362px; margin-bottom:30px; } div#portfolio-content img { float:right; margin-left:-48px; } div#portfolio-content h1 , div#news-blog h1 { color:#776d62; } div#portfolio-content p{ font-size:110%; color:#474747; line-height:20px; margin-bottom:10px; } /*---- News Blog ----*/ div#news-blog.box3{ float:right; width:356px; margin-bottom:30px; } div#news-blog.box3 div.middle-right{ padding:1px 3px 1px 4px; } div#news-blog div.content{ background:url(../images/content/box3-middle-bg.gif) right top no-repeat; margin-top:-16px; padding:16px 23px 10px 10px; position:relative; } /*---- Clients ----*/ div#clients-content.box4 { background:url(../images/content/box4-bg.gif) left bottom no-repeat; border:1px solid #c1b2ab; padding:10px 22px; clear:both; } /*------------------------------------------ // 5.1 INNER PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Adapted ----*/ div#adapted div.description{ position:relative; z-index:20; width:472px; } div#adapted div.description p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#adapted div.description p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#adapted img.company { margin:16px -10px 0px -162px; z-index:1; } div#adapted div.description2{ position:relative; z-index:20; width:415px; } div#adapted div.description2 p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#adapted div.description2 p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#adapted div.description3{ position:relative; z-index:20; width:370px; } div#adapted div.description3 p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#adapted div.description3 p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#adapted div.description4{ position:relative; z-index:20; width:100%; } div#adapted div.description4 p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#adapted div.description4 p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#noadapted div.description{ position:relative; z-index:20; width:100%; } div#noadapted div.description p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#noadapted div.description p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#noadapted img.company { margin:16px -10px 0px -162px; z-index:1; } div#cursos div.description{ position:relative; z-index:20; width:325px; } div#cursos div.description p { font-size:120%; color:#999; line-height:20px; margin:0px 0px 20px 0px; clear:both; } div#cursos div.description p a { color:#e18800; background:url(../images/content/border1.gif) left bottom repeat-x; text-decoration:none; } div#cursos img.company { margin:16px -10px 0px -162px; z-index:1; } /*---- Socialable ----*/ div#socialable div.two-columns{ background:url(../images/content/border2.gif) center top repeat-y; width:684px; } div#socialable div.two-columns div.section{ border-bottom:1px solid #b1a8a3; margin-bottom:22px; } div#socialable div.two-columns div.column1{ width:328px; float:left; overflow:hidden; padding:0px 12px 22px 0px; } div#socialable div.two-columns div.column2{ width:320px; float:left; overflow:hidden; padding:0px 12px 22px 8px; } div#socialable div.two-columns img { float:left; margin-right:14px; } div#socialable div.two-columns h3{ font-weight:normal; color:#6e645e; font-size:220%; line-height:38px; } div#socialable div.two-columns h3 a { color:#6e645e; } div#socialable div.two-columns p{ font-size:110%; color:#999; line-height:16px; } div#socialable div.two-columns div.section.last { border:none; padding-bottom:0px; margin-bottom:0px; }