www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/013/orange-wide/css/style.css
/* SmallBusiness - Business HTML Template Made by:trendyWebStar Date:July 2012 Version: 1.0 Mail: themes@trendywebstar.com */ /* ----CONTENT LIST----- 01- RESET & CLERFIX 02- BODY LAYOUT (main typography,grid,container) 03- HEADER LAYOUT (logo, navigation,social icons) 04- FOOTER & COPYRIGHTS CSS 05- HOMEPAGE PORTFOLIO CAROUSEL & PORTFOLIO ITEM LAYOUT 06- BUTTONS 07- PRICING TABLES AND BOXES 08- LISTS 09- DROPCAPS 10- ALERTS 11- FORMS 12- PORTFOLIO LAYOUTS 13- TABS & ACCORDIONS 14- BLOG LAYOUT 15- OTHER FEATURES LAYOUT (google maps,404 error style,pre style,blockquote style,team members,services,sliders...) */ /* ---------------------------------------------------------------------- */ /* 01- RESET & CLEARFIX /* ---------------------------------------------------------------------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0} /* Clearfix */ .clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}* html .clearfix,:first-child+html .clearfix{zoom:1} /* ---------------------------------------------------------------------- */ /* 02- BODY LAYOUT /* ---------------------------------------------------------------------- */ body { background:#FFF url("../images/bg-01.jpg") fixed; color: #898989; font-size: 12px; font-family:'Arial', 'Verdana', sans-serif; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; overflow-x: hidden; line-height:20px; } p,ul,ol,pre,code {margin-bottom:10px;} ::-moz-selection { background: #ff4629; color: #fff; text-shadow: none; } .::selection { background: #ff4629; color: #fff; text-shadow: none; } a, a > * { color: #898989; text-decoration: none; -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; } a:hover, a > *:hover,.post-links { color: #ff420a; } .colored{color:#ff420a;} a.colored:hover{color:#ff420a;text-decoration:underline;} .hasicon{ margin-bottom:10px;line-height:20px;vertical-align:middle} .hasicon img{float:left;margin-right:10px;width:20px;height:100%;} h1,h2,h3,h4,h5,h6 { font-weight:normal; font-variant:normal; white-space:normal; color:#898989; margin-bottom:15px; font-family:Arial,Verdana,serif; } h1 { font-size:28px; line-height:32px; } h2 { font-size:26px; line-height:30px; } h3 { font-size:24px; line-height:23px; } h4 { font-size:18px; line-height:24px; } h5 { font-size:16px; line-height:20px; } h6 { font-size:14px; line-height:17px; } h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { color:#898989; font-size:100%; } h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover { color:#ff420a; font-size:100%; text-decoration:underline; } a h1:hover,a h2:hover,a h3:hover,a h4:hover,a h5:hover,a h6:hover{color:#ff420a;} .text-align-center{text-align:center;} .text-align-left {text-align:left;} .text-align-right {text-align:right;} .img-align-left {margin:0px 10px 10px 0;float:left;} /*GRID COLUMNS*/ .container {margin: 0 auto;position: relative;width: 880px;} .one-half,.one-third,.two-third,.one-fourth,.three-fourth,.one-column {float: left;margin-right: 20px;margin-bottom: 20px;} .one-half.last,.one-third.last,.two-third.last,.one-fourth.last,.three-fourth.last { margin-right: 0px } .one-half { width: 430px } .one-third { width: 280px } .two-third { width: 580px } .one-fourth { width: 205px } .three-fourth { width: 655px } .horizontal-line {width:100%;margin:30px 0;float:left;border-top:1px solid #ebebeb; } /*GRID COLUMNS*/ .center-page{float:left:} #container { height:auto; width:100%; background:#FFF; -moz-box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; -webkit-box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; padding:0px 0px; margin:0px ; float:left; border-top:6pt solid #ff420a; border-bottom:4pt solid #e7e7e7; } #header { height:45px; padding:40px 0; float:left; width:100%; border-bottom:1pt solid #ebebeb; } .intro-page { float:left; padding:15px 0px 0 0; border-bottom:1pt solid #ebebeb; margin-bottom:30px; } .intro-text{margin:-15px 0 0 0;} .intro-text h3 {margin-bottom:10px;font-weight:800;font-size:20px;} .intro-text p{} .cufon-mask{-webkit-mask-image: url(../images/mask.png) ;} .right {float:right;} .button-holder-2 { float: right; margin-top: -5px; } .inner-page-intro h3{margin-top:0px; font-size:22px;line-height:20px;} .inner-page-intro { width: 100%; height: auto; float: left; padding: 0px 0 40px 0; margin:0px 0 30px 0; background:url("../images/intro-pages-bg.png") bottom center no-repeat; text-align:center; } /* ---------------------------------------------------------------------- */ /* 03- HEADER LAYOUT /* ---------------------------------------------------------------------- */ #logo{ float: left; height:45px; width:220px; background:url("../images/logo.png") no-repeat; text-indent:-9999px; } a#logo-copyrights { float: left; height: 35px; width:170px; background:url("../images/logo-copyrights.png") no-repeat; text-indent:-9999px; margin-right:10px; } #navigation-wrapper{float:right;} .search-input{ background:#FFF url("../images/search-bg.png") right no-repeat; width:190px!important; color:#898989!important; } .search-place{ margin-top:-10px; margin-left:0px; float:left; } .search-input-big:focus,.search-input:focus { border-color:#9dcedf; -moz-box-shadow: 0 0px 3px #1aa8fc; -webkit-box-shadow: 0 0px 3px #1aa8fc; box-shadow: 0 0px 3px #1aa8fc; } .search-input-big{ background:#FFF url("../images/search-bg.png") right no-repeat; width:265px!important; color:#898989!important; } .search-place-big{ margin-top:-10px; margin-left:0px; float:left; } form#blog-search,form#contact-form{padding:0;border:none;display:block;} form#blog-search input[type=text],input[type=password],input,textarea { background-color:#FFF; border:1px solid #e1e1e1; font-size:11px; width:185px; padding:10px 10px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; box-shadow: inset 0px 2px 4px #f3f3f3; -moz-box-shadow: inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: inset 0px 2px 4px #f3f3f3; margin:15px 0px; float:left; } /*MAIN NAVIGATION*/ #main-navigation { top:-20px; font-size:12px; height:50px; float:left; text-transform: Upperacase; z-index:1000; margin-right:20px; } #main-navigation { position:relative; z-index:1000; font-family:'Droid Sans', arial, serif; } .downarrowclass{ position: absolute; top: 36px; right: 12px; } .rightarrowclass{ position: absolute; top:11px; right:12px; } #main-navigation ul { margin:0; padding:0px; list-style-type:none; } #main-navigation ul li { position:relative; display:inline; float:left; } #main-navigation ul li a,#main-navigation ul li a:link{ line-height:30px; text-shadow:none; font-size:12px; text-transform: uppercase; } #main-navigation ul li:hover{ border-bottom:2pt solid #ff420a; background:transparent url("../images/navigation-arrow.png") center bottom no-repeat; } #main-navigation ul li a:hover{color:#ff420a!important; } #main-navigation ul li a { display:block; text-decoration:none; overflow:hidden; padding:0px 15px; } * html #main-navigation ul li a { display:inline-block; } #main-navigation ul li ul { position:absolute; left:0px; display:block; visibility:hidden; width:195px; } #main-navigation ul li ul li { display:list-item; float:none; border-right:none!important; } #main-navigation ul li ul li a { width:160px; padding:5px 0px; margin:0px 7px; } #main-navigation ul ul { background:#FFF; border:1px solid #e0e0e0; border-top:2px solid #ff420a; -moz-box-shadow:0px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.1); box-shadow:0px 3px 3px rgba(0,0,0,0.1); z-index:101; color:#707070; } #main-navigationul li a,#main-navigation ul li a:link,#main-navigation ul li a:visited { line-height:40px; color:#898989; font-size:12px; padding:20px 10px 43px 10px; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; transition:all 0.2s ease-out; } #main-navigation ul ul li a,#main-navigation ul ul li a:link,#main-navigation ul ul li a:visited { height:100%; text-transform: capitalize; line-height:20px; margin-right:0px; padding:7px 10px; font-size:11px; color:#707070; z-index:1000; border-bottom:dotted 1px #e1e1e1; } #main-navigation ul ul li a:hover { background:none; color:#ff420a; } #main-navigation ul li ul li:hover { text-decoration:none; text-shadow:none; background:#FFF; border-bottom:none; } /*POST NAVIGATION PANEL*/ #post-navigation-panel{height:30px;float:left;width:100%;padding:15px 0;border-bottom:1pt solid #ebebeb;margin-bottom:40px;} .call-us{font-size:16px;margin-top:5px;} /*POST NAVIGATION PANEL*/ /*SOCIAL ICONS*/ ul#social-icons{ float:right; margin-top:0px; } ul#social-icons li{ float:left; width:25px; height:25px; margin:0px 1px; } ul#social-icons li a { float:left; width:25px; height:25px; text-indent:-9999px; } ul#social-icons li a.facebook{background:url("../images/social-icons/facebook.png") no-repeat;} ul#social-icons li a.twitter{background:url("../images/social-icons/twitter.png") no-repeat;} ul#social-icons li a.google{background:url("../images/social-icons/google.png") no-repeat;} ul#social-icons li a.flickr{background:url("../images/social-icons/flickr.png") no-repeat;} ul#social-icons li a.skype{background:url("../images/social-icons/skype.png") no-repeat;} ul#social-icons li a.linkedin{background:url("../images/social-icons/linkedin.png") no-repeat;} ul#social-icons li a.rss{background:url("../images/social-icons/rss.png") no-repeat;} ul#social-icons li a.dribbble{background:url("../images/social-icons/dribbble.png") no-repeat;} ul#social-icons li a.digg{background:url("../images/social-icons/digg.png") no-repeat;} ul#social-icons li a.pinterest{background:url("../images/social-icons/pinterest.png") no-repeat;} ul#social-icons li a.vimeo{background:url("../images/social-icons/vimeo.png") no-repeat;} /*TIPSY*/ .tipsy { padding:5px; font-size:11px; opacity:0.65; filter:alpha(opacity=65); background-repeat:no-repeat; background-image:url(../images/tipsy.gif); margin-top:5px; } .tipsy-inner { padding:5px 8px 4px 8px; background-color:black; color:#FFF; max-width:200px; text-align:center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position:top center; } .tipsy-south { background-position:bottom center; } .tipsy-east { background-position:right center; } .tipsy-west { background-position: left center; } /* ---------------------------------------------------------------------- */ /* 04- FOOTER & COPYRIGHTS CSS /* ---------------------------------------------------------------------- */ #footer-wrapper { width:100%; float:left; } #footer-container{ width:880px; margin:0 auto; border-top:1pt solid #ebebeb; padding:30px 0px; margin-top:30px; } #footer { float:left; margin:0; } #footer ul { list-style-type:none; float:left; } #footer a ,#footer p{ color:#898989;text-decoration: none; } #footer a:hover {color:#ff420a;text-decoration: underline;} #footer ul li span,#footer ul li span a { display:block; text-transform:none; } #footer strong.footer-title{line-height:40px;} #footer ul li span a {display: inline;} #footer .colored{color:#ff420a;} #footer .bolder{font-weight:bold;} ul#footer-info li{ margin-bottom:0px; margin-top:10px; border-bottom:1pt dotted #d7d7d7; } ul#footer-info li:first-child{padding-top:10px;border-top:1pt dotted #d7d7d7;} #footer-info img{ background-color:#FFF; border:1px solid #e1e1e1 !important; margin:5px 10px 0 0; float:left; } ul.social-links li img { margin-right:7px; float:left; margin-top:-1px; } #footer .tweet {width:auto;} #footer .tweet ul { list-style-type:none; padding:0px; margin:0px; float:left; } #footer .tweet li .tweet_text,.block .tweet li .tweet_text { list-style-type:none; padding:0 0 0px 30px; background:transparent url(../images/twitter-feed.png) left top no-repeat; } #footer .tweet li .tweet_text:hover,.block .tweet li .tweet_text:hover { list-style-type:none; padding:0 0 0px 30px; background:transparent url(../images/twitter-feed-hover.png) left top no-repeat; } #footer .tweet a,.block .tweet a { text-transform:none; display:inline; padding:0px; font-size:12px; color:#898989; } #footer .tweet .tweet_time a,.block .tweet .tweet_time a { text-transform:none; display:block; font-size:12px; margin-top: 5px; margin-bottom:10px; padding:0 0 0 30px; color:#ff420a; } #footer .simple-nav li{ color:#ff420a;display:block; padding:5px 0; border-bottom:1px dotted #d7d7d7;} #copyrights p ,#copyrights a{ margin:0; color:#707070; font-size:11px; } #copyrights a:hover{color:#ff420a;} #copyrights-wrapper { width:100%; float:left; padding:20px 0px; } #copyrights{ width:880px; margin:0 auto; border-top:1pt solid #e1e1e1; padding:20px 0px; } /* ---------------------------------------------------------------------- */ /* 05- HOMEPAGE PORTFOLIO CAROUSEL & PORTFOLIO ITEM LAYOUT /* ---------------------------------------------------------------------- */ ul#projects-carousel { overflow: hidden; position: relative; list-style: none; margin: 0; padding: 25px 0 0 0; } ul#projects-carousel li { float: left; background: #f8f9f9; width: 205px; height: auto; margin-right: 20px; padding: 0; } ul#projects-carousel li .item-content { background: #FFF; float: left; width: 205px; text-align: center; padding: 0px 0 0px 0; height: auto; color:#FFF; border-bottom:1pt solid #FFF; } ul#projects-carousel li .item-content:hover { border-bottom:1pt solid #d84519;} ul#projects-carousel li .item-content p{padding:5px 0;} ul#projects-carousel li .item-content p { margin: 0; padding: 0; color: #FFF; } ul#projects-carousel li .item-content p a { margin: 0; padding: 0; font-weight: 800; color: #FFF; } ul#projects-carousel li .item-content span { font-style: italic; color: #FFF; } ul#projects-carousel li img { width: 100%; height: auto; padding: 0; margin: 0; } .jcarousel-container { margin: 0px -20px 0px 0; max-width: 100%; padding: 0px 0 0 0; } .jcarousel-clip { overflow: hidden; width: 100%; } .jcarousel-item { margin: 0 0px 30px 0; width: 205px; } .jcarousel-next, .jcarousel-prev { background: #d84519 url("../images/carousel-prev-next.png") -5% 50% no-repeat; cursor: pointer; height: 20px; position: absolute; right: 25px; bottom: -10px; width: 20px; } .jcarousel-prev { background: #d84519 url("../images/carousel-prev-next.png") 105% 50% no-repeat; right: 0px; } .jcarousel-next:hover, .jcarousel-next:focus, .jcarousel-next:active, .jcarousel-prev:hover, .jcarousel-prev:focus, .jcarousel-prev:active { background-color: #d84519 } .jcarousel-clip { overflow: hidden; width: 100%; } .jcarousel-next-disabled, .jcarousel-next-disabled:hover, .jcarousel-next-disabled:focus, .jcarousel-next-disabled:active, .jcarousel-prev-disabled, .jcarousel-prev-disabled:hover, .jcarousel-prev-disabled:focus, .jcarousel-prev-disabled:active { background-color: #cccccc; cursor: auto; box-shadow: inset0 0 7px #b7b7b7; -moz-box-shadow: inset 0 0 7px #b7b7b7; -webkit-box-shadow: inset 0 0 7px #b7b7b7; } .portfolio-item-hover-content, .proj-img1 { position: relative; overflow: hidden; } .portfolio-item-hover-content a.zoom { background: url(../images/zoom-plus.png) 50% 50% no-repeat; margin-left:0px; display:inline-block; width: 100%; height: 100%; position: absolute; top: -100%; left: 0%; margin-top:-25px; z-index: 10; text-indent: -9999px; } .portfolio-item-hover-content { line-height: 0; display: block; background: transparent; z-index: 99; } .portfolio-item-holder { position: relative; overflow: hidden; height: auto; margin-bottom: 0px; } .portfolio-item-hover-content, .proj-img1 { position: relative; overflow: hidden; } .portfolio-item-hover-content .hover-options { display: block; font-style: normal; position: absolute; width: 100%; height: 100%; z-index: 9; top: 0; left: 0; background: url("../images/portfolio-hover-bg.png") repeat; opacity: 0; filter: alpha(opacity:0); cursor: pointer; } /* ---------------------------------------------------------------------- */ /* 06- BUTTONS /* ---------------------------------------------------------------------- */ .button { cursor: pointer; font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #ffffff; text-decoration: none!important; border: none; position: relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .button:active { text-decoration: none; top: 1px; } .button.round { border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } .button.cube { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .button.small { padding: 7px 12px } .button.big { padding: 10px 20px } .button.huge { padding: 15px 30px; font-size: 18px; color: #FFF!important; font-weight: bold; } .button.orange { background: #ff420a; background: -moz-linear-gradient(top, #ff420a 0%, #e43805 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff420a), color-stop(100%,#e43805)); background: -webkit-linear-gradient(top, #ff420a 0%,#e43805 100%); background: -o-linear-gradient(top, #ff420a 0%,#e43805 100%); background: -ms-linear-gradient(top, #ff420a 0%,#e43805 100%); background: linear-gradient(top, #ff420a 0%,#e43805 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff420a', endColorstr='#e43805',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #c33409; -webkit-box-shadow: inset 0 0 7px #fc4e1b,0px 3px #c42f02; -moz-box-shadow: inset 0 0 7px #fc4e1b,0px 3px #c42f02; box-shadow: inset 0 0 7px #fc4e1b,0px 3px #c42f02; } .button.orange:hover { -webkit-box-shadow: inset 0 0 10px #ff6031,0px 3px #c42f02; -moz-box-shadow: inset 0 0 10px #ff6031,0px 3px #c42f02; box-shadow: inset 0 0 10px #ff6031,0px 3px #c42f02; } .button.orange:active { -webkit-box-shadow: inset 0 0 15px #a42b07,0px 1px #c42f02; -moz-box-shadow: inset 0 0 15px #a42b07,0px 1px #c42f02; box-shadow: inset 0 0 15px #a42b07,0px 1px #c42f02; } .button.green { background: #59a839; background: -moz-linear-gradient(top, #59a839 0%, #3e8720 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59a839), color-stop(100%,#3e8720)); background: -webkit-linear-gradient(top, #59a839 0%,#3e8720 100%); background: -o-linear-gradient(top, #59a839 0%,#3e8720 100%); background: -ms-linear-gradient(top, #59a839 0%,#3e8720 100%); background: linear-gradient(top, #59a839 0%,#3e8720 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59a839', endColorstr='#3e8720',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #1f6b00; -webkit-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; -moz-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; } .button.green:hover { -webkit-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; -moz-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; } .button.green:active { -webkit-box-shadow: inset 0 0 15px #195700,0px 1px #307215; -moz-box-shadow: inset 0 0 15px #195700,0px 1px #307215; box-shadow: inset 0 0 15px #195700,0px 1px #307215; } .button.blue { background: #3283de; background: -moz-linear-gradient(top, #3283de 0%, #246eab 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3283de), color-stop(100%,#246eab)); background: -webkit-linear-gradient(top, #3283de 0%,#246eab 100%); background: -o-linear-gradient(top, #3283de 0%,#246eab 100%); background: -ms-linear-gradient(top, #3283de 0%,#246eab 100%); background: linear-gradient(top, #3283de 0%,#246eab 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3283de', endColorstr='#246eab',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #01579f; -webkit-box-shadow: inset 0 0 7px #2d80dd,0px 3px #01579f; -moz-box-shadow: inset 0 0 7px #2d80dd,0px 3px #01579f; box-shadow: inset 0 0 7px #2d80dd,0px 3px #01579f; } .button.blue:hover { -webkit-box-shadow: inset 0 0 7px #6db1ff,0px 3px #01579f; -moz-box-shadow: inset 0 0 7px #6db1ff,0px 3px #01579f; box-shadow: inset 0 0 7px #6db1ff,0px 3px #01579f; } .button.blue:active { -webkit-box-shadow: inset 0 0 7px #085798,0px 1px #01579f; -moz-box-shadow: inset 0 0 7px #085798,0px 1px #01579f; box-shadow: inset 0 0 7px #085798,0px 1px #01579f; } .button.pink { background: #ff3f7d; background: -moz-linear-gradient(top, #ff3f7d 0%, #ed145b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3f7d), color-stop(100%,#ed145b)); background: -webkit-linear-gradient(top, #ff3f7d 0%,#ed145b 100%); background: -o-linear-gradient(top, #ff3f7d 0%,#ed145b 100%); background: -ms-linear-gradient(top, #ff3f7d 0%,#ed145b 100%); background: linear-gradient(top, #ff3f7d 0%,#ed145b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3f7d', endColorstr='#ed145b',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #c2003f; -webkit-box-shadow: inset 0 0 7px #ff1b65,0px 3px #c2003f; -moz-box-shadow: inset 0 0 7px #ff1b65,0px 3px #c2003f; box-shadow: inset 0 0 7px #ff1b65,0px 3px #c2003f; } .button.pink:hover { -webkit-box-shadow: inset 0 0 7px #ff4481,0px 3px #c2003f; -moz-box-shadow: inset 0 0 7px #ff4481,0px 3px #c2003f; box-shadow: inset 0 0 7px #ff4481,0px 3px #c2003f; } .button.pink:active { -webkit-box-shadow: inset 0 0 7px #a00034,0px 1px #c2003f; -moz-box-shadow: inset 0 0 7px #a00034,0px 1px #c2003f; box-shadow: inset 0 0 7px #a00034,0px 1px #c2003f; } .button.black { background: #464646; background: -moz-linear-gradient(top, #464646 0%, #252525 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#464646), color-stop(100%,#252525)); background: -webkit-linear-gradient(top, #464646 0%,#252525 100%); background: -o-linear-gradient(top, #464646 0%,#252525 100%); background: -ms-linear-gradient(top, #464646 0%,#252525 100%); background: linear-gradient(top, #464646 0%,#252525 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#252525',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #111111; -webkit-box-shadow: inset 0 0 7px #464646,0px 3px #111111; -moz-box-shadow: inset 0 0 7px #464646,0px 3px #111111; box-shadow: inset 0 0 7px #464646,0px 3px #111111; } .button.black:hover { -webkit-box-shadow: inset 0 0 7px #616161,0px 3px #111111; -moz-box-shadow: inset 0 0 7px #616161,0px 3px #111111; box-shadow: inset 0 0 7px #616161,0px 3px #111111; } .button.black:active { -webkit-box-shadow: inset 0 0 7px #2c2a2a,0px 1px #111111; -moz-box-shadow: inset 0 0 7px #2c2a2a,0px 1px #111111; box-shadow: inset 0 0 7px #2c2a2a,0px 1px #111111; } .button.yellow { background: #fec151; background: -moz-linear-gradient(top, #fec151 0%, #f3aa38 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec151), color-stop(100%,#f3aa38)); background: -webkit-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: -o-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: -ms-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: linear-gradient(top, #fec151 0%,#f3aa38 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#f3aa38',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #d77a03; -webkit-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; -moz-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; } .button.yellow:hover { -webkit-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; -moz-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; } .button.yellow:active { -webkit-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; -moz-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; } .button.red { background: #ec3122; background: -moz-linear-gradient(top, #ec3122 0%, #e32418 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ec3122), color-stop(100%,#e32418)); background: -webkit-linear-gradient(top, #ec3122 0%,#e32418 100%); background: -o-linear-gradient(top, #ec3122 0%,#e32418 100%); background: -ms-linear-gradient(top, #ec3122 0%,#e32418 100%); background: linear-gradient(top, #ec3122 0%,#e32418 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec3122', endColorstr='#e32418',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #a80b00; -webkit-box-shadow: inset 0 0 7px #f44638,0px 3px #a80b00; -moz-box-shadow: inset 0 0 7px #f44638,0px 3px #a80b00; box-shadow: inset 0 0 7px #f44638,0px 3px #a80b00; } .button.red:hover { -webkit-box-shadow: inset 0 0 7px #ff6053,0px 3px #a80b00; -moz-box-shadow: inset 0 0 7px #ff6053,0px 3px #a80b00; box-shadow: inset 0 0 7px #ff6053,0px 3px #a80b00; } .button.red:active { -webkit-box-shadow: inset 0 0 7px #a00a00,0px 1px #a80b00; -moz-box-shadow: inset 0 0 7px #a00a00,0px 1px #a80b00; box-shadow: inset 0 0 7px #a00a00,0px 1px #a80b00; } .button.purple { background: #a55aba; background: -moz-linear-gradient(top, #a55aba 0%, #7a3997 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a55aba), color-stop(100%,#7a3997)); background: -webkit-linear-gradient(top, #a55aba 0%,#7a3997 100%); background: -o-linear-gradient(top, #a55aba 0%,#7a3997 100%); background: -ms-linear-gradient(top, #a55aba 0%,#7a3997 100%); background: linear-gradient(top, #a55aba 0%,#7a3997 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a55aba', endColorstr='#7a3997',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #752392; -webkit-box-shadow: inset 0 0 7px #a663be,0px 3px #752392; -moz-box-shadow: inset 0 0 7px #a663be,0px 3px #752392; box-shadow: inset 0 0 7px #a663be,0px 3px #752392; } .button.purple:hover { -webkit-box-shadow: inset 0 0 7px #be7fd4,0px 3px #752392; -moz-box-shadow: inset 0 0 7px #be7fd4,0px 3px #752392; box-shadow: inset 0 0 7px #be7fd4,0px 3px #752392; } .button.purple:active { -webkit-box-shadow: inset 0 0 7px #5c2470,0px 1px #752392; -moz-box-shadow: inset 0 0 7px #5c2470,0px 1px #752392; box-shadow: inset 0 0 7px #5c2470,0px 1px #752392; } .button.dark-blue { background: #3a5caa; background: -moz-linear-gradient(top, #3a5caa 0%, #2b4592 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a5caa), color-stop(100%,#2b4592)); background: -webkit-linear-gradient(top, #3a5caa 0%,#2b4592 100%); background: -o-linear-gradient(top, #3a5caa 0%,#2b4592 100%); background: -ms-linear-gradient(top, #3a5caa 0%,#2b4592 100%); background: linear-gradient(top, #3a5caa 0%,#2b4592 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a5caa', endColorstr='#2b4592',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #1d316f; -webkit-box-shadow: inset 0 0 7px #4e75c1,0px 3px #1d316f; -moz-box-shadow: inset 0 0 7px #4e75c1,0px 3px #1d316f; box-shadow: inset 0 0 7px #4e75c1,0px 3px #1d316f; } .button.dark-blue:hover { -webkit-box-shadow: inset 0 0 7px #7ca0e5,0px 3px #1d316f; -moz-box-shadow: inset 0 0 7px #7ca0e5,0px 3px #1d316f; box-shadow: inset 0 0 7px #7ca0e5,0px 3px #1d316f; } .button.dark-blue:active { -webkit-box-shadow: inset 0 0 7px #192b62,0px 1px #1d316f; -moz-box-shadow: inset 0 0 7px #192b62,0px 1px #1d316f; box-shadow: inset 0 0 7px #192b62,0px 1px #1d316f; } .button.grey { background: #cacaca; background: -moz-linear-gradient(top, #cacaca 0%, #b2b2b2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cacaca), color-stop(100%,#b2b2b2)); background: -webkit-linear-gradient(top, #cacaca 0%,#b2b2b2 100%); background: -o-linear-gradient(top, #cacaca 0%,#b2b2b2 100%); background: -ms-linear-gradient(top, #cacaca 0%,#b2b2b2 100%); background: linear-gradient(top, #cacaca 0%,#b2b2b2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cacaca', endColorstr='#b2b2b2',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #7b7b7b; -webkit-box-shadow: inset 0 0 7px #d8d8d8,0px 3px #7b7b7b; -moz-box-shadow: inset 0 0 7px #d8d8d8,0px 3px #7b7b7b; box-shadow: inset 0 0 7px #d8d8d8,0px 3px #7b7b7b; } .button.grey:hover { -webkit-box-shadow: inset 0 0 7px #e2e2e2,0px 3px #7b7b7b; -moz-box-shadow: inset 0 0 7px #e2e2e2,0px 3px #7b7b7b; box-shadow: inset 0 0 7px #e2e2e2,0px 3px #7b7b7b; } .button.grey:active { -webkit-box-shadow: inset 0 0 7px #767676,0px 1px #7b7b7b; -moz-box-shadow: inset 0 0 7px #767676,0px 1px #7b7b7b; box-shadow: inset 0 0 7px #767676,0px 1px #7b7b7b; } /* ---------------------------------------------------------------------- */ /* 07- PRICING TABLES AND BOXES /* ---------------------------------------------------------------------- */ /*PRICING TABLE*/ ul.pricing-table-features {float:left;width:219px;margin:0;padding:0; } ul.pricing-table-features li{padding:10px 10px;border-bottom:1pt solid #e1e1e1; } ul.first-pricing{border-left:1pt solid #e1e1e1;} ul.last-pricing{border-right:1pt solid #e1e1e1;} li.first-no-border{border-left:1pt solid #FFF!important;margin-left:-1px;} li.first-no-border h3{margin-top:1px;} ul.pricing-table-features li.colored-header{background:#141414;padding:17px 0 5px 0; border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; text-align:center; } ul.pricing-table-features li.colored-footer{background:#141414;padding:13px 0 15px 0; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; text-align:center; border-bottom:3pt solid #000; } li.included{padding:10px 5px 10px 40px!important;background:transparent url(../images/list-icons/list-check-2.png) no-repeat 10px 11px;} li.not-included{padding:10px 5px 10px 40px!important;background:transparent url(../images/list-icons/not-included.png) no-repeat 10px 11px ;} li.included:hover{padding:10px 5px 10px 40px!important;background:#f9f9f9 url(../images/list-icons/list-check-2.png) no-repeat 10px 11px;cursor:pointer;} li.not-included:hover{padding:10px 5px 10px 40px!important;background:#f9f9f9 url(../images/list-icons/not-included.png) no-repeat 10px 11px ;cursor:pointer;} .sign-up-button{ padding:5px 45px; background: #fec151; background: -moz-linear-gradient(top, #fec151 0%, #f3aa38 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec151), color-stop(100%,#f3aa38)); background: -webkit-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: -o-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: -ms-linear-gradient(top, #fec151 0%,#f3aa38 100%); background: linear-gradient(top, #fec151 0%,#f3aa38 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#f3aa38',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #d77a03; -webkit-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; -moz-box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; box-shadow: inset 0 0 7px #fec55d,0px 3px #d77a03; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position: relative; } .sign-up-button:hover { color: #FFF; -webkit-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; -moz-box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; box-shadow: inset 0 0 7px #fedb91,0px 3px #d77a03; } .sign-up-button:active { color: #FFF; -webkit-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; -moz-box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; box-shadow: inset 0 0 7px #cb7200,0px 1px #d77a03; } .sign-up-button-2{ padding:5px 45px; background: #59a839; background: -moz-linear-gradient(top, #59a839 0%, #3e8720 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#59a839), color-stop(100%,#3e8720)); background: -webkit-linear-gradient(top, #59a839 0%,#3e8720 100%); background: -o-linear-gradient(top, #59a839 0%,#3e8720 100%); background: -ms-linear-gradient(top, #59a839 0%,#3e8720 100%); background: linear-gradient(top, #59a839 0%,#3e8720 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59a839', endColorstr='#3e8720',GradientType=0 ); color: #FFF; text-shadow: 0px 1px #1f6b00; -webkit-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; -moz-box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; box-shadow: inset 0 0 7px #6fc84c,0px 3px #307215; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; position: relative; } .sign-up-button-2:hover { color: #FFF; -webkit-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; -moz-box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; box-shadow: inset 0 0 10px #77e74a,0px 3px #307215; } .sign-up-button-2:active { color: #FFF; -webkit-box-shadow: inset 0 0 15px #195700,0px 1px #307215; -moz-box-shadow: inset 0 0 15px #195700,0px 1px #307215; box-shadow: inset 0 0 15px #195700,0px 1px #307215; } ul.pricing-table-features li.colored-header-green{background:#59a839;padding:40px 0 7px 0;margin-top:-25px; border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; text-align:center; } ul.pricing-table-features li.colored-header-green h4,ul.pricing-table-features li.colored-footer-green h4{color:#FFF;padding:0 0 0 15px;} ul.pricing-table-features li.colored-footer-green{background:#59a839;padding:13px 0 35px 0; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; text-align:center; border-bottom:3pt solid #3e7e24; } ul.pricing-table-features li.colored-header-orange{background:#f29d37;padding:17px 0 5px 0; border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; text-align:center; } ul.pricing-table-features li.colored-header-orange h4,ul.pricing-table-features li.colored-footer-orange h4{color:#FFF;padding:0 0 0 15px;} ul.pricing-table-features li.colored-footer-orange{background:#f29d37;padding:13px 0 15px 0; border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; text-align:center; border-bottom:3pt solid #e58e26; } /*PRICING BOXES*/ ul.pricing-box {float:left;width:100%;margin:0;padding:0;border:1pt solid #e1e1e1; } ul.pricing-box li{padding:10px 10px;border-bottom:1pt solid #e1e1e1; } ul.pricing-box li.pricing-box-title {text-align:center;margin-top:10px;} ul.pricing-box li.pricing-box-footer {text-align:center;margin-top:10px;} ul.pricing-box-fancy {float:left;width:100%;margin:0;padding:0;border:1pt solid #e1e1e1;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;} ul.pricing-box-fancy li{padding:10px 10px;border-bottom:1pt solid #e1e1e1; } ul.pricing-box-fancy li.pricing-box-title-fancy ,ul.pricing-box-fancy li.pricing-box-footer-fancy{ text-align:center; padding-top:10px; } ul.pricing-box-fancy li.pricing-box-title-fancy.blue ,ul.pricing-box-fancy li.pricing-box-footer-fancy.blue { background: #007bc3; background: -moz-linear-gradient(top, #007bc3 0%, #036ead 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007bc3), color-stop(100%,#036ead)); background: -webkit-linear-gradient(top, #007bc3 0%,#036ead 100%); background: -o-linear-gradient(top, #007bc3 0%,#036ead 100%); background: -ms-linear-gradient(top, #007bc3 0%,#036ead 100%); background: linear-gradient(to bottom, #007bc3 0%,#036ead 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bc3', endColorstr='#036ead',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.orange ,ul.pricing-box-fancy li.pricing-box-footer-fancy.orange { background: #ff420a; background: -moz-linear-gradient(top, #ff420a 0%, #ed3a05 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff420a), color-stop(100%,#ed3a05)); background: -webkit-linear-gradient(top, #ff420a 0%,#ed3a05 100%); background: -o-linear-gradient(top, #ff420a 0%,#ed3a05 100%); background: -ms-linear-gradient(top, #ff420a 0%,#ed3a05 100%); background: linear-gradient(to bottom, #ff420a 0%,#ed3a05 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff420a', endColorstr='#ed3a05',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.red ,ul.pricing-box-fancy li.pricing-box-footer-fancy.red { background: #e44145; background: -moz-linear-gradient(top, #e44145 0%, #cf363a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e44145), color-stop(100%,#cf363a)); background: -webkit-linear-gradient(top, #e44145 0%,#cf363a 100%); background: -o-linear-gradient(top, #e44145 0%,#cf363a 100%); background: -ms-linear-gradient(top, #e44145 0%,#cf363a 100%); background: linear-gradient(to bottom, #e44145 0%,#cf363a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e44145', endColorstr='#cf363a',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.green ,ul.pricing-box-fancy li.pricing-box-footer-fancy.green { background: #00b07f; background: -moz-linear-gradient(top, #00b07f 0%, #04966d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b07f), color-stop(100%,#04966d)); background: -webkit-linear-gradient(top, #00b07f 0%,#04966d 100%); background: -o-linear-gradient(top, #00b07f 0%,#04966d 100%); background: -ms-linear-gradient(top, #00b07f 0%,#04966d 100%); background: linear-gradient(to bottom, #00b07f 0%,#04966d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b07f', endColorstr='#04966d',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.pink ,ul.pricing-box-fancy li.pricing-box-footer-fancy.pink { background: #954eae; background: -moz-linear-gradient(top, #954eae 0%, #86449e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#954eae), color-stop(100%,#86449e)); background: -webkit-linear-gradient(top, #954eae 0%,#86449e 100%); background: -o-linear-gradient(top, #954eae 0%,#86449e 100%); background: -ms-linear-gradient(top, #954eae 0%,#86449e 100%); background: linear-gradient(to bottom, #954eae 0%,#86449e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#954eae', endColorstr='#86449e',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.yellow ,ul.pricing-box-fancy li.pricing-box-footer-fancy.yellow { background: #ffae00; background: -moz-linear-gradient(top, #ffae00 0%, #eba000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffae00), color-stop(100%,#eba000)); background: -webkit-linear-gradient(top, #ffae00 0%,#eba000 100%); background: -o-linear-gradient(top, #ffae00 0%,#eba000 100%); background: -ms-linear-gradient(top, #ffae00 0%,#eba000 100%); background: linear-gradient(to bottom, #ffae00 0%,#eba000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffae00', endColorstr='#eba000',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.dark ,ul.pricing-box-fancy li.pricing-box-footer-fancy.dark { background: #555555; background: -moz-linear-gradient(top, #555555 0%, #363636 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#363636)); background: -webkit-linear-gradient(top, #555555 0%,#363636 100%); background: -o-linear-gradient(top, #555555 0%,#363636 100%); background: -ms-linear-gradient(top, #555555 0%,#363636 100%); background: linear-gradient(to bottom, #555555 0%,#363636 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#363636',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.dark ,ul.pricing-box-fancy li.pricing-box-footer-fancy.dark { background: #555555; background: -moz-linear-gradient(top, #555555 0%, #363636 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#363636)); background: -webkit-linear-gradient(top, #555555 0%,#363636 100%); background: -o-linear-gradient(top, #555555 0%,#363636 100%); background: -ms-linear-gradient(top, #555555 0%,#363636 100%); background: linear-gradient(to bottom, #555555 0%,#363636 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#363636',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy.blue-grey ,ul.pricing-box-fancy li.pricing-box-footer-fancy.blue-grey { background: #65778c; background: -moz-linear-gradient(top, #65778c 0%, #43556a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65778c), color-stop(100%,#43556a)); background: -webkit-linear-gradient(top, #65778c 0%,#43556a 100%); background: -o-linear-gradient(top, #65778c 0%,#43556a 100%); background: -ms-linear-gradient(top, #65778c 0%,#43556a 100%); background: linear-gradient(to bottom, #65778c 0%,#43556a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65778c', endColorstr='#43556a',GradientType=0 ); } ul.pricing-box-fancy li.pricing-box-title-fancy h4{margin-top:10px;color:#FFF;font-weight:800;} ul.pricing-box-fancy li.pricing-box-footer-fancy h4{margin-top:10px;color:#FFF;font-weight:800;} /* ---------------------------------------------------------------------- */ /* 08- LISTS /* ---------------------------------------------------------------------- */ .simple-nav{ list-style-type:none; list-style-position:outside; width:100%; } .simple-nav li:first-child{border-top:1px dotted #e4e4e4;} .simple-nav li{ color:#ff420a;display:block; padding:6px 0; border-bottom:1px dotted #e4e4e4;} .simple-nav li a { color:#ff420a;padding-left:15px;background: url(../images/simple-nav-arrow.png) no-repeat 0px 2px;} .simple-nav li a:hover { color:#ff420a;text-decoration:underline;} .simple-nav li a.current { color:#272727;} .sidebar-list ul{ list-style-type:none; list-style-position:outside; width:100%; } .sidebar-list li:first-child{border-top:1px dotted #e4e4e4;} .sidebar-list li{display:block; padding:6px 0; border-bottom:1px dotted #e4e4e4;} .sidebar-list li a { color:#ff420a;padding-left:0px;} .sidebar-list li a:hover { color:#ff420a;text-decoration:underline;} ul.dotted-list li { padding: 5px 0 5px 20px;border-bottom: 1px dotted #e1e1e1;} li.simple-check-list { background: url(../images/list-icons/list-check-2.png) no-repeat 0 7px } li.simple-plus-list { background: url(../images/list-icons/list-plus.png) no-repeat 0 9px } li.simple-star-list { background: url(../images/list-icons/list-star.png) no-repeat 0 6px } li.simple-dott-list { background: url(../images/list-icons/list-circle.png) no-repeat 0 10px } li.simple-dash-list { background: url(../images/list-icons/list-dash.png) no-repeat 0 10px } li.simple-check-list-2 { background: url(../images/list-icons/list-check.png) no-repeat 0 10px } li.simple-arrow-list { background: url(../images/list-icons/list-arrow.png) no-repeat 0 11px } li.simple-heart-list { background: url(../images/list-icons/list-heart.png) no-repeat 0 7px } li.simple-info-list { background: url(../images/list-icons/list-info.png) no-repeat 0 7px } li.simple-settings-list { background: url(../images/list-icons/list-settings.png) no-repeat 0 7px } /* ---------------------------------------------------------------------- */ /* 09- DROPCAPS /* ---------------------------------------------------------------------- */ .dropcap { background:#ee802a; color:#FFF; display:inline-block; float:left; font-family:'Terminal Dosis','Arial',sans-serif; font-size:22px; line-height:35px; height:35px; width:35px; margin:0 10px 0 0; text-align:center; border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; } .dropcap.dark {background:#3a3a3a;color:#fff;} .dropcap.green {background:#59a839;color:#fff;} .dropcap.red {background:#e64135;color:#fff;} .dropcap.blue {background:#72c2e7; color:#fff;} .dropcap.purple {background:#954eae;color:#fff;} .dropcap.grey {background:#898989;color:#fff;} .dropcap.pink {background:#f26d7d;color: #fff;} /* ---------------------------------------------------------------------- */ /* 10- ALERTS /* ---------------------------------------------------------------------- */ .simple-error,.simple-notice,.simple-success,.simple-info { padding:10px 20px 10px 40px; margin-bottom:1em; border:1px solid #ddd; } .simple-error{ background:#fbe3e4 url(../images/icons/bg-msg.png) 0% 0% no-repeat; border-color:#fbc2c4; border-left:4px solid #fbc2c4; color:#e64135; } .simple-notice { background:#fff6bf url(../images/icons/bg-msg.png) 0% 69% no-repeat; color:#514721; border-color:#ffd324; border-left:4px solid #ffd324; } .simple-success { background:#e6efc2 url(../images/icons/bg-msg.png) 0% 102% no-repeat; color:#264409; border-color:#c6d880; border-left:4px solid #c6d880; } .simple-info { background:#d5edf8 url(../images/icons/bg-msg.png) 0% 33% no-repeat; color:#205791; border-color:#92cae4; border-left:4px solid #92cae4; } .simple-error a,.simple-alert a {color:#8a1f11;} .simple-notice a {color:#514721;} .simple-success a {color:#264409;} .simple-info a {color:#205791;} .required {color:#e64135;} .required {color:#ed1c24;} .error { color:#e64135; text-align:left; font-size:11px; font-style:italic; font-family:"Georgia", Verdana; } .success { color:#acd373; text-align:left; font-size:11px; font-style:italic; font-family:"Georgia", Verdana; } /* ---------------------------------------------------------------------- */ /* 11- FORMS /* ---------------------------------------------------------------------- */ /*SIGN UP FORM*/ form#sign-up-form{ float:left; border:1px solid #e1e1e1; border-bottom:3px solid #e1e1e1; padding:20px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; } #sign-up-form fieldset{ display:inline-block; float:left; } #sign-up-form span.required {color:#e64135;} #sign-up-form label { font-weight:800; display:block; color:#7f7f7f; padding:0; margin:0; overflow:hidden; } #sign-up-form span.required-margined{margin-top:8px;float:left;} #sign-up-form span.required-margined-2{margin-top:3px;float:left;margin-left:15px;} #sign-up-form input[type=text],#sign-up-form input[type=password],#sign-up-form input,#sign-up-form textarea { background-color:#FFF; border:1px solid #e1e1e1; font-size:11px; width:230px; padding:10px 10px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; box-shadow: inset 0px 2px 4px #f3f3f3; -moz-box-shadow: inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: inset 0px 2px 4px #f3f3f3; margin:12px 10px 12px 0; } #sign-up-form select{ background-color:#FFF; border:1px solid #e1e1e1; font-size:11px; width:252px; padding:10px 10px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; box-shadow: inset 0px 2px 4px #f3f3f3; -moz-box-shadow: inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: inset 0px 2px 4px #f3f3f3; margin:10px 10px 10px 0; } #sign-up-form input[type=text]:focus,#sign-up-form input[type=password]:focus,#sign-up-form input.text:focus,#sign-up-form input.title:focus,#sign-up-form textarea:focus { border-color:#9dcedf; -moz-box-shadow: 0 0px 3px #1aa8fc; -webkit-box-shadow: 0 0px 3px #1aa8fc; box-shadow: 0 0px 3px #1aa8fc; } #sign-up-form input[type=checkbox]{float:left;width:auto;} #sign-up-form input[type=submit]{width:auto;} /*CONTACT FORM*/ #contact-form .error { margin: 10px 0 0 0 } #contact-form form { margin-bottom: 0px } #contact-form fieldset { margin-bottom: 0px } #contact-form label, #contact-form legend, #contact-form strong, #contact-form span { font-weight: bold; font-size: 13px; color: #898989; } #contact-form input[type="checkbox"] { display: inline } #contact-form label span, #contact-form legend span { font-weight: normal; font-size: 13px; color: #444; line-height:34px; } #contact-form input[type="text"], #contact-form input[type="password"], #contact-form input[type="email"], #contact-form textarea, #contact-form select { border: 1px solid #dddddd; padding: 10px 10px; outline: none; overflow: hidden; font: 12px "Arial", Verdana, sans-serif; color: #777; box-shadow: inset 0px 2px 4px #f3f3f3; -moz-box-shadow: inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: inset 0px 2px 4px #f3f3f3; width: 260px; max-width: 100%; display: block; background: #FFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #contact-form select { padding: 0 } #contact-form textarea { width: 560px; height: 200px; resize: vertical; margin-bottom:20px; } #contact-form input[type="text"]:focus, #contact-form input[type="password"]:focus, #contact-form input[type="email"]:focus, #contact-form textarea:focus { border: 1px solid #bbbbbb; color: #555; box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; -moz-box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; } #contact-form input[type="submit"] ,#comment-form input[type="submit"] { width:auto; float:left; } /*COMMENT FORM*/ form#comment-form { float:left; border:none; border-bottom:none; padding:0px; } #comment-form label { font-weight: normal; display: block; color: #7f7f7f; } #comment-form input[type=text], #comment-form input[type=password], #comment-form textarea, #comment-form select { border: 1px solid #dddddd; box-shadow: inset 0px 2px 4px #f3f3f3; -moz-box-shadow: inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: inset 0px 2px 4px #f3f3f3; font-size: 11px; padding: 4% 2%; width: 96%; float:left } #comment-form input[type=text]:focus, #comment-form input[type=password]:focus, #comment-form input.text:focus, #comment-form input.title:focus, #comment-form textarea:focus, #comment-form select:focus { border: 1px solid #bbbbbb; color: #555; box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; -moz-box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; -webkit-box-shadow: 0px 0px 5px #CCC,inset 0px 2px 4px #f3f3f3; outline: 0; } #comment-form input[type=text], #comment-form input[type=password], #comment-form input.text, #comment-form input.title, #comment-form textarea, #comment-form select { margin: 5px 0 } #comment-form textarea { width: 96%; height: 180px; padding: 4% 2%; resize: none; margin-bottom:20px; } /* ---------------------------------------------------------------------- */ /* 12- PORTFOLIO LAYOUTS /* ---------------------------------------------------------------------- */ #filterable { display: inline; float: right; margin-right:20px; } #filterable li { float: left; margin-left: 10px; } #filterable li a { display: block; color: #707070; text-align: center; width: 100%; height: auto; padding:0px 5px; margin:0px 5px 0px 0px; border-right:1pt solid #efefef; cursor:pointer; } #filterable li a:hover{ text-decoration: underline;} #filterable li a.active { color: #ff420a; } .filter-portfolio{height:30px;width:880px; margin-bottom:30px;padding:10px 0 10px 0;margin-top:0px;text-align:center;} .filter-portfolio-homepage{height:30px;width:100%;border-bottom:1pt solid #ebebeb;float:left;margin-bottom:30px;padding:10px 0 10px 0;margin-top:-30px;} .portfolio-container{width:900px;margin-right:-20px;float:left; } /*ONE THIRD*/ ul#portfolio-items-one-third {overflow: hidden;position: relative;list-style: none;margin: 0;padding: 0px 0 0 0 ;} ul#portfolio-items-one-third li { width:280px;float:left; margin-right:20px;margin-bottom:30px;} ul#portfolio-items-one-third li .portfolio-item{ float:left; background:#FFF;width:280px;height:auto;padding:0;} ul#portfolio-items-one-third li .item-content{background:#615951;float:left;width:280px;text-align:center;padding:0px 0 0px 0;height:auto; } #portfolio-items-one-third .portfolio-item-description{padding:0px 10px; } ul#portfolio-items-one-third li .item-content:hover{ background:#cb5234;} ul#portfolio-items-one-third li .item-content p{margin:0;padding:0;font-weight:800;color:#FFF;} ul#portfolio-items-one-third li .item-content p a{margin:0;padding:0;font-weight:800;color:#FFF;} ul#portfolio-items-one-third li .item-content span{font-style:italic;color:#FFF;} ul#portfolio-items-one-third li img{ width:100%;height:auto;padding:0;margin:0; } ul#portfolio-items-one-third li .portfolio-item-description{text-align:center;float:left;border-bottom:1pt solid #DDD;border-left:1pt solid #DDD;border-right:1pt solid #DDD;padding:10px;width:258px;} ul#portfolio-items-one-third li .portfolio-item-description span{color: #cacaca;font-style:italic;font-family:"Georgia";} ul#portfolio-items-one-third li .portfolio-item-description strong{color: #ff420a;} ul#portfolio-items-one-third li .portfolio-item-description p{text-align:center;} ul#portfolio-items-one-third li .portfolio-item-description a span:hover{color: #ff420a;text-decoration:underline;} /*ONE FOURTH*/ ul#portfolio-items-one-fourth {overflow: hidden;position: relative;list-style: none;margin: 0;padding: 0px 0 0 0 ;} ul#portfolio-items-one-fourth li { width:205px;float:left; margin-right:20px;margin-bottom:30px;} ul#portfolio-items-one-fourth li .portfolio-item{ float:left; background:#FFF;width:205px;height:auto;padding:0;} ul#portfolio-items-one-fourth li .item-content{background:#615951;float:left;width:205px;text-align:center;padding:0px 0 0px 0;height:auto; } ul#portfolio-items-one-fourth li img{ width:100%;height:auto;padding:0;margin:0; } ul#portfolio-items-one-fourth li .portfolio-item-description{text-align:center;float:left;border-bottom:1pt solid #DDD;border-left:1pt solid #DDD;border-right:1pt solid #DDD;padding:10px;width:183px;} ul#portfolio-items-one-fourth li .portfolio-item-description span{color: #cacaca;font-style:italic;font-family:"Georgia";} ul#portfolio-items-one-fourth li .portfolio-item-description strong{color: #ff420a;} ul#portfolio-items-one-fourth li .portfolio-item-description p{text-align:center;} ul#portfolio-items-one-fourth li .portfolio-item-description a span:hover{color: #ff420a;text-decoration:underline;} /*ONE HALF*/ ul#portfolio-items-one-half {overflow: hidden;position: relative;list-style: none;margin: 0;padding: 0px 0 0 0 ;} ul#portfolio-items-one-half li { width:430px;float:left; margin-right:20px;margin-bottom:30px;} ul#portfolio-items-one-half li .portfolio-item{ float:left; background:#FFF;width:430px;height:auto;padding:0;} ul#portfolio-items-one-half li .item-content{background:#615951;float:left;width:430px;text-align:center;padding:0px 0 0px 0;height:auto; } #portfolio-items-one-half .description{padding-top:0px; } ul#portfolio-items-one-half li .item-content:hover{ background:#cb5234;} ul#portfolio-items-one-half li .item-content p{margin:0;padding:0;font-weight:800;color:#FFF;} ul#portfolio-items-one-half li .item-content p a{margin:0;padding:0;font-weight:800;color:#FFF;} ul#portfolio-items-one-half li .item-content span{font-style:italic;color:#FFF;} ul#portfolio-items-one-half li img{ width:100%;height:auto;padding:0;margin:0; } ul#portfolio-items-one-half li .portfolio-item-description{text-align:center;float:left;border-bottom:1pt solid #DDD;border-left:1pt solid #DDD;border-right:1pt solid #DDD;padding:10px;width:408px;} ul#portfolio-items-one-half li .portfolio-item-description span{color: #cacaca;font-style:italic;font-family:"Georgia";} ul#portfolio-items-one-half li .portfolio-item-description strong{color: #ff420a;} ul#portfolio-items-one-half li .portfolio-item-description p{text-align:center;} ul#portfolio-items-one-half li .portfolio-item-description a span:hover{color: #ff420a;text-decoration:underline;} /* Isotope */ .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; z-index: 2; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: top, left, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /* ---------------------------------------------------------------------- */ /* 13- TABS AND ACCORDIONS /* ---------------------------------------------------------------------- */ ul.accordion { display: inline; float: left; width: 100%; margin-bottom: 30px; } ul.accordion li.accordion-item { float: left; width: 100%; background: #FFF; border-bottom: 1px solid #f0f0f0; } ul.accordion li.accordion-item:hover { background: #f9f9f9 } ul.accordion li.accordion-item.selected { background: #f9f9f9 } ul.accordion li.accordion-item.selected .accordion-switch { color: #d84519; font-weight: bold; } ul.accordion li.accordion-item .accordion-switch { cursor: pointer; padding-top: 15px; padding-left: 20px; padding-right: 20px; padding-bottom: 14px; font-size: 12px; color: #777; line-height: 22px; } ul.accordion li.accordion-item .togglegfx { float: left; height: 22px; width: 22px; background: url('../images/accordion-toggle.png') no-repeat left top; padding-right: 15px; margin-bottom: 11px; margin-top: 1px; } ul.accordion li.accordion-item.selected .accordion-switch .togglegfx { background-position: left bottom } ul.accordion li.accordion-item .accordion-content { padding-left: 25px; padding-right: 25px; } .tabs-nav { list-style: none; margin: 0; overflow: hidden; padding: 0; width: 100%; } .tabs-nav li { float: left; line-height: 32px; margin: 0; overflow: hidden; padding: 0; position: relative; } .tabs-nav li.active { line-height: 31px } .tabs-nav li a { background: #f8f8f8; border: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; border-left: none; color: #959393; display: block; letter-spacing: 0; outline: none; padding: 0 16px; text-decoration: none; text-shadow: 0 1px 0 #fff; } .tabs-nav li:first-child a { border-left: 1px solid #eaeaea } .tabs-nav li a:hover { background: #f0f0f0 } .tabs-nav li.active a { color: #d84519 } .tabs-nav li.active a { background: #fff; border-bottom: 2px solid #fff; border-top: 1px solid #d84519; } .tabs-container { border: 1px solid #eaeaea; margin: -1px 0 20px; overflow: hidden; width: 100%; } .tab-content { padding: 20px } /* ---------------------------------------------------------------------- */ /* 14- BLOG LAYOUTS /* ---------------------------------------------------------------------- */ .page-pagination { list-style: none } .page-pagination li { display: inline } .page-pagination li a { display: block; float: left; padding: 4px 10px; margin-right: 7px; border: 1px solid #e1e1e1; -webkit-box-shadow: inset 0 0 10px #f5f5f5; -moz-box-shadow: inset 0 0 10px #f5f5f5; box-shadow: inset 0 0 10px #f5f5f5; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #898989; } .page-pagination li.active a { background-color: #f5f5f5 } .page-pagination li a:hover { border: 1pt solid #c2c2c2 } .comment-avatar {margin:0px 10px 0px 0;float:left;display:block;padding:5px;border:1pt solid #e1e1e1;} blockquote.post-entry { background: #f8f8f8 url(../images/quote.png) no-repeat 17px 21px; font: italic 15px/1.6 "Georgia", Times, 'Times New Roman', serif; padding: 20px 20px 20px 55px; border-bottom: 1pt solid #e1e1e1; margin: 0px 0 20px 0; float: left; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .mediaitem{margin:5px 0 10px 0;} .inner-comment { margin-left: 40px } /* ---------------------------------------------------------------------- */ /* 15- 15- OTHER FEATURES LAYOUT (google maps,404 error style,pre style,blockquote style,team members,services,sliders,grid homepage...) /* ---------------------------------------------------------------------- */ .static-img{padding:4px;border:1pt solid #e1e1e1;} .pdf { background: url(../images/icons/pdf-icon.png) no-repeat 5px 12px; padding: 15px 10px 10px 65px; width: 125px; min-height: 48px; } .skype-call { background: url(../images/icons/skype-icon.png) no-repeat 5px 12px; padding: 15px 10px 10px 65px; width: 125px; min-height: 48px; } img.resize { width: 100%; max-height: 100%; } .users-testimonials{font-size:13px;float:left;border-left:2px solid #707070;padding:0 20px; font-style:italic;font-family:"Georgia";margin:20px 0;} .users-testimonials span{text-align:right;float:right;color: #cacaca;} .feedback_button { border-color: #ff420a; background-color: #ff420a; color:#fff;} .feedback_button:hover { border-color: #707070; background-color: #707070; color:#fff;} .feedback_button{ display:block; text-decoration: none; position: fixed; top:45%; left:-32px; z-index: 1000; padding:7px 14px; border-width: 1px; border-style: solid; font-weight: bold; -webkit-transform: rotateZ(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-backface-visibility: hidden; text-transform: uppercase; } .msie8 .feedback_button, .msie7 .feedback_button{filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);left:0;} #map { height: 200px; padding: 0px 0 30px 0; border-bottom:1pt solid #e1e1e1; position: relative; width: 880px; margin-bottom:30px; float:left; } #map:before, #map:after { background: none; -webkit-box-shadow: 0 0 5px 2px rgba(54, 55, 54, 0.1); -moz-box-shadow: 0 0 5px 2px rgba(54, 55, 54, 0.1); box-shadow: 0 0 5px 2px rgba(54, 55, 54, 0.1); content: ''; left: 0; position: absolute; top: 0; width: 100%; } #map:after { bottom: 0; top: auto; } pre, code { border: 1px solid #e1e1e1; border-left: 5px solid #e1e1e1; width: 96%; margin-bottom: 20px; padding: 2%; font-size: 11px; display: inline-block; background-color: #f5f5f5; } ul.buttons li { display: list; margin: 25px 0; } ul.buttons-huge li { display: list; margin: 45px 0; } .not-found-text { text-align: center; font-size: 100px; -webkit-mask-image: url(../images/mask.png) ; line-height:50px; } .not-found-text-smaller { text-align: center; font-size: 42px; -webkit-mask-image: url(../images/mask.png) ; line-height:50px; } .team-member{float:left;margin:0;text-align:center;} .team-member img{float:left;margin:0;} .team-member-content{text-align:center;float:left;border-bottom:1pt solid #DDD;border-left:1pt solid #DDD;border-right:1pt solid #DDD;background:#FFF;padding:10px;width:183px;} .team-member-content span{color: #cacaca;font-style:italic;font-family:"Georgia";} .team-member-content strong{color: #ff420a;} .team-member-content p{text-align:center;} .team-member-content a span:hover{color: #ff420a;text-decoration:underline;} ul.clients { float: left; width: 100%; margin: 0; padding: 0; margin-top: 1px; } ul.clients li { display: inline; } ul.clients li img { width: 19.8%; float: left; border: 1px solid #ddd; margin-right:-1px; margin-top: -1px; } .listovereffect { -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); -webkit-transform: scale(1.1);z-index:1111;position:relative;} blockquote { padding: 0px 10px 0px 35px; line-height: 20px; background: url(../images/quote.png) 0% 10% no-repeat; color: #999999; } blockquote span { color: #666666 } .service-item{float:left;margin:0;text-align:center;} .service-item img{float:left;margin:0;} .service-item-content{text-align:center;float:left;border-bottom:1pt solid #DDD;border-left:1pt solid #DDD;border-right:1pt solid #DDD;background:#FFF;padding:10px;width:258px;} .service-item-content span{color: #cacaca;font-style:italic;font-family:"Georgia";} .service-item-content strong{color: #ff420a;text-align:center;} .service-item-content p{text-align:center;} .service-item-content a span:hover{color: #ff420a;text-decoration:underline;} ul.center-list { text-align: center; } ul.center-list li { text-align: center;display: inline;} ul.center-list li a {text-align: center; padding: 15px 5px 5px 5px;} ul.center-list li a:hover { text-decoration: underline } /*GRID HOMEPAGE*/ #grid {float:left; height:auto; } #grid ul.portfolio-items{width:900px;margin-left:-10px;float:left;padding:10px;} .item-hover{ margin:0!important; padding:0px!important; border:5pt solid #FFF; border-bottom:none; float:left; height:auto; } #grid .portfolio-thumbnail{ position:absolute; left: 0px; top: 0px; height:100%; display:none; overflow:hidden; background:url("../images/thumb-hover-bg.png") repeat; text-align: left; cursor:pointer; padding:0; } #grid .thumb-text{ padding:10px; margin:0; } #grid .portfolio-thumbnail h4{color:#FFF;margin-bottom:10px;padding:0;font-weight:800;} #grid .portfolio-thumbnail p,#grid .portfolio-thumbnail a{color:#FFF;margin:0;padding:0;} #grid .portfolio-thumbnail a:hover{text-decoration:underline;} #grid .one-half .item-hover,#grid .one-third .item-hover,#grid .one-fourth .item-hover { float:left; position: relative; -moz-box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; -webkit-box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; box-shadow:0 0 6px #b7b7b7, inset 0 0 13px 5px #f9f9f9; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; } #grid .one-half:hover,#grid .one-third:hover,#grid .one-fourth:hover{ } #grid .one-half .portfolio-thumbnail{ width:418px; height:203px; } #grid .one-third .portfolio-thumbnail{ width:268px; height:130px; } #grid .one-fourth .portfolio-thumbnail{ width:193px; height:93px; } /*FLASH SLIDER SLIDER*/ #piecemaker{width:880px;height:450px;float:left;margin-bottom:0px;} /*KWICKS ACCORDION SLIDER*/ .kwicks-container {width: 880px; height:350px; margin: 0 auto 30px auto; overflow:hidden; position:relative; background: #FFF;} .kwicks li { float: left; width: 220px; height: 350px; display: block; overflow: hidden; padding: 0; -moz-box-shadow:1px 3px 15px #252525; -webkit-box-shadow:1px 3px 15px #252525; box-shadow:1px 3px 15px #252525; cursor:pointer; } .kwicks { list-style: none; position: relative; margin: 0; padding: 0; background:#FFF;overflow:hidden; } .kwicks.horizontal li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-right: 0px; /*Set to same as spacing option. */ float: left; background: #FFF; } .kwicks.vertical li{ /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-bottom: 5px; /*Set to same as spacing option. */ } .accordian-slider-caption { bottom:-100%; left:0%; position:absolute; color:#D1D1D1; padding:20px; font-size:12px; line-height:22px; background:url("../images/kwicks-caption.png") repeat; width: 440px; -moz-box-shadow:0px 3px 3px rgba(0,0,0,0.1); -webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.1); box-shadow:0px 3px 3px rgba(0,0,0,0.1); } .accordian-slider-caption h4{margin-bottom:20px;font-weight:800;color:#FFF;} /*ONE BY ONE SLIDER*/ #banner{ position: absolute; } .oneByOne1{ top: 0px; left: 0px; background: ; margin: 0; width: 880px; height: 350px; background: #f9f9f9; position: relative; overflow: hidden; -moz-box-shadow:inset 0 0 13px 5px #f2f2f2; -webkit-box-shadow:inset 0 0 13px 5px #f2f2f2; box-shadow:inset 0 0 13px 5px #f2f2f2; } #banner .oneByOne_item{ position: absolute; width: 960px; height: 420px; overflow: hidden; } #banner .oneByOne_item span{font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;} #banner .oneByOne_item a{ text-decoration: none; color: #B22222; } #banner .oneByOne_item span.slide2Txt1{ position: relative; float: left; margin: 100px 12px 0 80px; color: #FFF; font-size: 24px; background: #3a5caa; padding: 10px; } #banner .oneByOne_item span.slide2Txt2{ position: relative; clear: left; float: left; margin: 6px 12px 0 80px; color: #FFF; font-size: 14px; background: #d84519; padding: 10px; } #banner .oneByOne_item span.slide2Txt3{ position: relative; clear: left; float: left; margin: 6px 12px 0 80px; color: #FFF; font-size: 12px; background: #d84519; padding: 10px; } #banner img.wp1_3{ position: absolute; top: 50px; left: 50px; } #banner .oneByOne_item span.txt1{ clear: left; position: relative; float: left; margin: 120px 12px 0 540px; background: #ff420a; padding: 10px; color: #FFFFFF; font-size: 40px; } #banner .oneByOne_item span.txt1 a{color: #FFFFFF;} #banner .oneByOne_item span.txt2{ clear: left; position: relative; float: left; margin: 12px 12px 0 540px; color: #FFFFFF; background: #d84519; padding: 10px; font-size: 22px; } #banner img.wp2{ position: absolute; top: 100px; left: 495px; } #banner img.wp3{ position: absolute; top: 50px; left: 610px; } #banner .oneByOne_item span.wp1{ clear: left; position: relative; float: left; margin: 120px 12px 0 60px; background: #ff420a; padding: 10px; color: #FFFFFF; font-size: 40px; } #banner .oneByOne_item span.wp1 a{color: #FFFFFF;} #banner .oneByOne_item span.wp2{ clear: left; position: relative; float: left; margin: 12px 12px 0 60px; color: #FFFFFF; background: #d84519; padding: 10px; font-size: 16px; } #banner .oneByOne_item img.bigImage{ position: absolute; top: 0; left: 0; } #banner .oneByOne_item span.slide5Txt1{ position: relative; float: left; margin: 150px 12px 0 600px; color: #FFF; font-size: 24px; background: #ff420a; padding: 10px; } #banner .oneByOne_item span.slide5Txt2{ position: relative; clear: left; float: left; margin: 12px 12px 0 600px; color: #FFF; font-size: 12px; background: #d84519; padding: 10px; } #services-container { overflow:hidden; position:relative; height:200px; float:left; } #services-container .service{padding:0 0 30px 0;float:left;height:auto;}