Difference between revisions of "Team:SCUT/homestyle"

Revision as of 11:03, 18 September 2015

/*-----------------------------------------------------------------------------------

Template Name: Sympathique Template URI: http://www.deliciousthemes.com Description: Creative / Portfolio Template Author: Madalin Tudose Author URI: http://www.deliciousthemes.com License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 1.0

All files, unless otherwise stated, are released under the GNU General Public License version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)

1. CSS Reset & Clearfix 2. Document Setup (body, common classes, etc) 3. Columns 4. Typography 4.1. Dropcaps 4.2. Highlighted Text 5. Header 6. Main Content 6.1. Slider 6.2. Jcarousel 6.3. Sidebar 6.4. Portfolio 6.5. Blog 6.5.1. Comments 6.5.2. Pagination 6.6. Contact 7. Footer 7.1. Twitter 7.2. Flickr 7.3. Social Icons 8. Elements 8.1. Slides Plugin - for Portfolio Single Page 8.2. Buttons 8.3. Tabs 8.4. Toggles 8.5. Tables 8.6. Info Boxes 8.7. Lists 8.8. Accordions

*/

/*-----------------------------------------------------------------------------------*/ /* 1. CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/ /*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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, footer1, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer1, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

input,textarea { font: 12px/20px; font:inherit; resize:none; }

{ _noFocusLine: expression(this.hideFocus=true); } /* Removes dotted lines around links */

/*-----------------------------------------------------------------------------------*/ /* 2. Document Setup (body, common classes, structure etc) /*-----------------------------------------------------------------------------------*/

body { font: 12px/20px Open Sans, Helvetica, Arial, sans-serif; background:#fff; margin:0; padding:0; color:#686868; }

wrapper {

background:#fff; position:relative; }

a { text-decoration:none; -webkit-transition:color 0.2s linear;

   -moz-transition:color 0.2s linear;
   -o-transition:color 0.2s linear;
   transition:color 0.2s linear;

}

a:focus , a:link, a:active { outline:none; }

a:hover { color:#444; }

p { margin-bottom:20px; }

.clear { clear:both; }

.aligncenter { text-align:center; }

.alignleft { text-align:left; }

.alignright { text-align:right; }

strong { font-weight:700; }

bg {

   position: fixed;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 100%;
   z-index: -1;

}

.bgwidth { width: 100%; height:auto; }

.bgheight { height: 100%; width:auto; }

.space {

   height:60px;
   width:100%;

clear:both; }

.half-space {

   height:30px;
   width:100%;

clear:both; }

label {

   color:#7F7F7F;
   display:block;
   font-weight:normal;

}

label.error {

   color: red;
   font-style: italic;
   margin: 5px 0 10px 0;

}

input[type="text"], input[type="password"], input.text, input.title, textarea, select {

   background:#FFFFFF;
   border:1px solid #EBEBEB;

}

input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {

   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   border:1px solid #EBEBEB;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);

}

input[type="text"], input[type="password"], input.text, input.title, textarea, select {

   font-family:Arial;
   font-size:12px;
   margin:5px 0;

}

input.text, input.title, select {

   padding:5%;
   width:89%;

}

input.title {

   font-size:13px;

}

textarea {

   height:130px;
   padding:2% 2%;
   width:95.5%;

}

form.inline { }

form.inline p {

   margin-bottom:0;

}

/*-----------------------------------------------------------------------------------*/ /* 3. Columns /*-----------------------------------------------------------------------------------*/

.one-half { width: 460px;border:1px solid red; } .one-third { width: 300px; } .two-third { width: 620px; } .one-fourth { width: 220px; } .three-fourth { width:700px; } .one-sixth { width: 140px; } .five-sixth { width: 780px }

.one-fourth, .one-half, .two-third, .one-third, .three-fourth, .one-sixth, .five-sixth { position: relative; margin-right:20px; float: left; }

.percent-one-half { width: 48%; } .percent-one-third { width: 30.66%; } .percent-two-third { width: 65.33%; } .percent-one-fourth { width: 22%; } .percent-three-fourth { width: 74%; } .percent-one-fifth { width: 16.8%; } .percent-two-fifth { width: 37.6%; } .percent-three-fifth { width: 58.4%; } .percent-four-fifth { width: 67.2%; } .percent-one-sixth { width: 13.33%; } .percent-five-sixth { width: 82.67%; }

.percent-one-half, .percent-one-third, .percent-two-third, .percent-three-fourth, .percent-one-fourth, .percent-one-fifth, .percent-two-fifth, .percent-three-fifth, .percent-four-fifth, .percent-one-sixth, .percent-five-sixth { position: relative; margin-right: 4%; float: left; }

.column-right { float:right; } .column-last { margin-right: 0!important; clear: right; }

/*-----------------------------------------------------------------------------------*/ /* 4. Typography /*-----------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 { font-weight:normal; color:#444; }

h1 { font-size:28px; line-height:36px; margin-bottom:13px; }

h2 { font-size:24px; line-height:32px; margin-bottom:13px; }

h3 { font-size:18px; line-height:24px; margin-bottom:20px; }

h4 { font-size:16px; line-height:22px; margin-bottom:20px; }

h5 { font-size:14px; line-height:20px; margin-bottom:15px; }

h6 { font-size:13px; line-height:20px; margin-bottom:20px; font-weight:600; }

/*--- 4.1. Dropcaps ---*/

.dropcap1 {

   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   background: #666666;
   border-radius: 3px;
   color: #fff;
   float: left;
   font-size: 36px;
   margin: 4px 10px 2px 0;
   padding: 12px 6px;
   text-shadow:0 1px 0 #fff;

}

.dropcap2 {

   float: left;
   font-size: 36px;

line-height:26px;

   padding-right: 10px;
   padding-top: 8px;

}

.dropcap3 {

   float: left;
   font-size: 36px;

line-height:30px;

   font-style: italic;
   padding-right: 10px;

padding-top:8px; }

/*--- 4.2. Hightlighted Text ---*/

.highlight {

   padding: 1px 3px;

}

.highlight.redish {

   background-color: #ffcccf;
   color: #A14A40;

}

.highlight.bluish {

   background-color: #D7E7F5;
   color: #5E6984;

}

.highlight.yellowish {

   background-color: #FFF9CC;
   color: #736B4C;

}

.highlight.greenish {

   background-color: #E2F2CE;
   color: #466840;

}

.highlight.dark {

   background: #333333;
   color:#fff;

}

pre, code {

   background-color: #F5F5F5;
   border-color: #ebebeb;
   border-style: solid;
   border-width: 0px 0px 0px 4px;
   display: block;
   font-family: monospace;
   font-size: 11px;
   padding: 10px;

}

pre, code {

   margin-bottom:10px;

}

blockquote {

   border-left: 2px solid #ebebeb;
   color: #787878;
   font-size: 16px;
   font-style: italic;
   line-height:24px;
   margin: 20px 50px;
   padding: 0 0 5px 15px;

}

/*-----------------------------------------------------------------------------------*/ /* 5. Header /*-----------------------------------------------------------------------------------*/

top {

}

header {

position:relative; z-index:4000; }

.top-shadow { position:absolute; background:url(images/top-shadow.png) repeat-x scroll 0 0; height:4px; width:100%; z-index:100; opacity:0.5; }

.bottom-shadow { position:absolute; background:url(images/bottom-shadow.png) repeat-x scroll 0 0; height:4px; width:100%; top:176px; left:0; z-index:200; opacity:0.5; }

.home .bottom-shadow { top:446px; }

.fullwidth-map .bottom-shadow { top:396px; }

.fullwidth-map { margin: 0 auto; overflow: hidden; clear: both; position: relative; }

.fullwidth-map iframe { left: 50%; margin-left: -960px; position:relative; }

.logo { position:relative; height:60px; }

.logo img { display:block; position:absolute; bottom:0; }

navigation {

float:right; position:relative; z-index:10000; }

ul#mainnav { float:left; position:relative; display:block; z-index:1001; }

ul#mainnav li { display:inline-block; float:left; position:relative; z-index:1000; }

ul#mainnav > li { background:url(images/nav-bg.png) no-repeat scroll right center; }

ul#mainnav > li.prev-item, ul#mainnav > li.previ-item { background:none; }

ul#mainnav > li:last-child { background:none; }

ul#mainnav li a { font: 13px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif; position:relative; font-weight:600; color:#686868; margin:0; padding:0 20px; height:86px; line-height:86px; display:inline-block; *display:block; /* IE7 Hack */ -webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;

   -moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
   -o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
   transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;

z-index:100; }

ul#mainnav > li > a > span { border-bottom:1px dotted #fff; padding-bottom:2px; }

ul#mainnav > li.item-active > a { color:#fff; }

ul#mainnav li a.sf-with-ul:hover, ul#mainnav li a.sf-with-ul:active { color:#fff; }

ul#mainnav li ul li a.sf-with-ul:hover, ul#mainnav li ul li a.sf-with-ul:active { background:#444; color:#fff;

}

ul#mainnav li a:hover, ul#mainnav li a:active, ul#mainnav li a.current { color:#fff; }

ul#mainnav li ul li a.current { color:#444; background:#fff; } ul#mainnav li ul li a.current:hover { color:#fff; background:#444; }

ul#mainnav li ul li { background:#fff; margin:0; float:left; width:100%; }

ul#mainnav li ul li a, ul#mainnav li ul li ul li a, ul#mainnav li ul li a:visited, ul#mainnav li ul li a:active { /* visited pseudo selector so IE6 applies text colour*/ height:37px; line-height:37px; width:200px; padding:0 15px; display:block; background:#fff; text-decoration:none; border-bottom:1px solid #ebebeb; border-left:1px solid #ebebeb; z-index:1100; position:relative; font-size:11px !important; text-transform:uppercase; }

.nav-first-item { z-index:1000; position:relative; }

nav ul#mainnav > li > ul > li.nav-last-item > a, #nav ul#mainnav > li > ul > li > ul > li.nav-last-item > a {

border-bottom:0 none; }

ul#mainnav li ul li a:hover, ul#mainnav li ul li ul li a:hover { background:#444; color:#fff; margin-bottom:0px; border-bottom:1px solid #444; border-left:1px solid #444; }

/*-----------------------------------------------------------------------------------*/ /* 6. Main Content /*-----------------------------------------------------------------------------------*/

.services { overflow:hidden; margin-bottom:80px; }

.homepage-services .service-item { text-align:center; padding: 20px 10px 10px; border: 1px solid #efefef; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

.homepage-services .service-item:hover { background:#f7f7f7; }

.homepage-services .service-item i { float:none; margin:0; width: 100%; height: 48px; line-height: 48px; font-size:42px; display:block; } .homepage-services h3.service { margin-top:20px; border-bottom:1px dotted #ccc; display:inline-block; clear:both; }

.clients { overflow:hidden; border:1px solid #f1f1f1; text-align:center; clear:both; } .clients li { display:inline-block; border-left:1px solid #f1f1f1; text-align:center; padding:0 11px; } .clients li:first-child { border: none; }

.clients li img { vertical-align:middle; }

.clients li a { opacity:0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; filter: alpha(opacity=15); display:inline-block; height:120px; line-height:120px; }

.intro { position:relative; padding:57px 0; text-align:center; }

.intro h2 { font-size:28px; font-weight:300; margin-bottom:16px; }

.intro h5 { font-size:16px; }

.intro a:hover { color:#444; }

.centered-wrapper { width:940px; margin:0 auto; }

.title-wrapper { width:940px; margin:0 auto; background:#fff; position:relative; height:80px; z-index:201; padding:0 45px 0; box-shadow: 0 0 5px #555; }

.title-bg { background:#fff; width:940px; padding:0 45px 0; height:90px; margin-left:-45px; background:#fff; }

.title-content { width:940px; margin:0 auto; padding-bottom:25px; border-bottom:1px solid #efefef; position:absolute; top:30px; }

.page-title { width:100%; clear:both; margin-bottom:65px; padding:100px 0 0; position:relative; z-index:1; }

.page-title .page-background { width:100%; position:absolute; top:0; left:0; height:180px; overflow:hidden; z-index:0; }

.page-title .page-background .pattern1 { background:url(images/bg/bg1.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern2 { background:url(images/bg/bg2.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern3{ background:url(images/bg/bg3.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern4 { background:url(images/bg/bg4.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern5 { background:url(images/bg/bg5.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern6 { background:url(images/bg/bg6.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern7 { background:url(images/bg/bg7.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern8 { background:url(images/bg/bg8.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern9 { background:url(images/bg/bg1.png) repeat scroll 0 0; height:180px; }

.page-title .page-background .pattern10 { background:url(images/bg/bg10.png) repeat scroll 0 0; height:180px; }

.page-title .page-background img { position:absolute; top:0px; left:50%; margin-left:-960px; }

.page-title h2 { font-size: 36px; line-height:44px; font-weight: 300; }

.search-form { float:right; position:relative; top:-7px; }

.search-form input[type="text"] { width:180px; height:20px; line-height:20px; position:relative; padding:6px 10px; color:#686868; display:block; }

.search-form input[type="submit"] { background:url(images/search.png) scroll 0 0; width:16px; height:16px; border:0 none; text-indent:-9999px; cursor:pointer; position:absolute; top:14px; right:10px; font-size: 0; display:block; line-height: 0; }

.page-title .double-separator { margin:0; }

.breadcrumbs { font-size:12px; padding:10px 0; width:100%; overflow:hidden; }

.service-item { overflow:hidden; }

.service-item p { margin-bottom:10px; }

.service-item i { float:left; margin:0 15px 4px 0; width:28px; height:28px; line-height:28px; font-size:28px; }

h3.service { font-size:16px; font-weight:600; line-height:28px; }

.separator { width:100%; height:1px; clear:both; background:#efefef; margin:40px 0; display:inline-block; }

.double-separator { width:100%; height:1px; clear:both; border-top:1px solid #efefef; border-bottom:1px solid #efefef; margin:40px 0; }

footer1 .double-separator {

margin:50px 0; }

.onepage-title { font-size:48px; font-weight:300; margin-bottom:30px; line-height:56px; }

.one-page #header { background:#fafafa; }

.bgtitle { margin-bottom:20px; height:25px; padding-bottom:7px; border-bottom:1px solid #efefef; } .bgtitle h2, .homepage-clients h2 { font-size: 13px; font-weight: 600; float: left; height: 26px; line-height: 26px; background: #f7f7f7; padding: 0 10px; text-transform: uppercase; }

.team-member {

   position:relative;

background: white; margin-bottom:20px; background:#f7f7f7; }

.team-member a { overflow: hidden; display: block; position: relative; }

.team-avatar {

   height:auto;
   width:100%;

display:block; }

.team-text h3 { font-size:12px; font-weight:600; text-align:center; clear:both; text-transform:uppercase; padding-top:18px; margin-bottom:3px; }

.team-text h6 { text-align:center; font-size:12px; font-weight:400; padding-bottom:15px; margin:0; }

skills {

   width: 100%;
   margin: 0;

}

skills div.row {

   position:relative;
   margin-bottom: 16px;

}

skills .skill {

width: 70%; height: 10px; display: block; position: relative; background: #EFEFEF; overflow: hidden; }

skills h2 {

   font-size: 11px;

font-weight:600;

   text-transform: uppercase;
   float: left;
   width: 30%;
   height: 1em;
   line-height: 1;

position:absolute; right:-15px; top:0px; color:#686868; }

skills p {

   width: 0em;
   height: 10px;
   float: left;

margin:0; }

.team-text p { padding:0 5px; }

.team-social {

   border-top:1px solid #efefef;

text-align:center; overflow:hidden; clear:both; }

.team-social a img {

   -moz-transition: all .2s ease-in-out;
   -o-transition: color .2s ease-in-out, opacity .2s ease-in-out, border-color .3s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   opacity: .3;

filter:alpha(opacity=30);

   transition: all .2s ease-in-out;

}

.team-social a img:hover{

   opacity: 1;

filter:alpha(opacity=100); }

.team-social a { padding:5px; margin-top:10px; display:inline-block; }

.team-text span {

   color:#787878;

}

.team-text p {

   margin-top:10px;

}

.testimonial-item { background:#f9f9f9; padding:20px 15px 1px; margin-top:3px; font-style:italic; font-size:13px; position:relative; }

.testimonial-pin { background:url(images/testimonial-pin.png) no-repeat scroll 0 0; display: block; width: 24px; height: 16px; position: absolute; left:30px; }

.testimonial-meta { font-style:normal; position:absolute; width:80%; font-weight:600; font-size:12px; left:20%; bottom:-40px; }

.testimonial-meta h5 { float:left; margin-right: 5px; font-size:12px; font-weight:600; }

.testimonial-meta span { color:#444; }

.one-page .standardNav{ position:fixed !important; }

.one-page ul#mainnav li.active a { color:#fff; }

.one-page #header { position:fixed !important; width:100%; background:#fafafa; top:0; }

.one-page .onepage-content { margin-top:86px; }

.one-page .section { margin-top:86px; }

/* 6.1 Slider */

.bannercontainer { background-color:#fff; width:940px; position:relative; position:relative; margin-left:auto; margin-right:auto; max-height:378px !important; }

.banner{ width:940px; height:378px; position:relative; overflow:hidden; }

.bannercontainer-simple { padding:0px; background-color:#fff; width:940px; position:relative; position:relative; margin-left:auto; margin-right:auto;

}

.banner-simple{ width:940px; height:378px; position:relative; overflow:hidden; }

.fullwidthbanner-container{ width:100% !important; position:relative; padding:0; max-height:450px !important; overflow:hidden; }

.fullwidthbanner-container .fullwidthabnner { width:100% !important; max-height:450px !important; position:relative; }

@media only screen and (min-width: 768px) and (max-width: 959px) { .banner, .bannercontainer { width:768px; height:309px;} }

@media only screen and (min-width: 480px) and (max-width: 767px) { .banner, .bannercontainer { width:480px; height:193px; } }

@media only screen and (min-width: 320px) and (max-width: 479px) { .banner, .bannercontainer { width:320px;height:129px; } }

@media only screen and (max-width: 319px) { .banner, .bannercontainer { width:240px;height:97px; } }

/* captions */ .title_text{

   position: absolute;

color: #323232; font-weight: 300; font-size: 18px; height:42px; line-height: 42px; margin: 0px; padding: 0 10px; background: #ffffff; opacity:0.9 !important; border-width: 0px; border-style: none; white-space:nowrap; } .box-slide1 { position: absolute; color: #686868; font-weight: 400; font-size: 12px; line-height:20px; height:auto; width:300px; margin: 0px; padding: 20px; background: #fff; opacity:0.9 !important; border-width: 0px; border-style: none; white-space:normal !important; display:block; } .box-slide2 { position: absolute; color: #fff; font-weight: 400; font-size: 12px; line-height:20px; height:auto; width:300px; margin: 0px; padding: 20px; background: #323232; opacity:0.9 !important; border-width: 0px; border-style: none; white-space:normal !important; display:block; } .box-slide2 h2 { color:#fff; } .box-slide2 a { color:#fff !important; } .description_text{ position: absolute; color: #d0d0d0; font-weight: 400; font-size: 14px; height:36px; line-height: 36px; margin: 0px; padding: 0 10px; background: #393939; opacity:0.9 !important; border-width: 0px; border-style: none; white-space:nowrap; }

.isotope-item {

 z-index: 2;

}

.isotope-hidden.isotope-item {

 pointer-events: none;
 z-index: 1;

}

/*--- 6.2. Jcarousel ---*/

.jcarousel-container { margin-bottom:20px; }

.jcarousel-direction-rtl { direction: rtl; }

.jcarousel-container-horizontal {

   width: 940px;

clear:both; }

.jcarousel-clip {

   overflow: hidden;

}

.jcarousel-clip-horizontal {

   width:  940px;
   height: auto;

}

.jcarousel-item { display: block; position: relative; padding:0; }

portfolio-carousel .jcarousel-item {

   width: 220px;
   height: 260px;

border-bottom:2px solid #323232; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

portfolio-carousel .jcarousel-item:hover {

background:#fafafa; }

homeblog-carousel .jcarousel-item {

   width: 460px;
   height: 200px;

}

.jcarousel-item a { display: block; width: 100%; height: auto; position:relative; color:#323232; }

.jcarousel-item h3 { text-transform:uppercase; font-size:12px; font-weight:600; padding:20px 0 2px; margin:0; }

.jcarousel-item span { color:#a1a1a1; }

.portfolio-carousel-details { border-left:1px solid #efefef; border-right:1px solid #efefef; height:80px; }

a[rel="PrettyPhoto"] { overflow:hidden; display:block; position:relative; }

portfolio-carousel .jcarousel-item img {

width:100%; height:auto; }

homeblog-carousel .jcarousel-item img {

width:220px; height:auto; }

homeblog-carousel .jcarousel-item > a {

width:220px; float:left; margin-right:20px; }

homeblog-carousel .blog-carousel-details a {

float:none; margin:0; }

homeblog-carousel .blog-carousel-details {

float:left; text-align:left; width:220px; }

homeblog-carousel .carousel-meta {

width:100%; }

homeblog-carousel .carousel-meta a {

display:inline; }

homeblog-carousel .carousel-meta .details {

padding:0 10px; height:21px; background:#f5f5f5; font-size:11px; line-height:21px; display:inline-block; }

homeblog-carousel p {

margin:18px 0 0; }

.post-format i { width:21px !important; height:21px; display:block; float:left; position:relative; color:#fff; line-height:21px; }

homeblog-carousel .blog-carousel-details h2 {

font-size:18px; font-weight:600; line-height:27px; }

.jcarousel-item-horizontal { margin-left: 0;

   margin-right: 20px;

text-align:center; }

.jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px;

   margin-right: 0;

}

.jcarousel-item-vertical {

   margin-bottom: 10px;

}

.jcarousel-item-placeholder {

   background: #fff;
   color: #444;

}

.jcarousel-next-horizontal {

   position: absolute;
   top: -52px;
   right: 0;
   width: 23px;
   height: 25px;
   cursor: pointer;
   background: #f7f7f7 url(images/carousel-arrows.png) no-repeat 0 0;

}

.jcarousel-next-horizontal:hover, .jcarousel-next-horizontal:focus {

   background-position: -24px 0;

}

.jcarousel-next-horizontal:active {

   background-position: -24px 0;

}

.jcarousel-next-disabled-horizontal, .jcarousel-next-disabled-horizontal:hover, .jcarousel-next-disabled-horizontal:focus, .jcarousel-next-disabled-horizontal:active {

   cursor: default;
   background-position: -48px 0;

background-color:#f7f7f7 !important; }

.jcarousel-prev-horizontal {

   position: absolute;
   top: -52px;

right:24px;

   width: 23px;
   height: 25px;
   cursor: pointer;
   background: #f7f7f7 url(images/carousel-arrows.png) no-repeat 0 -26px;

}

.jcarousel-prev-horizontal:hover, .jcarousel-prev-horizontal:focus {

   background-position: -24px -26px;

}

.jcarousel-prev-horizontal:active {

   background-position: -24px -26px;

}

.jcarousel-prev-disabled-horizontal, .jcarousel-prev-disabled-horizontal:hover, .jcarousel-prev-disabled-horizontal:focus, .jcarousel-prev-disabled-horizontal:active {

   cursor: default;
   background-position: -48px -26px;

background-color:#f7f7f7 !important; }

testimonials {

min-height:180px; }

span.caption { position:relative; clear:both; font-size:13px; background:#fff; color:#444; line-height:40px; width:100%; left:0; }

span.caption a { color:#444; }

span.item-on-hover, .grid-item-on-hover { cursor:pointer; display: block; opacity: 0; filter: alpha(opacity=0); position: absolute; width: 100%; height: 100%; background: url(images/item-on-hover.png) repeat; }

span.item-on-hover-white { cursor:pointer; display: block; opacity: 0; filter: alpha(opacity=0); position: absolute; width: 100%; height: 100%; background: url(images/item-on-hover-white.png) repeat; }

.portfolio img { display:block; }

.grid-item-on-hover { text-align:left; width:90%; padding:0 5%; }

.grid-item-on-hover .grid-text { position:absolute; left:5%; top:5%; text-align:left; width:90%; }

.grid-item-on-hover .grid-text p { color:#fff; padding:15px 0 0; opacity:0.6; }

.item-small .grid-item-on-hover p, .item-long .grid-item-on-hover p { padding:0; }

.grid-item-on-hover h1 { font-weight:300; color:#fff; font-size:28px; line-height:36px; text-transform:uppercase; position:relative; }

.grid-item-on-hover span { color:#fff; font-size:11px; text-transform:uppercase; opacity:0.7; position:absolute; left:5%; bottom:5%; text-align:left; width:90%; }

.item-high .grid-item-on-hover h1 { font-size:20px; line-height:26px; width:80%; left:10%; }

.item-wide .grid-item-on-hover span { font-size:12px; }

.item-small .grid-item-on-hover h1 { font-size:20px; line-height:26px; }

.item-on-hover *{ filter:inherit; }

span.hover-link { width:35px; height:35px; top: 50%; left: 50%; margin-left: -17px; margin-top: -17px; position:absolute; display:block; opacity: 0; filter: alpha(opacity=0); }

span.hover-image { width:35px; height:35px; top: 50%; left: 50%; margin-left: -17px; margin-top: -17px; position:absolute; display:block; opacity: 0; filter: alpha(opacity=0); }

span.hover-video { width:35px; height:35px; top: 50%; left: 50%; margin-left: -17px; margin-top: -17px; position:absolute; display:block; opacity: 0; filter: alpha(opacity=0); }

/*--- 6.3. Sidebar ---*/

sidebar {

width:260px; float:right; }

sidebar h3 {

font-size:13px; text-transform:uppercase; font-weight:600; }

.widget { overflow:hidden; margin-bottom:55px; }

.widget a { color:#444; }

.widget ul li { font-size:12px; padding:3px 0 3px 0; }

.widget ul li:last-child { border-bottom:0 none; } .tags ul li { float:left; margin:0 4px 4px 0; padding:0; } .tags ul li a { display:block; padding:6px 13px; background:#f9f9f9; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

.tags ul li a:hover { color:#fff; }

.sidebar-post { overflow:hidden; border-bottom:1px solid #efefef; margin-bottom:15px; padding-bottom:15px; position:relative; }

.sidebar-post:last-child { border-bottom:0 none; }

.sidebar-post span { float:left; clear:both; width:100%; }

.sidebar-post h5 { font-size:13px; font-weight:600; color:#444; margin-bottom:5px; float:left; }

.featured-sidebar { width:200px; float:left; border:1px solid #dfdfdf; }

.featured-sidebar ul { border-bottom:1px solid #efefef; }

.featured-sidebar a{ color:#686868; width:180px; height:36px; line-height:36px; display:block; font-weight:600; margin-left:10px; border-bottom:1px solid #efefef; }

.featured-sidebar ul li.selected { background: url(images/featured-arrow.png) no-repeat scroll 200px center; width: 210px; }

.featured-sidebar ul li a:hover { color:#444; }

.featured-sidebar ul li.selected a { width:180px; height:36px; z-index:1000; }

.featured-sidebar ul li:last-child a { border-bottom:0 none; }

/*--- 6.4. Portfolio ---*/

ul#filters { float:right; margin-top:6px; }

ul#filters li { display:inline; margin:0; padding:0; float:left; }

ul#filters li a { color:#686868; background:#f7f7f7; padding:8px 15px 9px 15px; margin-left:1px; font-weight:600; display:block; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

ul#filters li a.selected { color:#fff; }

.homepage-grid { clear:both; position:relative; }

.homepage-grid .bgtitle { margin-bottom:20px; }

ul#home-filters { position:absolute; top:0; right:0; }

ul#home-filters li a { color:#686868; background:#f7f7f7; padding:3px 15px; margin-left:1px; font-weight:600; display:block; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

ul#home-filters li a.selected, ul#home-filters li a:hover { color:#fff; }

home-filters li {

display:inline; margin:0; padding:0; float:left; }

.portfolio { clear:both; overflow:hidden; margin-right:-20px; }

.portfolio .portfolio-carousel-details { height:auto; border-bottom: 1px solid #EFEFEF; }

.portfolio .portfolio-carousel-details span { padding-bottom:15px; display:block; color:#A1A1A1; }

.portfolio li { margin-right:20px; float:left; position:relative; margin-bottom:20px; overflow:hidden; background:#fff; padding:0; text-align:center;

  -webkit-transition:background 0.2s ease-in;
  -moz-transition:background 0.2s ease-in;
  -o-transition:background 0.2s ease-in;
  transition:background 0.2s ease-in;

}

.portfolio li:hover { background:#fafafa; }

.portfolio li.item-wide, .portfolio li.item-wide img { width:460px !important; height:376px !important; border-bottom: none !important; }

.portfolio li.item-small, .portfolio li.item-small img { width:220px !important; height:178px !important; border-bottom: none !important; }

.portfolio li.item-high, .portfolio li.item-high img { width:220px !important; height:376px !important; border-bottom: none !important; }

.portfolio li.item-long, .portfolio li.item-long img { width:460px !important; height:178px !important; border-bottom: none !important; }

.portfolio h3 { position:relative; clear:both; font-size:13px; color:#444; line-height:22px; padding:20px 0 5px; margin:0; width:100%; left:0; font-weight:600; }

.portfolio h3 a { color:#444; }

.portfolio p { padding:0 7px 20px; margin:0; }

portfolio-wrapper a {

display: block; width: 100%; height: auto; position: relative; }

portfolio-wrapper .four-columns img {

width:220px; height:auto; display:block; }

portfolio-wrapper .three-columns img {

width:300px; height:auto; display:block; }

portfolio-wrapper .two-columns img {

width:460px; height:auto; display:block; }

portfolio-wrapper .four-columns li {

width: 220px; height:263px; display: block; position: relative; }

portfolio-wrapper .three-columns li {

width: 300px; height: 328px; display: block; position: relative; }

portfolio-wrapper .two-columns li {

width: 460px; height: 459px; display: block; position: relative; }

.item-details p { margin:0; padding:10px 0; border-bottom:1px solid #efefef; }

.item-details span { color:#444; }

.portfolio-single { margin-bottom:50px; overflow:hidden; }

.previous-post-link a, .next-post-link a { width:25px; height:25px; display:block; text-indent:-9999px; float:left; margin-top:10px; -webkit-transition:all 0.1s linear;

   -moz-transition:all 0.1s linear;
   -o-transition:all 0.1s linear;
   transition:all 0.1s linear;

}

.proj-image img { display:block; } .portfolio-gallery { width:960px; height:auto; }

.portfolio-gallery a { display:block; float:left; margin-right:20px; margin-bottom:20px; position:relative; }

.portfolio-gallery img { width:300px; height:auto; display:block; }

.portfolio-nav { float:right; position:relative; margin-top:16px; }

.portfolio-nav a { display:block; width:23px; height:25px; text-indent:-9999px; float:left; margin-left:10px; -webkit-transition:background 0.2s linear; -moz-transition:background 0.2s linear; -0-transition:background 0.2s linear; transition:background 0.2s linear; }

.gallery-page { width:960px; }

.gallery-page li { width:300px; margin:0 20px 20px 0; position:relative; float:left; }

.gallery-page li a { display:block; }

.gallery-page li img { width:100%; height:auto; display:block; }

/*--- 6.5. Blog ---*/

masonry-blog {

width:960px; position:relative; }

.masonry-post { position:relative; float:left; margin-right:20px; margin-bottom:20px; }

.masonry-thumbnail { position:relative; }

.masonry-thumbnail img { width:100%; display:block; }

.masonry-page-content blockquote { clear:both; margin:20px 0; }

.masonry-page-content .button { margin-bottom:10px; }

.masonry-post-meta { height:30px; line-height:30px; border-bottom:1px dotted #c3c3c3; display:block; float:left; margin-bottom:18px; text-transform:uppercase; font-size:11px; position:relative; }

.quote-article h4 { font-size:12px; text-transform:uppercase; }

.masonry-page-content { position:relative; border-bottom:2px solid #323232; padding:10px 20px; background:#fafafa; }

.masonry-page-content i.icon-pencil, .masonry-page-content i.icon-quote-left, .masonry-page-content i.icon-facetime-video, .masonry-page-content i.icon-link, .masonry-page-content i.icon-camera-retro, .masonry-page-content i.icon-music { font-size:16px; height:30px; width:30px; line-height:30px; text-align:center; background:#fff; color:#686868; position:absolute; right:20px; top:10px; }

.post-content i.icon-pencil, .post-content i.icon-quote-left, .post-content i.icon-facetime-video, .post-content i.icon-link, .post-content i.icon-camera-retro, .post-content i.icon-music { font-size:16px; height:30px; width:30px; line-height:30px; text-align:center; background:#f9f9f9; color:#686868; position:absolute; right:0; top:10px; }

blog-page .post-content i.icon-pencil,#blog-page .post-content i.icon-quote-left,#blog-page .post-content i.icon-facetime-video,#blog-page .post-content i.icon-link,#blog-page .post-content i.icon-camera-retro,#blog-page .post-content i.icon-music {

top:0 !important; }

blog-page div.jp-audio div.jp-type-single div.jp-progress {

width: 59%; left: 16%; }

blog-page div.jp-audio {

margin-bottom:20px; }

.columns-two .vimeo-article iframe { width:460px !important; height:259px !important; }

.columns-three .vimeo-article iframe { width:300px !important; height:169px !important; }

h1.masonry-title { clear:both; font-size:18px; font-weight:600; line-height:26px; }

.music-article h1.masonry-title { margin-top:20px; }

h1.masonry-title a, .post-content h1 a { color:#323232; }

.columns-three .masonry-post { width:300px; position:relative; }

.columns-two .masonry-post { width:460px; position:relative; }

posts {

float:left; position:relative; width:640px; margin-right:40px; overflow:hidden; }

blog-page .post {

border-bottom:2px solid #323232; }

.single-post .post { border-bottom:0; margin-bottom:0px; padding-bottom:0px; }

h1.post-title { clear:both; }

.meta a { color:#c7c7c7; }

.post-thumbnail { display:inline-block; clear:both; margin-top:0px; }

.video-thumbnail { margin-bottom:30px; display:block; clear:both; margin-top:0px; }

.post-thumbnail a { display:block; position:relative; }

.post-thumbnail img { width:640px; height:auto; }

.single-post .masonry-post-meta, .portfolio-content .masonry-post-meta { height:50px; line-height:50px; }

.meta { clear:both; float:left; margin-bottom:20px; }

.meta span { padding-left:23px; float:left; margin-right:20px; }

.meta span.post-date { background:url(images/calendar.png) no-repeat scroll 0 3px; color:#C7C7C7; }

.meta span.post-author { background:url(images/author.png) no-repeat scroll 0 3px; }

.meta span.post-comment { background:url(images/comment.png) no-repeat scroll 0 4px; }

.meta p { margin:0; padding:5px 0; }

.excerpt { width:100%; clear:both; }

p.readmore { text-align:right; }

.post { margin-bottom:50px; padding-bottom:20px; border-bottom:1px solid #efefef; overflow:hidden; position:relative; }

.post-content { clear:both; position:relative; }

.post blockquote { border-bottom:2px solid #d6d6d6; border-left:none; margin:0; padding:20px; background:#f9f9f9; font-size:13px; margin-bottom:20px; }

blog-page .post blockquote {

clear:both; border-bottom:none; border-left:2px solid #ebebeb; margin:0; padding:20px; background:#fff; font-size:16px; margin-bottom:20px; }

.right-image {

   float:right;
   margin:5px 0 0 20px;

padding: 4px; border: 1px solid #EFEFEF; border-radius: 2px; }

.left-image {

   float:left;
   margin:5px 20px 0 0;

padding: 4px; border: 1px solid #EFEFEF; border-radius: 2px; }

.post-image {

   margin:5px 0 20px;

}

ul.tags {

   padding:0 0 10px;
   position:relative;

overflow:hidden; }

ul.tags a { color:#c7c7c7; }

ul.tags li {

   display:inline;
   float:left;
   height:16px;
   line-height:20px;
   margin:30px 20px 0 0;

}

.tag-title {

   background-image:none;
   float:left;
   line-height:18px;
   margin:30px 20px 0 0;

}

.author-bio {

   clear:both;
   margin:30px 0 0;
   overflow:hidden;
   padding:15px 0 15px;
   position:relative;

}

.authorp {

   float:left;
   width:82%;

}

.authorp h2 { color:#C7C7C7; } .authorp h2 a { color:#444; }

.author-bio p { margin-bottom:0; }

.author-bio img {

   float:left;
   margin:0 25px 0 0;

}

.inner-blog-gallery li { float:left; display:block; margin-right:20px; margin-bottom:30px; position:relative; }

.inner-blog-gallery li a { display: block; width: 100%; height: auto; position: relative; width:145px; height:145px; }

.inner-blog-gallery img { display:block; }

.next-prev-posts { margin-top:20px; padding:1px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef; overflow:hidden; font-size:12px; text-transform:uppercase; font-weight:600; }

.next-prev-posts .previous-post { width:50%; float:left; padding:13px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef; text-align:left; }

.next-prev-posts .next-post { width:50%; float:right; padding:13px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef; text-align:right; }

.next-prev-posts a { color:#323232; }

.previous-post i { margin-right:10px; }

.next-post i { margin-left:10px; }

/*--- 6.5.1. Comments ---*/

.commentlist {

   list-style-type: none;
   margin: 30px 0 40px;

}

.comment {

   margin-top: 35px;
   position: relative;

padding:0; display:inline-block; }

.comment a { color:#444; }

.commentwrap { margin: 0 0 0 100px; padding: 0 0 10px 0; border-bottom: 1px solid #EFEFEF; }

.avatar {

   left: 0;
   position: absolute;
   top: 0;

}

.avatar img {

}

a.c_reply { font-weight:600; background:#f9f9f9; padding:2px 5px; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

.metacomment {

   margin-bottom: 10px;

padding:0; }

.metacomment span {

   font-weight:bold;
   margin: 0 5px 0 0;

}

ul.threaded {

   margin-left:75px;

}

commentform {

width:640px; position:relative; }

commentform fieldset {

clear:both; }

commentform input[type="text"], #commentform textarea {

background:#f9f9f9; }

commentform input:focus, #commentform textarea:focus {

outline:none; }

commentform input[type="text"] {

width:174px; padding:7px 10px; font-size:12px; height:20px; line-height:20px; }

textarea#mycomment { width:618px; padding:10px; clear:both; overflow:hidden; float:left; margin-bottom:5px; }

commentform input[type="submit"] {

margin-top:5px; border:0 none; }

.error_message { color:#ff3000; }

/*--- 6.5.2. Pagination ---*/

.pagenav {

   text-align:center;

vertical-align: middle; margin-top: 55px; background:#f9f9f9; }

.pagenav a {

   background:#f9f9f9;
   color:#686868;
   display:inline-block;
   padding:9px 15px;

font-weight:600; -webkit-transition:background 0.2s linear;

   -moz-transition:background 0.2s linear;
   -o-transition:background 0.2s linear;
   transition:background 0.2s linear;

}

span.current {

   color:#fff;
   display:inline-block;
   padding:9px 15px;

}

span.pages { display: inline-block;

   padding:9px 15px;

font-weight:600; }

/*--- 6.6. Contact ---*/

.contact-info p { margin:0; padding:7px 0; border-top:1px solid #efefef; }

.contact-info p:last-child { border-bottom:1px solid #efefef; }

.contact-info span { color:#444; }

.contact-map { margin-bottom:50px; }

.contact-map iframe { width:940px; height:300px; }

contactform label {

clear:both; }

contactform input[type=text] {

margin-bottom:10px; width:89%; padding:3% 5%; height:20px; line-height:20px; background:#f7f7f7;

}

contactform input[type=submit] {

font-size:12px; clear:both; float:right; cursor:pointer; margin:0; }

contactform input:focus, #contactform textarea:focus {

outline:none; }

contactform input[type=submit]:hover {

}

contactform textarea {

height:130px; clear:both; background:#f7f7f7; }

.contact-info { padding-top: 9px; }

.contact-loader { float: right; padding: 11px 11px 0 0; }

/*-----------------------------------------------------------------------------------*/ /* 7. Footer /*-----------------------------------------------------------------------------------*/

footer1 {

overflow:hidden; clear:both; background:#323232; color:#969595; padding-top:40px; margin:0 auto;

       border-top:5px solid #e1472f;

}

topfooter {

padding:0; margin:0; }

topfooter h6 {

margin:0; font-size:12px; font-weight:400; }

ul#contact-widget li { border-bottom:1px dotted #6b6b6b; padding-bottom:10px; margin-bottom:10px; padding-left:30px; }

topfooter ul li {

border-bottom:1px dotted #6b6b6b; padding-bottom:10px; margin-bottom:10px; }

topfooter ul li:last-child {

border-bottom:none; }

ul#blog-widget li { border-bottom:1px dotted #6b6b6b; padding-bottom:10px; margin-bottom:10px; position:relative; overflow:hidden; } ul#blog-widget li img { position:absolute; top:3px; left:0; }

ul#blog-widget li h6{ float:left; padding-left:75px; }

ul#blog-widget li span{ float:left; clear:both; padding-left:75px; width:auto; }

ul#contact-widget li:last-child { border-bottom:0 none; }

ul#blog-widget li:last-child { border-bottom:0 none; }

li.address { background:url(images/address.png) no-repeat scroll 0 2px; }

li.phone { background:url(images/phone.png) no-repeat scroll 0 2px; }

li.email { background:url(images/email.png) no-repeat scroll 0 2px; }

footer1 a {

color:#fff; }

footer1 h3 {

font-size:16px; font-weight:300; color:#fff; }

bottomfooter {

height:42px; line-height:42px; position:relative; overflow:hidden; clear:both; margin-top:40px; background:#252525; }

bottomfooter p {

float:left; margin:0; font-size:11px; }

.totop { background:url(images/top.png) no-repeat scroll 0 0; width:37px; height:42px; position:absolute; bottom:-10px; left:50%; margin-left:-18px; text-indent:-9999px; }

/*--- 7.1. Twitter ---*/

.tweet, .query { margin:0; }

.tweet_list { list-style: none; margin: 0; padding: 0; overflow-y: hidden; } .widget .tweet_list li { background:none; padding-bottom:10px; margin-bottom:10px; }

.tweet_list li { overflow-y: auto; overflow-x: hidden; list-style-type: none; border-bottom:1px solid #efefef; background: url(images/social/twitter.png) no-repeat scroll 0 3px; padding-left: 30px; }

.tweet_text { clear: both; width: 100%; display: block; }

.tweet_time, .tweet_action { float:left; margin-right:10px; margin-top:10px; } .tweet_time a, a.tweet_action { color:#777 !important; }

.tweet_list li:last-child { border-bottom:0 none; }

.tweet_list li a { }

.tweet_list .tweet_avatar { padding-right: .5em; float: left; }

.tweet_list .tweet_avatar img { vertical-align: middle; }

/*--- 7.2. Flickr ---*/

flickr {

margin: 0; padding: 0; overflow: hidden; width:270px; }

flickr li {

list-style: none; float: left; margin: 0 9px 9px 0; border:0 none; padding:0; }

flickr img {

display: block; width:45px; height:45px; }

flickr a img {

border: none; }

/*--- 7.3. Social Icons ---*/

ul#social { float:right; margin-right:-5px; }

ul#social li { display:inline; }

ul#social li a { display:block; margin:0 0 0 1px; width:38px; float:left; height:42px; text-indent:-9999px; opacity:0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transition:background 0.2s linear; -moz-transition:background 0.2s linear; -0-transition:background 0.2s linear; transition:background 0.2s linear; }

ul#social li a:hover { opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }

a.forrst { background:url(images/social/forrst.png) no-repeat scroll center center; } a.forrst:hover { background-color:#5d9b68; } a.dribbble { background:url(images/social/dribbble.png) no-repeat scroll center center; } a.dribbble:hover { background-color:#e24a85; } a.vimeo { background:url(images/social/vimeo.png) no-repeat scroll center center; } a.vimeo:hover { background-color:#1bb7ea; } a.linkedin { background:url(images/social/linkedin.png) no-repeat scroll center center; } a.linkedin:hover { background-color:#007bb6; } a.google { background:url(images/social/google.png) no-repeat scroll center center; } a.google:hover { background-color:#e1472f; } a.skype { background:url(images/social/skype.png) no-repeat scroll center center; } a.skype:hover { background-color:#0cb1f1; } a.facebook { background:url(images/social/facebook.png) no-repeat scroll center center; } a.facebook:hover { background-color:#3b5998; } a.twitter { background:url(images/social/twitter.png) no-repeat scroll center center; } a.twitter:hover { background-color:#00acee; } a.flickr { background:url(images/social/flickr.png) no-repeat scroll center center; } a.flickr:hover { background-color:#ff0084; } a.rss { background:url(images/social/rss.png) no-repeat scroll center center; } a.rss:hover { background-color:#f28d34; } a.stumbleupon { background:url(images/social/stumbleupon.png) no-repeat scroll center center; } a.stumbleupon:hover { background-color:#0fb73d; } a.youtube { background:url(images/social/youtube.png) no-repeat scroll center center; } a.youtube:hover { background-color:#d93030; }

/*-----------------------------------------------------------------------------------*/ /* 8. Elements /*-----------------------------------------------------------------------------------*/

/*--- 8.1. Slides ---*/

.portfolio-single .percent-three-fourth { min-height:30px; }

.columns-two .slides_container { width:460px; height:240px; display:none; }

.columns-two .slides_container .slide { width:460px; height:240px; display:block; }

.columns-three .slides_container { width:300px; height:157px; display:none; }

.columns-three .slides_container .slide { width:300px; height:157px; display:block; }

.post .slides_container { width:640px; height:335px; display:none; }

.post .slides_container .slide { width:640px; height:335px; display:block; }

.columns-three div.jp-audio div.jp-type-single div.jp-progress { display:none; }

.blog-slides { position:relative; }

.slides_container { width:940px; display:none; }

.slides_container div.slide { width:940px; display:block; }

slides {

margin-bottom:10px; position:relative; }

.blog-slides .next, .blog-slides .prev, #slides .next, #slides .prev, .post .next, .post .prev { position:absolute; top:50%; margin-top:-21px; width:27px !important; height:43px !important; display:block; z-index:101; background:#656565; }

.blog-slides .next img,.blog-slides .prev img, #slides .next img, #slides .prev img, .post .next img, .post .prev img { height:auto; width:auto; }

slides .next img,#slides .prev img {

height:auto; width:auto; }

slides .next {

right:0; }

slides .prev {

left:0; }

.blog-slides .next { right:0; }

.blog-slides .prev { left:0; }

.slide img { width:100%; height:auto; overflow:visible; vertical-align:bottom; }

.slide a { display:block; margin:0; padding:0; }

.pagination { position:absolute; text-align:center; z-index:1000; width:100%; bottom:12px; }

.pagination li { display:inline-block; *display: inline; zoom: 1; margin-left:1px; margin-right:1px; list-style:none; text-align:center; height:3px; }

.pagination li a { display:inline-block; *display: inline; zoom: 1; width:40px; height:3px; overflow:hidden; background:#efefef; }

slides .caption {

z-index:500; position:absolute; bottom:-35px; left:0; height:30px; padding:5px 20px 0 20px; background:rgba(0,0,0,.5); width:540px; font-size:1.3em; line-height:1.33; text-shadow:none; }

.blog-slides .caption { z-index:500; position:absolute; bottom:-35px; left:0; height:30px; padding:5px 20px 0 20px; background:rgba(0,0,0,.5); width:540px; font-size:1.3em; line-height:1.33; text-shadow:none; }

/*--- 8.2. Buttons ---*/

.button {

   cursor:pointer;
   display:inline-block;
   font-size: 12px;
   font-weight:600;
   line-height:16px;
   margin:0 10px 20px 0;
   padding: 7px 11px 7px;

position:relative; border:0 none; -webkit-transition:all 0.2s linear;

   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   transition:all 0.2s linear;

}

.white {

   background:#eaeaea;
   color: #686868;

}

.white:hover {

   color: #686868;

background:#d2d2d2; }

.yellow {

   background:#ffb141;

border:0 none;

   color: #fff;

}

.yellow:hover {

   color: #fff;

background:#fd9602; }

.orange {

   background:#fe7e17;

border:0 none;

   color: #fff;

}

.orange:hover {

   color: #fff;

background:#f77309; }

.black {

   background:#787878;
   color: #ffffff;

}

.black:hover {

   color: #ffffff;

background:#444; }

.green {

   background:#9dd30b;
   color: #fff;

}

.green:hover {

   color: #fff;

background:#8dbd0a; }

.bleumarin {

   background:#30b4c5;
   color: #fff;

}

.bleumarin:hover {

   background:#2b9fae;

color:#fff; }

.rose {

   background:#ee5051;
   color: #fff;

}

.rose:hover {

   color: #fff;

background:#d64849; }

.red {

   background:#e1472f;
   color: #fff;

}

.red:hover {

   color: #fff;

background:#d44029; }

/*--- 8.3. Tabs ---*/

.tabs-wrapper { width: 100%; }

.tab-item { clear:both; overflow:hidden; padding:15px 0; border-bottom:1px solid #fff; }

.tabs-container { float:left; position:relative; display:block; width:100%; }

.tabs-wrapper .tab-content { background:#fff; padding:20px; overflow:hidden; border: 1px solid #EFEFEF; border-radius: 0px 3px 3px 3px; }

ul.tabs { float: left; height: 34px; width: 100%; padding-left: 0 !important; margin-bottom: 0 !important; }

.tabs-container p:last-child { margin-bottom:0; }

ul.tabs li { float: left; padding-left: 0 !important; overflow: hidden; padding-bottom: 0; position: relative; text-align:center; outline:none;

}

ul.tabs li a { height: 34px; line-height: 34px; text-decoration:none; font-size:12px; display: block; padding: 0 25px; outline:none; border:1px solid #fff; color:#9a9a9a; font-weight:600; }

ul.tabs li:last-child {

}

ul.tabs li a:hover { color:#323232; }

ul.tabs li.active { top:-1px; }

ul.tabs li.active a { border-left: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF; border-bottom: 1px solid #fff; color:#323232; }

ul.tabs li.active { z-index: 1; }

ul.tabs li.active, ul.tabs li.active a:hover {

   background:#fff;

color:#323232; }

/*--- 8.4. Toggles ---*/

toggle-view {

   list-style:none;    
   font-size:12px;
   margin:0;
   padding:0;
   width:100%;

margin-bottom:20px; }

toggle-view li {

margin-bottom:1px;

   border-bottom: 1px solid #EFEFEF;

position:relative; }

toggle-view li:hover {

}

toggle-view h3 {

margin:0; font-size:13px; cursor:pointer;

   padding: 12px 10px 12px 40px;

color:#686868; font-weight:400; }

toggle-view h3:hover, #toggle-view h3:active {

color:#444; }

toggle-view span {

position:absolute; left:0; top:14px; }

toggle-view .panel {

display:none; background:#fff; overflow:hidden; padding:10px 0 20px 0; }

toggle-view .panel p:last-child {

margin-bottom:0; }

/*--- 8.5. Tables ---*/

.pricing-column { text-align:center; width:235px; float:left; position:relative; }

.first-column .package-value, .first-column .package-features, .first-column .signup { border-left:1px solid #dbdbdb; }

.package-value, .package-features { border-right:1px solid #dbdbdb; }

.package-title { background:#686868; color:#fff; font-size:16px; height:40px; line-height:40px; border-bottom:3px solid #545454; border-right:1px solid #545454; }

.featured-column { top:-10px; box-shadow:0px 2px 10px #dadada; z-index:1; }

.featured-column .package-title { height:40px; line-height:30px; position:relative; font-weight:600; box-shadow:0px -1px 10px #000; z-index:-1; }

.featured-column .column-shadow { height:10px; position:relative; z-index:10; box-shadow:0px -1px 2px #dadada; }

.pricing-table .featured-column .signup { padding:25px 0; }

.pricing-column .signup { border-bottom:1px solid #dbdbdb; border-right:1px solid #dbdbdb; padding:20px 0; background:#F9F9F9; }

.pricing-column .signup .button { margin:0; }

.package-value { background:#f9f9f9; height:95px; line-height:95px; }

ul.package-features li { height:40px; line-height:40px; background:#fff; }

ul.package-features li.alt { background:#f9f9f9; }

.package-currency { font-size:16px; position:relative; top:-20px; }

.package-price { font-size:48px; font-weight:600; }

.package-time { font-size:16px; }

.pricing-table, .normal-table {

   width:100%;

}

.normal-table td {

   border:1px solid #efefef;
   padding:10px 20px;
   text-align:center;

} .normal-table tr.alt {

   background:#fbfbfb;

}

.normal-table tr.first-column {

   background:#666666;
   color: #efefef;

}

/*--- 8.6. Info Boxes ---*/

.box-error, .box-alert, .box-notice, .box-success, .box-info {

   margin-bottom: 10px;
   padding: 10px 20px;

}

.box-error i, .box-alert i, .box-notice i, .box-success i, .box-info i { font-size:14px; margin-right:15px; }

.box-error, .box-alert {

   background:#fce2e3;
   color: #e54034;

}

.box-notice {

   background:#fdf4bd;
   color: #706836;

}

.box-info {

   background:#d4ebf6;
   color: #20568f;

}

.box-success {

   background:#e5eec0;
   color: #264509;

}

/*--- 8.7. Lists ---*/

ul.star-list li {

}

ul.play-list li {

}

ul.arrow-list li {

}

ul.tick-list li {

}

ul.customlist li { padding: 6px 0; border-bottom: 1px dotted #dedede; }

ul.customlist li i { margin-right:5px; }

/*--- 8.8. Accordions ---*/

.ac-btn {

   background:#fbfbfb;
   border: 1px solid #EFEFEF;
   cursor: pointer;
   font-size: 12px;
   font-weight:normal;
   padding: 7px 10px;

margin-bottom:1px; }

.ac-btn h3 { margin:0; font-size:12px; cursor:pointer; color:#686868; }

.ac-btn h3:hover { color:#444; }

.ac-content {

   border-top: 0;
   border: 1px solid #EFEFEF;
   display: none;
   margin-bottom: 2px;
   margin-top: -3px;
   overflow: auto;
   padding: 10px 20px;
   position: relative;
   top: 1px;

}

.ac-selected { display:inherit; }

.ac-selected { display:block !important; }

.on { background: #f7f7f7; color:#444; }

.over { background: #f7f7f7; color:#444; }

@@ Line 259: / Line 259: @@
 /*-----------------------------------------------------------------------------------*/
-.one-half { width: 460px }
+.one-half { width: 460px;border:1px solid red; }
 .one-third { width: 300px; }
 .two-third { width: 620px; }