/* ======================================= Website : FrontCube [www.frontcube.com] Version : 1.0 Author : Mohamed Aslam Najeebdeen Author Email : boss@frontcube.com Author URI : http://frontcube.com Date : 01.02.2010 CONTENTS ----------- 1.BASIC 2.DEFAULT STYLINGS 2.1 UTIL CLASSES 2.2 DEFAULT FORM STYLES 2.3 COMMON STYLES 2.3.1 NAVIGATION 3.HEADINGS 4.LINKS 5.PAGES 5.1 HOME PAGES 5.2 ABOUT PAGE 5.3 PORTFOLIO PAGE 5.4 SERVICES PAGE 5.5 CONTACT PAGE 6 FOOTER ======================================= */ /* 1. BODY */ @font-face { font-family:GraublauWeb; src:url(../fonts/GraublauWeb.otf) format("opentype") } @font-face { font-family:GraublauWeb; src:url(../fonts/GraublauWebBold.otf) format("opentype"); font-weight:bold } @font-face { font-family: 'CartoGothicStdBook'; src: url('../fonts/CartoGothicStd-Book-webfont.eot'); src: local('☺'), url('../fonts/CartoGothicStd-Book-webfont.woff') format('woff'), url('../fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'), url('../fonts/CartoGothicStd-Book-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } ::selection { background: #9daf2a; color: white; } ::-moz-selection { background: #9daf2a; color: white; } body { background: url(../images/bk.jpg) repeat; font: normal 0.9em/1.5em 'CartoGothicStdBook', 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#fff; } body p { font-size: 1.1em; line-height: 1.5em; } body #container { width: 100%; margin: 0 auto; } /* 2 DEFAULT STYLINGS */ /* 2.1 UTIL CLASSES */ .clear { clear: both; } .left { float: left;} .right { float: right;} .current { font-weight: bold; letter-spacing: 1px; background: url(../images/nav_hover.png) repeat-x center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .client-name { display: block; text-align: right; } .font-text { font: 1.4em/1.5em GraublauWeb, Georgia, Times, Serif; } .font-text a { text-decoration: underline !important; } small { font-size: 0.8em; } /* 2.2 DEFAULT FORM STYLES */ input, label, textarea, button { font: 1.5em/1.5em GraublauWeb, Georgia, Times, Serif normal;} label { color: #666; cursor:pointer; display:block;} input[type="text"], textarea { height: 39px; width: 340px; background: url(../images/textfield_bk.png) repeat-x; border: none; padding: 0 10px; margin-left: 5px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;} input[type="text"]:focus, textarea:focus { background: #fff; } textarea { height: 235px; background: url(../images/textarea_bk.png) repeat-x #fff; padding: 10px;} input[type="submit"], button { cursor:pointer; border:1px solid #999; padding:5px; margin-top: 10px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#eee; } input[type="submit"]:hover, input[type="submit"]:focus, button:hover { border-color:#333; background:#ddd; } input[type="submit"]:active, button:active; { margin-top: 11px; } /* 2.3 COMMON STYLES */ /* 2.3.1 NAVIGATION */ .nav { font: 1.4em/1.5em GraublauWeb, Georgia, Times, Serif; width: 960px; height: 43px; padding: 0; margin: 20px 0 0 0;border: 1px solid #000; background: url(../images/nav_bk.png) repeat-x;} .nav ul { margin: 0 10px; padding: 0;display: block; position: relative; } .nav ul li { margin: 0 10px 0 0; display: block; float: left; height: 27px; padding: 8px; } .nav ul li a { display: block; padding: 0 10px; height: 35px; } .nav ul li:hover { background: url(../images/nav_hover.png) repeat-x center; } .clients { position: absolute; right: -10px; margin: 0; border: none;} .nav ul li.clients:hover { background: none;} /* 2.3.2 SITE-WIDE ELEMENT */ #home-container, #about-container, #portfolio-container, #services-container, #contact-container, #footer { width: 960px; margin: 0 auto 100px auto; padding: 0; } #about, #portfolio, #services, #contact { background: url(../images/pages_head_bk.png) no-repeat top center; padding: 21px 0 0 0;} #about-header h1, #portfolio-header h1, #services-header h1, #contact-header h1 { height: 55px; width: 300px; float: left; background: url(../images/page_titles.png) no-repeat; margin: 33px 0 40px 60px; text-indent: -9999px;} #about-header h3, #portfolio-header h3, #services-header h3, #contact-header h3 { float: right; margin: 60px 0 0 0;} .email, .phone, .twitter, .facebook, .skype, .linkedin { background: url(../images/icons_sprite.png) no-repeat center left;} .email, .phone { padding-left: 35px;} .email { margin-top: 50px; background-position: 0 -24px; } .phone { background-position: 2px -104px;} .twitter, .facebook, .skype, .linkedin { width: 24px; height: 24px; text-indent: -9999px;} #web-design, #web-dev, #frontend-dev, #backend-dev, #ruby-dev, #theme-dev { margin-bottom: 20px;} /* 3. HEADINGS */ h1, h2, h3, h4, h5, h6{ font-family: GraublauWeb, Georgia, Times, Serif; font-weight: bold; line-height: 1.6em; } h1 {} h2 { font-size: 1.8em; letter-spacing: 1px; } h3 { font-size: 1.8em; letter-spacing: 1px; font-weight: normal;} h4 { font-size: 1.5em; font-weight: normal; } h5 { font-size: 1.3em; font-weight: normal; } h6 { font-size: 1.1em; font-weight: normal; } /* 4. LINKS */ a:link, a:visited { text-decoration: none; color: #fff;} /* 5.0 PAGES */ /* 5.1 HOME PAGES */ body #container #home { background: url(../images/home_bk.png) no-repeat top center; } body #container #home #home-container #home-header { padding: 42px 0 0 13px; } body #container #home #home-container #home-header h1#logo { background: url(../images/logo.png) no-repeat; width: 388px; height: 48px; text-indent: -9999px; float: left;} body #container #home #home-container #home-header #header-contact { font: 1.2em/1.5em GraublauWeb, Georgia, Times, Serif; text-align: right;} body #container #home #home-container #showcase { margin-top: 62px; height: 390px; position: relative;} body #container #home #home-container #showcase #showcase-text { float: left; width: 540px; } body #container #home #home-container #showcase #showcase-text h1 { width: 550px; height: 161px; background: url(../images/we_make_elegant_websites.png) no-repeat; text-indent: -9999px; margin-bottom: 32px;} body #container #home #home-container #showcase #showcase-text h3 a { width: 290px; height: 107px; display: block; background: url(../images/btn_get_started.png) no-repeat; text-indent: -9999px; margin: 0 auto;} body #container #home #home-container #showcase #showcase-text h3 a:hover { background-position: 0 1px;} body #container #home #home-container #showcase #slideshow-container { width: 400px; height: 315px; float: right; background: url(../images/slide_display.png) no-repeat top right; } body #container #home #home-container #showcase #slideshow { margin: 17px 0 0 43px; width: 339px; height: 212px; overflow: hidden; } body #container #home #home-container #showcase #featured { width: 194px; height: 180px; background: url(../images/featured_rebbon.png) no-repeat; text-indent: -9999px; position: absolute; top: -16px; right: -5px; z-index: 9000;} body #container #home #home-container #content-area {} body #container #home #home-container #content-area #intro { width: 310px; float: left; } body #container #home #home-container #content-area #testimonials{ float: left; width: 610px; padding: 0 0 0 40px; background: url(../images/ico_quote.png) no-repeat 55px 40px;} body #container #home #home-container #content-area #testimonials p { font-family: 'CartoGothicStdBook', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; padding: 10px 0 0 65px; font-size: 1.12em; } /* 5.2 ABOUT PAGE */ body #container #about #about-container #about-content { overflow: hidden; } body #container #about #about-container #about-content a { color: #ef0d2d; } body #container #about #about-container #about-content #about-content-left { width: 520px; float: left; } body #container #about #about-container #about-content #about-content-left p { margin: 20px 0 0 60px; } body #container #about #about-container #about-content #about-team { width: 375px; float: right; } body #container #about #about-container #about-content #about-team .member-info { margin: 0 0 20px;} body #container #about #about-container #about-content #about-team .member-info img { margin: 10px 0; background: #3a3a3a; padding: 10px; border: 1px solid #666;} body #container #about #about-container #about-content #about-team p { margin-bottom: 20px;} body #container #about #about-container #about-content .expertise h6 { margin-bottom: 7px; } body #container #about #about-container #about-content .expertise ul li { display: inline-block; margin: 0 8px 8px 0; padding: 3px 8px; background: #666; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } ul#member-nav { margin-bottom: 20px; /* display: none; */ } ul#member-nav li { display: inline-block; margin-right: 5px;} ul#member-nav h4 { margin-bottom: 10px;} /* 5.3 PORTFOLIO PAGE */ body #container #portfolio #portfolio-container #portfolio-header h1 { background-position: 0 -55px;} body #container #portfolio #portfolio-container #portfolio-content #thumbs { width: 900px; margin: 20px auto; } body #container #portfolio #portfolio-container #portfolio-content #thumbs img { cursor: pointer; opacity: 0.6; border: 5px solid #999; margin: 0 0 5px 5px;} body #container #portfolio #portfolio-container #portfolio-content .simple-overlay { display:none; z-index:10000; background-color:#333; width:875px; min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; } .close { background-image:url(../images/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:30px; width:30px; } body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details { position:absolute; top:15px; right:15px; font-size:11px; color:#fff; width:230px; } body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details h3 { font-weight: bold; margin-bottom: 5px; } body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details h4 { margin: 20px 0 4px; } body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details ul { margin: 0 0 20px 15px; list-style: none;} body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details ul li { padding-left: 20px; background: url(../images/ico_tick.png) no-repeat left center; } body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details a.visit { width: 97px; height: 35px; display: block; background: url(../images/btn_visit.png) no-repeat; text-indent: -9999px;} body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details a.visit:hover {background-position: 0 -39px;} body #container #portfolio #portfolio-container #portfolio-content .simple-overlay .details a.visit:active { background-position: 0 -38px;} /* 5.4 SERVICES PAGE */ body #container #services #services-container #services-header h1 { background-position: 0 -110px;} body #container #services #services-container #services-content { margin: 25px 50px;} body #container #services #services-container #services-content .services { margin-bottom: 30px; overflow: hidden; } body #container #services #services-container #services-content .services h3 { padding: 0 0 10px 60px; background: url(../images/icons_sprite.png) no-repeat left -159px;} body #container #services #services-container #services-content .services #web-dev h3 { background-position: left -445px;} body #container #services #services-container #services-content .services #theme-dev h3 { background-position: left -376px;} body #container #services #services-container #services-content .services #graphics h3 { background-position: left -304px;} body #container #services #services-container #services-content .services #interface-design h3 { background-position: left -232px;} body #container #services #services-container #services-content .services #seo h3 { background-position: left -515px;} body #container #services #services-container #services-content .services #consultancy h3 { background-position: left -580px;} .first-block, .second-block { width: 415px; } .first-block { float: left; } .second-block { float: right; } /* 5.5 CONTACT PAGE */ body #container #contact #contact-container { margin-bottom: 0;} body #container #contact #contact-container #contact-header h1 { background-position: 0 -165px;} body #container #contact #contact-container #form-container { width: 460px; padding: 0 90px; margin: 35px 0; float: left; background: url(../images/icons_sprite.png) no-repeat right -650px;} #name-wrap, #company-wrap, #email-wrap, #subject-wrap, #message-wrap { clear:both; position:relative; margin:0 0 10px; } body #container #contact #contact-container #contact-info { margin: 35px 0; float: left; font: 1.4em/1.5em GraublauWeb, Georgia, Times, Serif; } body #container #contact #contact-container #contact-info .tooltip { padding: 35px 20px 0 20px; height: 95px; background: url(../images/icons_sprite.png) no-repeat right -8px ; display: none;} body #container #contact #contact-container #contact-info .tooltip a { height: 45; padding: 7px 7px 0 50px; background: url(../images/icons_sprite.png) no-repeat 2px -55px; font-size: 0.8em;} body #container #contact #contact-container #contact-info #address { cursor: pointer; } body #container #contact #contact-container #contact-info #social-media { margin: 50px 0; } body #container #contact #contact-container #contact-info #social-media ul { margin-top: 8px; } body #container #contact #contact-container #contact-info #social-media ul li { display: inline; float: left; } body #container #contact #contact-container #contact-info #social-media ul li a { width: 24px; height: 24px; display: block; margin-right: 8px;} body #container #contact #contact-container #contact-info #social-media ul li a.twitter { background-position: 0 0;} body #container #contact #contact-container #contact-info #social-media ul li a.facebook { background-position: -24px 0;} body #container #contact #contact-container #contact-info #social-media ul li a.skype { background-position: -48px 0;} body #container #contact #contact-container #contact-info #social-media ul li a.linkedin { background-position: -72px 0; } body #container #contact #contact-container #contact-info a#top { width: 58px; height: 58px; background: url(../images/home.png) no-repeat top; text-indent: -9999px; display: block; margin: 140px 0 0 160px;} body #container #contact #contact-container #contact-info a#top:active { background-position: 0 1px;} /* 6 FOOTER */ body #container #footer { font: 1em/1.5em "CartoGothicStdBook", Georgia, Times, Serif; text-align: center; background: url(../images/footer_bk.png) no-repeat top center; height: 80px; padding-top: 30px; margin-bottom: 0;} /* 7 PROJECT PLANNING */ #custom-form-header { width: 700px; margin: 0 auto; margin-top: 30px} #custom-form-header h1 { background: url(../images/logo.png) no-repeat; text-indent: -9999px; width: 475px; float: left; height: 45px; ;} #custom-form-header p { font: 1.4em/1.5em GraublauWeb, Georgia, Times, Serif; float: left; width: 200px; text-align: right; margin-top: 13px;} #custom-form-container { width: 650px; margin: 20px auto; padding: 30px 50px; background: url(../images/blog_bg.png) repeat; color: #696969; text-shadow: 0 1px 0 #fff; border: 1px solid #fff; } #custom-form-container h3 { font-size: 2em; font-weight: bold; } #custom-form-container a { color: #9e1e1e; } #custom-form-container a:hover { text-decoration: underline; } #custom-form-container input, label, textarea, button { font: 1.1em/1.5em 'CartoGothicStdBook', Arial, sans-serif normal; text-shadow: 0 1px 0 #fff; } #custom-form-container label { color: #666; cursor:pointer; display:block;} #custom-form-container input[type="text"], #custom-form-container textarea { height: 32px; width: 340px; background: #f2f2f2 !important; border: 1px solid #999; margin-left: 0; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; -webkit-box-shadow: 0 1px 1px #fff; } #custom-form-container input[type="text"]:focus, #custom-form-container textarea:focus { background: #fff !important; box-shadow: 0 0 5px #666666; -moz-box-shadow: 0 0 5px #666666; -webkit-box-shadow:0 0 5px #666666;} #custom-form-container textarea { height: 235px; background: #fff; padding: 10px;} #custom-form-container input[type="submit"], #custom-form-container button { cursor:pointer; border:1px solid #999; padding:5px; margin-top: 10px; border-radius:0 !important; -moz-border-radius:0 !important; -webkit-border-radius:0 !important; background:#eee; box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; -webkit-box-shadow: 0 1px 1px #fff; } #custom-form-container input[type="submit"]:hover, #custom-form-container input[type="submit"]:focus, button:hover { border-color:#333; background:#ddd; } #custom-form-container input[type="submit"]:active, #custom-form-containerbutton:active; { margin-top: 11px; } #custom-form-container .gform_description { font-size: 1.2em; margin-top: 5px; display: block; } #custom-form-container ul li, .ginput_complex span { padding-bottom: 10px; display: block; s} #custom-form-container .gform_body { margin: 30px 0 0;} #custom-form-container .validation_error { background-color:#FFD3D3; border-bottom:1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; color:#ff3131; margin-top:20px; padding:10px 20px; position: relative; } #custom-form-container .validation_error:before { border:2px solid #FF9393; content: ''; position: absolute; width: 99.3%; height: 92%; left: 1px; top: 1px; } #custom-form-container .validation_message, #custom-form-container .gfield_required { color: #9e1e1e;} #custom-form-container #gforms_confirmation_message { margin: 30px 0; font-size: 1.2em;} #custom-form-container .gsection { margin: 30px 0 10px; border-bottom: 1px solid #696969; box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #fff; -webkit-box-shadow: 0 1px 0 #fff; } #custom-form-container .gfield_checkbox { margin: 10px 20px; } #custom-form-container .gfield_checkbox label { display: inline !important; margin-left: 10px; } #custom-form-container .gfield_description { font-size: 0.9em; } #gform_wrapper_2 ul li { position: relative; margin:0 0 10px; } /* CONTACT 7 STYLE OVERIDINGS */ span.wpcf7-not-valid-tip { border: none !important; background: none !important; color: red; text-shadow: 0 1px 0 #fff; left: 190px !important; top: -5px !important;} div.wpcf7-validation-errors { border:2px solid #c00006 !important; background: #f02e34; } div.wpcf7-mail-sent-ok { border:2px solid #287408 !important; background: #398F14; }