Template:Team:BGU Israel/style.css

From 2013.igem.org

Revision as of 20:49, 20 September 2013 by Neta.weiss (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */

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; }