Team:BNU-China/css/style.css

From 2014.igem.org

/*clean the default css*/

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear, .center {display: none;} /*-- hides default wiki settings --*/
  1. top-section {

border: 0 none; height: 14px; z-index: 100; top: 0; position: fixed; width: 975px; left: 50%; margin-left: -487px; }

  1. globalWrapper, #content {

width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px; }

html, body, .wrapper { width: 100%; height: 100%; background-color: transparent; }

  1. menubar ul{ 
       visibility: hidden;}
  1. menubar:hover ul{ 
       visibility: visible;

}



/*low_version*/ .low_version{ z-index:-1; } .low_version p{ font-size:15px; color:#F00;}


/*-----------------------------------------------------------------------------------*/ /* 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 { 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('https://static.igem.org/mediawiki/2014/4/46/Bnu_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('https://static.igem.org/mediawiki/2014/c/ce/Bnu_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 { } 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('https://static.igem.org/mediawiki/2014/4/45/Bnu_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('https://static.igem.org/mediawiki/2014/b/be/Bnu_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; 

       font-weight:bold;

}

  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: Verdana, Geneva, sans-serif;

list-style: none; font-weight: bold; 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: rgba(255,255,255,0.8); color: #4d87ab; } .menu ul li ul { position: absolute; left: 0; display: none; visibility: hidden; width: 170px; 

       border-radius:0 0 0.5em 0.5em;
       background-color: rgba(255,255,255,0.8);

padding: 0; } .menu ul li ul li { display: list-item; float: none; padding: 0 17px; background-color: #fff; 

       border-radius:0 0 0.5em 0.5em;

} .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('https://static.igem.org/mediawiki/2014/c/ce/Bnu_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('https://static.igem.org/mediawiki/2014/5/5f/Bnu_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('style/images/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('https://static.igem.org/mediawiki/2014/5/53/Bnu_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('https://static.igem.org/mediawiki/2014/5/53/Bnu_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('https://static.igem.org/mediawiki/2014/2/27/Bnu_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(style/images/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(style/images/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 {

} .one-fourth { width:22%; } .one-fourth img{width:20% !important;} .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('https://static.igem.org/mediawiki/2014/5/57/Bnu_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('https://static.igem.org/mediawiki/2014/4/45/Bnu_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('https://static.igem.org/mediawiki/2014/4/45/Bnu_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: 1; } /*-----------------------------------------------------------------------------------*/ /* 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('https://static.igem.org/mediawiki/2014/a/a1/Bnu_icon-play.png') no-repeat center center; } .zoom { background-image: url('https://static.igem.org/mediawiki/2014/3/39/Bnu_icon-zoom.png'); } .details { background-image: url('https://static.igem.org/mediawiki/2014/3/3a/Bnu_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('https://static.igem.org/mediawiki/2014/f/f4/Bnu_icon-comment.png') no-repeat left center; padding-left: 26px; margin-right: 10px; padding-right: 10px; } .categories { background: transparent url('https://static.igem.org/mediawiki/2014/d/d4/Bnu_icon-category.png') no-repeat left center; padding-left: 22px; } .tags { background: transparent url('https://static.igem.org/mediawiki/2014/c/c4/Bnu_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('https://static.igem.org/mediawiki/2014/7/74/Bnu_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('https://static.igem.org/mediawiki/2014/0/07/Bnu_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('https://static.igem.org/mediawiki/2014/8/88/Bnu_check-table.png') no-repeat center left; width: 12px; height: 10px; } .cross { background: transparent url('https://static.igem.org/mediawiki/2014/f/f0/Bnu_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('https://static.igem.org/mediawiki/2014/d/d0/Bnu_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; }




/*Navigation*/

  1. navigation{

width:150px; height:150px; border-radius:10em 0 0 0; bottom:-50px; right:-50px; position:fixed; z-index:10000; 

   background: rgb(0,120,250);

opacity:0.5; 

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

}

  1. navigation:hover{

bottom:0px; right:0px; opacity:1; 

   transition: all 0.5s ease-in-out;

cursor:pointer; }

Retrieved from "http://2014.igem.org/Team:BNU-China/css/style.css"