Team:Tsinghua-A/css/style.css
From 2013.igem.org
Line 483: | Line 483: | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
.spacer.yellow,.section.yellow { | .spacer.yellow,.section.yellow { |
Latest revision as of 21:59, 27 September 2013
/*
Maxim one page bootstrap template @2013 by iWebStudio
/*
===============
CONTENTS:
01 General 02 Typography 03 Non-semantic 04 Navbar 05 Page sections 06 Footer 07 Icons 08 Buttons 09 Media queries
===============
- /
/* Import css */ /* Google font */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); /* bootstrap */ @import url('http://tagsys.org/css/bootstrap.css'); /* bootstrap responsive */ @import url('http://tagsys.org/css/bootstrap-responsive.css'); /* prettyPhoto */ @import url('http://tagsys.org/css/prettyPhoto.css'); /* flexslider */ @import url('http://tagsys.org/css/flexslider.css');
/* font awesome */ @import url('http://tagsys.org/css/font-awesome.css'); /* overwrite */ @import url('http://tagsys.org/css/overwrite.css'); /* animation */ @import url('http://tagsys.org/css/animate.css');
/* ========================================================= 01. General ============================================================ */
div, article, section, header, footer, nav, li { position:relative; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; color: #444; font-size: 16px; font-weight:300; font-family:'Open Sans', Arial, sans-serif; }
body {
padding-top: 0px; /* 60px to make the container go all the way to the bottom of the topbar */
}
- -moz-selection {
color:#333; }
- selection {
color:#333; }
/* scroll to top */ .scrollup{
position:fixed;
width:32px; height:32px;
bottom:20px; right:20px;
}
a.scrollup { outline:0; text-decoration:none; }
a.scrollup:hover,a.scrollup:active,a.scrollup:focus { opacity:1; text-decoration:none; -webkit-transition: all 400ms ease-out 0s; -moz-transition: all 400ms ease-out 0s; -o-transition: all 400ms ease-out 0s; transition: all 400ms ease-out 0s; } a.scrollup i:hover { text-decoration:none; }
.blankdivider10 { height: 10px; display: block; }
.blankdivider20 { height: 20px; display: block; } .blankdivider30 { height: 30px; display: block; }
.row { margin-bottom:30px; }
.row .row{ margin-bottom:30px; }
.row.nomargin { margin-bottom:0; }
/*---------- forms ----------*/
input[type=text], input[type=submit], textarea { width: 100%; padding: 0.5em; font-size: 1em; margin-bottom: 1.5em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input, button, select, textarea { font-family:'Open Sans', Arial, sans-serif; } /* ========================================================= 02. Typography ============================================================ */
p { line-height: 1.6em; margin: 0 0 10px 0; }
blockquote { font-size:18px; border:none; padding:0; }
blockquote.large { font-size:36px; font-weight:700; line-height:1.1em; } blockquote.large:before { font-size:64px; font-family: FontAwesome; content: "\f10d"; margin-right:20px; }
blockquote cite { display:block; font-size:12px;} blockquote cite:before { content:"\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; }
ul, ol { font-size: 1em; /* 16px */ line-height: 1.5; /* 24px */ margin: 0 0 1.5em 0; } body, input, textarea { }
a {
color: #454545; text-decoration: none;
}
a:hover, a:active { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #312f2b; line-height:1.1em; font-family:'Open Sans', Arial, sans-serif; } h1 { font-size: 36px; margin-bottom:20px; } h2 { font-size: 30px; margin-bottom:20px; } h3 { font-size: 26px; margin-bottom:20px; } h4 { font-size: 22px; margin-bottom:20px; } h5 { font-size: 18px; margin-bottom:15px; } h6 { font-size: 16px; margin-bottom:10px; } strong { font-weight:700; font-family: 'Open Sans', sans-serif; } small { font-size: 0.75em; /* 12px */ line-height: 2; /* 24px */ margin-top: 2em; margin-bottom: 0em; } em { font-style: normal; font-family: 'Open Sans'; } .muted { color: #A5A5A2; } .impressed { text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.5), /* shadow */ 1px 1px 0 rgba(255, 255, 255, 0.9); /* highlight */
}
h2.pagetitle { color:#fff; font-size:46px; }
/* ========================================================= 03. Misc ============================================================ */
.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 1em; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; vertical-align: middle; } .medium { font-weight: normal; }
/* ========================================================= 04. Navigation ============================================================ */
.navbar-fixed-top .container { /* Uncomment to make nav expand full width */
/* width: auto; */
} .navbar .brand { margin-left:0; padding: 0; margin-top: 1.05em; } .navbar .brand a { padding: 0; color: #fff; font-size: 1.75em; margin-left: 0; font-weight: 400; text-transform:uppercase; } .navbar .brand a:hover { text-decoration: none;
transition: color .15s linear; -webkit-transition: color .15s linear; -moz-transition: color .15s linear;
} .navbar .brand a:focus { outline: none; } .navbar-inner { min-height: 4.75em; } .navbar-inverse .navbar-inner { background-repeat: repeat; background-color: #0b333f; } .navbar-wrapper { overflow:hidden; }
- menu-main {
margin-top: 1.125em; } ul#menu-main > li > a { font-weight: 600; color: #fff; font-size:14px; text-transform:uppercase; } ul#menu-main > li > a:hover { padding: 9px 15px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } ul#menu-main > li > a:focus { outline:0; }
.navbar-inverse .brand, .navbar-inverse .nav > li > a { text-shadow: none; }
/* =========================================================
05. Page sections
============================================================ */
/* === section header === */
- header-wrapper {
width: 100%; min-height: 600px; margin-top: -60px; padding-top:160px; text-align:center; }
- header-wrapper h1 {
color: #FFFFFF; font-size: 4em; font-weight: 400; margin: 1em 0; }
- header-wrapper h2 {
color: #fff; font-family: 'Open Sans', sans serif; font-size: 2em; font-weight: normal; margin: 0.5em 0; text-shadow: 1px 1px 1px #333333; }
header .logo { text-align:center; margin-bottom:30px; }
/* --- Header slider --- */
- header-wrapper.header-slider {
background: #444 url(../img/bg/bg-1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- main-flexslider ul.slides li p {
font-size: 72px; text-transform: uppercase; position: relative; margin-bottom: 0px; text-align: center; line-height: 1; color:#fff; }
- main-flexslider.flexslider {
margin:0; background:none; border:none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; }
/* --- Header subscribe form --- */
- header-wrapper input[type=text] {
background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; font-size: 1.3125em; border: 0; text-align: center; vertical-align: middle; margin-bottom:0 !important; }
- header-wrapper input[type=text]:focus {
background: #43413e; color: #eff1ef; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; }
- header-wrapper input[type=text] {
height: 2.9em; width:50%; }
- header-wrapper input[type=submit] {
color: #fff; width: 185px; height: 2.9em; font-size: 1.3125em; /* 21px */ padding:0.5em; letter-spacing: 0.05em; margin: 0; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
- header-wrapper input[type=submit]:hover, #header-wrapper input[type=submit]:active {
background: #43413e !important; }
section.section {
padding: 100px 0 80px;
}
section.section h4 {
text-align: center;
margin-bottom: 40px;
font-size: 46px;
font-weight: 700;
letter-spacing: -1px;
}
section.inner {
padding: 50px 0 50px;
}
.section.orange h4 ,.section.green h4{ color: #fcfcfc; } .section.orange p,.section.green p { color: #f7f7f7; }
/* === section spacer === */
section.spacer { padding:90px 0 70px; color:#fcfcfc; }
.spacer.green,.section.green { background:#1bac91; }
.spacer.green,.section.green h4 { color:#fff; }
.spacer.yellow,.section.yellow { background:#ffe873; } .spacer.orange,.section.orange { background:#f36f36; } .spacer.wood,.section.wood { background:#edb887; } .spacer.blue,.section.blue { background:#CAE1FF; }
section.spacer.bg2 { background: url(../img/bg/bg-2.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; }
section.spacer.bg3 { background: url(../img/bg/bg-3.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; }
section.spacer blockquote.large:before { color:#eee; opacity:0.6; }
section.spacer blockquote cite { color:#555; }
/* === section works === */
- works h4 {
margin-bottom:20px; }
- portfolio {
padding-bottom: 0; } /* === portfolio filter === */
- filters {
margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; }
- filters ul {
margin: 0 0 20px; list-style: none; padding: 0; }
- filters ul li {
display: inline-block; }
- filters ul li a {
display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; }
- filters ul li a:hover,#filters ul li a:focus {
text-decoration:none; outline:0; }
- filters ul li a h5 {
font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; }
- filters ul li a:hover h5, #filters ul li a.active h5 {
color:#fcfcfc; }
/* === portfolio filter2 === */
- filters2 {
margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; }
- filters2 ul {
margin: 0 0 20px; list-style: none; padding: 0; }
- filters2 ul li {
display: inline-block; }
- filters2 ul li a {
display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; }
- filters2 ul li a:hover,#filters2 ul li a:focus {
text-decoration:none; outline:0; }
- filters2 ul li a h5 {
font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; }
- filters2 ul li a:hover h5, #filters2 ul li a.active h5 {
color:#fcfcfc; background:#ee6363; }
/* === portfolio wrap - grid === */
- portfolio-wrap {
position: relative; padding: 0; width: 100.1%; margin: 0 auto; display: block; }
- portfolio-wrap .grid {
margin: 0; overflow: hidden; line-height: 0; width: 20%; border:0; padding: 0; } .portfolio-item.current { z-index: 101; } .portfolio-item { padding: 0; position: relative; overflow: hidden; } .portfolio-item .portfolio-image { overflow: hidden; display: block; position: relative; } .portfolio-item .portfolio-image img { width: 100%; height: auto; } .portfolio .portfolio-overlay { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; z-index: 4; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a, .portfolio > a:hover { color: #ffffff; } .portfolio-item .portfolio > a:hover > .portfolio-overlay { opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); } .portfolio > a img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a:hover img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio .thumb-info { position: absolute; width: 100%; height: 100%; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio a:hover .portfolio-overlay .thumb-info { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } .portfolio-overlay .thumb-info i { top: 50%; } .portfolio-overlay .thumb-info h5 { top: 20%; font-size: 18px; } .portfolio-overlay .thumb-info p { top: 50%; font-size: 13px; } .portfolio-overlay .thumb-info h5 { color: #ffffff; width: 100%; position: absolute; text-align: center; } .portfolio-overlay .thumb-info p { color: #ffffff; width: 100%; position: absolute; text-align: center; font-weight: bold; } .portfolio-overlay .thumb-info i { color: #ffffff; width: 100%; position: absolute; text-align: center; display: block; } /* === Isotope CSS3 transitions === */
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
/* === section services === */
section#services h2 { font-size: 22px; margin-bottom: 15px; margin-top: 10px; text-align:center; } section#services p { margin:10px; }
section#services .service-box {
text-align: center;
padding: 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
section#services .span3:hover {
background:#e3e3e3;
}
section#services .service-box h2 { color: #f7f7f7; font-weight: 700; }
section#services.section.orange .service-box:hover { background:#f36518; }
/* === section blog === */
section#blog { background: #f2f2f2; }
.home-post { background:#fff;
}
.home-post:hover { box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.home-post .entry-content {
padding:20px;
}
.home-post .entry-content h5 a {
font-size:22px;
}
.home-post .entry-content h5 a:hover {
color:#312f2b;
text-decoration:none;
}
.home-post .entry-content a.more {
font-size:13px;
}
.home-post .post-meta {
padding:20px;
overflow:hidden;
color:#fcfcfc;
}
.home-post .post-meta i {
float:left;
margin-right:20px;
}
.home-post .post-meta span {
margin-top:10px;
}
.home-post .post-meta span.date {
font-weight:700;
font-size:13px;
float:left;
}
.home-post .post-meta span.tags {
font-weight:700;
font-size:13px;
float:right;
color:#ddd;
}
.home-post .post-meta span.tags a {
color:#fcfcfc;
}
/* === section about === */
section#about { background:#f2f2f2; }
.people { text-align:center; }
.people h3 { margin-bottom:10px; font-weight:500; letter-spacing:-1px; }
.team-thumb { margin-top: 26px; text-align:center; }
/* (spacer) latest tweet */
- tweet{
text-align:center; margin:20px 0 0; font-size:20px; color:#fff; }
- tweet ul{
float:left; width:100%; text-align:center; list-style:none; margin:0; padding:0; }
- tweet ul li{
display: inline-block; list-style:none; margin:0 0 20px; padding:0 0 0 34px; font-size:20px; line-height:1.5em; }
- tweet ul li:before {
font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f099"; margin-right:20px; }
/* === Contact section === */
/* Contact Form */
.validation { display:none; margin: -10px 0 20px; color:#fff; font-weight:700; font-size:13px; }
- sendmessage {
border:1px solid #fff; display:none; text-align:center; padding:15px 12px 15px; margin:10px 0; font-weight:600; margin-bottom:30px; }
- sendmessage.show,.show {
display:block; }
- contact-form {
position: relative; z-index: 999; }
- contact-form input[type=text], .contactForm textarea {
background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; border: 0; font-size:16px; text-align: left; vertical-align: middle; }
- contact-form input[type=text]:focus, .contactForm textarea:focus {
background: rgba(101, 106, 100, 1); color: #eff1ef; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; }
- contact-form input[type=text] {
height: 60px; margin-bottom:30px; }
- contact-form input[type=submit] {
color: #fff; width: 185px; height: 60px; text-shadow: none; font-size: 16px; padding:0.5em; letter-spacing: 0.05em; margin: 0 0 20px 0; display: block; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
- contact-form input[type=submit]:hover, #contact-form input[type=submit]:active {
background: #43413e !important; }
- contact-form textarea {
padding-top: 1em; } div.cform-response-output { max-width: 60%; text-align: center; margin-left: 40% !important; margin-top: 0.5em !important; padding: 0.5em !important; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .cform-not-valid-tip { color: #888; border: 1px dotted #ad3729 !important; width: 100% !important; left: 0 !important; padding: 0.5em !important; font-family: 'Open Sans', sans-serif; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
/* ========================================================= 06. Footer ============================================================ */
footer { background: #2b2b2b; text-align: center; color: #5e5e5e; padding:50px 0 50px; }
footer ul.social-networks { list-style:none; }
footer ul.social-networks li { display:inline; }
footer ul.social-networks li i { display:inline-block; }
footer ul.social-networks li a { color: #5e5e5e; margin: 0 5px; }
footer ul.social-networks li a:hover { text-decoration:none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
footer ul.social-networks li i.icon-bgdark { background:#414141; color: #656565; }
footer ul.social-networks li a i.icon-group:hover {
background: #ba7b3d;
color: #fff;
}
footer ul.social-networks li a i.icon-dashboard:hover { background: #5ad2eb; color: #fff; } footer ul.social-networks li a i.icon-dribbble:hover { background: #f57b71; color: #fff; } footer ul.social-networks li a i.icon-pinterest:hover { background: #d84848; color: #fff; }
/* =========================================================
07. Icons
============================================================ */
/* bg */ i.icon-bglight { color: #444; background: #f7f7f7; } i.icon-bglight.active { color: #fff; }
i.icon-bglight.active:hover{ color: #444; background: #f7f7f7; }
i.icon-bgdark { color: #f7f7f7; background: #333; } i.icon-bgdark:hover { color: #fff; } i.icon-bgdark.active:hover { color: #f7f7f7; background: #333; }
/* square */ i.icon-square { display: inline-block; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; } i.icon-square.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } i.icon-square.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } i.icon-square.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } i.icon-square.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; }
/* rounded */ i.icon-rounded { display: inline-block; border-radius: 6px !important; -moz-border-radius: 6px !important; -webkit-border-radius: 6px !important; -o-border-radius: 6px !important; -ms-border-radius: 6px !important; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; }
.icon-rounded.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-rounded.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; border-radius: 8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important; -o-border-radius: 8px !important; -ms-border-radius: 8px !important; } .icon-rounded.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; border-radius: 10px !important; -moz-border-radius: 10px !important; -webkit-border-radius: 10px !important; -o-border-radius: 10px !important; -ms-border-radius: 10px !important; } .icon-rounded.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; border-radius: 12px !important; -moz-border-radius: 12px !important; -webkit-border-radius: 12px !important; -o-border-radius: 12px !important; -ms-border-radius: 12px !important; }
/* circled */
i.icon-circled {
display: inline-block;
border-radius: 1000px !important;
-moz-border-radius: 1000px !important;
-webkit-border-radius: 1000px !important;
-o-border-radius: 1000px !important;
-ms-border-radius: 1000px !important;
text-align: center;
width: 24px !important;
height: 24px !important;
line-height: 24px !important;
}
.icon-circled.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-circled.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } .icon-circled.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } .icon-circled.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; }
i.icon-white { color:#fff; }
/* more icon sizes for font-awesome icons */
.icon-6x {
font-size: 6em;
} .icon-6x.icon-border {
border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.icon-7x {
font-size: 7em;
} .icon-6x.icon-border {
border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.icon-8x {
font-size: 8em;
} .icon-6x.icon-border {
border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
.icon-9x {
font-size: 9em;
} .icon-6x.icon-border {
border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
} .icon-10x {
font-size: 10em;
} .icon-6x.icon-border {
border-width: 6px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
/* ========================================================= 08. Buttons ============================================================ */
.btn { color: #fff; text-shadow: none; font-size: 16px; padding: 11px 19px; letter-spacing: 0.05em; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;
background-color: #545454; border-color: none; *background-color: #545454; background-image: none; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: none; border: none; *border: 0; border-bottom-color: none;
} .btn:link, .btn:visited { color: #fff; } .btn:hover { background: #333 !important; } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #fff; background-color: #333; *background-color: #333;
}
.btn.btn-theme:hover {
background: #333 !important;
}
/* size */ .btn-large {
padding: 18px 25px; font-size: 24px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
margin-top: 4px;
}
.btn-small {
padding: 6px 13px; font-size: 11.9px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
.btn-small [class^="icon-"], .btn-small [class*=" icon-"] {
margin-top: 0;
}
.btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] {
margin-top: -1px;
}
.btn-mini {
padding: 0 6px; font-size: 10.5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
/* end size */
.btn-primary {
color: #ffffff; text-shadow: none; background-color: #09828c; *background-color: #09828c; background-image: none; border-color: none; filter:none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
color: #ffffff; background: #065158; *background-color: #065158;
}
.btn-primary:active, .btn-primary.active {
background-color: #065158 \9;
}
.btn-warning {
color: #ffffff; text-shadow: none; background-color: #ffe873; *background-color: #ffe873; background-image: none; border-color: none; filter:none;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
color: #ffffff; background: #b88f22; *background: #b88f22;
}
.btn-warning:active, .btn-warning.active {
background: #b88f22 \9;
}
.btn-danger {
color: #ffffff; text-shadow: none; background-color: #f36f36; *background-color: #f36f36; background-image: none; border-color: none; filter:none;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
color: #ffffff; background: #db5f58; *background: #db5f58;
}
.btn-danger:active, .btn-danger.active {
background: #db5f58 \9;
}
.btn-success {
color: #ffffff; text-shadow: none; background-color: #1bac91; *background-color: #1bac91; background-image: none; border-color: none; filter:none;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
color: #ffffff; background: #55ba93; *background: #55ba93;
}
.btn-success:active, .btn-success.active {
background: #55ba93 \9;
}
.btn-info {
color: #ffffff; text-shadow: none; background-color: #4dbdc6; *background-color: #4dbdc6; background-image: none; border-color: none; filter:none;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
color: #ffffff; background: #6a9ad0; *background: #6a9ad0;
}
.btn-info:active, .btn-info.active {
background: #6a9ad0 \9;
}
.btn-inverse {
color: #ffffff; text-shadow: none; background-color: #3c3c3c; *background-color: #3c3c3c; background-image: none; border-color: none; filter:none;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
color: #ffffff; background: #2b2a2a; *background: #2b2a2a;
}
.btn-inverse:active, .btn-inverse.active {
background: #2b2a2a \9;
}
/* button flat */
.btn-flat {
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
/* button rounded */ .btn-rounded {
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
} .btn-large.btn-rounded {
-webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px;
}
.navbar-inverse .btn-navbar {
width: auto;
height: auto;
}
/* ========================================================= 09. Media queries ============================================================ */
@media (min-width: 768px) and (max-width: 979px) {
body { padding-left:0 ; padding-right:0; padding:0; }
.navbar-inner { padding-right: 20px; padding-left: 20px; }
.navbar-inner h1.brand { margin-left:20px; }
.navbar-inner .btn-navbar { margin:20px 20px 0; }
.container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 0 30px; }
.nav-collapse { text-align:center; width:100%; }
}
@media (max-width: 767px) { body { padding-left:0 ; padding-right:0; padding:0; } .navbar-inner { padding-right: 20px; padding-left: 20px; }
.navbar-inner h1.brand { margin-left:20px; }
.navbar-inner .btn-navbar { margin:20px 20px 0; }
.container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 20px 30px; }
.nav-collapse { text-align:center; width:100%; } #portfolio-wrap .grid { width: 25%; } }
/* Smaller screens ----------- */
@media (max-width : 480px) { #header-wrapper { padding-top:80px; }
#team .team-thumb { margin-right: auto; margin-left: auto; width: 150px; display: block; text-align:center; }
#portfolio-wrap .grid { width: 50%; }
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
section.section { padding: 1em 0;
}
#works .container { top: 0 !important;
}
.max-img {
width: 100%;
}
.max-img { margin-right: auto; margin-left: auto; display: block;
}
section#services h2 { margin-bottom: 0.25em;
}
section#services h2, section#services ul { text-align: center;
}
/* team */
- team .team-thumb {
margin-right: auto; margin-left: auto; width: 150px; display: block; text-align:center
}
.job-position: { margin-bottom: 1.5em;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: auto; margin-right: auto;
}
/* Contact Form */ #contact-form { overflow: hidden; } #contact-form input[type=submit] { width: 100%; } }