Template:Team:BGU Israel/style.css
From 2013.igem.org
(Created page with "<style type="text/css"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, fon...")
Newer edit →
Revision as of 20:40, 20 September 2013
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 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; }
/* remember to define focus styles! */
- focus {
outline: 0; }
/* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
.team-member {
position:absolute; width:400px; height:150px; border 1px solid #a8a8a8; background-color:rgb(255,255,255); background-color:rgba(255,255,255,0.8); color: #294360; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; display:none; } .team-member img { position:absolute; top: 10px; left:10px; width:130px; height:130px; }
.team-member h1 { position:absolute; top: 15px; left:150px; font-size:16px; font-style:bold; } .team-member p { position:absolute; top: 45px; left:150px; font-size:11px; } }
.advisor {
color: #294360;
overflow: hidden;
}
.advisor img { position:absolute; top: 10px; left:10px; width:130px; height:130px; } .advisor h1 { position:absolute; top: 15px; left:150px; font-size:16px; font-style:bold; } .advisor p { position:absolute; top: 45px; left:150px; font-size:11px; }
/* TOGGLE & ACCORDION ------------------------------------------------------------*/
.ui-accordion .ui-accordion-header, .toggle-trigger {
cursor: pointer; text-align:center; margin-top: 0px; margin-bottom: 0px; margin-left:80px; margin-right:80px; position: relative; background: #D8DEDE; border: solid 1px #FBF9EE; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
.ui-accordion .ui-accordion-header:hover, .toggle-trigger:hover { background: #A9B9C9; }
- content .ui-accordion .ui-accordion-header>a,
- content .toggle-trigger>a{
text-decoration: none; color: #363636; font-size: 14px; padding-left: 20px; }
.ui-accordion .ui-accordion-content, .toggle-container {
border-top: 0 none; margin-bottom: 2px; margin-left:80px; margin-right:80px; padding: 20px 20px; position: relative; top: 1px;
}
/* ALIGNMENT ------------------------------------------------------------*/
.left-align{ float:left; margin:8px 18px 18px 0; display: block; }
.right-align{ float:right; margin:0px 0px 0px 10px; display: block; }
/* BLOCKS ------------------------------------------------------------*/
.boxed{ background: white; padding: 5px; border: 1px solid #cccccc; }
.border{ border: 2px solid white; }
/* DROPCAP ------------------------------------------------------------*/
.dropcap:first-letter{ font-size: 3.571em; line-height: 0.76em; padding: 0.04em 0.12em 0 0; float: left; }
.dropcap.dark:first-letter{ display:block; float:left; font-size:30px; line-height:40px; margin:0 8px 0 0; padding: 10px 10px; background: #606060; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
/* HIGHLIGHT ------------------------------------------------------------*/
.highlight, .highlight-red, .highlight-blue, .highlight-green { background:yellow; padding:2px 5px; }
.highlight-red{ background: red; color:#fff; }
.highlight-blue{ background: blue; color:#fff; }
.highlight-green{ background: green; color:#fff; }
/* PULLQUOTES ------------------------------------------------------------*/
.pullquote-right, .pullquote-left { border-left: #555555 2px solid; float:right; font-size:16px; line-height:1.5em; margin: 20px 0px 20px 20px; width:33%; font-style: italic; }
.pullquote-left { float:left; margin: 20px 20px 20px 0px; padding:0 0 0 20px; }
.pullquote-right{ border-left: none; border-right: #555555 2px solid; padding:0 20px 0 0px; }
/* LINK BUTTON -------------------------------------------------------*/
- content a.link-button,
- content a.link-button-light{
display: table; background: #363636; color: #f1f1f1; text-decoration: none; padding: 3px 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- content a.link-button-light{
background: #f1f1f1; color: #363636; }
- content a.link-button:hover{ background: #000000; }
- content a.link-button-light:hover{ background: #cecece; }
/* TABLE ------------------------------------------------------------*/
table, td, th { vertical-align:middle; }
table { border-collapse:separate; border-spacing:0; border-top:1px solid white; margin-bottom:28px; width:100%; text-align: left; }
th{ border-top:5px solid #555555; color: #ffffff; padding:10px; text-transform:uppercase; background-color: #49494b; }
td{ padding:10px; }
td, th{ border-bottom: 1px solid #1f1f1f; }
/* LISTS ------------------------------------------------------------*/
.lists-check ul,
.lists-arrow ul,
.lists-plus ul,
.lists-star ul,
.lists-heart ul{
margin-bottom: 30px;
margin-left: 20px;
}
.lists-check ul li{
list-style-image: url(../img/bullets/check.png);
line-height: 1.5em;
}
.lists-arrow ul{ list-style-image: url(../img/bullets/arrow.png); line-height: 1.5em; }
.lists-plus ul{ list-style-image: url(../img/bullets/plus.png); line-height: 1.5em; }
.lists-star ul{ list-style-image: url(../img/bullets/star.png); line-height: 1.5em; }
.lists-heart ul{ list-style-image: url(../img/bullets/heart.png); line-height: 1.5em; }
/* INFO BOXES ------------------------------------------------------------*/
.info-add, .warning-box, .blue-box, .error-box, .download-box, .favorite-box, .information-box, .success-box, .validation-box, .fastforward-box, .rewind-box, .right-box, .graphite-box, .green-box, .gray-box, .help-box, .left-box, .loop-box, .message-box, .orange-box, .pause-box, .play-box, .record-box, .red-box, .refresh-box, .remove-box, .search-box, .shuffle-box, .smart-box, .back-box, .forward-box, .stop-box, .upload-box { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.info-add{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Add.png'); }
.warning-box{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Attention.png'); }
.blue-box{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Blue.png'); }
.error-box{ color: #D8000C; background-color: #FFBABA; background-image: url('../img/knobs-icons/Knob Cancel.png'); }
.download-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Download.png'); }
.favorite-box{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Favorite.png'); }
.information-box{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Info.png'); }
.success-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Valid Green.png'); }
.fastforward-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Fast Forward.png'); }
.rewind-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Fast Rewind.png'); }
.right-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Forward.png'); }
.graphite-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Graphite.png'); }
.green-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Green.png'); }
.gray-box{ color: #fff; background-color: #999999; background-image: url('../img/knobs-icons/Knob Grey.png'); }
.help-box{ color: #fff; background-color: #b47bc4; background-image: url('../img/knobs-icons/Knob Help.png'); }
.left-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Left.png'); }
.loop-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Loop Off.png'); }
.message-box{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Message.png'); }
.orange-box{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Orange.png'); }
.pause-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Pause.png'); }
.play-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Play.png'); }
.record-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Record Off.png'); }
.red-box{ color: #D8000C; background-color: #FFBABA; background-image: url('../img/knobs-icons/Knob Red.png'); }
.refresh-box{ color: #4F8A10; background-color: #DFF2BF; background-image: url('../img/knobs-icons/Knob Refresh.png'); }
.remove-box{ color: #D8000C; background-color: #FFBABA; background-image: url('../img/knobs-icons/Knob Remove Red.png'); }
.search-box{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Search.png'); }
.shuffle-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Shuffle Off.png'); }
.smart-box{ color: #fff; background-color: #b47bc4; background-image: url('../img/knobs-icons/Knob Smart.png'); }
.back-box{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Snapback.png'); }
.forward-box{ color: #9F6000; background-color: #FEEFB3; background-image: url('../img/knobs-icons/Knob Snapforward.png'); }
.stop-box{ color: #ffffff; background-color: #57737f; background-image: url('../img/knobs-icons/Knob Stop.png'); }
.upload-box{ color: #00529B; background-color: #BDE5F8; background-image: url('../img/knobs-icons/Knob Upload.png'); }
/* HACKS ------------------------------------------------------------*/
.clear{ clear:both; height:1px; }
.inv{ display:none; }
.alignleft{ float: left; margin: 5px 10px 5px 0px; }
/* GENERAL ------------------------------------------------------------*/
body {
line-height: 1;
color: #ffffff;
background: #f1f1f1 url();
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
- wrapper{
width: 100%; height: 180px; margin: 0px auto; background-color: #294360; line-height: 1.5em; border-bottom:solid 6px #fa932b;
}
- header{
width: 1280px; height:180px; position: relative; z-index: 10; margin-left: auto; margin-right: auto; background:url() no-repeat; background-position: 414px 0px;
}
- main{
margin-left:auto; margin-right:auto; margin-top:20px;
width: 1280px; background: #19293C; position: relative; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- notebook-top{
margin-left:auto; margin-right:auto;
width: 1280px;
height:39px;
background-color: #ffffff; position: relative; background:url() ; }
- notebook-bottom{
margin-left:auto; margin-right:auto; margin-bottom:30px;
margin-top:0px; width: 1280px;
height:50px;
background-color: #ffffff; position: relative; background:url() ; }
- page-content-notebook{
width: 1280px;
background: url() ; color:#000;
}
- content{
min-height: 400px; overflow: hidden; margin-bottom: 40px; }
- footer-title{
background-color:#585858; width:100%; height:30px;
text-align:center; line-height: 2em; }
- footer{
background-color:#fff; width:100%; height:160px;
}
- footer-images{
background-color:#fff0;
padding: 20px; margin-left: auto; margin-right: auto; width:1240px; height:140px;
}
- footer img{
width:1220px; height:120px;
}
- logo{
position: absolute; top: 20px; left: 30px;
}
- content a{
color: #37b2d1; }
- content p{
margin-bottom: 20px; }
- content .line-divider{
clear: both; padding-bottom: 20px; margin-bottom: 20px;
}
/* TITLE --------------------------------------------------------*/
- home-title{
position:relative;
overflow: hidden; height: 70px; margin-bottom: 20px;
width:100%; text-align:center;
}
- home-title .title{
display: block; font-family: 'Ubuntu', arial, serif; font-size: 30px; line-height: 90px; }
- home-video{
position: relative;
width:640px;
margin-left:auto;
margin-right:auto; text-align:center; margin-bottom:20px;
}
- home-video h3{
line-height: 60px; font-family: 'Ubuntu', arial, serif; font-weight: lighter;
font-size: 26px; color:#ffffff;
}
- page-title{
overflow: hidden; height: 90px; margin-bottom: 30px; background: #879FBA ;
border-bottom: 3px solid #FA932B;
border-top-left-radius:10px; border-top-right-radius:10px; }
- page-title .title{
display: block; float: left; font-family: 'Ubuntu', arial, serif; font-size: 30px; line-height: 90px; margin-left: 30px; text-shadow: 0 1px #ffffff; }
- page-title .subtitle{
display: block; float: left; margin-left: 30px; line-height: 90px; color: #ffffff; font-style: italic; }
/* HOME --------------------------------------------------------*/
body.home #header{ height: 430px; position: relative; z-index: 10; }
body.home #header #headline{ width: 966px; margin: 110px auto 40px auto;
font-size: 26px;
line-height: 1.5em; font-family: 'Ubuntu', arial, serif; color: #ebe7e7; text-align: center; }
body.home #content{ padding-top: 250px; }
- headline a{
text-decoration: none; color: #ffd800; }
/* HEADERS --------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{ line-height: 1.4em; font-family: 'Ubuntu', arial, serif; font-weight: lighter; }
h1{ font-size: 30px; }
h2{ font-size: 28px; }
h3{ font-size: 26px; }
h4{ font-size: 24px; }
h5{ font-size: 22px; }
h6{ font-size: 20px; }
/* COLUMNS LAYOUT----------------------------------------------------------*/
.one-half, .one-third, .two-third, .three-fourth, .one-fourth { float:left; margin-right:30px;
margin-bottom:20px;
position:relative; }
.one-half{ width: 580px; }
.one-third{ width: 380px; }
.one-fourth{ width: 204px; }
.two-third{ width: 500px;}
.three-fourth{ width: 672px; }
.last { clear:right; margin-right:0 !important;
}
.a1{ position:left; width: 660px; margin-top:30px; }
.a2{ position:absolute; width: 310px; top:200px; right:30px; }
/* SOCIAL --------------------------------------------------------*/
- social-icons{
width: 150px; height:32px; position: absolute; z-index: 12; right: 0px; padding-top: 40px; }
- social-icons a{
padding: 3px;
}
/* NAVIGATION --------------------------------------------------------*/
- nav{
display: block; position: absolute;
z-index:5001;
top: 120px; left: 30px; height: 46px; width: 750px; background:rgb(135, 159, 186); background:rgba(135, 159, 186,0.9); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- nav>li{
display: block; float: left; margin-left: 5px; margin-top: 12px; }
- nav>li:first-child{
margin-left: 10px; }
- nav>li>a{
display: block; font-size: 14px; font-weight: bold; color: #ffffff; text-decoration: none; padding: 7px 10px 6px 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; text-shadow: 0 1px rgba(0, 0, 0, 0.5); }
- nav>li>a:hover,
- nav>li.current-menu-item>a{
color: #fff; background: #363636; text-shadow: none; }
/* sub navigation */
- nav>li ul{
display: block; margin-top: -4px; background: #6F849C; border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; }
- nav>li>ul ul{
margin-top: 0px; border-radius: 0px 10px 10px 10px; -moz-border-radius: 0px 10px 10px 10px; -webkit-border-radius: 0px 10px 10px 10px; }
- nav>li ul li a{
display: block; padding:6px 15px; display: block; font-size: 12px; color: #ffffff; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.5);; }
- nav>li ul li a:hover{
background: #363636;
}
- nav>li ul li:last-child a:hover{ /* last item its rounded at bottom */
border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; }
- topics1{
float: left; width: 1280px; margin-left: auto; margin-bottom: auto; }
table.topics {
border:0px ;
margin-bottom:28px;
margin-left:auto; margin-right:auto; width:1200px; text-align: left;
text-decoration: none;
}
td.topics, th.topics{
border:0px; align:center;
} td.topics:hover {
background: #5D6875;
}
.topic-pic {
width:300px; height:240px; align:center;
} .topics-text {
width:300px; height:64px; background:#585858; color:#ffffff; text-decoration: none;
}
.topic-pic1 {
width:550px; height:240px; align:center;
} .topics-text1 {
width:550px; height:64px; background:#585858; color:#ffffff; text-decoration: none;
}
.topic-pic2 {
width:400px; height:240px; align:center;
} .topics-text2{
width:400px; height:64px; background:#585858; color:#ffffff; text-decoration: none;
}
.topics h6 {
text-decoration: none; color:#ffffff; font-size:18px; padding-top:8px; padding-left:10px;
}
.topics p {
text-decoration: none; color:#ffffff; font-size:14px; padding-left:10px;
} .topics a {
text-decoration: none; color:#ffffff;
}
/* PAGES --------------------------------------------------------*/
- page-content{
float: left; width: 1200px; margin-left: 30px; }
- page-content .h1{
color: #ff0000; }
- page-content ol.ablist{
list-style-type: lower-alpha; list-style-position: outside; margin-left: 50px; }
- page-content li.ablist{
margin-bottom: 5px; }
- page-content ol.numlist{
list-style-type: decimal; list-style-position: outside; margin-left: 50px; }
- page-content li.numlist{
margin-bottom: 5px; }
/* GALLERY -----------------------------------------------*/
- content .gallery{
display: block; overflow: hidden; }
- content .gallery li{
display: block; float: left; overflow: hidden; background: url() center center no-repeat; width: 204px; height: 148px; margin-left: 30px; margin-bottom: 30px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- content .gallery.three-cols li{
width: 282px; height: 267px; }
- content .gallery.two-cols li{
width: 438px; height: 267px; }
- content .gallery li a{
display: block; }
/* ADVISORS -----------------------------------------------*/
.advisors{ display: block;
overflow:hidden; padding-top:20px;
}
.advisors img {
width:150px; height:150px; padding-right:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.advisors h1 {
padding-top:0px; font-size:16px; font-style:bold;
}
.advisors p {
font-size:12px; }
- Protocols li{
display: block; padding-top: 10px; }
- Protocols li a{
display: block; font-size:14px; padding-left: 10px; vertical-align:middle; width: 380px; height: 100%; line-height: 38px; text-align: left; text-decoration: none; color: #ffffff; background: #19293C; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- Protocols li:hover a{
display: block; width: 380px; height: 100%; line-height: 38px; text-align: left; text-decoration: none; color: #000; background: #A9B9C9; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- content li.active a{
color: #363636; background: #ffd800; }
- content .pager li:hover a,
- content .pager li.active a{
color: #363636; background: #ffd800; }
- projects-list{
overflow: hidden;
}
- projects-list .project{
position: relative; float: left; overflow: hidden; width: 250px; height: 200px; margin-left: 30px; margin-bottom: 30px; }
- projects-list .project h1 a{
display: block; text-decoration: none; margin-bottom: 30px; color: #696969; }
.project-shadow{
}
- projects-list .project .project-thumbnail{
position: relative; overflow: hidden; width: 250px; height: 200px; margin-bottom: 30px; background: #484848; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- projects-list .project .project-thumbnail .cover{
position: absolute; top:0px; left: 0px; }
- projects-list .project .project-thumbnail .meta{
display: block; width: 230px; height: 120px; font-size: 12px; line-height: 2em; position: absolute; top:10px; left: 10px; color:#ffffff; }
- projects-list .project .read-more{
display: block; position: absolute; top: 100px; left: 60px; background: #363636; line-height: 24px; text-decoration: none; color: #fff; padding: 0px 20px 0px 20px; opacity: 0; font-size:12px;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-webkit-box-shadow: 0px 2px 3px #000; -moz-box-shadow: 0px 2px 3px #000; box-shadow: 0px 2px 3px #000; }
- projects-list .project .read-more:hover{
color: #fff; background: #000; }
- projects-list .project:hover .read-more{
opacity: 1; }
.project-column{
width: 438px;
float: left;
margin-left: 30px;
}
.project-column .project-thumbnail{ overflow: hidden; width: 438px; height: 267px; margin-bottom: 30px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- content .project-column .meta a{
display: inline; font-size: 12px; color: #fff; padding: 3px 10px; text-decoration: none; background: #363636; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
- content .project-column .meta a:hover{ background: #000;}
.project-column .project-title{ margin-bottom: 20px; }
/* PROJECT-GALLERY -----------------------------------------------*/
.project-column .project-gallery{ display: block; overflow: hidden; width: 468px; }
.project-column .project-gallery li{ display: block; float: left; overflow: hidden; background: url() center center no-repeat; width: 204; height: 148px; margin-right: 30px; margin-top: 30px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } </style>