/* Symplex - Green */ /* ======================== */ /* ==== GENERAL SECTION === */ /* ======================== */ body { background: #fff url(images/custom/bg.png) repeat top center; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #444444; } /* general things, floaters, general links and additional resets */ a { color:#396485; text-decoration:underline; } a:hover { color:#ec8601; text-decoration:none; } strong { font-weight: 700; } .fl { float:left;} .fr { float:right; } .clear { clear:both; } .rel { position:relative; } .abs { position:absolute; } hr { border: none 0; border-bottom: 1px solid #E0E0E0; height: 1px; margin: 10px 0; } blockquote { font-style: italic; font-size:13px; line-height:18px; background: url(images/quotes.png) no-repeat top left; background-position: 12px 12px; color:#595959; margin:5px 0; padding: 8px 15px 10px 60px; } .sep { color: #CCC; margin: 0 8px; } .ico-small { vertical-align: middle; margin: 0 5px 2px 0; } .separator { border-top:1px solid #dfdfdf; padding-top:10px; margin-top:10px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* limit width and center page, used thruout the template to center the site */ .wrap-center { width:980px; margin-left: auto; margin-right:auto; } .center { text-align:center;} .vm { vertical-align:middle; } /* ======================= */ /* ==== HEADER SECTION === */ /* ======================= */ /* top bar uppermost bar styling */ #top-bar { background: #03091c; height:40px; color:#d2d2d2; font-size:11px; } #top-bar ul { padding-top:10px; } #top-bar ul li { float: left; font-size: 11px; background:url(images/top-bar-menu-divider.png) right no-repeat; padding-left:10px; padding-right:10px; padding-top:2px; } #top-bar .last { background:transparent; } #top-bar .welcome { padding-top:12px; } #top-bar a { color:#d2d2d2; text-decoration:none; } #top-bar a:hover { color:#fff; text-decoration:none; } /* logo and menu */ #menu-logo { height:85px; margin:0px; padding:0px; position:relative; z-index:999; } #logo { width:241px; float:left; padding-top:13px; } #logo h1 { margin: 0; } /* main menu - jquery dropmenu */ #dropmenu { float:right; height:85px; } #dropmenu span { display: block; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 7px 14px; } #dropmenu .active { color:#fff; text-decoration:none; } #dropmenu .active span { background: #345d7c; } #dropmenu .active a, #dropmenu .active a:hover { background: none !important; color:#fff; text-decoration:none; } #dropmenu { float:right; text-align:right; } #dropmenu { height:85px; margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; z-index:300; } #dropmenu a { height:55px; padding-top:27px; padding-bottom:0px; display:block; color:#badae6; background:url(images/menu-divider.png) right no-repeat; background-position:100% 50%; text-decoration:none;} #dropmenu a:hover { color:#fff; } #dropmenu li { float:left; position:relative; text-align:center; font-size: 16px; } #dropmenu ul { position:absolute; display:none; width:184px; top:70px; left:-1px; background:url(images/nav-child-top.gif) no-repeat top center; padding-top:7px; } #dropmenu ul li { font-size:14px; text-transform: capitalize; text-align:left; line-height:18px; white-space:nowrap; } #dropmenu ul a { background: transparent url(images/nav-child-bg.png); padding-top:10px; padding-bottom:10px; border-left:1px solid #7ba63d; border-right:1px solid #7ba63d; border-bottom:1px solid #7ba63d; } #dropmenu li ul a { width:150px; height:auto; float:left; } #dropmenu ul ul { top:auto; background:transparent url(images/nav-grandchild-top.gif) repeat-x; padding-top:1px; } #dropmenu li ul ul { top:-1px; left:183px; margin:0px 0 0 0px; } #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display:none; } #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display:block; } #dropmenu .last a { background:transparent; } #dropmenu li.active li a { color:#ffffff !important; } #dropmenu li.active li a:hover { color:#a5c762 !important; } /* homepage header slideshow area */ #heading { background: transparent url(images/heading-background-overlay.png) repeat-x; } #heading .nav-span { background: transparent url(images/nav-span-background.png) repeat-x; width:100%; height:65px; position:absolute; top:471px; left:0px; z-index:11; } #heading .light-span { background: transparent url(images/slide-light.png) no-repeat; background-position:88% 0%; height:396px; } /* set the heights for home and inner headings */ .heading-inner { height:153px; overflow:hidden; } .heading-home { height:396px; overflow:hidden; } /* style the inner contents for heading */ #heading .page-description{ width:616px; padding-right:25px; color:#ffffff; font-size:14px; line-height:21px; background: url(images/heading-inner-divider.png) right no-repeat; padding-top:10px; height:80px; overflow:hidden; margin-top:30px;} #heading .page-title { width:297px; text-align:center; color:#ffffff; height:auto; overflow:hidden; } #heading h1 { letter-spacing:-0.03em; font-size:37px; line-height:40px; } /* center inner page title vertically automaticly */ .heading-inner .cont-vert-title { float:left; width:297px; } .heading-inner .outer-vert-title { display: table; height: 153px; width: 297px; overflow: hidden; } .heading-inner .inner-vert-title { display: table-cell; vertical-align: middle; } /* center inner page description vertically automaticly */ .heading-inner .cont-vert-description { width:641px; float:left;} .heading-inner .outer-vert-description { display: table; height: 130px; width: 641px; overflow: hidden; } .heading-inner .inner-vert-description { display: table-cell; vertical-align: middle; } /* heading homepage jquery cycle slideshow settings */ #slideshow { width:940px; height:396px; z-index:10; overflow:hidden; } #slideshownav { width:820px; height:74px; font-family: Arial; font-size:16px; font-weight:bold; position:absolute; top:-8px; left:0px; z-index:16; text-transform:uppercase; } #slideshownav li { background:url(images/slide-nav-divider.png) no-repeat right; height:74px; padding:0px; margin:0px; display:block; float:left;} #slideshownav li:hover { background:url(images/slide-nav-divider.png) no-repeat right; height:74px; padding:0px; margin:0px; display:block; } #slideshownav a { width:125px; height:44px; display:block; float:left; padding-top:35px; padding-left:10px; padding-right:10px; text-align:center; color:#ffffff; text-decoration:none; } #slideshownav a.activeSlide { width:125px; height:44px; background:url(images/slideon.png) no-repeat top center; display:block; color:#ffffff; } #slideshownav li.activeSlide a { width:125px; height:44px; background:url(images/slideon.png) no-repeat top center; display:block; color:#ffffff; } #slideshownav li.last { background:url(images/slide-nav-no-divider.png) no-repeat top center; height:74px; padding:0px; margin:0px; display:block; } #slideshownav li.last:hover { background:url(images/slide-nav-no-divider.png) no-repeat top center; height:74px; padding:0px; margin:0px; display:block; } #slideshownav li.last a { width:125px; height:44px; display:block; float:left; padding-top:35px; padding-left:10px; padding-right:10px; text-align:center; color:#ffffff; text-decoration:none; } #slideshownav li.last a.activeSlide { width:125px; height:44px; background:url(images/slideon.png) no-repeat top center; display:block; color:#ffffff; } #slideshownav a:focus { outline: none; } #slideshownav img { border: none; } #slidecontrol { width:140px; text-align:right; padding-top:0px; } #slidecontrol td { vertical-align:top; padding-left:10px; padding-right:10px; } #slidecontrol .slidearrow, #slidecontrol #button_pause, #slidecontrol #button_play { padding-top:27px; } /* setting if we use slide with image to the right */ #slideshow .slide-imageright { width:940px; } #slideshow .slide-imageright .text { color:#ffffff; float:left; width:450px; margin-right:30px; padding-top:40px; } #slideshow .slide-imageright .text h1 { color:#ffffff; margin-top:0px; margin-bottom:18px; font-size:30px; line-height:34px; } #slideshow .slide-imageright .text p { color:#ffffff; font-size:14px; line-height:20px; margin-bottom:20px; } #slideshow .slide-imageright .image { float:right; width:428px; padding-top:25px; padding-right:20px; } /* setting if we use slide with image to the left - optional note that you will have to edit .light-span to face to the left aswell */ #slideshow .slide-imageleft { width:940px; } #slideshow .slide-imageleft .text { color:#ffffff; float:right; width:450px; margin-left:30px; padding-top:40px; } #slideshow .slide-imageleft .text h1 { color:#ffffff; margin-top:0px; margin-bottom:18px; font-size:30px; line-height:34px; } #slideshow .slide-imageleft .text p { color:#ffffff; font-size:14px; line-height:20px; margin-bottom:20px; } #slideshow .slide-imageleft .image { float:left; width:428px; padding-top:25px; padding-left:20px; } /* setting if we use half bullet lists with checkmarks for homepage heading/slideshow */ #slideshow .slide ul.half { list-style:none; margin-bottom:15px; margin-left:0px; } #slideshow .slide ul.half li { background:url(images/check-white.gif) no-repeat; background-position:2px 2px; padding-left:25px; color:#ffffff; font-size:14px; line-height:19px; margin-bottom:5px; float:left; width:200px;} /* setting if we use normal bullet lists on homepage heading/slideshow */ #slideshow .slide ul { list-style:none; margin-bottom:15px; margin-left:0px; } #slideshow .slide ul li { background:url(images/dot.gif) no-repeat; background-position:2px 8px; padding-left:15px; color:#ffffff; font-size:14px; line-height:19px; margin-bottom:5px; width:430px;} #slideshow .slide ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* setting if we use slide with video in it*/ #slideshow .slide-video { width:940px; } #slideshow .slide-video .text { color:#ffffff; float:left; width:420px; margin-right:30px; padding-top:40px; } #slideshow .slide-video .text h1 { color:#ffffff; margin-top:0px; margin-bottom:18px; font-size:30px; line-height:34px; } #slideshow .slide-video .text p { color:#ffffff; font-size:14px; line-height:20px; margin-bottom:20px; } #slideshow .slide-video .video { background: url(images/slides/video-frame.png) no-repeat; float:right; width:447px; height:281px; padding-top:10px; padding-left:11px; margin-top:20px;} /* ============================= */ /* ==== MAIN CONTENT SECTION === */ /* ============================= */ /* make the content background span a nice white background with some shade */ #content-area { padding-top:20px; padding-bottom:25px; } /* main column set width */ #content { float: left; width: 612px; } #content-wide { width: 966px; margin: 0 auto; } #content, #content-wide { line-height: 20px; min-height:200px; } /* one half of main column */ #content .onehalf { width:295px; float:left; margin-right:20px; margin-bottom:15px; } #content .onehalf-last { width:295px; float:left; margin-right:0px; margin-bottom:15px;} /* one third of main column */ #content .onethird { width:190px; float:left; margin-right:20px; margin-bottom:15px;} #content .onethird-last { width:190px; float:left; margin-right:0px; margin-bottom:15px;} /* one fourth of main column */ #content .onefourth { width:138px; float:left; margin-right:20px; margin-bottom:15px;} #content .onefourth-last { width:138px; float:left; margin-right:0px; margin-bottom:15px;} /* one fourth of whole width */ #content-wide .onefourth { width:220px; float:left; margin-right:20px; margin-bottom:15px;} #content-wide .onefourth-last { width:220px; float:left; margin-right:0px; margin-bottom:15px;} /* one third of whole width */ #content-wide .onethird { width:295px; float:left; margin-right:20px; margin-bottom:15px; } #content-wide .onethird-last { width:295px; float:left; margin-right:0px; margin-bottom:15px; } /* one half of whole width */ #content-wide .onehalf { width:460px; float:left; margin-right:20px; margin-bottom:10px; } #content-wide .onehalf-last { width:460px; float:left; margin-right:0px; margin-bottom:10px; } /* main elements styles, this applies to the whole content area home and inner, some of them will get overriden by more particular styles, note that the inner sidebar gets it's own treatment */ .main { margin-top: 0px; font-size:13px; } h1 { color: #444444; font-size: 200%; line-height: 1.2; font-weight: normal; margin-bottom:15px; } h1 a { color: #444444; text-decoration:none; } h1 a:hover { color: #ec8601; text-decoration:none;} h2 { font-size: 170%; padding: 10px 0 5px; padding-bottom: 10px; } h3 { color: #396485; font-size: 20px; font-weight: bold; margin-bottom: 5px; padding: 10px 0 5px; } h4 { color: #396485; font-size: 15px; line-height:19px; font-weight: bold; margin-bottom: 5px; padding: 10px 0 0px; } h5 { font-size: 100%; margin-bottom: 10px; padding: 10px 0 5px; } h6 { font-size: 80%; margin-bottom: 10px; padding: 5px 0 5px; } h11 { color: #396485; font-size: 170%; padding: 10px 0 5px; padding-bottom: 10px; } h12 { color: #000000; font-size: 170%; padding: 10px 0 5px; padding-bottom: 10px; } .main p { line-height: 20px; margin-bottom: 10px; } .main img.alignnone { background: #fff; border: 1px solid #dbdbdb; padding: 5px; } .main img.alignleft { float: left; border: 1px solid #dbdbdb; margin: 10px 25px 15px 0; padding: 5px; } .main img.alignright { float: right; border: 1px solid #dbdbdb; margin: 10px 0 15px 25px; padding: 5px; } .main ul { margin-left:0px; padding-left:10px; margin-bottom: 20px; } .main ol { margin-left: 20px; margin-bottom: 20px; } .main ul { list-style: none; } .main ol { list-style: decimal; } .main ul li, .main ol li { line-height: 20px; margin-bottom: 5px; } .main ul li { background:url(images/bullet.jpg) no-repeat; background-position:0px 8px; padding-left:15px; } .main a { text-decoration:underline; } .main a:hover { text-decoration:none; } .main blockquote { font-style: italic; line-height:22px; background: #e1e1e1 url(images/quotes.png) no-repeat top left; background-position: 15px 20px; color:#595959; margin:5px 0px; margin-bottom:0px; padding: 15px 15px 25px 60px; } .main .blockquote-name { background: url(images/quote-curly.jpg) no-repeat top left; height:20px; padding-right:25px; padding-left:25px; font-weight:bold; display:block; margin-top:0px; margin-bottom:15px; padding-top:5px; float:right; margin-left:56px; margin-right:0px; } .main .smalltext { font-size:10px; line-height:16px; } /* icon feature/service list, point list on homepage */ .homepage-icons { width:671px; float:left; margin-right:35px; font-size:12px; } .homepage-icons ul.imagelist-half { list-style:none; margin-left:0px; margin-bottom:10px; margin-top:-10px; padding-left:0px; clear:both; display:table;} .homepage-icons ul.imagelist-half .icon { display:table-cell; float:left; width:53px; margin:0px 10px 10px 0; padding:5px; vertical-align:top; } .homepage-icons ul.imagelist-half li { background:transparent; display:table-row; float:left; width:313px; margin-top:0px; margin-bottom:0px; margin-left:0px; border-top:1px solid #dfdfdf; margin-right:30px; padding-top:15px; padding-left:0px; padding-bottom:15px; height:auto; } .homepage-icons ul.imagelist-half .text { display:table-cell; line-height:22px; vertical-align:top; } .homepage-icons ul.imagelist-half .text p { margin-bottom:0px; line-height:22px; } .homepage-icons ul.imagelist-half .last { margin-right:0px; } .homepage-icons ul.imagelist-half .text h4 { color: #396485; font-size:22px; letter-spacing: -1px; margin-bottom:6px; margin-top:0px; padding-top:0px;} .homepage-icons ul.imagelist-half .noborder { border:none; } /* homepage rightside banners */ .homepage-banners { width:300px; float:left; } .homepage-banners img { margin-bottom:15px; } /* homepage long text box */ .homepage-longbox-top-right { background: url(images/boxes/longbox_02.png) no-repeat top right; height:8px; } .homepage-longbox-top-left { background: url(images/boxes/longbox_01.png) no-repeat top left; height:8px; } .homepage-longbox-bottom-right { background: url(images/boxes/longbox_04.png) no-repeat bottom right; min-height:130px; } .homepage-longbox-bottom-left { background: url(images/boxes/longbox_03.png) no-repeat bottom left; min-height:130px; } .homepage-longbox-bottom-right .pad { padding-left:24px; padding-right:250px; padding-top:12px; padding-bottom:20px; } .homepage-longbox h3 { font-size:22px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:10px; font-weight:bold; } .homepage-longbox { line-height:19px; margin-bottom:20px; } .homepage-longbox a { color:#ec8601; text-decoration:underline; } .homepage-longbox a:hover { color:#ec8601; text-decoration:none; } /* homepage portfolio item carousel */ .homepage-carouselbox { background:url(images/custom/featured-bg.jpg) no-repeat top center; width:672px; height:265px; } .homepage-carouselbox h3 { font-size:22px; padding-top:0px; margin-top:0px; margin-bottom:8px; font-weight:bold; color: #5a5a5a; letter-spacing: -1px; } .homepage-carouselbox .pad { padding-left:18px; padding-right:20px; padding-top:20px; } .homepage-carouselbox a.viewmore { text-decoration:none !important; text-transform:uppercase; } #portfolio-carousel { width: 650px; position: relative; padding-right:20px; padding-left:17px; } #portfolio-carousel .wrapper { width: 650px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: auto; min-height: 235px; margin: 0px; position: absolute; top: 0; } #portfolio-carousel ul a img { } #portfolio-carousel .wrapper ul { width: 9999px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; position: absolute; top: 0; } #portfolio-carousel ul li { background:transparent; display:block; float:left; height: 200px; width: 200px; padding: 0 20px 0 0; margin-left:0px; } #portfolio-carousel .arrow { display: block; height: 15px; width: 8px; text-indent: -9999px; position: absolute; cursor: pointer; top:-35px; } #portfolio-carousel .forward { background:url(images/portfolio/forward.png) no-repeat; right: 26px; } #portfolio-carousel .back { background:url(images/portfolio/back.png) no-repeat; right: 56px; } #portfolio-carousel .forward:hover { background:url(images/portfolio/forward-hover.png) no-repeat; } #portfolio-carousel .back:hover { background:url(images/portfolio/back-hover.png) no-repeat; } /* how portofolio items are displayed in carousel */ #portfolio-carousel .portfolio-carousel-item .image { position:relative; } #portfolio-carousel .portfolio-carousel-item .image a { display:block; width:191px; height:123px; border:4px solid #acc0d0; margin-bottom:10px; } #portfolio-carousel .portfolio-carousel-item .image a:hover { display:block; border:4px solid #3e6d91; } #portfolio-carousel .portfolio-carousel-item .text { width:190px; float:left; } #portfolio-carousel .portfolio-carousel-item .text h4 { font-size:14px; font-weight: bold; line-height:17px; font-weight:bold; margin-bottom:3px; padding-top:0px; } #portfolio-carousel .portfolio-carousel-item .text h4 a { color: #3e6d91 !important; text-decoration:none !important; } #portfolio-carousel .portfolio-carousel-item .text p { margin-top:0px; margin-bottom:0px; font-size:11px; line-height:16px; color: #7c7c7c; } #portfolio-carousel .portfolio-carousel-item img.pthumb { position: absolute; left: 4px; top: 4px; z-index: 10; } #portfolio-carousel .portfolio-carousel-item img.poverlay { position: absolute; left: 4px; top: 4px; } #portfolio-carousel img.a { position: absolute; left: 4px; top: 4px; z-index: 10; } #portfolio-carousel img.b { position: absolute; left: 4px; top: 4px; } /* set the button widths so they fit nicely */ #portfolio-carousel .portfolio-carousel-item .view-details { width:120px !important; } #portfolio-carousel .portfolio-carousel-item .purchase { width:120px !important; } #portfolio-carousel .portfolio-carousel-item .view-details span { text-align:center; } #portfolio-carousel .portfolio-carousel-item .purchase span { text-align:center; } /* specialized lists with images or icons */ ul.imagelist { float:left; list-style:none; margin-left:0px; margin-top:10px; margin-bottom:10px; padding-left:0px; clear:both; } ul.imagelist li img { float:left; border:1px solid #dbdbdb; margin:10px 15px 15px 10px; padding:5px; } ul.imagelist li { background:url(images/imagelist-divider.png) no-repeat top center !important; padding-top:10px; margin-left:0px; margin-top:5px; padding-left:0px; clear:both; } ul.imagelist .contact-icons img { border:0px; padding:0px; margin:0px; vertical-align:middle; float:none; } ul.imagelist .contact-icons { font-size:11px; float:right;} ul.imagelist .contact-icons a { color:#4f97cf; display:inline; border-right:1px solid #cacaca; padding-right:10px; padding-left:5px; margin-right:10px; } ul.imagelist a { text-decoration:none; } ul.imagelist a:hover { text-decoration:none;} /* specialized lists with images or icons in half of the main column*/ ul.imagelist-half { list-style:none; margin-left:0px; margin-bottom:10px; margin-top:8px; padding-left:0px; clear:both; display:table; clear:both;} ul.imagelist-half .icon { display:table-cell; float:left; width:53px; margin:10px 10px 10px 0; padding:5px; } ul.imagelist-half li { background:transparent; display:table-row; display:block; float:left; width:295px; margin-top:2px; margin-bottom:0px; margin-left:0px; padding-left:0px; border-top:1px solid #dfdfdf; margin-right:20px; } ul.imagelist-half .text { display:table-cell; line-height:19px; } ul.imagelist-half .text p { line-height:19px; } ul.imagelist-half .text h4 { margin-bottom:4px; } ul.imagelist-half .last { margin-right:0px; } ul.imagelist-half a { text-decoration:none; } ul.imagelist-half a:hover { text-decoration:none;} ul.imagelist-half .noborder { border:none; } /* checklist for content area */ ul.checklist { list-style:none !important; margin-left:10px; } ul.checklist li { background: url(images/check.jpg) no-repeat; background-position:0px 2px; padding-left:24px; } /* content - portfolio listing filter */ ul#portfolio-filter { margin: 0px; padding: 0px; height:35px; padding-left:30px; line-height:35px; background: transparent url(images/portfolio/portfolio-category-underborder.png) bottom center no-repeat; } ul#portfolio-filter li { display: inline; padding-left:0px; margin-left:0px; background:transparent; } ul#portfolio-filter a { margin-right: 0px; padding-top:9px; padding-bottom:8px; padding-left:18px; padding-right:18px; background: #e2e2e2 url(images/portfolio/portfolio-category-tab-inactive.png) top repeat-x; color: #aaaaaa; font-weight: bold; text-decoration: none; text-align:center; border-right:1px solid #d5d5d5; border-left:1px solid #d5d5d5; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; } ul#portfolio-filter a:hover { padding-top:9px; padding-bottom:8px; background:#f2f2f2 url(images/portfolio/portfolio-category-tab-hover.png) top repeat-x; color: #717171; border-top:1px solid #d5d5d5; } ul#portfolio-filter a.current { padding-top:9px; padding-bottom:8px; background:#ffffff url(images/portfolio/portfolio-category-tab-active.png) top repeat-x; color: #2d6374; border-bottom:1px solid #ffffff; } /* display portfolio items */ ul#portfolio-list { margin: 0 0 0 0; padding: 0; list-style: none; } ul#portfolio-list li {display:block; float: left; overflow: hidden; padding-left:0px; margin-left:0px; background:transparent; } ul#portfolio-list li a { display: block; overflow: hidden;} ul#portfolio-list-with-sidebar { margin: 10px 0 0 0; padding: 0; list-style: none; } ul#portfolio-list-with-sidebar li { list-style: none; display: block; float: left; overflow: hidden; padding:0px; margin:0px; background:transparent; } ul#portfolio-list-with-sidebar li a { display: block; overflow: hidden; } ul#portfolio-list-with-sidebar .portfolio-item { padding-left:10px; padding-right:10px; margin-left:3px; margin-right:3px;} /* portfolio items */ .less-spacing { margin-left:3px; margin-right:3px; } .portfolio-item { display:block; float:left; width: 200px; padding: 0 0 30px 35px; overflow: hidden; } .portfolio-item:hover { display:block; float:left; } .portfolio-item img.pthumb { position: absolute; left: 4px; top: 4px; z-index: 10; } .portfolio-item img.poverlay { position: absolute; left: 4px; top: 4px; } .portfolio-item .image { position:relative; } .portfolio-item .image a { display:block; width:191px; height:123px; border:4px solid #d7d7d7; margin-bottom:10px; } .portfolio-item .image a:hover { display:block; border:4px solid #396485 !important; } .portfolio-item .text { width:200px; } .portfolio-item .text h4 { font-size:16px; line-height:19px; font-weight:bold; margin-bottom:1px; margin-top:0px; padding-top:0px; /* height:38px; overflow:hidden; */ } .portfolio-item .text h4 a { text-decoration:none; color: #e09900; } .portfolio-item .text p { margin-top:0px; margin-bottom:0px; font-size:12px; line-height:18px; } .portfolio-item .text .level { color: #3e6d91; text-transform: uppercase; display: block; font-size: 11px; } .portfolio-item .text .num { color: #656565; font-size: 12px; display: block; } .portfolio-item .price { width:57px; height:37px; overflow:hidden; float:right; background: url(images/portfolio/price-background.png) no-repeat; color:#ffffff; text-align:center; font-weight:bold; padding-top:20px; font-size:19px; } /* set the button widths so they fit nicely */ .portfolio-item .view-details { width:120px !important; } .portfolio-item .purchase { width:120px !important; } .portfolio-item .view-details span { text-align:center; } .portfolio-item .purchase span { text-align:center; } /* for items wich are not for sale eg. custom works */ .no-sale .text { float:none; width:280px; } /* portfolio item buttons limits, need these to make the fit correctly in the space allocated, also ie6 plays nasty if not */ .portfolio-button { margin-top:12px; } .portfolio-detail { width: 608px; background:#efefef; padding:2px; border:1px solid #c9c9c9; margin-bottom:10px; } .portfolio-detail-buttons { margin-bottom:20px; } .portfolio-detail-buttons .view-screenshots { width:199px !important; margin-right:7px; } .portfolio-detail-buttons .purchase { width:199px !important; margin-right:0px; } .portfolio-detail-buttons .view-live-preview { width:199px !important; margin-right:8px; } .portfolio-detail-buttons .view-screenshots span { text-align:center; } .portfolio-detail-buttons .purchase span { text-align:center; } .portfolio-detail-buttons .view-live-preview span { text-align:center; } /* blog related styling */ .post { margin-bottom:15px; } .post-title-slug { background:#ffffff; padding:1px; border:1px solid #c9c9c9; position:relative; margin-bottom:10px; } .post-image { width: 608px; height:230px; background:#efefef; } .post-image img { width: 608px; } /* force css to resize here can be removed */ .post-image-overlay { background:url(images/post-overlay.png) repeat-y; width:568px; height:69px; padding-left:20px; padding-right:20px; position:absolute; bottom:1px; } .post-image-single { width: 608px; background:#efefef; padding:2px; border:1px solid #c9c9c9; margin-bottom:10px; margin-top:10px; } .post-bottoms { border-bottom:1px solid #cfcfcf; padding-bottom:11px; background:url(images/post-divider-horz.png) no-repeat top; width:611px; padding-top:11px; } .post-meta { font-size: 85%; color: #999; margin-top: 2px;} .post-meta a { text-decoration:underline; } .post-meta a:hover { text-decoration:underline; } .post-image-overlay .cont-vert { float:left; width: 500px; } .post-image-overlay .outer-vert { display: table; height: 69px; width: 500px; overflow: hidden; } .post-image-overlay .inner-vert { display: table-cell; vertical-align: middle; } /* title over blog image */ .post-title-overimage { color:#ffffff; font-size:18px; line-height:20px; width:496px; text-decoration:none; } .post-title-overimage a, .post-title-overimage a:hover{ color:#ffffff; text-decoration:none; } /* comments over blog image */ .post-comments-overimage { background:url(images/post-comment-divider.png) left no-repeat; margin-top:10px; height:52px; padding-left:11px; float:right; } .post-comments-bubble { background: url(images/post-comment-bubble.png) no-repeat; margin-left:12px; margin-top:8px; width:42px; height:30px; padding-top:5px; color:#444444; font-weight:bold; text-align:center;} .post-comments-bubble a { color:#444444; text-decoration:none; } .post-comments-bubble a:hover { color:#444444; text-decoration:none; } /* section titles eg. comments on blog post*/ .section-title { color:#396485; font-weight:bold; font-size: 18px; line-height:19px;} h3.page-subtitle { font-weight: bold; color: #555555; font-size: 12px; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid #dbdbdb; margin-bottom: 15px; } h1.post-title { margin-bottom:4px; } /* comments bubble */ .post-comments { float: right; padding: 3px 0 7px 7px; } .post-comments a { padding: 3px 7px 7px 0; color: #000000; } .post-comments a:hover { color: #000000; } /* post navigation */ .post-navleft { float: left; margin: 0 15px 15px 0; } .post-navright { float: right; margin: 0 0 15px 15px; } .post-navigation div a { font-size: 12px; } /* comments */ #comments { background: url(images/imagelist-divider.png) no-repeat top center; padding-left:15px; padding-top:10px; padding-right:15px; margin-top:20px; } #comments h2 { padding:0px; margin-bottom:10px; } #comments ol { margin:0px; padding:0px; } #comments ol li { background: url(images/imagelist-divider.png) no-repeat top center; margin-top: 2px; padding: 15px 0; overflow: hidden; height: 1%; } .comment-gravatar { float: left; margin-right: 20px; background: #FFF; border: 1px solid #F0F0F0; padding: 3px; } .comment-data { float: left; width: 490px; } .comment-data p { margin-bottom: 6px; line-height: 19px; } .comment-author { font-weight: 700; margin-bottom: 3px; } .comment-meta { color: #666; margin-bottom: 5px; font-size: 85%; } .unapproved { font-style: italic; } #respond { background: url(images/imagelist-divider.png) no-repeat top center; margin-top:10px; padding:15px; } #respond h2 { padding:0px; margin-bottom:10px; } #comment-form { margin-top: 15px; margin-bottom: 10px; } #comment-form label { font-size: 90%; display: block; margin-bottom: 5px; font-weight:bold; } #comment-form input { width: 240px; margin-bottom: 10px; padding: 5px; border:1px solid #cdcdcd; background: url(images/input-background.png) top left no-repeat; } #comment-form textarea { width: 560px; height: 140px; margin-top: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; padding: 10px; border:1px solid #cdcdcd; background: url(images/textarea-background.png) top left no-repeat; } #comments a, #comment-form a { text-decoration:none; } #comments a:hover, #comment-form a:hover { text-decoration:none; } /* quote bar above footer on home */ .quote-bar { background:url(images/quote-bar-background.png) no-repeat; width:940px; height:48px; color:#ffffff; overflow:hidden; margin-bottom:15px; } .quote-bar .pad { padding-left:25px; padding-right:25px; padding-top:15px;} .quote-bar .quoteleft { font-size:17px; } .quote-bar .quoteright { font-weight:bold; font-size:18px; text-transform:uppercase; } .quote-bar a { color:#ffffff; text-decoration:none; } .quote-bar a:hover { color:#c1e78a; text-decoration:none; } /* faq accordion */ .accordion { margin-bottom:18px; margin-top:20px; margin-bottom:20px; } .accordion .accTogglerOpen { padding-top:10px; padding-left:2px; padding-right:95px; padding-bottom:15px; display: block; margin: 0px; cursor: pointer; font-size:16px; color:#2d6374; line-height:20px; background-color:#ffffff; background-image: url(images/faq-close.jpg); background-repeat: no-repeat; background-position: top right; } .accordion .accToggler { padding-top:10px; padding-left:2px; padding-right:95px; padding-bottom:15px; display: block; margin: 0px; cursor: pointer; font-size:16px; color:#2d6374; font-weight:normal; line-height:20px; background-color:#ffffff; background-image: url(images/faq-open.jpg); background-repeat: no-repeat; background-position: top right; } .accordion .accContent { margin: 0px; padding:5px 0px 10px 0px; line-height:19px; margin-bottom:10px; } .accordion .accContent p { margin: 0px; } /* success box */ .success { background:#d0eaa5 url(images/icons/success-check.png) no-repeat; background-position:15px 50%; border: 1px solid #a3c964; padding:22px; color:#5d792e; padding-left:80px; margin-top:10px; } .success a { text-decoration:underline; color:#5d792e; } .success a:hover { text-decoration:underline; color:#5d792e; } /* you have errors box */ .errors { background:#e9c8c1 url(images/icons/error-cross.png) no-repeat; background-position:15px 50%; border: 1px solid #e06e53; padding:22px; color:#b4381b; padding-left:80px; margin-top:10px; } .errors a { text-decoration:underline; color:#b4381b; } .errors a:hover { text-decoration:underline; color:#b4381b; } /* notification box */ .notification { background:#fff1a8 url(images/icons/notification-triangle.png) no-repeat; background-position:15px 50%; border: 1px solid #d7bd45; padding:22px; color:#b4381b; padding-left:80px; margin-top:10px; } .notification a { text-decoration:underline; color:#b4381b; } .notification a:hover { text-decoration:underline; color:#b4381b; } /* customer quote - applied in sidebar */ .customer-quote { font-size:14px; padding-bottom:20px; margin-bottom:20px; padding-top:0px; background:url(images/sidepanel-separator.jpg) no-repeat bottom left; } .customer-quote .quotes { background: url(images/quotes.png) no-repeat; width:32px; height:28px; float:left; margin-right:8px; margin-bottom:8px; margin-top:3px; } .customer-quote p { padding-left:0px; font-size:14px; line-height:20px; font-style:oblique; } .customer-quote .name { font-weight:bold; font-style:normal; font-size:12px; display:block; margin-top:8px; } .fadebox { background:url(images/boxes/carouselbox.png) no-repeat top center; width:942px; height:365px; } .fadebox .pad { padding-left:24px; padding-right:25px; padding-top:20px; } .fadebox .onethird { width:282px !important; } .fadebox .onethird-last { width:282px !important; } .fadebox ul { margin-left:20px; } .fadebox h2 { text-align:center; font-size:21px; line-height:24px; } /* pricing plans */ .plan { position: relative; width:285px; float:left; margin-top: 30px; background: #f9f9f9; border:1px solid #dbdbdb; padding:15px; margin-bottom:15px; } .last-plan { float:left; margin-right:0px;} .plan h3 { font-size:25px; text-transform:uppercase; margin-top:0px; margin-bottom:0px; line-height:22px; } .plan .plan-price { font-size:20px; color:#ec8601; } .plan .plan-price span { font-size:14px; color:#333333; } .plan .plan-details { list-style:none; margin-left:0px; } .plan .plan-details li { background:url(images/check.gif) no-repeat; background-position:0px 0px; padding-left:24px; } .plan .sign-up-now { width:210px; margin: 0 0 10px 17px; } .plan .sign-up-now span { text-align:center; } .plan hr { clear:both; } .featured-plan { background: #fff; margin-top: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 3; } .first-plan { border-radius: 10px 0 0 10px !important; -moz-border-radius: 10px 0 0 10px !important; -webkit-border-radius: 10px 0 0 10px !important; border-right: none; } .last-plan { border-radius: 0 10px 10px 0 !important; -webkit-border-radius: 0 10px 10px 0 !important; -moz-border-radius: 0 10px 10px 0 !important; border-left: none; } /* ================================ */ /* ==== SIDEBAR CONTENT SECTION === */ /* ================================ */ /* sidebar general settings... top fade out, bottom fadeout and a repeater background (the one that goes from top to bottom) */ #sidebar { float: right; width: 340px; } #sidebar { background:url(images/sidebar-repeater-background.jpg) repeat-y left; } #sidebar .sidebar-top { background: url(images/sidebar-top-background.jpg) top left no-repeat; min-height:100px; } #sidebar .sidebar-bottom { background: url(images/sidebar-bottom-background.jpg) bottom left no-repeat; padding-bottom:100px; } #sidebar blockquote { background:transparent; margin:5px 0; padding: 0px 0px 10px 0px; } #sidebar blockquote p { padding-left:0px; padding-right:0px; color:#595959; font-size:13px; line-height:18px; font-style: italic; } /* make sidebar textwidget go along for the ride */ #sidebar .textwidget { padding-left:25px; padding-right:25px; line-height:19px;} #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 { padding-left:25px; padding-right:25px; } #sidebar h3 { text-transform: capitalize; padding-bottom:15px; padding-top:20px; font-weight: bold; font-size:20px; line-height:22px; } #sidebar p { padding-left:25px; margin-top: 8px; line-height: 18px; } #sidebar a { color:#e09900; text-decoration:none; } #sidebar a:hover { color:#e09900; text-decoration:none; } /* searchform on the sidebar */ #searchform { background:url(images/sidepanel-search.jpg) bottom left no-repeat; height:53px; padding-left:25px; padding-top:20px;} #searchform .screen-reader-text { display:none; } #searchform #searchsubmit { background: url(images/buttons/button-search.jpg) no-repeat; width:30px; height:30px; border:none; padding:0; margin:0; } #searchform .field { width:130px; border-top:1px solid #d7d7d7; border-left: 1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; background:#ffffff; color:#575757; height:20px; padding-top:4px; padding-bottom:4px; padding-left:8px; } #searchform .advanced { font-size:11px; line-height:13px; text-transform:uppercase; width:70px; margin-left:10px;} #searchform .advanced a { text-decoration:none;} #searchform .advanced a:hover { text-decoration:underline;} /* class that wraps around all sidebar widgets, configuring lists for the categories and submenus */ .sidepanel { padding-bottom: 5px; font-size:14px; } .sidepanel .element-pad { padding-left:25px; padding-right:35px; } .sidepanel .active { padding-left:25px; padding-bottom:7px; padding-top:6px; background:url(images/sidepanel-cat-current.jpg) bottom left no-repeat; color:#ec8601; } .sidepanel .active a { color:#ec8601 !important; } /* make current selection stay lit */ .sidepanel .active a:hover { color:#ec8601 !important; } /* make current selection stay lit */ .sidepanel ul li { padding-left:25px; padding-right:25px; padding-bottom:7px; padding-top:6px; line-height:20px; background: url(images/sidepanel-separator.jpg) no-repeat bottom left; } .sidepanel ul li ul { padding-left:0px; padding-top:2px; } .sidepanel ul li ul li { background:transparent; font-size:13px; padding-left:10px; padding-bottom:5px; padding-top:4px; margin-bottom:0px; margin-left:0px; } .sidepanel ul li ul .active { padding-left:10px; padding-bottom:5px; padding-top:4px; background:transparent; color:#ec8601; } .sidepanel ul li ul li ul { padding-left:0px; padding-top:4px; } .sidepanel ul li ul li ul li { background: transparent url(images/corner-dots.png) no-repeat; background-position:0px 10px; font-size:13px; padding-bottom:5px; padding-top:4px; padding-left:12px; margin-bottom:0px; margin-left:0px; } .sidepanel ul li ul li ul .active { background: transparent url(images/corner-dots.png) no-repeat; background-position:0px 10px; padding-left:12px; padding-bottom:5px; padding-top:4px; color:#ec8601; font-style:italic; } .sidepanel li .active li a { color:#ec8601 !important; } /* make current selection stay lit */ .sidepanel li .active li a:hover { color:#ec8601 !important; } /* make current selection stay lit */ /* sidebar small round faded round boxes */ .sidepanel .sidebox { padding-left:25px; padding-right:25px; margin-bottom:15px; } .sidepanel .sidebox-top { background:url(images/boxes/sidebox-top.png) no-repeat top left; height:9px; } .sidepanel .sidebox-middle { background: url(images/boxes/sidebox-middle.png) repeat-y; width:240px; min-height:76px; } .sidepanel .sidebox-bottom { background:url(images/boxes/sidebox-bottom.png) no-repeat bottom left; height:8px; } .sidepanel .sidebox .pad { padding-left:15px; padding-right:15px; padding-top:10px; padding-bottom:10px; } .sidepanel .sidebox h1, .sidepanel .sidebox h2, .sidepanel .sidebox h3, .sidepanel .sidebox h4, .sidepanel .sidebox h5 { padding-left:0px !important; padding-right:0px !important; margin-top:0px; padding-top:0px;} .sidepanel .sidebox h4 { font-weight:bold; font-size:12px; line-height:17px; margin-bottom:2px; } .sidepanel .sidebox { font-size:12px; } .sidepanel .sidebox p { padding:0px !important; margin:0px !important; line-height:18px; } .sidepanel .sidebox .icon { width:44px; float:left; margin-right:10px; margin-bottom:10px; margin-top:5px; } .sidepanel .sidebox .text { float:left; width:142px; } /* sidebar map */ .sidepanel #map { display:none; } .sidepanel .border-image { border:1px solid #cccccc; background:#f6f9f3; padding:4px; margin-bottom:6px; } .sidepanel .caption { font-size:11px; color:#559ed6; text-transform:uppercase; } .sidepanel .caption a { text-decoration:none; } .sidepanel .caption a:hover { text-decoration:underline; } /* =============================== */ /* ==== FOOTER CONTENT SECTION === */ /* =============================== */ /* ====================== */ /* ==== FORMS SECTION === */ /* ====================== */ /* rest of the forms */ form ol.forms .inputError { border: 1px solid red; } form ol.forms .inputError:focus { border-color: #ffb250; } form ol.forms .inputError textarea:focus { border-color: #ffb250; } form .required { color:#ffb250; font-weight:normal; font-family:"Lucida Sans Unicode", Arial, sans-serif; } form .error { color: #f00; } form ol.forms { list-style: none; margin: 0; margin-top:20px; width: 100%; } form ol.forms li { margin-bottom: 15px; position: relative; width:auto; height:auto; } form ol.forms label { cursor: pointer; display: block; font-weight: bold; padding-right: 20px; width: 100px; margin-bottom:3px; } form input, form textarea, form select { border: 1px solid #cdcdcd; background: url(images/textarea-background.png) top left; font: inherit; padding: 5px 6px; width:auto; display: block; } form input:focus, form textarea:focus, form select:focus { border-color: #ffb250; } form input:hover, form textarea:hover, form select:focus { border-color: #ffb250; } form ol.forms li.screenReader { height:1px; margin-bottom: 0; } form ol.forms .inline { height:auto; width: auto; text-align:left; } form ol.forms .inline input { display: inline; float: left; width: auto; margin-right:10px; } form ol.forms .inline textarea { display: inline; float: left; width: auto; margin-right:10px; } form ol.forms .inline select { display: inline; float: left; width: auto; margin-right:10px; } form ol.forms .inline label { display: inline; float: left; width: auto;} form ol.forms .nostyle { border:0px; background:transparent; } form ol.forms h3 { margin-top:20px; margin-bottom:20px; padding:0px; padding-bottom:10px; border-bottom:1px solid #dbdbdb; } /* contact forms gets special treatment*/ .screenReader { left: -9999px; position: absolute; top: -9999px; } .contactThanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding:10px; } #contactForm ol.forms .inputError { border: 1px solid red; } #contactForm ol.forms .inputError:focus { border-color: #ffb250; } #contactForm ol.forms .inputError textarea:focus { border-color: #ffb250; } #contactForm .required { color:#ffb250; font-weight:normal; font-family:"Lucida Sans Unicode", Arial, sans-serif; } #contactForm .error { color: #f00; } #contactForm ol.forms { list-style: none; margin: 0; margin-top:20px; width: 100%; } #contactForm ol.forms li { float: left; margin-bottom:10px; position: relative; width: 50%; height:60px; } #contactForm ol.forms .textarea { height:160px; } #contactForm ol.forms label { cursor: pointer; display: block; float: left; font-weight: bold; padding-right: 20px; width: 100px; margin-bottom:3px; } #contactForm ol.forms input, #contactForm ol.forms textarea, #contactForm ol.forms select { border: 1px solid #cdcdcd; background: url(images/textarea-background.png) top left; font: inherit; padding: 6px; width: 274px; display: block; } #contactForm ol.forms textarea { clear:both; height: 120px; width: 580px; } #contactForm ol.forms input:focus, #contactForm ol.forms textarea:focus, #contactForm ol.forms select:focus { border-color: #ffb250; } #contactForm ol.forms input:hover, #contactForm ol.forms textarea:hover, #contactForm ol.forms select:focus { border-color: #ffb250; } #contactForm ol.forms li.screenReader { height:1px; margin-bottom: 0; } #contactForm ol.forms .inline { height:20px; padding-top:5px; padding-bottom:5px; width: 580px; text-align:left; } #contactForm ol.forms .inline input { display: inline; float: left; width: auto; } #contactForm ol.forms .inline label { display: inline; float: left; width: auto; } #contactForm ol.forms .nostyle { border:0px; background:transparent; } /* ======================== */ /* ==== BUTTONS SECTION === */ /* ======================== */ /* homepage in slide buttons */ a.btn-home-more { display:block; background:url(images/buttons/btn-home-more-off.png) top no-repeat; width:130px; height:32px; color:#ffffff; font-size:14px; padding-left:20px; padding-top:10px; margin-right:8px; text-decoration:none; } a.btn-home-more:hover { background:url(images/buttons/btn-home-more-on.png) top no-repeat; width:130px; height:32px; color:#ffffff; font-size:14px; padding-left:20px; padding-top:10px; text-decoration:none; } a.btn-home-check { display:block; background:url(images/buttons/btn-home-check-off.png) top no-repeat; width:180px; height:32px; color:#ffffff; font-size:14px; padding-left:20px; padding-top:10px; margin-right:8px; text-decoration:none; } a.btn-home-check:hover { background:url(images/buttons/btn-home-check-on.png) top no-repeat; width:180px; height:32px; color:#ffffff; font-size:14px; padding-left:20px; padding-top:10px; text-decoration:none; } /* form button */ .form-button-left { background:url(images/buttons/btn_big_orange_left.jpg) left no-repeat; height:34px; width:100px; text-align:right; margin-top:5px; margin-bottom:15px; } .form-button-right { background:url(images/buttons/btn_big_orange_right.jpg) right no-repeat; height:34px; width:auto; padding-left:15px; padding-right:25px; border:0px; margin:0px; color:#ffffff; font-size:13px; cursor:pointer; text-align:center; } /* buttons */ a.btn-big-grey{background: transparent url(images/buttons/btn_big_grey_right.jpg) no-repeat scroll top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 18px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;} a.btn-big-grey span {background: transparent url(images/buttons/btn_big_grey_left.jpg) no-repeat; display: block; line-height: 34px; padding: 0px 0 5px 18px;} a.btn-big-grey:hover {background: transparent url(images/buttons/btn_big_grey_righth.jpg) no-repeat scroll top right;} a.btn-big-grey:hover span{background: transparent url(images/buttons/btn_big_grey_lefth.jpg) no-repeat; color:#ffffff !important;} a.btn-new-grey{background: transparent url(images/custom/button-small.png) no-repeat scroll top left; width: 199px;display: block; float: left; height: 35px; margin-right: 6px; text-decoration: none; color: #3c3c3b; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;} a.btn-new-grey span {display: block; line-height: 35px; padding: 0px 0 5px 0; width: 199px !important;} a.btn-new-orange{background: transparent url(images/custom/button-small-yellow.png) no-repeat scroll top left; width: 199px;display: block; float: left; height: 35px; margin-right: 6px; text-decoration: none; color: #4b2e0c; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;} a.btn-new-orange span {display: block; line-height: 35px; padding: 0px 0 5px 0; width: 199px !important; } a.btn-big-orange {background: transparent url(images/buttons/btn_big_orange_right.jpg) no-repeat scroll top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 18px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;} a.btn-big-orange span {background: transparent url(images/buttons/btn_big_orange_left.jpg) no-repeat; display: block; line-height: 34px; padding: 0px 0 5px 18px;} a.btn-big-orange:hover {background: transparent url(images/buttons/btn_big_orange_righth.jpg) no-repeat scroll top right;} a.btn-big-orange:hover span{background: transparent url(images/buttons/btn_big_orange_lefth.jpg) no-repeat; color:#ffffff !important;} a.btn-small-grey {background: transparent url(images/buttons/btn_small_grey_right.jpg) no-repeat scroll top right; display: block; float: left; height: 26px; margin-right: 6px; padding-right: 12px; text-decoration: none; color: #5f5f5f; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal;} a.btn-small-grey span {background: transparent url(images/buttons/btn_small_grey_left.jpg) no-repeat; display: block; line-height: 26px; padding: 0px 0 5px 12px;} a.btn-small-grey:hover {background: transparent url(images/buttons/btn_small_grey_righth.jpg) no-repeat scroll top right;} a.btn-small-grey:hover span{background: transparent url(images/buttons/btn_small_grey_lefth.jpg) no-repeat; color:#5f5f5f !important;} a.btn-small-orange {background: transparent url(images/buttons/btn_small_orange_right.jpg) no-repeat scroll top right; display: block; float: left; height: 26px; margin-right: 6px; padding-right: 12px; text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal;} a.btn-small-orange span {background: transparent url(images/buttons/btn_small_orange_left.jpg) no-repeat; display: block; line-height: 26px; padding: 0px 0 5px 12px;} a.btn-small-orange:hover {background: transparent url(images/buttons/btn_small_orange_righth.jpg) no-repeat scroll top right;} a.btn-small-orange:hover span {background: transparent url(images/buttons/btn_small_orange_lefth.jpg) no-repeat; color:#ffffff !important;} .btn-arrow {margin-left: 10px;} .btn-no-margin {margin-right:0px !important;} /* ======================== */ /* ==== UPDATES 1.1 SECTION === */ /* ======================== */ .ar{ text-align:right !important;} .al { text-align:left !important; } .ac { text-align:center !important; } .smaller { font-size:70%; line-height:18px; } .ttable { border-spacing:0px; border:0px solid #dbdbdb; padding:1px;} .thead td { background:#efefef; color:#444444; font-size:16px; font-weight:normal; padding:10px; border-bottom:1px solid #dbdbdb; } .trow td { background:#ffffff; color:#444444; font-size:12px; font-weight:normal; border-bottom:1px solid #dbdbdb; padding:10px; vertical-align:middle; } .tfoot td { background:#efefef; background:#ffffff; color:#444444; font-size:18px; line-height:22px; font-weight:normal; padding:10px; vertical-align:middle; text-align:right; } .withborder td { border-bottom:1px solid #dbdbdb; } .nobackground td { background:#ffffff; } .cart-buttons { margin-top:15px; margin-bottom:10px; } .box { border:1px solid #dbdbdb; padding:15px; } .box-top { border-top:1px solid #dbdbdb; border-left:1px solid #dbdbdb; border-right:1px solid #dbdbdb; padding-left:15px; padding-right:15px; padding-top:10px; } .box-bottom { border-bottom:1px solid #dbdbdb; border-left:1px solid #dbdbdb; border-right:1px solid #dbdbdb; padding-left:15px; padding-right:15px; padding-bottom:10px; } .box-middle { border-left:1px solid #dbdbdb; border-right:1px solid #dbdbdb; padding-left:15px; padding-right:15px; } .box-set-height { height:220px; } form table td { vertical-align:middle; padding:4px; } #button_play, #button_pause { background:transparent; cursor:pointer; } /* ------------------------------------------------------------------------------------------------------------------------------------------ */ #header-large { background: url(images/custom/header-large-bg.jpg) top center repeat-x; height: 398px; } #header { background: url(images/custom/header-bg.jpg) top center repeat-x; height: 105px; } /* Banner --------------------------------------------------------------------------------------------------------------------------------------------- */ #banner .banner { width: 980px; height: 303px; margin: 0 auto; } #banner .large-resume { background: url(images/custom/banner.jpg) bottom right no-repeat; } #banner h1 { font-size: 36px; line-height: 40px; color: #fff; letter-spacing: -1px; margin: 0 0 8px 0; padding-top: 20px; width: 430px; font-weight: bold; } #banner h2 { color: #fff; font-size: 20px; line-height: 26px; margin: 0 0 10px 0; width: 390px; font-weight: normal; letter-spacing: -1px; } #view-button { display: block; background: url(images/custom/view-our-templates.png); width: 306px; height: 56px; overflow: hidden; text-indent: -9999px; } /* Homepage --------------------------------------------------------------------------------------------------------------------------------------------- */ .homepage-testimonials { float: right; width: 252px; font-size: 12px; margin-top: -6px; } .homepage-testimonials h4 { color: #e09900; font-size: 22px; font-weight: bold; margin-bottom: 12px; } .homepage-testimonials h4 .more { float: right; text-decoration: underline; color: #e09900; font-size: 12px; font-weight: normal; } .homepage-testimonials .testimonial { background: url(images/custom/testimonial-top.png) top left no-repeat; color: #675132; line-height: 22px; width: 218px; padding: 13px 17px 4px 17px; } .homepage-testimonials .author { background: url(images/custom/testimonial-bottom.png) top left no-repeat; width: 190px; padding: 20px 0 0 62px; color: #888888; } .homepage-testimonials .author strong { color: #000; } /* Heading --------------------------------------------------------------------------------------------------------------------------------------------- */ #new-heading { margin: -8px 0 20px 0; } #new-heading h1 { font-size: 37px; color: #3e6d91; font-weight: bold; margin-bottom: 6px; letter-spacing: -1px; } #breadcrumb { height: 22px; color: #5b5b5b; font-size: 12px; padding-left: 0 !important; } #breadcrumb li { float: left; padding-left: 0 !important; padding-right: 15px; background: url(images/custom/breadcrumb-divider.png) right center no-repeat; } #breadcrumb a { color: #e09900; text-decoration: underline; } #breadcrumb li.last { background: none; } /* Templates --------------------------------------------------------------------------------------------------------------------------------------------- */ #content-wide ul#portfolio-list li { width: 235px; } #categories { width: 250px; float: left; background: url(images/custom/sidebar-left.jpg) 43px 0 no-repeat; min-height: 543px; } #categories ul { padding: 0; } #categories li { background: url(images/custom/categories-divider.png) bottom center no-repeat; } #categories li a { display: block; font-weight: bold; font-size: 15px; line-height: 18px; padding: 11px 14px; color: #5d5d5d; text-decoration: none; } #categories li a:hover { color: #3E6D91; } #categories li.active a, #categories li.active a:hover { background: url(images/custom/categories-active.png) top left no-repeat; color: #fff; } #pager { clear: both; height: 25px; padding: 0; margin: 0; position:relative; } #pager ul { margin: 0 auto; float: left; position: relative; left: 50%; text-align: center; } #pager li { float: left; margin-right: 5px; padding: 0 !important; background: none !important; position: relative; right: 50%; } #pager li a { display: block; padding: 2px 9px; font-weight: bold; color: #fff; background: #3e6d91; border: 1px solid #3e6d91; font-size: 14px; text-decoration: none; } #pager li.active a, #pager li.active a:hover { background: #f1f1f1; border: 1px solid #cfcfcf; color: #737373; } #pager li a:hover { background: #315b7b; } /* Template Details --------------------------------------------------------------------------------------------------------------------------------------------- */ /* Content */ .similar-templates { margin-right: -20px; } .similar-templates .portfolio-item { padding: 0 8px 0 0 !important; } .similar-templates .portfolio-item .image a { display:block; width:187px; height:auto; border:4px solid #d7d7d7; margin-bottom:10px; } .resume-toolbar { height: 22px; background: #727272; padding: 5px; font-size: 12px; width: 604px; } .resume-toolbar-left { float: left; } .resume-toolbar-left a { float: left; text-decoration: none; font-weight: bold; display: block; color: #e4e4e4; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-right: 5px; line-height: 21px; padding: 0 25px 1px; } .resume-toolbar-left a:hover, .resume-toolbar-left a.active { background: #555555; } .resume-toolbar-left a.disabled { background: none; color: #b6b6b6; cursor: default; } .resume-toolbar-right { float: right; background: #555555; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-weight: bold; color: #e4e4e4; padding: 0 4px; } .resume-toolbar .arrow-left, .resume-toolbar .arrow-right { width: 17px; height: 16px; text-indent: -999px; overflow: hidden; display: block; float: left; margin: 3px; background: url(images/custom/pager-arrows.png) bottom left no-repeat; } .resume-toolbar .arrow-left:hover { background-position: bottom left; } .resume-toolbar .arrow-right { background-position: bottom right; } .resume-toolbar .arrow-right:hover { background-position: bottom right; } .resume-toolbar #resume-toolbar-page { float: left; display: block; line-height: 21px; padding: 0 8px 1px; } .resume-toolbar .arrow-left.disabled, .resume-toolbar .arrow-left.disabled:hover { background-position: top left; cursor: default; } .resume-toolbar .arrow-right.disabled, .resume-toolbar .arrow-right.disabled:hover { background-position: top right; cursor: default; } .resume { width: 612px; border: 1px solid #C9C9C9; margin-bottom: 10px; } .resume div { padding: 30px 42px 0 41px; border: 2px solid #efefef; background: #fff; } .resume img { display: block; } #disabled-area .resume div { height: 340px; overflow-y: scroll; } #disabled-white-overlay { background: url(images/custom/disabled-white.png); position: absolute; z-index: 4; } #disabled-lined-overlay { background: url(images/custom/disabled.png); position: absolute; z-index: 5; } /* Sidebar - Normal */ #sidebar.detail { margin-top: 45px; } #sidebar.detail .sidepanel p { line-height: 22px; } .detail .sidepanel { line-height: 22px; font-size: 13px; background: url("images/sidepanel-separator.jpg") bottom left no-repeat; padding: 25px 0; } #sidebar .sidepanel a { text-decoration: underline; } #sidebar h2 { font-size: 26px; letter-spacing: -1px; margin: 0 0 -4px 0; color: #3e6d91; font-weight: bold; padding: 0 0 0 25px; } #sidebar .level { color: #3e6d91; text-transform: uppercase; font-size: 11px; } #sidebar .btn-star-grey, #sidebar .btn-star-yellow, #sidebar .btn-star-grey:hover, #sidebar .btn-star-yellow:hover { display: block; background: url(images/custom/button.png) top left no-repeat; width: 245px; height: 43px; margin-bottom: 12px; color: #3c3c3b; text-decoration: none !important; text-align: center; line-height: 43px; font-weight: bold; font-size: 16px; margin-left: 25px; } #sidebar .btn-star-yellow, #sidebar .btn-star-yellow:hover { background: url(images/custom/button-yellow.png) top left no-repeat; color: #4b2e0c; } #sidebar p.small { font-size: 11px; padding-left: 35px; line-height: 15px !important; } #sidebar .ad { display: block; margin-bottom: 16px; margin-left: 25px; } /* Sidebar - Join */ #sidebar.join { margin-top: 22px; } #sidebar.join .sidepanel { font-size: 13px; padding-left: 25px; padding-top: 10px; } #sidebar.join p { padding: 0 0 8px 11px; } #sidebar.join h2 { font-size: 42px; background: url(images/custom/sidebar-arrow.png) left center no-repeat; padding: 0 0 0 51px; font-weight: bold; letter-spacing: -2px; margin: 0 0 0 -42px; color: #000; } #sidebar.join h3 { font-size: 22px; color: #e09900; padding: 0 0 0 51px; margin: 0 0 16px -42px; letter-spacing: -1px; text-transform: none; } #sidebar.join a { text-decoration: underline; } form.custom td { vertical-align: top; } form.custom label { font-weight: bold; display: block; font-size: 13px; padding: 3px 6px 6px; } form.custom input, form.custom select { background: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } form.custom .field { background: #fff; border: 1px solid #CDCDCD; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 8px 4px 10px; font-size: 11px; line-height: 14px; width: 255px; } form.custom .field span { font-size: 13px; font-weight: bold; color: #c68700; display: block; padding: 3px 0; } form.custom .field table td { padding: 3px 0 6px 3px; } form.custom .field table table td { padding: 8px 2px 0 0; } form.custom .field table table strong { font-size: 13px; line-height: 16px; padding-top: 3px; display: block; } form.custom .field table table td small { font-weight: normal; font-size: 11px; color: #c80000; } form.custom .button { float: left; display: block; background: url(images/custom/button-right.png) top right no-repeat; padding-right: 3px; height: 35px; } form.custom .button input { height: 35px; border: none; background: url(images/custom/button-left.png) top left no-repeat; padding-left: 9px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; font-size: 16px; font-weight: bold; color: #4b2e0c; cursor: pointer; } /* Footer --------------------------------------------------------------------------------------------------------------------------------------------- */ #footer { clear: both; background: url(images/custom/footer-bg.jpg) top center repeat; height: 100px; } #footer-2 { background: url(images/custom/footer-top.png) top center no-repeat; padding-top: 36px; color: #eae9e9; font-weight: bold; font-size: 13px; height: 64px; } #footer-3 { width: 960px; height: 40px; margin: 0 auto; padding-top: 24px; } #footer-left { float: left; } #footer-right { float: right; } #footer li { float: left; background: url(images/custom/footer-divider.png) right center no-repeat; } #footer li.last { background: none; } #footer li a { dispay: block; padding: 5px 16px; color: #fff; text-decoration: none; } #footer li.last a { padding-right: 0; } /* Lightbox --------------------------------------------------------------------------------------------------------------------------------------------- */ .pp_pic_holder { border: 7px solid #9dbdd5; } .ppt, .pp_description { display: none !important; } div.light_square .pp_content_container .pp_close { top: -39px; right: -20px; position: absolute; width: 30px; height: 30px; background: url(images/custom/lightbox-close.png) top left no-repeat; } .pp_content { margin-bottom: -20px; } #purchase-or-upgrade { background: url(images/custom/lightbox-or.png) center center no-repeat; width: 635px; height: 180px; } #purchase-or-upgrade .left-panel { float: left; width: 340px; } #purchase-or-upgrade .right-panel { float: right; width: 340px; } #purchase-or-upgrade h2 { color: #3e6d91; font-size: 32px; line-height: 34px; letter-spacing: -1px; text-align: center; font-weight: bold; margin-bottom: 10px; } #purchase-or-upgrade p { text-align: center; font-size: 12px; line-height: 20px; color: #5b5b5b; padding: 0 10px; } #purchase-or-upgrade a.button-yellow { display: block; background: url(images/custom/button-right.png) top right no-repeat; padding-right: 5px; height: 35px; text-decoration: none; width: 209px; margin: 19px auto 0; } #purchase-or-upgrade a.button-yellow span { height: 35px; border: none; background: url(images/custom/button-left.png) top left no-repeat; line-height: 35px; padding-left: 9px; width: 200px; display: block; font-size: 16px; font-weight: bold; color: #4b2e0c; text-align: center; } /**Banners **/ .bannerHolder{ } .bannerHolder li{ /* Hiding the bullets of the li elements: */ list-style:none; display:inline; padding: 0px 0px 0px 0px; } .banner1{ /* The banner divs */ position:relative; width:244px; height:87px; overflow:hidden; float:left; margin:5px; } .banner1 img{ /* The banner divs */ display:block; border:none; } .banner1 div{ /* The dark animated divs */ position:absolute; z-index:100; background-color:#222; width:250px; height:80px; cursor:pointer; /* Setting a really big value for border-radius will make the divs perfect circles */ -moz-border-radius:250px; -webkit-border-radius:250px; border-radius:250px; } /* Positioning the animated divs outside the corners of the visible banner area: */ .banner2 .cornerTL{ left:-100px;top:-100px; } .banner1 .cornerTR{ right:-100px;top:-100px; } .banner1 .cornerBL{ left:-100px;bottom:-100px; } .banner1 .cornerBR{ right:-100px;bottom:-100px; } .banner1 p{ /* The "Visit Company" text */ display:none; /* hidden by default */ left:0; top:57px; width:100%; z-index:200; position:absolute; font-family:Tahoma, Arial, Helvetica, sans-serif; color:white; font-size:11px; text-align:center; cursor:pointer; } .bannerHolder { margin-left: 25px;overflow: hidden; } /**============Sitemap section============**/ .content { background-color: #F0F9FD; border-collapse: collapse; margin-left: auto; margin-right: auto; margin-top: 0; text-align: left; width: 966px; padding-bottom: 16px; padding-top: 16px; } /*---------------------SITE MAP---------------------*/ .sitemap .content { padding-top: 16px; padding-bottom: 16px; } .sitemap_box { width: 900px; margin: 0 23px 3px 23px; padding: 11px 14px; background-color: #ffffff; display: inline-block; } .sitemap_box:last-child { margin-bottom: 0; } .sitemap_box a.head { font-weight: bold; color: #3F89C3; font-size: 16px; float: left; margin: 0; display: block; } .sitemap_box a.head:hover { text-decoration: underline; color: #7CC5FF; } .sitemap_box ul { display: block; list-style: none; float: left; width: 200px; margin-top: 5px; } .sitemap_box ul.first { margin-left: 40px; } .sitemap_box ul li { background: url('images/marker_blue.png') no-repeat left 8px; padding-left: 15px; } .sitemap_box ul a { color: #0E4B8B; font-size: 12px; font-weight: bold; cursor: pointer; } .choose{ width:960px; overflow:hidden; } .why_choose{ padding: 40px 60px 0 30px; } .why_choose h1 { color: #000000; font-family: 'Droid Sans',sans-serif; font-size: 38px; font-weight: normal; letter-spacing: -1px; margin: 0 0 40px; padding-top: 0; text-align: center; } .circle_area { width: 821px; } .circle_area_left{ float: left; margin-left: 30px; width: 380px; } .circle { background: none repeat scroll 0 0 #3A8E42; border-radius: 100px 100px 100px 100px; clear: both; color: #FFFFFF; float: left; font-family: Georgia,"Times New Roman",Times,serif; font-size: 50px; font-style: italic; height: 70px; line-height: 55px; margin: -5px 20px 20px 0; text-align: center; width: 70px; } .circle1 { background: none repeat scroll 0 0 #3A8E42; border-radius: 100px 100px 100px 100px; clear: both; color: #FFFFFF; float: left; font-family: Georgia,"Times New Roman",Times,serif; font-size: 50px; font-style: italic; height: 70px; line-height: 55px; margin: -4px 20px 20px 0; text-align: center; width: 70px; } .Text { margin-top: -11px; width: 290px; } .Text_txt{ margin-top: -11px; width: 290px; float:left; } .Text1 { float: left; margin-top: -8px; width: 290px; } .textheader h3 { color: #000000; font-family: 'Droid Sans',sans-serif; font-size: 23px; font-weight: normal; letter-spacing: -1px; line-height: 26px; } .text p{ color: #666666; font-size: 14px; line-height: 22px; font-family: Arial,Helvetica,sans-serif; color:#666666; } .text1 p{ color: #666666; font-size: 14px; line-height: 22px; font-family: Arial,Helvetica,sans-serif; color:#666666; } .circle_area_right { float: right; margin-top: 6px; width: 380px; } figcaption { padding-left: 75px; width: 300px; } section { height: 265px; margin: 25px auto; width: 950px; } section figure { margin: 0; padding: 0; position: relative; } section figure figcaption { padding-left: 75px; width: 300px; } section figure img { border: 1px solid #D4CDC1; margin-right: 25px; padding: 1px; } section figure figcaption h1 { color: #CC0000; font-size: 24px; margin-top: 0; } section figure figcaption p { font-size: 18px; line-height: 1.3em; } header { border-bottom: 0 none; margin: 20px auto auto; overflow: hidden; padding: 0 50px 10px 100px; } header > h1 { color: #000000; font-size: 49px; font-weight: bold; letter-spacing: -1px; margin: 0 0 10px; width: 810px; } header > h2 { color: #AA9C84; font-size: 26px; font-weight: 300; line-height: 1.2em; margin: 0 0 30px; padding: 0; width: 90%; } .portfolio-carousel-item .text { float: left; margin-top:2px; width: 190px; }