Team:Bnu China/Templates

From 2014.igem.org

(Difference between revisions)
(Created page with "This is a test")
Line 1: Line 1:
-
This is a test
+
 
 +
/*
 +
/* For better uploading in iGem, all CSS file and in 'txt' format.
 +
*/
 +
 
 +
/*-----------------------------------------------------------------------------------*/
 +
/* RESET
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
 +
font-family:Verdana, Geneva, sans-serif;
 +
margin:0;
 +
padding:0;
 +
border:0;
 +
outline:0;
 +
font-size:100%;
 +
vertical-align:baseline;
 +
background:transparent
 +
}
 +
body {
 +
line-height:1
 +
}
 +
ol, ul {
 +
list-style:none
 +
}
 +
blockquote, q {
 +
quotes:none
 +
}
 +
blockquote:before, blockquote:after, q:before, q:after {
 +
content:'';
 +
content:none
 +
}
 +
:focus {
 +
outline:0
 +
}
 +
ins {
 +
text-decoration:none
 +
}
 +
del {
 +
text-decoration:line-through
 +
}
 +
table {
 +
border-collapse:collapse;
 +
border-spacing:0
 +
}
 +
.clear {
 +
clear:both;
 +
display:block;
 +
overflow:hidden;
 +
visibility:hidden;
 +
width:0;
 +
height:0
 +
}
 +
.clearfix:after {
 +
clear:both;
 +
content:' ';
 +
display:block;
 +
font-size:0;
 +
line-height:0;
 +
visibility:hidden;
 +
width:0;
 +
height:0
 +
}
 +
.clearfix {
 +
display:inline-block
 +
}
 +
* html .clearfix {
 +
height:1%
 +
}
 +
.clearfix {
 +
display:block
 +
}
 +
th, td {
 +
margin:0;
 +
padding:0
 +
}
 +
table {
 +
border-collapse:collapse;
 +
border-spacing:0
 +
}
 +
.clear {
 +
clear: both;
 +
}
 +
br {
 +
line-height: 10px;
 +
}
 +
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner {
 +
border : 0px;
 +
}
 +
input[type="submit"]:focus, input[type="button"]:focus {
 +
outline : none;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* GENERAL
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
body {
 +
background: #1a1a1a;
 +
color: #4d4d4d;
 +
font-family: 'PTSansRegular';
 +
font-size: 14px;
 +
}
 +
p {
 +
 +
font-size: 14px;
 +
line-height: 20px;
 +
}
 +
a {
 +
color: #4d87ab;
 +
text-decoration: none;
 +
-webkit-transition:all 200ms ease-in;
 +
-moz-transition:all 200ms ease-in;
 +
}
 +
a:hover {
 +
color: #d3573e;
 +
}
 +
h1, h2, h3, h4, h5, h6 {
 +
font-family: 'Museo500';
 +
color: #4d87ab;
 +
font-weight: normal;
 +
padding-bottom: 12px;
 +
}
 +
h1 {
 +
font-size: 22px;
 +
line-height: 26px;
 +
}
 +
h2 {
 +
font-size: 20px;
 +
line-height: 24px;
 +
}
 +
h3 {
 +
font-size: 18px;
 +
line-height: 22px;
 +
}
 +
h4 {
 +
font-size: 16px;
 +
line-height: 20px;
 +
}
 +
h5 {
 +
font-size: 14px;
 +
line-height: 20px;
 +
}
 +
h6 {
 +
font-size: 12px;
 +
line-height: 18px;
 +
}
 +
.caps {
 +
text-transform: uppercase;
 +
}
 +
ul {
 +
font-family: 'CharisSILItalic';
 +
line-height: 20px;
 +
font-size: 14px;
 +
}
 +
ul li {
 +
background: transparent url(bullet.png) center left no-repeat;
 +
padding-left: 15px;
 +
}
 +
ol {
 +
font-family: 'CharisSILItalic';
 +
font-size: 14px;
 +
list-style: decimal;
 +
list-style-position: inside;
 +
line-height: 20px;
 +
}
 +
ol li {
 +
padding: 0;
 +
margin: 0;
 +
}
 +
.intro {
 +
font-family: 'CharisSILItalic';
 +
font-size: 21px;
 +
line-height: 31px;
 +
text-align: center;
 +
margin-bottom: -2px;
 +
}
 +
blockquote {
 +
font-family: 'CharisSILItalic';
 +
font-size: 18px;
 +
font-weight: normal;
 +
line-height: 25px;
 +
padding-left: 30px;
 +
background: transparent url(quote.png) no-repeat left 7px;
 +
}
 +
.hr2 {
 +
border-top: 3px solid #454545;
 +
height: 4px;
 +
border-bottom: 1px solid #454545;
 +
margin: 36px 0;
 +
}
 +
.hr1 {
 +
height: 0;
 +
border-bottom: 1px solid #454545;
 +
margin: 36px 0;
 +
}
 +
.center {
 +
text-align: center;
 +
display: block;
 +
margin: 0 auto;
 +
}
 +
p .center {
 +
text-align: center;
 +
display: block;
 +
margin: 0 auto 10px;
 +
}
 +
img {
 +
display: block;
 +
}
 +
img.left {
 +
float: left;
 +
margin: 10px 10px 5px 0;
 +
}
 +
img.right {
 +
float: right;
 +
margin: 10px 0 5px 10px;
 +
}
 +
.lite1 {
 +
color: #4d87ab;
 +
}
 +
.lite2 {
 +
border-bottom: 1px dotted #4d87ab;
 +
}
 +
a.button {
 +
background: #5499c3 url(button.png) repeat-x;
 +
border: none;
 +
height: 15px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
border-radius: 3px;
 +
color: #fff;
 +
font-family: 'CharisSILItalic';
 +
font-size: 14px;
 +
padding: 6px 15px 6px 15px;
 +
margin: 10px 0;
 +
display: inline-block;
 +
-webkit-transition:all 200ms ease-in;
 +
-o-transition:all 200ms ease-in;
 +
-moz-transition:all 200ms ease-in;
 +
}
 +
/* Webkit Fix */
 +
@media screen and (-webkit-min-device-pixel-ratio:0) {
 +
a.button {padding: 5px 15px 7px 15px;}
 +
}
 +
 
 +
/* Opera Fix */
 +
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 +
a.button {padding: 5px 15px 7px 15px;}
 +
 
 +
}
 +
 
 +
a.button.blue {
 +
background-color: #5499c3;
 +
}
 +
 
 +
a.button.green {
 +
background-color: #4dab96;
 +
}
 +
 
 +
a.button.lime {
 +
background-color: #92ab4d;
 +
}
 +
 
 +
a.button.red {
 +
background-color: #ab4d63;
 +
}
 +
 
 +
a.button.purple {
 +
background-color: #8d4dab;
 +
}
 +
 
 +
a.button.blue:hover {
 +
color: #fff;
 +
background-color: #ab4d63;
 +
}
 +
 
 +
a.button.green:hover {
 +
color: #fff;
 +
background-color: #ab4d63;
 +
}
 +
 
 +
a.button.lime:hover {
 +
color: #fff;
 +
background-color: #ab4d63;
 +
}
 +
 
 +
a.button.red:hover {
 +
color: #fff;
 +
background-color: #4d87ab;
 +
}
 +
 
 +
a.button.purple:hover {
 +
color: #fff;
 +
background-color: #4dab96;
 +
}
 +
 
 +
.dropcap {
 +
display:block;
 +
float:left;
 +
font-size:45px;
 +
padding:0;
 +
margin: 0;
 +
margin:10px 8px 3px 0;
 +
font-family: 'Museo500';
 +
}
 +
pre {
 +
margin: 5px 0px 40px 0px;
 +
padding: 0 10px 0px 10px;
 +
display: block;
 +
clear: both;
 +
background: url(codebg.jpg) repeat;
 +
line-height: 20px;
 +
font-size: 12px;
 +
border: 1px solid #cfcfcf;
 +
}
 +
.download-box, .warning-box, .info-box, .note-box {
 +
clear:both;
 +
margin: 10px 0px;
 +
text-shadow: none;
 +
padding: 15px 15px 13px 15px;
 +
line-height: 17px;
 +
}
 +
.info-box {
 +
background:#c2ddf9;
 +
border:1px solid #80bbef;
 +
color:#4783b7;
 +
}
 +
.warning-box {
 +
background:#ffcccc;
 +
border:1px solid #ff9999;
 +
color:#c31b00;
 +
}
 +
.download-box {
 +
background:#d1f7b6;
 +
border:1px solid #8bca61;
 +
color:#5e9537;
 +
}
 +
.note-box {
 +
background:#fdebae;
 +
border:1px solid #e6c555;
 +
color:#9e660d;
 +
}
 +
 
 +
/*-----------------------------------------------------------------------------------*/
 +
/* LAYOUT
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
#wrapper {
 +
width: 960px;
 +
margin: 0 auto;
 +
}
 +
#header {
 +
padding: 30px 0 25px 0;
 +
display: block;
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
.logo {
 +
float: left;
 +
}
 +
.social {
 +
float: right;
 +
position: absolute;
 +
bottom: 25px;
 +
right: 0;
 +
}
 +
.social ul li {
 +
float: left;
 +
margin-left: 1px;
 +
background: none;
 +
padding: 0;
 +
}
 +
#container {
 +
width: 900px;
 +
margin: 20px auto;
 +
padding: 30px;
 +
overflow: hidden;
 +
background-color: #fff;
 +
position: relative;
 +
-webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
-moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
}
 +
#copyright {
 +
width: 900px;
 +
margin: 20px auto;
 +
padding: 17px 30px 13px;
 +
background-color: #fff;
 +
-webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
-moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
}
 +
#copyright p {
 +
font-size: 12px;
 +
text-align: center;
 +
}
 +
#footer {
 +
padding: 40px 0 0 0;
 +
overflow: hidden;
 +
}
 +
#footer h3 {
 +
margin-bottom: 5px;
 +
}
 +
.footer-top {
 +
border-top: 3px solid #454545;
 +
height: 4px;
 +
border-bottom: 1px solid #454545;
 +
margin: 0 0 36px 0;
 +
}
 +
ul.latest-posts {
 +
margin-bottom: -15px;
 +
overflow: hidden;
 +
padding-left: 2px;
 +
}
 +
ul.latest-posts li {
 +
padding: 0;
 +
background: none;
 +
font-family: 'PTSansRegular';
 +
font-style: normal;
 +
font-size: 14px;
 +
padding-top: 10px;
 +
margin-bottom: 10px;
 +
border-top: 1px dashed #454545;
 +
}
 +
ul.latest-posts li a {
 +
color: #4d4d4d;
 +
}
 +
ul.latest-posts li a:hover {
 +
color: #d3573e;
 +
}
 +
ul.latest-posts li:first-child {
 +
padding: 0;
 +
border: none;
 +
}
 +
ul.latest-posts li span.date {
 +
float: left;
 +
font-family: 'CharisSILItalic';
 +
padding-right: 15px;
 +
padding-top: 2px;
 +
text-align: center;
 +
color: #3d3d3d;
 +
font-style: normal;
 +
}
 +
ul.latest-posts li em.day {
 +
font-size: 25px;
 +
font-style: normal;
 +
}
 +
ul.latest-posts li em.month {
 +
font-size: 13px;
 +
text-transform: uppercase;
 +
display: block;
 +
line-height: 8px;
 +
margin-top: 1px;
 +
font-style: normal;
 +
}
 +
ul.flickr {
 +
margin-right: -40px;
 +
margin-bottom: -20px;
 +
overflow: hidden;
 +
display: block;
 +
padding: 0;
 +
}
 +
ul.flickr li {
 +
padding: 0;
 +
background: none;
 +
display: inline-block;
 +
background-color: #fff;
 +
padding: 0;
 +
margin: 0 8px 8px 0;
 +
}
 +
ul.flickr li img {
 +
width: 58px;
 +
height: 58px;
 +
padding: 0;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* MENU
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.menu {
 +
font-family: 'Museo500';
 +
list-style: none;
 +
font-weight: normal;
 +
width: 960px;
 +
padding: 0;
 +
background: #FFF;
 +
-webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
-moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6);
 +
z-index: 1000;
 +
position: relative;
 +
}
 +
.menu ul {
 +
margin: 0;
 +
list-style-type: none;
 +
font-family: 'Museo500';
 +
font-style: normal;
 +
letter-spacing: normal;
 +
}
 +
.menu ul li {
 +
position: relative;
 +
display: inline;
 +
float: left;
 +
padding: 0;
 +
background: none;
 +
}
 +
.menu ul li a {
 +
display: block;
 +
padding: 20px 30px;
 +
text-decoration: none;
 +
display:block;
 +
line-height: 1;
 +
border-right: 1px solid #b4b4b4;
 +
font-size: 14px;
 +
}
 +
 
 +
/* Webkit Fix */
 +
@media screen and (-webkit-min-device-pixel-ratio:0) {
 +
.menu ul li a {padding: 21px 30px 19px;}
 +
}
 +
 
 +
* html .menu ul li a {
 +
display: inline-block;
 +
}
 +
.menu ul li a:link, .menu ul li a:visited {
 +
color: #4d4d4d;
 +
}
 +
.menu ul li a.active {
 +
color: #4d87ab;
 +
}
 +
.menu ul li a.selected {
 +
background: #fff;
 +
color: #4d87ab;
 +
}
 +
.menu ul li a:hover {
 +
background: #fff;
 +
color: #4d87ab;
 +
}
 +
.menu ul li ul {
 +
position: absolute;
 +
left: 0;
 +
display: none;
 +
visibility: hidden;
 +
width: 180px;
 +
padding: 0;
 +
border-radius:0 0 0.5em 0.5em;
 +
background-color: #fff;
 +
}
 +
.menu ul li ul li {
 +
display: list-item;
 +
float: none;
 +
padding: 0 17px;
 +
}
 +
.menu ul li ul li:first-child a {
 +
border: none;
 +
}
 +
.menu ul li ul li ul {
 +
top: 0;
 +
}
 +
.menu ul li ul li a {
 +
margin: 0;
 +
border: none;
 +
padding: 17px 0;
 +
line-height: 1;
 +
border-top: 1px solid #b4b4b4;
 +
font-size: 12px;
 +
}
 +
* html .menu {
 +
height: 1%;
 +
}
 +
.quote {
 +
clear: both;
 +
overflow: hidden;
 +
margin-bottom: 25px;
 +
}
 +
.quote blockquote {
 +
background: #FFF url(quote.png) no-repeat 15px 15px;
 +
padding: 15px 15px 15px 40px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
margin-bottom: 10px;
 +
border:1px solid #dedede;
 +
}
 +
.quote span {
 +
float: right;
 +
}
 +
.quote em {
 +
font-family: 'CharisSILItalic';
 +
font-style: normal;
 +
}
 +
#piecemaker {
 +
margin-top: -30px;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* SHOWCASE
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
#awOnePageButton .view-slide {
 +
display: none;
 +
}
 +
.showcase-load {
 +
height: 470px; /* Same as showcase javascript option */
 +
overflow: hidden;
 +
}
 +
 
 +
.showcase-onepage {
 +
/**/
 +
}
 +
.showcase {
 +
position: relative;
 +
margin: 0 auto 33px auto;
 +
height: 426px;
 +
}
 +
.showcase-content-container {
 +
background-color: #000;
 +
}
 +
.showcase-arrow-previous, .showcase-arrow-next {
 +
position: absolute;
 +
top: 50%;
 +
margin-top: -9px;
 +
background: url('arrows.png');
 +
width: 25px;
 +
height: 25px;
 +
cursor: pointer;
 +
}
 +
.showcase-arrow-previous {
 +
background-position: 0 0;
 +
}
 +
.showcase-arrow-previous:hover {
 +
background-position: 0 -25px;
 +
}
 +
.showcase-arrow-next {
 +
background-position: 25px 0;
 +
}
 +
.showcase-arrow-next:hover {
 +
background-position: -25px -25px;
 +
}
 +
.showcase-content {
 +
background-color: #000;
 +
text-align: center;
 +
}
 +
.showcase-content-wrapper {
 +
text-align: center;
 +
height: 400px;
 +
width: 900px;
 +
display: table-cell;
 +
vertical-align: middle;
 +
}
 +
.showcase-plus-anchor {
 +
background-image: url('plus.png');
 +
background-repeat: no-repeat;
 +
}
 +
.showcase-plus-anchor:hover {
 +
background-position: -32px 0;
 +
}
 +
div.showcase-tooltip {
 +
background-color: #fff;
 +
color: #000;
 +
text-align: left;
 +
padding: 5px 8px;
 +
background-image: url(white-opacity-80.png);
 +
}
 +
.showcase-caption {
 +
color: #000;
 +
padding: 9px 15px 7px 15px;
 +
text-align: left;
 +
position: absolute;
 +
bottom: 10px;
 +
left: 10px;
 +
display: none;
 +
width: auto;
 +
background-image: url(white-opacity-80.png);
 +
}
 +
.showcase-onepage .showcase-content {
 +
margin-bottom: 10px;
 +
}
 +
.showcase-button-wrapper {
 +
clear: both;
 +
margin-top: 15px;
 +
text-align: center;
 +
position: relative;
 +
margin-right:-7px;
 +
}
 +
.showcase-button-wrapper span {
 +
cursor: pointer;
 +
margin: 3px 7px 0 0;
 +
width: 12px;
 +
height: 12px;
 +
text-indent: -99999px;
 +
display: inline-block;
 +
background: url('navs.png');
 +
}
 +
.showcase-button-wrapper span:hover, .showcase-button-wrapper span.active {
 +
background-position: 0 -12px;
 +
}
 +
.showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */ {
 +
background-color: #000;
 +
}
 +
.showcase-thumbnail-wrapper {
 +
overflow: hidden;
 +
}
 +
.showcase-thumbnail {
 +
width: 120px;
 +
height: 90px;
 +
cursor: pointer;
 +
border: solid 1px #333;
 +
position: relative;
 +
}
 +
.showcase-thumbnail-caption {
 +
position: absolute;
 +
bottom: 2px;
 +
padding-left: 10px;
 +
padding-bottom: 5px;
 +
}
 +
.showcase-thumbnail-content {
 +
padding: 10px;
 +
text-align: center;
 +
padding-top: 25px;
 +
}
 +
.showcase-thumbnail-cover {
 +
background-image: url(black-opacity-40.png);
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
left: 0;
 +
right: 0;
 +
}
 +
.showcase-thumbnail:hover {
 +
border: solid 1px #999;
 +
}
 +
.showcase-thumbnail:hover .showcase-thumbnail-cover {
 +
display: none;
 +
}
 +
.showcase-thumbnail.active {
 +
border: solid 1px #999;
 +
}
 +
.showcase-thumbnail.active .showcase-thumbnail-cover {
 +
display: none;
 +
}
 +
.showcase-thumbnail-wrapper-horizontal {
 +
padding: 10px;
 +
}
 +
.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail {
 +
margin-right: 10px;
 +
width: 116px;
 +
}
 +
.showcase-thumbnail-wrapper-vertical {
 +
padding: 10px;
 +
}
 +
.showcase-thumbnail-wrapper-vertical .showcase-thumbnail {
 +
margin-bottom: 10px;
 +
}
 +
.showcase-thumbnail-button-backward,  .showcase-thumbnail-button-forward {
 +
padding: 7px;
 +
cursor: pointer;
 +
}
 +
.showcase-thumbnail-button-backward {
 +
padding-bottom: 0px;
 +
padding-right: 0px;
 +
}
 +
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal {
 +
background-image: url(arrows-small.png);
 +
background-repeat: no-repeat;
 +
display: block;
 +
width: 17px;
 +
height: 17px;
 +
}
 +
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical {
 +
background-position: 0 -51px;
 +
margin-left: 55px;
 +
}
 +
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical {
 +
background-position: -17px -51px;
 +
}
 +
.showcase-thumbnail-button-forward .showcase-thumbnail-vertical {
 +
background-position: 0 -34px;
 +
margin-left: 55px;
 +
}
 +
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical {
 +
background-position: -17px -34px;
 +
}
 +
.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal {
 +
background-position: 0 -17px;
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
}
 +
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal {
 +
background-position: -17px -17px;
 +
}
 +
.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal {
 +
background-position: 0 0;
 +
margin-top: 40px;
 +
margin-bottom: 40px;
 +
}
 +
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal {
 +
background-position: -17px 0;
 +
}
 +
/* Hide button text */
 +
.showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span {
 +
display: none;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* COLUMNS
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.one-half {
 +
width:48%;
 +
}
 +
.one-third {
 +
width:30.66%;
 +
}
 +
.two-third {
 +
width:65.33%;
 +
}
 +
.one-fourth {
 +
width:22%;
 +
}
 +
.three-fourth {
 +
width:74%;
 +
}
 +
.one-fifth {
 +
width:16.8%;
 +
}
 +
.two-fifth {
 +
width:37.6%;
 +
}
 +
.three-fifth {
 +
width:58.4%;
 +
}
 +
.four-fifth {
 +
width:67.2%;
 +
}
 +
.one-sixth {
 +
width:13.33%;
 +
}
 +
.five-sixth {
 +
width:82.67%;
 +
}
 +
.one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {
 +
position:relative;
 +
margin-right:4%;
 +
float:left;
 +
}
 +
.last {
 +
margin-right:0 !important;
 +
clear:right;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* CAROUSEL
 +
/*-----------------------------------------------------------------------------------*/
 +
.carousel {
 +
height: 130px;
 +
padding-top: 5px;
 +
}
 +
.carousel ul li {
 +
background: none;
 +
width: 164px;
 +
margin-right: 20px;
 +
padding: 0;
 +
}
 +
.jcarousel-direction-rtl {
 +
direction: rtl;
 +
}
 +
.carousel .jcarousel-container {
 +
display: block;
 +
overflow: hidden;
 +
}
 +
.carousel .jcarousel-item {
 +
width: 164px;
 +
height: 130px;
 +
}
 +
.carousel .jcarousel-item img {
 +
padding: 0;
 +
}
 +
.carousel .jcarousel-container {
 +
display: block;
 +
overflow: hidden;
 +
height: 164px;
 +
}
 +
.carousel .jcarousel-clip-horizontal {
 +
width:  900px;
 +
height: 130px;
 +
overflow: hidden;
 +
display: block;
 +
}
 +
.carousel .jcarousel-item {
 +
width: 164px;
 +
height: 130px;
 +
}
 +
#carousel-scroll {
 +
float: right;
 +
margin-top: -42px;
 +
}
 +
#prev, #next {
 +
background: transparent url(car-arrow.png) no-repeat;
 +
width: 21px;
 +
height: 21px;
 +
text-indent: -99999px;
 +
display: block;
 +
-webkit-transition:none;
 +
-o-transition:none;
 +
-moz-transition:none;
 +
}
 +
#prev {
 +
background-position: top left;
 +
float: left;
 +
}
 +
#next {
 +
background-position: top right;
 +
float: right;
 +
margin-left: 6px;
 +
}
 +
#prev:hover {
 +
background-position: bottom left;
 +
}
 +
#next:hover {
 +
background-position: bottom right;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* FORMS
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.form-container {
 +
position: relative;
 +
width: 700px;
 +
}
 +
.form-container .loading {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 400px;
 +
height: 400px;
 +
}
 +
.form-container .loading span {
 +
}
 +
.form-container .response {
 +
display: none;
 +
margin: 15px 0 0 80px;
 +
background:#d1f7b6;
 +
border:1px solid #8bca61;
 +
color:#5e9537;
 +
clear:both;
 +
text-shadow: none;
 +
padding: 15px 15px 13px 15px;
 +
line-height: 17px;
 +
width: 370px;
 +
}
 +
.forms {
 +
}
 +
.forms fieldset {
 +
font-family: 'PTSansRegular';
 +
font-size: 14px;
 +
}
 +
.forms ol {
 +
list-style: none;
 +
}
 +
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
 +
/* form rows */
 +
.forms li.form-row {
 +
margin-bottom: 20px;
 +
}
 +
.forms li.text-input-row {
 +
}
 +
.forms li.text-area-row {
 +
}
 +
.forms li.checkbox-row {
 +
}
 +
.forms li.radio-row {
 +
}
 +
.forms li.select-row {
 +
}
 +
.forms li.button-row {
 +
}
 +
.forms li.hidden-row {
 +
display: none;
 +
}
 +
/* form input fields */
 +
 
 +
.forms fieldset .text-input {
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
width: 380px;
 +
height: 30px;
 +
padding: 0 10px;
 +
color: #4d4d4d;
 +
font-family: 'PTSansRegular';
 +
font-size: 13px;
 +
display: inline;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.forms fieldset .password {
 +
}
 +
.forms fieldset .text-area {
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
width: 380px;
 +
height: 140px;
 +
resize: none;
 +
color: #4d4d4d;
 +
font-family: 'PTSansRegular';
 +
font-size: 13px;
 +
padding: 5px 10px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.forms fieldset .radio {
 +
}
 +
.forms fieldset .checkbox {
 +
}
 +
.forms fieldset .select {
 +
}
 +
.forms fieldset .btn-submit {
 +
background: #5499c3 url(button.png) repeat-x;
 +
border: none;
 +
height: 27px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
border-radius: 3px;
 +
color: #e2e2e2;
 +
font-family: 'CharisSILItalic';
 +
font-size: 14px;
 +
padding: 0 20px 1px 20px;
 +
cursor: pointer;
 +
margin-left: 80px;
 +
}
 +
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 +
.forms fieldset .btn-submit {padding: 0 20px 2px 20px;}
 +
 
 +
}
 +
.forms li.error input, .forms li.error textarea {
 +
border: 1px #c43131 solid;
 +
}
 +
.forms span.error {
 +
display: none;
 +
}
 +
.forms .button-row span.error {
 +
padding: 0;
 +
display: none;
 +
}
 +
.forms li.focus {
 +
}
 +
.forms label {
 +
display: block;
 +
float: left;
 +
width: 80px;
 +
padding-top: 5px;
 +
font-family: 'PTSansRegular';
 +
font-size: 13px;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* FOOTER FORMS
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
#footer .form-container {
 +
position: relative;
 +
width: 197px;
 +
}
 +
#footer .forms li.form-row {
 +
margin-bottom: 10px;
 +
}
 +
#footer .form-container .loading {
 +
width: 130px;
 +
height: 400px;
 +
}
 +
#footer .forms fieldset .text-input {
 +
width: 130px;
 +
height: 30px;
 +
}
 +
 
 +
#footer .forms fieldset .text-area {
 +
width: 175px;
 +
height: 120px;
 +
}
 +
#footer .forms fieldset .btn-submit {
 +
background: #5499c3 url(button.png) repeat-x;
 +
border: none;
 +
height: 27px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
border-radius: 3px;
 +
color: #e2e2e2;
 +
font-family: 'CharisSILItalic';
 +
font-size: 14px;
 +
padding: 0 20px 1px 20px;
 +
cursor: pointer;
 +
margin-left: 0;
 +
}
 +
 
 +
/* Opera Fix */
 +
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 +
#footer .forms fieldset .btn-submit {padding: 0 20px 2px 20px;}
 +
 
 +
}
 +
#footer .forms span.error {
 +
display: none;
 +
}
 +
#footer .forms label {
 +
display: block;
 +
float: right;
 +
width: 40px;
 +
text-align: right;
 +
padding-top: 10px;
 +
font-family: 'PTSansRegular';
 +
font-size: 13px;
 +
}
 +
#footer .form-container .response {
 +
display: none;
 +
margin: 15px 0 0 0;
 +
background:#d1f7b6;
 +
border:1px solid #8bca61;
 +
color:#5e9537;
 +
clear:both;
 +
text-shadow: none;
 +
padding: 10px 10px 8px 10px;
 +
line-height: 17px;
 +
width: 173px;
 +
font-size: 12px;
 +
}
 +
 
 +
/* Opera Fix */
 +
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 +
#footer .form-container .loading {
 +
width: 110px;
 +
height: 400px;
 +
}
 +
#footer .forms fieldset .text-input {
 +
width: 110px;
 +
height: 30px;
 +
}
 +
#footer .forms label {
 +
padding-top:6px;
 +
}
 +
}
 +
 
 +
/* Webkit Fix */
 +
@media screen and (-webkit-min-device-pixel-ratio:0) {
 +
#footer .forms label {
 +
padding-top:6px;
 +
}
 +
}
 +
 
 +
/*-----------------------------------------------------------------------------------*/
 +
/* PORTFOLIO
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.items {
 +
width: 930px;
 +
}
 +
.box {
 +
padding: 0;
 +
float: left;
 +
}
 +
.col5 {
 +
width: 164px;
 +
margin: 0 20px 20px 0;
 +
}
 +
.col4 {
 +
width: 210px;
 +
margin: 0 20px 20px 0;
 +
}
 +
.col3 {
 +
width: 288px;
 +
margin: 0 21px 21px 0;
 +
}
 +
.col5 img {
 +
max-width: 164px;
 +
}
 +
.col4 img {
 +
max-width: 210px;
 +
}
 +
.col3 img {
 +
max-width: 288px;
 +
}
 +
.box h4 {
 +
padding:10px 0 0;
 +
font-family: 'CharisSILItalic';
 +
}
 +
.box p {
 +
padding: 0;
 +
font-family: 'CharisSILItalic';
 +
}
 +
#filtering-nav {
 +
letter-spacing: normal;
 +
margin: 30px 0 30px 0;
 +
padding: 10px 0 9px 0;
 +
border-top:1px solid #b4b4b4;
 +
border-bottom:1px solid #b4b4b4;
 +
}
 +
#filtering-nav li {
 +
list-style: none;
 +
float: left;
 +
background: none;
 +
padding: 0 20px 0 0;
 +
font-style: normal;
 +
font-family: 'Museo500';
 +
text-transform: uppercase;
 +
font-size: 13px;
 +
}
 +
#filtering-nav li.active a {
 +
color: #d3573e;
 +
}
 +
.items:after, #filtering-nav:after {
 +
content: '';
 +
display: block;
 +
height: 0;
 +
clear: both;
 +
visibility: hidden;
 +
}
 +
#portfolio .items, #gallery .items {
 +
opacity: 0;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* PORTFOLIO HOVER
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.box a, .carousel ul li {
 +
display: block;
 +
position: relative;
 +
}
 +
.box a img, .carousel ul li img {
 +
display: block;
 +
position: relative;
 +
}
 +
.play, .zoom, .details {
 +
position: absolute;
 +
background: transparent url(icon-play.png) no-repeat center center;
 +
}
 +
.zoom {
 +
background-image: url(icon-zoom.png);
 +
}
 +
.details {
 +
background-image: url(icon-more.png);
 +
}
 +
.box a span, .carousel ul li a span {
 +
display: none;
 +
height: 100%;
 +
position: absolute;
 +
text-align: center;
 +
text-decoration: none;
 +
width: 100%;
 +
z-index: 100;
 +
}
 +
.overlay {
 +
background-color: rgba(15, 15, 15, 0.4);
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* GALLERY
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
#gallery {
 +
margin-top: 40px;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* BLOG
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.blog {
 +
}
 +
.content {
 +
width: 595px;
 +
float: left;
 +
}
 +
.post {
 +
padding-bottom: 45px;
 +
margin-bottom: 45px;
 +
border-bottom: 1px solid #454545;
 +
}
 +
.blog-post .post {
 +
border: none;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
.sidebar {
 +
width: 265px;
 +
float: right;
 +
}
 +
.sidebar:after {
 +
content: '';
 +
display: block;
 +
height: 0;
 +
clear: both;
 +
visibility: hidden;
 +
}
 +
.post-info {
 +
padding-bottom: 22px;
 +
}
 +
.post-date {
 +
width: 115px;
 +
padding-right: 15px;
 +
border-right: 1px solid #454545;
 +
float: left;
 +
font-family: 'CharisSILItalic';
 +
}
 +
.post-date .day {
 +
font-size: 52px;
 +
float: left;
 +
padding-right: 10px;
 +
line-height: 42px;
 +
}
 +
.post-date .month {
 +
display: block;
 +
font-size: 20px;
 +
text-transform: uppercase;
 +
}
 +
.post-date .year {
 +
display: block;
 +
font-size: 18px;
 +
line-height: 15px;
 +
padding-top: 7px;
 +
}
 +
.post-title {
 +
width: 435px;
 +
float: right;
 +
}
 +
.post-title h1 {
 +
padding: 0 0 7px 0;
 +
margin-top: -3px;
 +
}
 +
.post-info:after {
 +
content: '';
 +
display: block;
 +
height: 0;
 +
clear: both;
 +
visibility: hidden;
 +
}
 +
.post iframe {
 +
margin-bottom:10px;
 +
}
 +
.post-meta {
 +
font-family: 'CharisSILItalic';
 +
font-size: 12px;
 +
height: 13px;
 +
display: block;
 +
}
 +
.comments {
 +
background: transparent url(icon-comment.png) no-repeat left center;
 +
padding-left: 26px;
 +
margin-right: 10px;
 +
padding-right: 10px;
 +
}
 +
.categories {
 +
background: transparent url(icon-category.png) no-repeat left center;
 +
padding-left: 22px;
 +
}
 +
.tags {
 +
background: transparent url(icon-tag.png) no-repeat left center;
 +
padding-left: 30px;
 +
margin-top: 10px;
 +
padding-top: 5px;
 +
display: block;
 +
font-family: 'CharisSILItalic';
 +
font-size: 12px;
 +
height: 16px;
 +
}
 +
.post-meta a, .tags a {
 +
color: #4d4d4d;
 +
}
 +
.post-meta a:hover, .tags a:hover {
 +
color: #d3573e;
 +
}
 +
a.more {
 +
font-family: 'CharisSILItalic';
 +
cursor: pointer;
 +
}
 +
.page-navi {
 +
margin: -35px 0 0 0;
 +
}
 +
.page-navi p {
 +
float: left;
 +
padding: 3px 20px 0 0;
 +
border-right: solid 1px #454545;
 +
margin-right: 20px;
 +
font-size: 12px;
 +
}
 +
.page-navi ul {
 +
list-style: none;
 +
}
 +
.page-navi ul li {
 +
display: inline;
 +
background: none;
 +
padding: 0;
 +
font-family: 'PTSansRegular';
 +
}
 +
.page-navi ul li a {
 +
float: left;
 +
font-size: 12px;
 +
display: block;
 +
font-style: normal;
 +
line-height: 1;
 +
text-align: center;
 +
padding: 6px 8px 4px 8px;
 +
margin-right: 7px;
 +
color: #4d4d4d;
 +
border: 1px solid transparent;
 +
-webkit-transition:none;
 +
-o-transition:none;
 +
-moz-transition:none;
 +
}
 +
.page-navi ul li a:hover, .page-navi ul li a.current {
 +
text-decoration: none;
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.sidebar-box {
 +
margin-bottom: 50px;
 +
}
 +
.searchform input {
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
color: #4d4d4d;
 +
width: 245px;
 +
padding: 5px 10px;
 +
height: 24px;
 +
font-size: 13px;
 +
font-family: 'CharisSILItalic';
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
background: #FFF url(search.png) 240px center no-repeat;
 +
}
 +
.tag-list ul li {
 +
background: none;
 +
padding: 0;
 +
display: inline-block;
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
margin: 0 3px 8px 0;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.tag-list ul li a {
 +
padding: 3px 10px;
 +
margin: 0;
 +
color: #4d4d4d;
 +
display: block;
 +
text-transform: lowercase;
 +
}
 +
 
 +
.tag-list ul li a:hover {
 +
color: #d3573e;
 +
}
 +
.cat-list ul li {
 +
background: none;
 +
padding: 0;
 +
display: block;
 +
background-color: #fff;
 +
border:1px solid #dedede;
 +
margin: 0 0 8px 0;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.cat-list ul li span {
 +
float: right;
 +
}
 +
.cat-list ul li a {
 +
padding: 3px 10px;
 +
margin: 0;
 +
color: #4d4d4d;
 +
display: block;
 +
text-transform: capitalize;
 +
}
 +
.cat-list ul li a:hover {
 +
color: #d3573e;
 +
}
 +
ul.ads {
 +
width: 280px;
 +
margin-right: -15px;
 +
}
 +
ul.ads li {
 +
float: left;
 +
background: none;
 +
padding: 0;
 +
margin: 0 15px 15px 0;
 +
}
 +
 
 +
/* Webkit Fix */
 +
@media screen and (-webkit-min-device-pixel-ratio:0) {
 +
.tag-list ul li a {
 +
padding: 2px 10px 4px;
 +
}
 +
.cat-list ul li a {
 +
padding: 2px 10px 4px;
 +
}
 +
}
 +
 
 +
/* Opera Fix */
 +
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 +
.tag-list ul li a {
 +
padding: 2px 10px 4px;
 +
}
 +
.cat-list ul li a {
 +
padding: 2px 10px 4px;
 +
}
 +
}
 +
 
 +
/*-----------------------------------------------------------------------------------*/
 +
/* SERVICES
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.service {
 +
background: transparent url(circle.png) no-repeat;
 +
width: 100px;
 +
height: 100px;
 +
display: block;
 +
}
 +
.service img {
 +
vertical-align: middle;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* 18. TOGGLE
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
.toggle {
 +
width: 100%;
 +
padding-bottom: 20px;
 +
clear:both;
 +
}
 +
.toggle-wrapper {
 +
padding-bottom:5px;
 +
}
 +
h2.trigger {
 +
width: 550px;
 +
clear:both;
 +
font-size: 15px;
 +
margin:0px;
 +
display: block;
 +
cursor: pointer;
 +
background-color: #FFF;
 +
padding: 10px 20px;
 +
color: #4d4d4d;
 +
border: 1px solid #dedede;
 +
-webkit-transition:all 200ms ease-in;
 +
-o-transition:all 200ms ease-in;
 +
-moz-transition:all 200ms ease-in;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
h2.trigger.active {
 +
color: #4d87ab;
 +
}
 +
h2.trigger:hover {
 +
color: #4d87ab;
 +
}
 +
.togglebox {
 +
width:590px;
 +
height: auto;
 +
background-color: #FFF;
 +
overflow: hidden;
 +
margin: 10px 0;
 +
border: 1px solid #dedede;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.togglebox div {
 +
padding: 20px;
 +
}
 +
.togglebox p {
 +
line-height: 22px;
 +
}
 +
.togglebox p {
 +
line-height: 22px;
 +
}
 +
.tabbed-content {
 +
width: 100%;
 +
overflow: hidden;
 +
margin-bottom: 20px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* TABS
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
ul.tabs {
 +
margin: 0;
 +
padding: 0;
 +
float: left;
 +
list-style: none;
 +
width: 100%;
 +
color: #4d4d4d;
 +
}
 +
ul.tabs li {
 +
float: left;
 +
position: relative;
 +
list-style: none;
 +
margin-right: 10px;
 +
background: none;
 +
padding: 0;
 +
font-family: 'Museo500';
 +
}
 +
ul.tabs li a {
 +
display: block;
 +
position: relative;
 +
padding: 8px 10px 8px;
 +
line-height: 1;
 +
text-align: center;
 +
font-weight: normal;
 +
cursor: pointer;
 +
color: #4d4d4d;
 +
text-shadow: none;
 +
border: 1px solid #dedede;
 +
background-color: #FFF;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
-webkit-transition:none;
 +
-moz-transition:none;
 +
}
 +
ul.tabs li a:hover {
 +
text-shadow: none;
 +
text-decoration: none;
 +
color: #FFF;
 +
}
 +
ul.tabs li a {
 +
float: left;
 +
}
 +
ul.tabs li a:hover {
 +
text-decoration: none;
 +
color: #4d87ab;
 +
}
 +
ul.tabs li.active a {
 +
border: 1px solid #4d87ab;
 +
color: #fff;
 +
background-color: #4d87ab;
 +
}
 +
.tab_container {
 +
border-top: none;
 +
clear: both;
 +
float: left;
 +
width: 99%;
 +
border: 1px solid #dedede;
 +
background: #FFF;
 +
margin-top: 10px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
.tab_content {
 +
padding: 15px 15px 15px 15px;
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* TABLE
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
table {
 +
width: 100%;
 +
border-collapse: collapse;
 +
margin-bottom: 20px;
 +
background-color: #fff;
 +
color: #6e6e6e;
 +
border-bottom:1px solid #dedede;
 +
}
 +
table td {
 +
padding: 8px 10px;
 +
border-right:1px solid #dedede;
 +
}
 +
table td:hover {
 +
background-color: #f2f2f2;
 +
}
 +
table th h4 {
 +
margin:0;
 +
}
 +
table th {
 +
padding: 10px;
 +
text-align: left;
 +
border-right:1px solid #dedede;
 +
font-weight: normal;
 +
}
 +
table td.center {
 +
text-align: center;
 +
}
 +
table td.last {
 +
background: none;
 +
}
 +
table th.center {
 +
text-align: center;
 +
}
 +
table th.last {
 +
background: none;
 +
}
 +
table tr {
 +
border-left:1px solid #dedede;
 +
border-top:1px solid #dedede;
 +
}
 +
table tr.caption {
 +
border-left:1px solid #dedede;
 +
}
 +
table.price td {
 +
text-align: center;
 +
}
 +
table.price td.left {
 +
text-align: left;
 +
font-weight: bold;
 +
}
 +
table.price td.right {
 +
text-align: right;
 +
font-weight: bold;
 +
}
 +
table.price td h4 {
 +
margin:0;
 +
}
 +
table.price td h4 span {
 +
display: block;
 +
font-size: 14px;
 +
font-family: 'CharisSILItalic';
 +
font-style: normal;
 +
color: #6e6e6e;
 +
}
 +
table.price td h4 sup {
 +
padding-left: 3px;
 +
line-height: 18px;
 +
font-family: 'CharisSILItalic';
 +
font-style: normal;
 +
}
 +
.check-icon {
 +
background: transparent url(check-table.png) no-repeat center left;
 +
width: 12px;
 +
height: 10px;
 +
}
 +
.cross {
 +
background: transparent url(cross.png) no-repeat center left;
 +
width: 10px;
 +
height: 10px;
 +
}
 +
table .check-icon {
 +
display: inline-block;
 +
text-align: center;
 +
}
 +
table span.cross {
 +
display: inline-block;
 +
text-align: center;
 +
}
 +
.scanlines {
 +
position: absolute;
 +
top: 0px;
 +
left: 0px;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 2;
 +
background: url('tile.png');
 +
}
 +
/*-----------------------------------------------------------------------------------*/
 +
/* COMMENTS
 +
/*-----------------------------------------------------------------------------------*/
 +
 
 +
#comments {
 +
width: 590px;
 +
}
 +
.full-width #comments {
 +
width: 900px;
 +
}
 +
ol.commentlist .message p {
 +
font-style: normal;
 +
clear: both;
 +
padding: 0;
 +
}
 +
ol.commentlist {
 +
list-style:none;
 +
margin:0;
 +
}
 +
ol.commentlist li {
 +
margin: 0;
 +
list-style:none;
 +
background: none;
 +
padding: 25px 0 26px 0;
 +
border-bottom: 1px solid #454545;
 +
font-family: 'PTSansRegular';
 +
}
 +
#comments .user {
 +
float:left;
 +
width:60px;
 +
}
 +
.avatar {
 +
width: 60px;
 +
height: 60px;
 +
float:left;
 +
display:block;
 +
}
 +
#comments .message .info .date {
 +
float:left;
 +
font-size: 11px;
 +
margin-left: 10px;
 +
}
 +
#comments .info a {
 +
font-size:11px;
 +
float:left;
 +
text-decoration: none;
 +
}
 +
#comments a.reply-link {
 +
display:block;
 +
margin-left: 10px;
 +
float:right;
 +
text-decoration:none;
 +
font-size:9px;
 +
text-transform: uppercase;
 +
font-style: normal;
 +
}
 +
#comments .message {
 +
background:none;
 +
width:510px;
 +
float:right;
 +
font-size:13px;
 +
line-height:20px;
 +
position:relative;
 +
padding:0;
 +
margin: 0;
 +
}
 +
.full-width #comments .message {
 +
width:820px;
 +
}
 +
#comments .info {
 +
margin: 0 0 3px 0;
 +
}
 +
#comments ul.children {
 +
margin:0;
 +
padding:0 0 0 40px;
 +
}
 +
#comments ol.commentlist ul.children li {
 +
padding:25px 0 0 0;
 +
margin: 0;
 +
margin-top: 25px;
 +
border: none;
 +
border-top: 1px solid #454545;
 +
}
 +
#comments ol.commentlist ul.children li .message {
 +
width:470px;
 +
}
 +
#comments ol.commentlist ul.children ul li .message {
 +
width:430px;
 +
}
 +
#comments ol.commentlist ul.children ul ul li .message {
 +
width:390px;
 +
}
 +
#comments ol.commentlist ul.children ul ul ul li .message {
 +
width:350px;
 +
}
 +
#comments ol.commentlist ul.children ul ul ul ul li .message {
 +
width:310px;
 +
}
 +
#comments ol.commentlist ul.children ul ul ul ul ul li .message {
 +
width:270px;
 +
}
 +
.full-width #comments ol.commentlist ul.children li .message {
 +
width:780px;
 +
}
 +
.full-width #comments ol.commentlist ul.children ul li .message {
 +
width:740px;
 +
}
 +
.full-width #comments ol.commentlist ul.children ul ul li .message {
 +
width:700px;
 +
}
 +
.full-width #comments ol.commentlist ul.children ul ul ul li .message {
 +
width:660px;
 +
}
 +
.full-width #comments ol.commentlist ul.children ul ul ul ul li .message {
 +
width:620px;
 +
}
 +
.full-width #comments ol.commentlist ul.children ul ul ul ul ul li .message {
 +
width:580px;
 +
}
 +
#comments .info h3 {
 +
margin: 0;
 +
padding: 0;
 +
line-height: 18px;
 +
display: inline;
 +
}
 +
#comments .info h3 a {
 +
font-size: 15px;
 +
font-style: normal;
 +
}
 +
#comments .info h3 a:hover {
 +
}
 +
.comment-form {
 +
margin-top: 40px;
 +
}

Revision as of 14:00, 15 July 2014

/* /* For better uploading in iGem, all CSS file and in 'txt' format.

  • /

/*-----------------------------------------------------------------------------------*/ /* RESET /*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { font-family:Verdana, Geneva, sans-serif; margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent } body { line-height:1 } ol, ul { list-style:none } blockquote, q { quotes:none } blockquote:before, blockquote:after, q:before, q:after { content:; content:none }

focus {

outline:0 } ins { text-decoration:none } del { text-decoration:line-through } table { border-collapse:collapse; border-spacing:0 } .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0 } .clearfix { display:inline-block }

  • html .clearfix {

height:1% } .clearfix { display:block } th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } .clear { clear: both; } br { line-height: 10px; } input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { 

border : 0px;

} input[type="submit"]:focus, input[type="button"]:focus { outline : none; } /*-----------------------------------------------------------------------------------*/ /* GENERAL /*-----------------------------------------------------------------------------------*/

body { background: #1a1a1a; color: #4d4d4d; font-family: 'PTSansRegular'; font-size: 14px; } p {

font-size: 14px; line-height: 20px; } a { color: #4d87ab; text-decoration: none; -webkit-transition:all 200ms ease-in; -moz-transition:all 200ms ease-in; } a:hover { color: #d3573e; } h1, h2, h3, h4, h5, h6 { font-family: 'Museo500'; color: #4d87ab; font-weight: normal; padding-bottom: 12px; } h1 { font-size: 22px; line-height: 26px; } h2 { font-size: 20px; line-height: 24px; } h3 { font-size: 18px; line-height: 22px; } h4 { font-size: 16px; line-height: 20px; } h5 { font-size: 14px; line-height: 20px; } h6 { font-size: 12px; line-height: 18px; } .caps { text-transform: uppercase; } ul { font-family: 'CharisSILItalic'; line-height: 20px; font-size: 14px; } ul li { background: transparent url(bullet.png) center left no-repeat; padding-left: 15px; } ol { font-family: 'CharisSILItalic'; font-size: 14px; list-style: decimal; list-style-position: inside; line-height: 20px; } ol li { padding: 0; margin: 0; } .intro { font-family: 'CharisSILItalic'; font-size: 21px; line-height: 31px; text-align: center; margin-bottom: -2px; } blockquote { font-family: 'CharisSILItalic'; font-size: 18px; font-weight: normal; line-height: 25px; padding-left: 30px; background: transparent url(quote.png) no-repeat left 7px; } .hr2 { border-top: 3px solid #454545; height: 4px; border-bottom: 1px solid #454545; margin: 36px 0; } .hr1 { height: 0; border-bottom: 1px solid #454545; margin: 36px 0; } .center { text-align: center; display: block; margin: 0 auto; } p .center { text-align: center; display: block; margin: 0 auto 10px; } img { display: block; } img.left { float: left; margin: 10px 10px 5px 0; } img.right { float: right; margin: 10px 0 5px 10px; } .lite1 { color: #4d87ab; } .lite2 { border-bottom: 1px dotted #4d87ab; } a.button { background: #5499c3 url(button.png) repeat-x; border: none; height: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; font-family: 'CharisSILItalic'; font-size: 14px; padding: 6px 15px 6px 15px; margin: 10px 0; display: inline-block; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; -moz-transition:all 200ms ease-in; } /* Webkit Fix */ @media screen and (-webkit-min-device-pixel-ratio:0) { a.button {padding: 5px 15px 7px 15px;} }

/* Opera Fix */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { a.button {padding: 5px 15px 7px 15px;}

}

a.button.blue { background-color: #5499c3; }

a.button.green { background-color: #4dab96; }

a.button.lime { background-color: #92ab4d; }

a.button.red { background-color: #ab4d63; }

a.button.purple { background-color: #8d4dab; }

a.button.blue:hover { color: #fff; background-color: #ab4d63; }

a.button.green:hover { color: #fff; background-color: #ab4d63; }

a.button.lime:hover { color: #fff; background-color: #ab4d63; }

a.button.red:hover { color: #fff; background-color: #4d87ab; }

a.button.purple:hover { color: #fff; background-color: #4dab96; }

.dropcap { display:block; float:left; font-size:45px; padding:0; margin: 0; margin:10px 8px 3px 0; font-family: 'Museo500'; } pre { margin: 5px 0px 40px 0px; padding: 0 10px 0px 10px; display: block; clear: both; background: url(codebg.jpg) repeat; line-height: 20px; font-size: 12px; border: 1px solid #cfcfcf; } .download-box, .warning-box, .info-box, .note-box { clear:both; margin: 10px 0px; text-shadow: none; padding: 15px 15px 13px 15px; line-height: 17px; } .info-box { background:#c2ddf9; border:1px solid #80bbef; color:#4783b7; } .warning-box { background:#ffcccc; border:1px solid #ff9999; color:#c31b00; } .download-box { background:#d1f7b6; border:1px solid #8bca61; color:#5e9537; } .note-box { background:#fdebae; border:1px solid #e6c555; color:#9e660d; }

/*-----------------------------------------------------------------------------------*/ /* LAYOUT /*-----------------------------------------------------------------------------------*/

  1. wrapper {

width: 960px; margin: 0 auto; }

  1. header {

padding: 30px 0 25px 0; display: block; overflow: hidden; position: relative; } .logo { float: left; } .social { float: right; position: absolute; bottom: 25px; right: 0; } .social ul li { float: left; margin-left: 1px; background: none; padding: 0; }

  1. container {

width: 900px; margin: 20px auto; padding: 30px; overflow: hidden; background-color: #fff; position: relative; -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); }

  1. copyright {

width: 900px; margin: 20px auto; padding: 17px 30px 13px; background-color: #fff; -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); }

  1. copyright p {

font-size: 12px; text-align: center; }

  1. footer {

padding: 40px 0 0 0; overflow: hidden; }

  1. footer h3 {

margin-bottom: 5px; } .footer-top { border-top: 3px solid #454545; height: 4px; border-bottom: 1px solid #454545; margin: 0 0 36px 0; } ul.latest-posts { margin-bottom: -15px; overflow: hidden; padding-left: 2px; } ul.latest-posts li { padding: 0; background: none; font-family: 'PTSansRegular'; font-style: normal; font-size: 14px; padding-top: 10px; margin-bottom: 10px; border-top: 1px dashed #454545; } ul.latest-posts li a { color: #4d4d4d; } ul.latest-posts li a:hover { color: #d3573e; } ul.latest-posts li:first-child { padding: 0; border: none; } ul.latest-posts li span.date { float: left; font-family: 'CharisSILItalic'; padding-right: 15px; padding-top: 2px; text-align: center; color: #3d3d3d; font-style: normal; } ul.latest-posts li em.day { font-size: 25px; font-style: normal; } ul.latest-posts li em.month { font-size: 13px; text-transform: uppercase; display: block; line-height: 8px; margin-top: 1px; font-style: normal; } ul.flickr { margin-right: -40px; margin-bottom: -20px; overflow: hidden; display: block; padding: 0; } ul.flickr li { padding: 0; background: none; display: inline-block; background-color: #fff; padding: 0; margin: 0 8px 8px 0; } ul.flickr li img { width: 58px; height: 58px; padding: 0; } /*-----------------------------------------------------------------------------------*/ /* MENU /*-----------------------------------------------------------------------------------*/

.menu { font-family: 'Museo500'; list-style: none; font-weight: normal; width: 960px; padding: 0; background: #FFF; -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.6); z-index: 1000; position: relative; } .menu ul { margin: 0; list-style-type: none; font-family: 'Museo500'; font-style: normal; letter-spacing: normal; } .menu ul li { position: relative; display: inline; float: left; padding: 0; background: none; } .menu ul li a { display: block; padding: 20px 30px; text-decoration: none; display:block; line-height: 1; border-right: 1px solid #b4b4b4; font-size: 14px; }

/* Webkit Fix */ @media screen and (-webkit-min-device-pixel-ratio:0) { .menu ul li a {padding: 21px 30px 19px;} }

  • html .menu ul li a {

display: inline-block; } .menu ul li a:link, .menu ul li a:visited { color: #4d4d4d; } .menu ul li a.active { color: #4d87ab; } .menu ul li a.selected { background: #fff; color: #4d87ab; } .menu ul li a:hover { background: #fff; color: #4d87ab; } .menu ul li ul { position: absolute; left: 0; display: none; visibility: hidden; width: 180px; padding: 0; border-radius:0 0 0.5em 0.5em; background-color: #fff; } .menu ul li ul li { display: list-item; float: none; padding: 0 17px; } .menu ul li ul li:first-child a { border: none; } .menu ul li ul li ul { top: 0; } .menu ul li ul li a { margin: 0; border: none; padding: 17px 0; line-height: 1; border-top: 1px solid #b4b4b4; font-size: 12px; }

  • html .menu {

height: 1%; } .quote { clear: both; overflow: hidden; margin-bottom: 25px; } .quote blockquote { background: #FFF url(quote.png) no-repeat 15px 15px; padding: 15px 15px 15px 40px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 10px; border:1px solid #dedede; } .quote span { float: right; } .quote em { font-family: 'CharisSILItalic'; font-style: normal; }

  1. piecemaker {

margin-top: -30px; } /*-----------------------------------------------------------------------------------*/ /* SHOWCASE /*-----------------------------------------------------------------------------------*/

  1. awOnePageButton .view-slide {

display: none; } .showcase-load { height: 470px; /* Same as showcase javascript option */ overflow: hidden; }

.showcase-onepage { /**/ } .showcase { position: relative; margin: 0 auto 33px auto; height: 426px; } .showcase-content-container { background-color: #000; } .showcase-arrow-previous, .showcase-arrow-next { position: absolute; top: 50%; margin-top: -9px; background: url('arrows.png'); width: 25px; height: 25px; cursor: pointer; } .showcase-arrow-previous { background-position: 0 0; } .showcase-arrow-previous:hover { background-position: 0 -25px; } .showcase-arrow-next { background-position: 25px 0; } .showcase-arrow-next:hover { background-position: -25px -25px; } .showcase-content { background-color: #000; text-align: center; } .showcase-content-wrapper { text-align: center; height: 400px; width: 900px; display: table-cell; vertical-align: middle; } .showcase-plus-anchor { background-image: url('plus.png'); background-repeat: no-repeat; } .showcase-plus-anchor:hover { background-position: -32px 0; } div.showcase-tooltip { background-color: #fff; color: #000; text-align: left; padding: 5px 8px; background-image: url(white-opacity-80.png); } .showcase-caption { color: #000; padding: 9px 15px 7px 15px; text-align: left; position: absolute; bottom: 10px; left: 10px; display: none; width: auto; background-image: url(white-opacity-80.png); } .showcase-onepage .showcase-content { margin-bottom: 10px; } .showcase-button-wrapper { clear: both; margin-top: 15px; text-align: center; position: relative; margin-right:-7px; } .showcase-button-wrapper span { cursor: pointer; margin: 3px 7px 0 0; width: 12px; height: 12px; text-indent: -99999px; display: inline-block; background: url('navs.png'); } .showcase-button-wrapper span:hover, .showcase-button-wrapper span.active { background-position: 0 -12px; } .showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */ { background-color: #000; } .showcase-thumbnail-wrapper { overflow: hidden; } .showcase-thumbnail { width: 120px; height: 90px; cursor: pointer; border: solid 1px #333; position: relative; } .showcase-thumbnail-caption { position: absolute; bottom: 2px; padding-left: 10px; padding-bottom: 5px; } .showcase-thumbnail-content { padding: 10px; text-align: center; padding-top: 25px; } .showcase-thumbnail-cover { background-image: url(black-opacity-40.png); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .showcase-thumbnail:hover { border: solid 1px #999; } .showcase-thumbnail:hover .showcase-thumbnail-cover { display: none; } .showcase-thumbnail.active { border: solid 1px #999; } .showcase-thumbnail.active .showcase-thumbnail-cover { display: none; } .showcase-thumbnail-wrapper-horizontal { padding: 10px; } .showcase-thumbnail-wrapper-horizontal .showcase-thumbnail { margin-right: 10px; width: 116px; } .showcase-thumbnail-wrapper-vertical { padding: 10px; } .showcase-thumbnail-wrapper-vertical .showcase-thumbnail { margin-bottom: 10px; } .showcase-thumbnail-button-backward, .showcase-thumbnail-button-forward { padding: 7px; cursor: pointer; } .showcase-thumbnail-button-backward { padding-bottom: 0px; padding-right: 0px; } .showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-image: url(arrows-small.png); background-repeat: no-repeat; display: block; width: 17px; height: 17px; } .showcase-thumbnail-button-backward .showcase-thumbnail-vertical { background-position: 0 -51px; margin-left: 55px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical { background-position: -17px -51px; } .showcase-thumbnail-button-forward .showcase-thumbnail-vertical { background-position: 0 -34px; margin-left: 55px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical { background-position: -17px -34px; } .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { background-position: 0 -17px; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal { background-position: -17px -17px; } .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal { background-position: 0 0; margin-top: 40px; margin-bottom: 40px; } .showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal { background-position: -17px 0; } /* Hide button text */ .showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span { display: none; } /*-----------------------------------------------------------------------------------*/ /* COLUMNS /*-----------------------------------------------------------------------------------*/

.one-half { width:48%; } .one-third { width:30.66%; } .two-third { width:65.33%; } .one-fourth { width:22%; } .three-fourth { width:74%; } .one-fifth { width:16.8%; } .two-fifth { width:37.6%; } .three-fifth { width:58.4%; } .four-fifth { width:67.2%; } .one-sixth { width:13.33%; } .five-sixth { width:82.67%; } .one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { position:relative; margin-right:4%; float:left; } .last { margin-right:0 !important; clear:right; } /*-----------------------------------------------------------------------------------*/ /* CAROUSEL /*-----------------------------------------------------------------------------------*/ .carousel { height: 130px; padding-top: 5px; } .carousel ul li { background: none; width: 164px; margin-right: 20px; padding: 0; } .jcarousel-direction-rtl { direction: rtl; } .carousel .jcarousel-container { display: block; overflow: hidden; } .carousel .jcarousel-item { width: 164px; height: 130px; } .carousel .jcarousel-item img { padding: 0; } .carousel .jcarousel-container { display: block; overflow: hidden; height: 164px; } .carousel .jcarousel-clip-horizontal { width: 900px; height: 130px; overflow: hidden; display: block; } .carousel .jcarousel-item { width: 164px; height: 130px; }

  1. carousel-scroll {

float: right; margin-top: -42px; }

  1. prev, #next {

background: transparent url(car-arrow.png) no-repeat; width: 21px; height: 21px; text-indent: -99999px; display: block; -webkit-transition:none; -o-transition:none; -moz-transition:none; }

  1. prev {

background-position: top left; float: left; }

  1. next {

background-position: top right; float: right; margin-left: 6px; }

  1. prev:hover {

background-position: bottom left; }

  1. next:hover {

background-position: bottom right; } /*-----------------------------------------------------------------------------------*/ /* FORMS /*-----------------------------------------------------------------------------------*/

.form-container { position: relative; width: 700px; } .form-container .loading { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } .form-container .loading span { } .form-container .response { display: none; margin: 15px 0 0 80px; background:#d1f7b6; border:1px solid #8bca61; color:#5e9537; clear:both; text-shadow: none; padding: 15px 15px 13px 15px; line-height: 17px; width: 370px; } .forms { } .forms fieldset { font-family: 'PTSansRegular'; font-size: 14px; } .forms ol { list-style: none; } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /* form rows */ .forms li.form-row { margin-bottom: 20px; } .forms li.text-input-row { } .forms li.text-area-row { } .forms li.checkbox-row { } .forms li.radio-row { } .forms li.select-row { } .forms li.button-row { } .forms li.hidden-row { display: none; } /* form input fields */

.forms fieldset .text-input { background-color: #fff; border:1px solid #dedede; width: 380px; height: 30px; padding: 0 10px; color: #4d4d4d; font-family: 'PTSansRegular'; font-size: 13px; display: inline; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .forms fieldset .password { } .forms fieldset .text-area { background-color: #fff; border:1px solid #dedede; width: 380px; height: 140px; resize: none; color: #4d4d4d; font-family: 'PTSansRegular'; font-size: 13px; padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .forms fieldset .radio { } .forms fieldset .checkbox { } .forms fieldset .select { } .forms fieldset .btn-submit { background: #5499c3 url(button.png) repeat-x; border: none; height: 27px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #e2e2e2; font-family: 'CharisSILItalic'; font-size: 14px; padding: 0 20px 1px 20px; cursor: pointer; margin-left: 80px; } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .forms fieldset .btn-submit {padding: 0 20px 2px 20px;}

} .forms li.error input, .forms li.error textarea { border: 1px #c43131 solid; } .forms span.error { display: none; } .forms .button-row span.error { padding: 0; display: none; } .forms li.focus { } .forms label { display: block; float: left; width: 80px; padding-top: 5px; font-family: 'PTSansRegular'; font-size: 13px; } /*-----------------------------------------------------------------------------------*/ /* FOOTER FORMS /*-----------------------------------------------------------------------------------*/

  1. footer .form-container {

position: relative; width: 197px; }

  1. footer .forms li.form-row {

margin-bottom: 10px; }

  1. footer .form-container .loading {

width: 130px; height: 400px; }

  1. footer .forms fieldset .text-input {

width: 130px; height: 30px; }

  1. footer .forms fieldset .text-area {

width: 175px; height: 120px; }

  1. footer .forms fieldset .btn-submit {

background: #5499c3 url(button.png) repeat-x; border: none; height: 27px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #e2e2e2; font-family: 'CharisSILItalic'; font-size: 14px; padding: 0 20px 1px 20px; cursor: pointer; margin-left: 0; }

/* Opera Fix */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #footer .forms fieldset .btn-submit {padding: 0 20px 2px 20px;}

}

  1. footer .forms span.error {

display: none; }

  1. footer .forms label {

display: block; float: right; width: 40px; text-align: right; padding-top: 10px; font-family: 'PTSansRegular'; font-size: 13px; }

  1. footer .form-container .response {

display: none; margin: 15px 0 0 0; background:#d1f7b6; border:1px solid #8bca61; color:#5e9537; clear:both; text-shadow: none; padding: 10px 10px 8px 10px; line-height: 17px; width: 173px; font-size: 12px; }

/* Opera Fix */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

  1. footer .form-container .loading {

width: 110px; height: 400px; }

  1. footer .forms fieldset .text-input {

width: 110px; height: 30px; }

  1. footer .forms label {

padding-top:6px; } }

/* Webkit Fix */ @media screen and (-webkit-min-device-pixel-ratio:0) {

  1. footer .forms label {

padding-top:6px; } }

/*-----------------------------------------------------------------------------------*/ /* PORTFOLIO /*-----------------------------------------------------------------------------------*/

.items { width: 930px; } .box { padding: 0; float: left; } .col5 { width: 164px; margin: 0 20px 20px 0; } .col4 { width: 210px; margin: 0 20px 20px 0; } .col3 { width: 288px; margin: 0 21px 21px 0; } .col5 img { max-width: 164px; } .col4 img { max-width: 210px; } .col3 img { max-width: 288px; } .box h4 { padding:10px 0 0; font-family: 'CharisSILItalic'; } .box p { padding: 0; font-family: 'CharisSILItalic'; }

  1. filtering-nav {

letter-spacing: normal; margin: 30px 0 30px 0; padding: 10px 0 9px 0; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4; }

  1. filtering-nav li {

list-style: none; float: left; background: none; padding: 0 20px 0 0; font-style: normal; font-family: 'Museo500'; text-transform: uppercase; font-size: 13px; }

  1. filtering-nav li.active a {

color: #d3573e; } .items:after, #filtering-nav:after { content: ; display: block; height: 0; clear: both; visibility: hidden; }

  1. portfolio .items, #gallery .items {

opacity: 0; } /*-----------------------------------------------------------------------------------*/ /* PORTFOLIO HOVER /*-----------------------------------------------------------------------------------*/

.box a, .carousel ul li { display: block; position: relative; } .box a img, .carousel ul li img { display: block; position: relative; } .play, .zoom, .details { position: absolute; background: transparent url(icon-play.png) no-repeat center center; } .zoom { background-image: url(icon-zoom.png); } .details { background-image: url(icon-more.png); } .box a span, .carousel ul li a span { display: none; height: 100%; position: absolute; text-align: center; text-decoration: none; width: 100%; z-index: 100; } .overlay { background-color: rgba(15, 15, 15, 0.4); } /*-----------------------------------------------------------------------------------*/ /* GALLERY /*-----------------------------------------------------------------------------------*/

  1. gallery {

margin-top: 40px; } /*-----------------------------------------------------------------------------------*/ /* BLOG /*-----------------------------------------------------------------------------------*/

.blog { } .content { width: 595px; float: left; } .post { padding-bottom: 45px; margin-bottom: 45px; border-bottom: 1px solid #454545; } .blog-post .post { border: none; padding: 0; margin: 0; } .sidebar { width: 265px; float: right; } .sidebar:after { content: ; display: block; height: 0; clear: both; visibility: hidden; } .post-info { padding-bottom: 22px; } .post-date { width: 115px; padding-right: 15px; border-right: 1px solid #454545; float: left; font-family: 'CharisSILItalic'; } .post-date .day { font-size: 52px; float: left; padding-right: 10px; line-height: 42px; } .post-date .month { display: block; font-size: 20px; text-transform: uppercase; } .post-date .year { display: block; font-size: 18px; line-height: 15px; padding-top: 7px; } .post-title { width: 435px; float: right; } .post-title h1 { padding: 0 0 7px 0; margin-top: -3px; } .post-info:after { content: ; display: block; height: 0; clear: both; visibility: hidden; } .post iframe { margin-bottom:10px; } .post-meta { font-family: 'CharisSILItalic'; font-size: 12px; height: 13px; display: block; } .comments { background: transparent url(icon-comment.png) no-repeat left center; padding-left: 26px; margin-right: 10px; padding-right: 10px; } .categories { background: transparent url(icon-category.png) no-repeat left center; padding-left: 22px; } .tags { background: transparent url(icon-tag.png) no-repeat left center; padding-left: 30px; margin-top: 10px; padding-top: 5px; display: block; font-family: 'CharisSILItalic'; font-size: 12px; height: 16px; } .post-meta a, .tags a { color: #4d4d4d; } .post-meta a:hover, .tags a:hover { color: #d3573e; } a.more { font-family: 'CharisSILItalic'; cursor: pointer; } .page-navi { margin: -35px 0 0 0; } .page-navi p { float: left; padding: 3px 20px 0 0; border-right: solid 1px #454545; margin-right: 20px; font-size: 12px; } .page-navi ul { list-style: none; } .page-navi ul li { display: inline; background: none; padding: 0; font-family: 'PTSansRegular'; } .page-navi ul li a { float: left; font-size: 12px; display: block; font-style: normal; line-height: 1; text-align: center; padding: 6px 8px 4px 8px; margin-right: 7px; color: #4d4d4d; border: 1px solid transparent; -webkit-transition:none; -o-transition:none; -moz-transition:none; } .page-navi ul li a:hover, .page-navi ul li a.current { text-decoration: none; background-color: #fff; border:1px solid #dedede; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .sidebar-box { margin-bottom: 50px; } .searchform input { background-color: #fff; border:1px solid #dedede; color: #4d4d4d; width: 245px; padding: 5px 10px; height: 24px; font-size: 13px; font-family: 'CharisSILItalic'; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #FFF url(search.png) 240px center no-repeat; } .tag-list ul li { background: none; padding: 0; display: inline-block; background-color: #fff; border:1px solid #dedede; margin: 0 3px 8px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tag-list ul li a { padding: 3px 10px; margin: 0; color: #4d4d4d; display: block; text-transform: lowercase; }

.tag-list ul li a:hover { color: #d3573e; } .cat-list ul li { background: none; padding: 0; display: block; background-color: #fff; border:1px solid #dedede; margin: 0 0 8px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .cat-list ul li span { float: right; } .cat-list ul li a { padding: 3px 10px; margin: 0; color: #4d4d4d; display: block; text-transform: capitalize; } .cat-list ul li a:hover { color: #d3573e; } ul.ads { width: 280px; margin-right: -15px; } ul.ads li { float: left; background: none; padding: 0; margin: 0 15px 15px 0; }

/* Webkit Fix */ @media screen and (-webkit-min-device-pixel-ratio:0) { .tag-list ul li a { padding: 2px 10px 4px; } .cat-list ul li a { padding: 2px 10px 4px; } }

/* Opera Fix */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .tag-list ul li a { padding: 2px 10px 4px; } .cat-list ul li a { padding: 2px 10px 4px; } }

/*-----------------------------------------------------------------------------------*/ /* SERVICES /*-----------------------------------------------------------------------------------*/

.service { background: transparent url(circle.png) no-repeat; width: 100px; height: 100px; display: block; } .service img { vertical-align: middle; } /*-----------------------------------------------------------------------------------*/ /* 18. TOGGLE /*-----------------------------------------------------------------------------------*/

.toggle { width: 100%; padding-bottom: 20px; clear:both; } .toggle-wrapper { padding-bottom:5px; } h2.trigger { width: 550px; clear:both; font-size: 15px; margin:0px; display: block; cursor: pointer; background-color: #FFF; padding: 10px 20px; color: #4d4d4d; border: 1px solid #dedede; -webkit-transition:all 200ms ease-in; -o-transition:all 200ms ease-in; -moz-transition:all 200ms ease-in; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } h2.trigger.active { color: #4d87ab; } h2.trigger:hover { color: #4d87ab; } .togglebox { width:590px; height: auto; background-color: #FFF; overflow: hidden; margin: 10px 0; border: 1px solid #dedede; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .togglebox div { padding: 20px; } .togglebox p { line-height: 22px; } .togglebox p { line-height: 22px; } .tabbed-content { width: 100%; overflow: hidden; margin-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /*-----------------------------------------------------------------------------------*/ /* TABS /*-----------------------------------------------------------------------------------*/

ul.tabs { margin: 0; padding: 0; float: left; list-style: none; width: 100%; color: #4d4d4d; } ul.tabs li { float: left; position: relative; list-style: none; margin-right: 10px; background: none; padding: 0; font-family: 'Museo500'; } ul.tabs li a { display: block; position: relative; padding: 8px 10px 8px; line-height: 1; text-align: center; font-weight: normal; cursor: pointer; color: #4d4d4d; text-shadow: none; border: 1px solid #dedede; background-color: #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition:none; -moz-transition:none; } ul.tabs li a:hover { text-shadow: none; text-decoration: none; color: #FFF; } ul.tabs li a { float: left; } ul.tabs li a:hover { text-decoration: none; color: #4d87ab; } ul.tabs li.active a { border: 1px solid #4d87ab; color: #fff; background-color: #4d87ab; } .tab_container { border-top: none; clear: both; float: left; width: 99%; border: 1px solid #dedede; background: #FFF; margin-top: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tab_content { padding: 15px 15px 15px 15px; } /*-----------------------------------------------------------------------------------*/ /* TABLE /*-----------------------------------------------------------------------------------*/

table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background-color: #fff; color: #6e6e6e; border-bottom:1px solid #dedede; } table td { padding: 8px 10px; border-right:1px solid #dedede; } table td:hover { background-color: #f2f2f2; } table th h4 { margin:0; } table th { padding: 10px; text-align: left; border-right:1px solid #dedede; font-weight: normal; } table td.center { text-align: center; } table td.last { background: none; } table th.center { text-align: center; } table th.last { background: none; } table tr { border-left:1px solid #dedede; border-top:1px solid #dedede; } table tr.caption { border-left:1px solid #dedede; } table.price td { text-align: center; } table.price td.left { text-align: left; font-weight: bold; } table.price td.right { text-align: right; font-weight: bold; } table.price td h4 { margin:0; } table.price td h4 span { display: block; font-size: 14px; font-family: 'CharisSILItalic'; font-style: normal; color: #6e6e6e; } table.price td h4 sup { padding-left: 3px; line-height: 18px; font-family: 'CharisSILItalic'; font-style: normal; } .check-icon { background: transparent url(check-table.png) no-repeat center left; width: 12px; height: 10px; } .cross { background: transparent url(cross.png) no-repeat center left; width: 10px; height: 10px; } table .check-icon { display: inline-block; text-align: center; } table span.cross { display: inline-block; text-align: center; } .scanlines { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background: url('tile.png'); } /*-----------------------------------------------------------------------------------*/ /* COMMENTS /*-----------------------------------------------------------------------------------*/

  1. comments {

width: 590px; } .full-width #comments { width: 900px; } ol.commentlist .message p { font-style: normal; clear: both; padding: 0; } ol.commentlist { list-style:none; margin:0; } ol.commentlist li { margin: 0; list-style:none; background: none; padding: 25px 0 26px 0; border-bottom: 1px solid #454545; font-family: 'PTSansRegular'; }

  1. comments .user {

float:left; width:60px; } .avatar { width: 60px; height: 60px; float:left; display:block; }

  1. comments .message .info .date {

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

  1. comments .info a {

font-size:11px; float:left; text-decoration: none; }

  1. comments a.reply-link {

display:block; margin-left: 10px; float:right; text-decoration:none; font-size:9px; text-transform: uppercase; font-style: normal; }

  1. comments .message {

background:none; width:510px; float:right; font-size:13px; line-height:20px; position:relative; padding:0; margin: 0; } .full-width #comments .message { width:820px; }

  1. comments .info {

margin: 0 0 3px 0; }

  1. comments ul.children {

margin:0; padding:0 0 0 40px; }

  1. comments ol.commentlist ul.children li {

padding:25px 0 0 0; margin: 0; margin-top: 25px; border: none; border-top: 1px solid #454545; }

  1. comments ol.commentlist ul.children li .message {

width:470px; }

  1. comments ol.commentlist ul.children ul li .message {

width:430px; }

  1. comments ol.commentlist ul.children ul ul li .message {

width:390px; }

  1. comments ol.commentlist ul.children ul ul ul li .message {

width:350px; }

  1. comments ol.commentlist ul.children ul ul ul ul li .message {

width:310px; }

  1. comments ol.commentlist ul.children ul ul ul ul ul li .message {

width:270px; } .full-width #comments ol.commentlist ul.children li .message { width:780px; } .full-width #comments ol.commentlist ul.children ul li .message { width:740px; } .full-width #comments ol.commentlist ul.children ul ul li .message { width:700px; } .full-width #comments ol.commentlist ul.children ul ul ul li .message { width:660px; } .full-width #comments ol.commentlist ul.children ul ul ul ul li .message { width:620px; } .full-width #comments ol.commentlist ul.children ul ul ul ul ul li .message { width:580px; }

  1. comments .info h3 {

margin: 0; padding: 0; line-height: 18px; display: inline; }

  1. comments .info h3 a {

font-size: 15px; font-style: normal; }

  1. comments .info h3 a:hover {

} .comment-form { margin-top: 40px; }

Retrieved from "http://2014.igem.org/Team:Bnu_China/Templates"