Difference between revisions of "Template:Tongji China/style CSS"

(Created page with "→‎==== Google font ====: @import url('http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900|Open+Sans:300,400,600,700');...")
 
Line 289: Line 289:
  
 
header .navbar {
 
header .navbar {
 +
    top: 0px;
 
     margin-bottom: 0;
 
     margin-bottom: 0;
 
     position: fixed;
 
     position: fixed;

Revision as of 13:08, 26 September 2018

/* ==== Google font ==== */ @import url('http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900%7COpen+Sans:300,400,600,700');

/* === prettify === */ @import url('../js/google-code-prettify/prettify.css'); /* === fontawesome === */ @import url('font-awesome.css'); /* === custom icon === */ @import url('custom-fonts.css'); /* ==== overwrite bootstrap standard ==== */ @import url('theme.css'); @import url('animate.css');

/* =================================== 1. General ==================================== */

body { font-family:'Open Sans', Arial, sans-serif; font-size:14px; font-weight:300; line-height:1.6em; color:#656565; }

a:active { outline:0; }

.clear { clear:both; }

h1,h2, h3, h4, h5, h6 { font-family:'Roboto', sans-serif; font-weight:700; line-height:1.1em; color:#666; margin-bottom: 20px; }

.highlight { color: #fff !important; padding: 0 8px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

.color-white { color: #fff; }

/* =================================== 2. layout ==================================== */

  1. wrapper {

width:100%; margin:0; padding:0; }

  1. wrapper.boxed {

width:1230px; overflow:hidden; margin:0 auto; padding:0; background:#fff; }


.row,.row-fluid { margin-bottom:30px; }

.row .row,.row-fluid .row-fluid{ margin-bottom:30px; }

.row.nomargin,.row-fluid.nomargin { margin-bottom:0; }


/* =================================== 3. Responsive media ==================================== */

.video-container,.map-container,.embed-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:none; } .embed-container iframe, .embed-container object, .embed-container embed, .video-container iframe, .map-container iframe, .map-container object, .map-container embed, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } iframe { border:none; }

img.img-polaroid { margin:0 0 20px 0; } .img-box { max-width:100%; } /* =================================== 4. Header ==================================== */

/* === header === */

/* top area */

header .top .row { margin-bottom: 0; }


header .top { padding:20px 0; margin:0; background: #f2f2f2; }

header .top { border-bottom: 1px solid #ddd; }

header .top ul.topleft-info { list-style: none; margin: 10px 0 0; padding-left: 0; float:left; }

header .top ul.topleft-info li { display: inline; margin: 0 20px 0 0; padding:0; font-weight: 600; }


header .top ul.topleft-info li a:hover { text-decoration: none; outline: 0; }

ul.social-network {

list-style:none; margin:0; padding:0; }

ul.social-network li { display:inline; margin:0 5px; } ul.social-network li a:hover { 

 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

}

header .top ul.social-network li a { color: #fff; }

.sb-search { position: relative; width: 0%; min-width: 36px; height: 36px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; }

.sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 50%; height: 36px; margin: 0; z-index: 10; padding: 2px 41px 2px 10px; font-family: inherit; font-size: 14px; color: #2c3e50; }

.sb-search-input::-webkit-input-placeholder { color: #efb480; }

.sb-search-input:-moz-placeholder { color: #efb480; }

.sb-search-input::-moz-placeholder { color: #efb480; }

.sb-search-input:-ms-input-placeholder { color: #efb480; }

.sb-icon-search, .sb-search-submit { width: 36px; height: 36px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 36px; text-align: center; cursor: pointer; }

.sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ 

   filter: alpha(opacity=0); /* IE 5-7 */
   opacity: 0;

color: transparent; border: none; outline: none; z-index: -1; }

.sb-icon-search { color: #fff; z-index: 90; font-size: 14px; font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; }

.sb-icon-search:before { content: "\f002"; }

/* Open state */ .sb-search.sb-search-open, .no-js .sb-search { width: 100%; }

.sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #666; color: #fff; z-index: 11; }

.sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; }


/* -- end top area */

header .navbar { 

   top: 0px;
   margin-bottom: 0;
   position: fixed;
   width: 100%;

}

.navbar-default { 

   border: none;

}

.navbar-brand { 

   color: #222;

text-transform: uppercase; 

   font-size: 24px;
   font-weight: 700;
   line-height: 1em;

letter-spacing: -1px; 

   margin-top: 30px;
   padding: 0 0 0 15px;

}


header .navbar-collapse ul.navbar-nav { 

   float: right;
   margin-right: 0;

}

header .navbar-default{ 

   background-color: #fff;

border-bottom: 1px solid #ddd; }

header .nav li a:hover, header .nav li a:focus, header .nav li.active a, header .nav li.active a:hover, header .nav li a.dropdown-toggle:hover, header .nav li a.dropdown-toggle:focus, header .nav li.active ul.dropdown-menu li a:hover, header .nav li.active ul.dropdown-menu li.active a{ 

   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;

}


header .navbar-default .navbar-nav > .open > a, header .navbar-default .navbar-nav > .open > a:hover, header .navbar-default .navbar-nav > .open > a:focus { 

   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;

}


header .navbar { 

   min-height: 100px;

}

header .navbar-nav > li { 

   padding-bottom: 30px;
   padding-top: 30px;

}

header .navbar-nav > li > a { 

   padding-bottom: 6px;
   padding-top: 5px;
   margin-left: 2px;
   line-height: 30px;

font-weight: 700; 

   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -ms-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;

}

header .nav .caret { 

   border-bottom-color: #f5f5f5;
   border-top-color: #f5f5f5;

} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 

 background-color: #fff;

} .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 

 background-color:  #fff;

}


.dropdown-menu { 

   box-shadow: none;
   border-radius: 0;

border: 1px solid #eee; }

header .navbar-nav > li > ul > li { border-bottom: 1px solid #eee; }

header .navbar-nav > li > ul > li.dropdown-submenu > ul > li { border-bottom: 1px solid #eee; }


.dropdown-menu li:last-child { padding-bottom: 0 !important; margin-bottom: 0; }

header .nav li .dropdown-menu { 

  padding: 0;

}

header .nav li .dropdown-menu li a { 

  line-height: 30px;
  padding: 3px 12px;

}

/* --- menu --- */

header .navigation { float:right; }

header ul.nav li { border:none; margin:0; }

header ul.nav li a { font-size:12px; border:none; font-weight:700; text-transform:uppercase; }

header ul.nav li ul li a { font-size:13px; border:none; font-weight:400; text-transform:none; }


.navbar .nav > li > a,.navbar .nav > li.active > .dropdown-menu > li > a { 

 color: #444;
 text-shadow: none;

}


.dropdown-menu li:hover, .dropdown-menu li a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { background: #f5f5f5; } .navbar .nav a:hover { background:none; }

.navbar .nav > .active > a,.navbar .nav > .active > a:hover { background:none; font-weight:700; }

.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus { background:none; outline:0; font-weight:700; }

.navbar .nav li .dropdown-menu { z-index:2000; }

header ul.nav li ul { margin-top:1px; } header ul.nav li ul li ul { margin:1px 0 0 1px; } .dropdown-menu .dropdown i { position:absolute; right:0; margin-top:3px; padding-left:20px; }

.navbar .nav > li > .dropdown-menu:before { 

 display: inline-block;
 border-right: none;
 border-bottom: none;
 border-left: none;
 border-bottom-color: none;
 content:none;

}


ul.nav li.dropdown a { z-index:1000; display:block; }

/* sub menu */

header ul.nav li ul li.dropdown-submenu li a { color: #444; }

.dropdown-submenu { 

   position: relative;

}

.dropdown-submenu>.dropdown-menu { 

   top: 0;
   left: 100%;
   margin-top: -1px;
   margin-left: 1px;
   -webkit-border-radius: 0 0 0 0;
   -moz-border-radius: 0 0 0;
   border-radius: 0 0 0 0;

}

.dropdown-submenu:hover>.dropdown-menu { 

   display: block;

}

.dropdown-submenu>a:after { 

   display: block;
   content: "\f105";

font-family: 'FontAwesome'; 

   float: right;
   width: 0;
   height: 0;

   margin-top: 0;
   margin-right: 0px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

}

.dropdown-submenu:hover>a:after { 

   border-left-color: #fff;

}

.dropdown-submenu.pull-left { 

   float: none;

}

.dropdown-submenu.pull-left>.dropdown-menu { 

   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;
   -moz-border-radius: 6px 0 6px 6px;
   border-radius: 6px 0 6px 6px;

}

/* =================================== 5. Section: Featured ==================================== */

  1. featured{

width: 100%; background:#fcfcfc; position:relative; margin:0; padding:0; }

  1. featured.bg {

background: url(../img/dummies/feat-bg.jpg) no-repeat top center; }

/* =================================== 6. Sliders ==================================== */

/* rev slider */ .tp-caption a.btn { color: #fff; }

/* flexslider */ .main-slider.flexslider { margin: 100px 0 50px; background: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

.main-slider .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .main-slider .flex-caption { bottom: 35px; background-color: rgba(0, 0, 0, 0.6); color: #fff; margin: 0; padding: 25px 25px 25px 30px; position: absolute; right: 0; width: 295px;} .main-slider .flex-caption h3 {color: #fff; letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase;} .main-slider .flex-caption p {margin: 0 0 15px;}

.main-slider .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f001'; } .main-slider .flex-direction-nav a.flex-next:before { content: '\f002'; }


/* =================================== 7. Section: call action ==================================== */ section.callaction { background:#fafafa; padding:30px 0 0 0; } .cta-text { margin-top:10px; text-align: left; }

.cta-text h2 { font-weight:900; line-height:1.1em; } .cta-btn { float:right; padding:20px; margin-top:10px; }

/* =================================== 8. Section: Content ==================================== */

  1. content {

position:relative; background:#fff; padding:60px 0 40px 0; }

  1. content img {

margin-bottom: 30px; }

/* --- box --- */

.box { width: 100%; } .box-gray { background: #f8f8f8; padding: 20px 20px 30px; } .box-gray h4,.box-gray i { margin-bottom: 20px; }

.box h4 { font-weight: 300; }

.box .icon { margin-bottom: 20px; }

/* ---- parallax ---- */

.parallax { 

   padding-top: 110px;
   padding-bottom: 110px;

display:block; 

   position:relative;
   z-index:120;

}

  1. parallax1{

background-image: url(../img/parallax/1.jpg); 

   background-position: center;
   background-repeat: no-repeat;
   display:block;
   position:relative;
   z-index:120;

}

  1. parallax1:after {

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC); content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; opacity: 0.9; z-index: -1; }

/* =================================== 9. Section: Bottom ==================================== */

  1. bottom {

background:#fcfcfc; padding:50px 0 0;

} /* twitter */

  1. twitter-wrapper {
   text-align: center;
   width: 70%;
   margin: 0 auto;

}

  1. twitter em {
   font-style: normal;
   font-size: 13px;

}

  1. twitter em.twitterTime a {

font-weight:600; }

  1. twitter ul {
   padding: 0;

list-style:none; }

  1. twitter ul li {
   font-size: 20px;
   line-height: 1.6em;
   font-weight: 300;
   margin-bottom: 20px;
   position: relative;
   word-break: break-word;

}


/* =================================== 10. Inner - Section: page headline ==================================== */

  1. inner-headline{

background:#f2f2f2; position:relative; margin:0; padding:0; color:#fefefe; }


  1. inner-headline .inner-heading h2 {

color:#fff; margin:20px 0 0 0; }

/* --- breadcrumbs --- */

  1. inner-headline ul.breadcrumb {

margin:30px 0 0; float:left; }

  1. inner-headline ul.breadcrumb li {

margin-bottom:0; padding-bottom:0; }

  1. inner-headline ul.breadcrumb li {

font-size:13px; color:#fff; font-weight: 600; }

  1. inner-headline ul.breadcrumb li i{

color:#fff;

}

  1. inner-headline ul.breadcrumb li a {

color:#fff;

}

ul.breadcrumb li a:hover { text-decoration:none; }

/* ============================ 11. Forms ============================= */

/* --- contact form ---- */ form#contactform input[type="text"] { 

 width: 100%;
 border: 1px solid #f5f5f5;
 min-height: 40px;
 padding-left:20px;
 font-size:13px;
 padding-right:20px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

form#contactform textarea { border: 1px solid #f5f5f5; 

 width: 100%;
 padding-left:20px;
 padding-top:10px;
 font-size:13px;
 padding-right:20px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

form#contactform .validation { font-size:11px; }

  1. sendmessage {

border:1px solid #e6e6e6; background:#f6f6f6; display:none; text-align:center; padding:15px 12px 15px 65px; margin:10px 0; font-weight:600; margin-bottom:30px;

}

  1. sendmessage.show,.show {

display:block; }

/* --- comment form ---- */ form#commentform input[type="text"] { 

 width: 100%;
 min-height: 40px;
 padding-left:20px;
 font-size:13px;
 padding-right:20px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

-webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;

}

form#commentform textarea { 

 width: 100%;
 padding-left:20px;
 padding-top:10px;
 font-size:13px;
 padding-right:20px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

-webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; }


/* --- search form --- */ .search{ float:right; margin:35px 0 0; padding-bottom:0; }

  1. inner-headline form.input-append {

margin:0; padding:0; }


/* =============================== 12. Portfolio ================================ */

.cbp-popup-singlePage-counter { 

   color: #f8f8f8;

}

.cbp-l-grid-team-name:hover { 

   color: #666;

} .cbp-popup-singlePage .cbp-l-project-details-visit:hover { 

   color: #fff;

}

.cbp-l-caption-buttonLeft:hover, .cbp-l-caption-buttonRight:hover { 

   background-color: #666;

}

/* =============================== 13. Elements ================================ */

/* countdown */

  1. countdown {

font-size: 48px; line-height: 1.1em; margin: 40px 0 60px; }


/* register */ /* Credit to bootsnipp.com for the css for the color graph */ .colorgraph { 

 height: 5px;
 border-top: 0;
 background: #c4e17f;
 border-radius: 5px;
 background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
 background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
 background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
 background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);

}

form.register-form .row { margin-bottom:0; }

/* clients */ .client img { opacity: 0.7; }

.client img:hover { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }


/* testimonial slide */ .testimonialslide { margin-top:0; padding-top: 0; }

.testimonialslide.flexslider { background: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

.testimonialslide ul li blockquote { border-left: none; }

.testimonialslide ul li h4 { font-weight: 900; } .testimonialslide ul li h4 span { font-weight: 400; }

/* -- counter --- */ /* stats */ .stats .icon { margin: 0 0 20px 0; }

.stats strong.number { font-size: 38px; }

.stats span.text { font-weight: 700; font-size: 24px; }

.parallax .stats strong.number { text-shadow: 1px 1px 0 #444; }

.parallax .stats span.text { text-shadow: 1px 1px 0 #444; }


/* --- blockquote --- */ blockquote { font-size:16px; font-weight:400; font-family: 'Roboto', sans-serif; font-style:italic; padding-left:0; color:#a2a2a2; line-height:1.6em; border:none; }

blockquote cite { display:block; font-size:12px; color:#666; margin-top:10px; } blockquote cite:before { content:"\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; }

/* --- pullquotes --- */

.pullquote-left { display:block; color:#a2a2a2; font-family:'Roboto', sans-serif; font-size:14px; line-height:1.6em; padding-left:20px; }

.pullquote-right { display:block; color:#a2a2a2; font-family:'Roboto', sans-serif; font-size:14px; line-height:1.6em; padding-right:20px; }

/* --- button --- */ .btn-theme { color: #fff; } .btn-theme:hover { color: #eee; }

/* --- list style --- */

ul.general { list-style:none; margin-left:0; }

ul.link-list{ margin:0; padding:0; list-style:none; float: none; }

ul.link-list li{ float: none; margin:0; padding:2px 0 2px 0; list-style:none; }

footer ul.link-list li a{ color:#777; } footer ul.link-list li a:hover { color:#333; } /* --- Heading style --- */

h2.error { font-size: 40px; }

h4.heading { font-weight:700; }

.heading { margin-bottom: 30px; }

.heading { position: relative;

}


.widgetheading { width:100%;

padding:0; }

h5.widgetheading { font-size: 20px; }

  1. bottom .widgetheading {

position: relative; border-bottom: #e6e6e6 1px solid; padding-bottom: 9px; }

aside .widgetheading { position: relative; border-bottom: #e9e9e9 1px solid; padding-bottom: 9px; }

footer .widgetheading { position: relative; }

footer .widget .social-network { position:relative; }


  1. bottom .widget .widgetheading span, aside .widget .widgetheading span, footer .widget .widgetheading span {

position: absolute; width: 60px; height: 1px; bottom: -1px; right:0;

}

/* --- Map --- */ .map{ position:relative; margin-top:-50px; margin-bottom:40px; }

.map iframe{ width:100%; height:450px; border:none; }

.map-grid iframe{ width:100%; height:350px; border:none; margin:0 0 -5px 0; padding:0; }

/* --- our team --- */

ul.team-detail{ margin:-10px 0 0 0; padding:0; list-style:none; }

ul.team-detail li{ border-bottom:1px dotted #e9e9e9; margin:0 0 15px 0; padding:0 0 15px 0; list-style:none; }

ul.team-detail li label { font-size:13px; }

ul.team-detail li h4, ul.team-detail li label{ margin-bottom:0; }

ul.team-detail li ul.social-network { border:none; margin:0; padding:0; }

ul.team-detail li ul.social-network li { border:none; margin:0; } ul.team-detail li ul.social-network li i { margin:0; }

/* --- Pricing box --- */


.pricing-title{ background:#fff; text-align:center; padding:10px 0 10px 0; }

.pricing-title h3{ font-weight:600; margin-bottom:0; }

.pricing-offer{ background: #fcfcfc; text-align: center; padding:40px 0 40px 0; font-size:18px; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; }

.pricing-box.special .pricing-offer{ color:#fff; }

.pricing-offer strong{ font-size:78px; line-height:89px; }

.pricing-offer sup{ font-size:28px; }

.pricing-content{ background: #fff; text-align:center; font-size:14px; }

.pricing-content strong{ color:#353535; }

.pricing-content ul{ list-style:none; padding:0; margin:0; }

.pricing-content ul li{ border-bottom:1px solid #e9e9e9; list-style:none; padding:15px 0 15px 0; margin:0 0 0 0; color: #888; }

.pricing-action{ margin:0; background: #fcfcfc; text-align:center; padding:20px 0 30px 0; }

.pricing-wrapp{ margin:0 auto; width:100%; background:#fd0000; }

/* --- pricing box alt 1 --- */ .pricing-box-alt { border: 1px solid #e6e6e6; background:#fcfcfc; position:relative; margin:0 0 20px 0; padding:0; 

 -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.03);
 -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.03);
 box-shadow: 0 2px 0 rgba(0,0,0,0.03);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

.pricing-box-alt .pricing-heading { background: #fcfcfc; text-align: center; padding:40px 0 0px 0; display:block; } .pricing-box-alt.special .pricing-heading { background: #fcfcfc; text-align: center; padding:40px 0 1px 0; border-bottom:none; display:block; color:#fff; } .pricing-box-alt.special .pricing-heading h3 { color:#fff; }

.pricing-box-alt .pricing-heading h3 strong { font-size:32px; font-weight:700; letter-spacing:-1px; } .pricing-box-alt .pricing-heading h3 { font-size:32px; font-weight:300; letter-spacing:-1px; }

.pricing-box-alt .pricing-terms { text-align: center; background:#333; display:block; overflow:hidden; padding:30px 0 20px; }

.pricing-box-alt .pricing-terms h6 { font-style:italic; margin-top:10px; color:#fff;

font-family:'Roboto', sans-serif; }

.pricing-box-alt .icon .price-circled { 

   margin: 10px 10px 10px 0;
   display: inline-block !important;
   text-align: center !important;
   color: #fff;
   width: 68px;
   height: 68px;

padding:12px; 

   font-size: 16px;

font-weight:700; 

   line-height: 68px;
   text-shadow:none;
   cursor: pointer;
   background-color: #888;
   border-radius: 64px;
   -moz-border-radius: 64px;
   -webkit-border-radius: 64px;

}

.pricing-box-alt .pricing-action{ margin:0; text-align:center; padding:30px 0 30px 0; }


/* =============================== 14. Blog & article ================================ */

article{ margin-bottom:50px; border-bottom: 1px solid #eee; padding-bottom: 30px; }

article .post-heading h3 { margin-bottom:20px; }

article .post-heading h3 a { font-weight:700; color:#353535; }

article .post-heading h3 a:hover { text-decoration:none; }

.searchtitle { border-bottom: 1px dotted #eee; }


/* --- post meta --- */ .post-meta { background:#fcfcfc; border-top:none; text-align:center; }

.post-meta .format { padding:10px 0 10px; }

.post-meta i{ margin:0; }

.post-meta .date { padding:10px 0 10px; }

.post-meta .date span { text-align:center; color:#999; font-size:12px; font-weight:600; }

.post-meta .comments { padding:10px 0 10px; }

.post-meta .comments a { color:#999; font-size:12px; font-weight:700; }

.post-meta .comments a:hover { text-decoration:none; }

a.readmore { font-weight: 600; font-size: 13px; }

/* --- post format --- */

.post-image { margin-bottom:20px; }

.post-quote { margin-bottom:20px; }

.post-video { margin-bottom:20px; }

.post-audio { margin-bottom:20px; }

.post-link { margin-bottom:20px; }

.post-slider { margin-bottom:20px; }

/* post-slider */

.postslider { margin-bottom: 50px; }

.postslider.flexslider { margin: 0 0 60px; background: #fff; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .postslider .flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f001'; } .postslider .flex-direction-nav a.flex-next:before { content: '\f002'; }

/* quote post */ .post-quote blockquote { font-size:16px; color:#999; font-family:'Roboto', sans-serif; font-style:italic; line-height:1.6em; }

.post-quote blockquote i { font-size: 40px; margin:0 20px 10px 0; float: left; color: #eee; }

.post-image img:hover { 

 -webkit-box-shadow: 0 0 2px #979797;
    -moz-box-shadow: 0 0 2px #979797;
         box-shadow: 0 0 2px #979797;	
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;

}

ul.meta-post{ margin: 0; padding:0; list-style:none; }

ul.meta-post li{ display: inline-block; margin:0 10px 0 10px; padding:0; list-style:none; padding-right:10px; }

ul.meta-post li i { float:left; font-size:12px; margin:6px 5px 0 0; }

ul.meta-post li a{ color:#999; font-size:12px; font-weight:600; }

/* --- single post --- */ .bottom-article{ overflow: hidden; padding:10px 0 10px 0; margin-top:20px; }

/* --- author info --- */

.about-author { border:1px solid #f5f5f5; padding:20px; float:left; margin-bottom:5px; }

.about-author h5 { margin-bottom:10px; }


/* --- Comment --- */

.comment-area { float:left; width:100%; margin-top:30px; }

.comment-area:after { display: table; 

 content: " ";

}

.media-content{ overflow:hidden; margin-left:12px; border-bottom:1px dotted #d5d5d5; padding-bottom:20px; }

.media-content h6 { font-size:14px; font-weight:700; }

.media-content span{ color:#a9a9a9; font-size:14px; font-weight:300; }

.comment-area .thumbnail > img { 

 display: block;

width:60px; height:60px; } .filter-list{ margin-top:20px; }

.comment-area .media a.reply { font-weight: 600; }

/* --- pagination --- */

  1. pagination a,
  2. pagination span {
   display: block;
   float: left;
   margin: 0 7px 0 0;
   padding: 7px 10px 6px 10px;
   font-size: 12px;
   line-height:12px;
   color: #888;

font-weight:600; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

  1. pagination a:hover {
   color: #fff;

text-decoration:none; }

  1. pagination span.current {
   background: #333;
   color: #fff;
   font-weight: bold;

}


/* =============================== 15. Aside, sidebar ================================ */

aside{ position:relative; margin-bottom:40px; }

.sidebar-nav{ float:left; width:100%; }

.right-sidebar{ border-left:1px solid #f5f5f5; padding:0 0 0 30px; }


.left-sidebar{ border-right:1px solid #f5f5f5; padding:0 30px 0 0; }


.left-sidebar .widget h3, .left-sidebar .widget .widget-content{ padding-right:20px; }


aside .widget { margin-bottom:40px; }


ul.cat, ul.recent, ul.folio-detail, ul.contact-info{ margin:0; padding:0; list-style:none; }

ul.cat li, ul.recent li, ul.folio-detail li, ul.contact-info li{ margin:0 0 15px 0; list-style:none; }

ul.cat li a, ul.folio-detail li a{ color:#656565; }

ul.cat li i { margin-right: 10px; }

ul.folio-detail li label{ display:inline; cursor:default; color:#353535; font-weight:bold; }

.widget ul.recent li { display:inline-block; }

.widget ul.recent li { margin-bottom:20px; }

ul.recent li h6 { margin:0 0 10px 0; }

ul.recent li h6 a{ color:#353535; font-size:16px; font-weight:600; }


.widget ul.tags { list-style:none; margin:0; margin-left: 0; padding-left:0; }

.widget ul.tags li { margin:0 5px 15px 0; display:inline-block; }


.widget ul.tags li a { background:#e6e6e6; color:#333; padding:5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #888; }

.widget ul.tags li a:hover { text-decoration:none; color:#fff; }

/* ===== Widgets ===== */


/* --- latest tweet widget --- */

.twitter ul{ margin-left:0; list-style:none; }

.twitter img{ 

   float: left;
   margin-right: 15px;

} .twitter span.tweet_time{ 

   display: block;
   padding-bottom: 5px;

} .twitter li{ 

   border-bottom: 1px dashed #efefef;    
   padding-bottom: 20px;
   margin-bottom: 20px;
   list-style: none;

} .twitter li:last-child{border: none;}

/* --- Recent post widget --- */

.recent-post{ margin:20px 0 0 0; padding:0; line-height:18px; }

.recent-post h5 a:hover { text-decoration:none; }

.recent-post .text h5 a { color:#353535; }


ul.time-post{ float:left; width:120px; padding:0; list-style:none; margin:0 20px 0 0; text-align:center; color: #0e0f0f; }

ul.time-post li{ float:none; background:#f8f8f8; list-style:none; margin:0 0 2px 0; padding:0; }

ul.time-post li a img:hover{ opacity: 0.8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

ul.time-post li.time{ float:none; padding:5px 0 5px 0; text-shadow: none; }

.recent-post ul.time-post li.time{ color:#121214; }

.post-meta{ margin-bottom:20px; }

.post-meta span{ padding:0 10px 0 10px; margin-bottom:10px; }

.post-meta span a{ color:#919191; }

.post-meta strong{ font-weight:200px; color:#c7c7c7; }

.item .text { margin-left:140px; margin-bottom:20px; }

/* =============================== 16. Footer ================================ */

footer{ background:#f2f2f2; }

  1. sub-footer{

border-top: 1px solid #ddd; background:#f7f7f7; }


footer{ padding:50px 0 0 0; }

footer a { color:#666; }

footer a:hover { color:#444; }

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{ color:#666; }

footer address { line-height:1.6em; }

footer h5 a:hover, footer a:hover { text-decoration:none; }

ul.social-network { list-style:none; margin:0; }

ul.social-network li { display:inline; margin: 0 5px; }

footer ul.social-network li i { font-size: 1.3em; }

  1. sub-footer{

text-shadow:none; padding:0; padding-top:30px; margin:20px 0 0 0; }

  1. sub-footer p{

margin:0; padding:0; }

  1. sub-footer span{

}

.copyright { text-align:left; font-size:12px; }

  1. sub-footer ul.social-network {

float:right; }


/* =============================== 

Live preview purpose

================================ */ /* --- buttons --- */

.bs-docs-example { margin:0 0 10px 0; }

.demobtn a.btn { margin:0 10px 10px 0; }

section.demogrid .col-lg-1,section.demogrid .col-lg-2,section.demogrid .col-lg-3,section.demogrid .col-lg-4,section.demogrid .col-lg-5,section.demogrid .col-lg-6,section.demogrid .col-lg-7,section.demogrid .col-lg-8,section.demogrid .col-lg-9,section.demogrid .col-lg-10,section.demogrid .col-lg-11 { background:#f6f6f6; text-align:center; padding:20px 0 20px; }

section.demogrid .show-grid .row,section.demogrid .show-grid .row-fluid { margin-bottom:0; }

section.demogrid .show-grid .nest { background:#ddd; text-align:center; padding:20px 0 20px; }

section.demogrid .col-lg-12.nest { background:#f6f6f6; text-align:center; padding:20px 0 0; }

.demoinline p { display:inline; margin-right:20px; }


/* =============================== 17. Divider, Line & Misc ================================ */

.solidline { border-top:1px solid #f5f5f5; margin:0 0 30px; }

.dottedline { border-top:1px dotted #f5f5f5; margin:0 0 30px; }

.dashedline { border-top:1px dashed #f5f5f5; margin:0 0 30px; }

.blankline { height:1px; margin:0 0 30px; }


/* scroll to top */ .scrollup{ 

   position:fixed;

width:32px; height:32px; 

   bottom:0px;
   right:20px;

background: #222; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }

a.scrollup { outline:0; text-align: center; }

a.scrollup:hover,a.scrollup:active,a.scrollup:focus { opacity:1; text-decoration:none; } a.scrollup i { margin-top: 10px; color: #fff; } a.scrollup i:hover { text-decoration:none; }



/* ============================= 18. Position & alignment ============================= */

.absolute{ position:absolute; }

.relative{ position:relative; }

.aligncenter{ text-align:center; }

.aligncenter span{ margin-left:0; }

.floatright { float:right; }

.floatleft { float:left; }

.floatnone { float:none; }

.aligncenter { text-align:center; }

/* --- Image allignment style --- */

img.pull-left, .align-left{ float:left; margin:0 15px 15px 0; }

.widget img.pull-left { float:left; margin:0 15px 15px 0; }

img.pull-right, .align-right { float:right; margin:0 0 15px 15px; }

article img.pull-left, article .align-left{ float:left; margin:5px 15px 15px 0; }

article img.pull-right, article .align-right{ float:right; margin:5px 0 15px 15px; }

/* ============================= 20. Spacer, margin ============================= */

.clear-marginbot{ margin-bottom:0; }

.marginbot10{ margin-bottom:10px; } .marginbot20{ margin-bottom:20px; } .marginbot30{ margin-bottom:30px; } .marginbot40{ margin-bottom:40px; } .marginbot50{ margin-bottom:50px; } .clear-margintop{ margin-top:0; }

.margintop10{ margin-top:10px; }

.margintop20{ margin-top:20px; }

.margintop30{ margin-top:30px; }

.margintop40{ margin-top:40px; } .margintop50{ margin-top:50px; }

/* ============================= 21. Media queries ============================= */

@media (min-width: 979px) and (max-width: 1200px) { #wrapper.boxed{ width:1000px; margin:0 auto; } }

@media (min-width: 768px) and (max-width: 979px) { #wrapper.boxed{ width:784px; margin:0 auto; }

a.detail{ background:none; width:100%; }


footer .widget form input#appendedInputButton { display: block; width: 91%; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; }

footer .widget form .input-append .btn { display: block; width: 100%; padding-right: 0; padding-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top:10px; }

ul.related-folio li{ width:156px; margin:0 20px 0 0; } }

@media (max-width: 767px) { 

 body {
   padding-right: 0;
   padding-left: 0;
 }
 
	#wrapper.boxed{

width:90%; margin:0 auto; } .navbar-brand { margin-top: 10px; border-bottom: none; } .navbar-header { margin-top: 20px; border-bottom: none; }

.navbar-nav { border-top: none; padding-top: 30px; float: none; width: 100%; }

header .navbar-nav > li { padding-bottom: 0; padding-top: 0; }

header .nav li .dropdown-menu { margin-top: 0; }

.stats > div { margin-bottom: 30px; }

.dropdown-menu { position: absolute; top: 0; left: 40px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 13px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #f5f5f5; border: 1px solid rgba(0, 0, 0, .15); border-radius: 0; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }


.navbar-collapse.collapse { border: none; overflow: hidden; }


.box { padding:20px 0; margin-bottom: 20px; }



#inner-headline .breadcrumb { float:left; clear:both; width:100%; }

.breadcrumb > li { font-size:13px; }


ul.portfolio li article a i.icon-48{ width:20px; height:20px; font-size:16px; line-height:20px; }


.left-sidebar{ border-right:none; padding:0 0 0 0; border-bottom: 1px dotted #e6e6e6; padding-bottom:10px; margin-bottom:40px; }

.right-sidebar{ margin-top:50px; border-left:none; padding:0 0 0 0; }


footer .col-lg-1, footer .col-lg-2, footer .col-lg-3, footer .col-lg-4, footer .col-lg-5, footer .col-lg-6, footer .col-lg-7, footer .col-lg-8, footer .col-lg-9, footer .col-lg-10, footer .col-lg-11, footer .col-lg-12{ margin-bottom:20px; }

#sub-footer ul.social-network { float:left; } 


 [class*="span"] {

margin-bottom:20px; 

 }

}

@media (max-width: 480px) { .bottom-article a.pull-right { float:left; margin-top:20px; }


.search{ float:left; }


.cta-text { margin:0 auto; text-align:center; }

ul.portfolio li article a i{ width:20px; height:20px; font-size:14px; } .main-slider .flex-caption { bottom: 0; text-align: center; } .main-slider .flex-caption p { display: none; }

.cta-btn { float: none; text-align: center; }

}

@media (max-width: 360px) {

} /* ============== options panel for live preview ======================= */

  1. t_options {

position:fixed; top: 40px; left:-230px; width: 230px; background: #fefefe; color:#666; box-shadow: 0 0 3px rgba(0,0,0,0.12); box-shadow: 0 1px 6px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 6px rgba(0,0,0,.2); -o-box-shadow: 0 1px 6px rgba(0,0,0,.2); 

   z-index: 5000;
   font-size: 11px;
   font-family: 'Open Sans', arial, sans-serif;

}

  1. t_options hr {
 margin: 20px 0;
 border: 0;
 border-top: none;
 border-bottom: 1px dotted #999;

}

  1. t_options h6 {

color:#666; font-size:14px; }

  1. t_options input{

width:60px; }

  1. t_options .col {

width:50px; margin:0 10px 0; }

.colorpicker { 

   z-index: 5001;

} .options_inner { position: relative; width: 100%; height: 100%; } .options_box { margin: 0 14px; padding: 10px 0 20px; overflow:hidden; }

.options_box .solidline { margin-bottom:10px; }

.options_box h6 { text-align:center; font-weight:bold; }

.options_box .full { width:100%; overflow:hidden; padding-bottom:10px; } .options_box .halfcol { width:90px; float:left; margin:0 5px; }

.options_box .fourcol { width:30px; float:left; margin:0 5px; }

.options_box .fourcol.color a{ width:30px; height:30px; display:block; margin-bottom:5px; }

.options_box .halfcol .wideboxed h6 { font-size:11px; font-weight:600; }

.options_toggle_holder { position:absolute; right:-40px; }

.options_toggle { margin: 6px 0 0 4px; width: 40px; height: 40px; cursor: pointer; border:1px solid #f63306; border-left:none; display:block; background:#f63306;

}

a.btn.btn-box { border-radius: 0; background: #fff; font-weight: 600; color: #666; border: 1px solid #ddd;

}

a.btn.btn-wide { border-radius: 0; background: #fff; font-weight: 600; color: #666; border: 1px solid #ddd; }

.options_toggle span .icon { margin:10px 0 0 7px; display:block; color: #fff; }

.options_toggle:hover,.options_toggle:focus,.options_toggle:active{ outline:0; text-decoration:none; }

.options_heading { color: #666; margin-top: 5px; margin-bottom: 20px; font-size: 14px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; padding-bottom: 10px; border-bottom: 1px dotted #888; }

/* colors */

.options_box a.t_default { background:#d9232d; } .options_box a.t_kissme { background:#6D0C1F; } .options_box a.t_lime { background:#C6DF45; } .options_box a.t_rose { background:#9E001D; } .options_box a.t_amethyst { background:#9b59b6; } .options_box a.t_asphalt { background:#34495e; } .options_box a.t_pomegranate { background:#c0392b; } .options_box a.t_pumpkin { background:#d35400; } .options_box a.t_lightorange { background:#f39c12; } .options_box a.t_red { background:#cb1103; }

.options_box a.t_green { background:#9AC43C; }

.options_box a.t_sand { background:#BFB372; }

.options_box a.t_purple { background:#c81dbe; } .options_box a.t_yellow { background:#FFD053; } .options_box a.t_blue { background:#5C9CC7; } .options_box a.t_pink { background:#FF439E; }

.bgr .bg { width:28px; height:28px; border:1px solid #e6e6e6; }

.bgr .bg.bg1 { background: url(../img/bodybg/bg1.png) repeat left top; } .bgr .bg.bg2 { background: url(../img/bodybg/bg2.png) repeat left top; } .bgr .bg.bg3 { background: url(../img/bodybg/bg3.jpg) repeat left top; } .bgr .bg.bg4 { background: url(../img/bodybg/bg4.png) repeat left top; } .bgr .bg.bg5 { background: url(../img/bodybg/bg5.png) repeat left top; } .bgr .bg.bg6 { background: url(../img/bodybg/bg6.png) repeat left top; } .bgr .bg.bg7 { background: url(../img/bodybg/bg7.png) repeat left top; } .bgr .bg.bg8 { background: url(../img/bodybg/bg8.jpg) repeat left top; } .bgr .bg.bg9 { background: url(../img/bodybg/bg9.png) repeat left top; } .bgr .bg.bg10 { background: url(../img/bodybg/bg10.png) repeat left top; }

  1. accent_color{

color: #fff; background: #ef5523; border: none; text-transform: uppercase; margin-left: 2px; text-align: center; outline:0; }

  1. bodybg_color {

color: #fff; background: #ccc; border: none; text-transform: uppercase; margin-left: 2px; text-align: center; outline:0; }


/* Theme Styler :: End */