Difference between revisions of "Template:NAIT Edmonton/CSS"

 
(242 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<div class="topcorner"><a href="https://igem.org"><img src="https://static.igem.org/mediawiki/2015/8/8e/NAIT_Icon_iGEM.png"></a></div>
 
<style type="text/CSS">
 
<style type="text/CSS">
  
 
/* General */
 
/* General */
  
−
 
+
.topcorner{
 +
  position:fixed;
 +
  top:25px;
 +
  left:10px;
 +
  z-index:1000
 +
  }
 
 
 
/* Hide first heading */
 
/* Hide first heading */
Line 14: Line 21:
 
/*left align Black Menu Bar */
 
/*left align Black Menu Bar */
 
#top_menu_inside {
 
#top_menu_inside {
−
margin-left: auto;
+
margin-left:auto;
 
margin-right:auto}
 
margin-right:auto}
  
Line 22: Line 29:
 
p{padding:0;margin:0px;text-align:left;line-height:20px;}
 
p{padding:0;margin:0px;text-align:left;line-height:20px;}
  
−
a{color:#ADD3F0; text-decoration:none;}
+
a{font-family:'Source Sans Pro'; color:#ADD3F0; text-decoration:none;}
 
a img{border:none;}
 
a img{border:none;}
 
a:hover{text-decoration:none;}
 
a:hover{text-decoration:none;}
 
a.more{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#0D4D8C; color:#FFFFFF; font-size:11px; padding:6px 6px; margin:auto; width:60px; display:block; text-align:center;}
 
a.more{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#0D4D8C; color:#FFFFFF; font-size:11px; padding:6px 6px; margin:auto; width:60px; display:block; text-align:center;}
 
a.more2{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background:none; color:#FFFFFF; font-size:11px; padding:6px 6px; margin:auto; width:60px; display:block; text-align:center;curser:pointer;}
 
a.more2{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background:none; color:#FFFFFF; font-size:11px; padding:6px 6px; margin:auto; width:60px; display:block; text-align:center;curser:pointer;}
 +
a:visited{color:#add3f0}
  
  
Line 36: Line 44:
 
h6{font-weight: normal;color: #f98740;font-size:12px;margin:0;padding:0 0 25px 0;}
 
h6{font-weight: normal;color: #f98740;font-size:12px;margin:0;padding:0 0 25px 0;}
  
−
h1, h2, h3, h4{font-family: 'Source Sans Pro', sans-serif;}
+
h1, h2, h3, h4{font-family: 'Source Sans Pro', sans-serif;border-bottom: 0px}
  
 
/* Top */
 
/* Top */
 
/*-- Remove borders, float content left and remove padding/margin */
 
/*-- Remove borders, float content left and remove padding/margin */
−
#globalWrapper, #content, #wrap, #top-slogan{
+
#globalWrapper, #content, #top_slogan {
 
background-color: transparent;
 
background-color: transparent;
−
border: 0px;
+
border: none;
 
float: center;
 
float: center;
−
                                 width: 100%;
+
                                 width: 99.5%;
−
margin-left:auto;
+
margin-left:-2.5px;
 
                                 margin-right:auto;
 
                                 margin-right:auto;
 
padding-top: 0px;
 
padding-top: 0px;
Line 51: Line 59:
  
  
 +
#wrap {width:1000px;padding-top:140px;padding-bottom:120px;z-index:-5;margin-left:auto;margin-right:auto;}
 
.main_content{ clear:both;}
 
.main_content{ clear:both;}
−
#header{width:100%; height:140px; background-color:#5AB3E3;}
+
#header{width:100%; height:140px;position:fixed;z-index:10;background:-webkit-linear-gradient(top, #5AB3E3, #5AB3E3 80%, #0D4D8C 20%, #0D4D8C); margin-top:0px}
−
.header_content{ width:1000px; margin:auto; line-height:140px}
+
#footer{z-index:15;}
−
.logo{float:left;margin:0 0 0 40px; padding:0px;font-family: 'Source Sans Pro', sans-serif; font-size:45px; color:#FFFFFF;}
+
.header_content{margin:auto; width:1000px; line-height:140px;}
 +
.header_left{width:500px; line-height:140px; margin-left:35%; position:relative; }
 +
.header_right{width:500px; line-height:140px; margin-left:50%; position:relative;}
 +
 
 +
 
 +
.logo{margin-top:0px; float:left; margin:0 0 0 40px; font-family: 'Source Sans Pro', sans-serif; font-size:45px; color:#FFFFFF;}
 
.logo a{color:#fff;}
 
.logo a{color:#fff;}
 
.logo span{ font-size:14px; color:#FFFFFF;}
 
.logo span{ font-size:14px; color:#FFFFFF;}
  
−
.top_slogan{float:center; text-align:center;font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px; font-style:strong; line-height:40px;}
+
 
 +
.nlogo{
 +
    margin-top:0px;
 +
 
 +
    margin-left: 41.5%;
 +
    margin-right:25%;
 +
    color:#ff0000;
 +
}
 +
 
 +
 
 +
.top_slogan{text-align:center;font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
  
 
/* Menu */
 
/* Menu */
−
.menu {float:right; padding:0 20px 0 0;margin-top:80px}
+
.menu {padding:0 20px 0 0; margin-top:-40px; width:1000px;}
 
.menu ul {list-style:none; position:relative;float:left;margin:0;padding:0}
 
.menu ul {list-style:none; position:relative;float:left;margin:0;padding:0}
 
.menu ul * {margin:0; padding:0;}
 
.menu ul * {margin:0; padding:0;}
 
.menu ul a {display:block;color:#159CD8;text-decoration:none;padding:10px 15px}
 
.menu ul a {display:block;color:#159CD8;text-decoration:none;padding:10px 15px}
 
.menu ul li {position:relative;float:left; padding:5px 5px 5px 5px}
 
.menu ul li {position:relative;float:left; padding:5px 5px 5px 5px}
−
.menu ul li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:14px;}
+
.menu ul li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
−
.menu ul li.current-menu-item{background:#5AB3E3}
+
.menu ul li.current-menu-item {background:#5AB3E3}
−
.menu ul ul{display:none; position:absolute; top:73.8%; left:10%; background:#159CD8; padding:0 0px 0 0}
+
.menu ul ul{display:none; position:absolute; top:77%; left:10%; background:#0D4D8C; padding:0 0px 0 0}
−
.menu ul ul li:hover{background:#ADD3F0}
+
.menu ul ul li:hover{background:#159CD8}
−
.menu ul ul li{float:none; width:100px}
+
.menu ul ul li{float:none; width:120px}
−
.menu ul ul a {line-height:100%; padding:0 20px 0 0}
+
.menu ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 
.menu ul ul ul {top:0; left:200%}
 
.menu ul ul ul {top:0; left:200%}
−
.menu ul li.selected a{color:#0D4D8C}
+
.menu ul li.selected a{color:#8BC5EB}
−
.menu ul li:hover > ul{display:block}
+
.menu ul li:hover > ul{display:block;}
  
 
/* Slider */
 
/* Slider */
 
.slider{width:920px; margin:auto; clear:both;}
 
.slider{width:920px; margin:auto; clear:both;}
−
 
 
.flex-container a:active,
 
.flex-container a:active,
 
.flexslider a:active {outline: none;}
 
.flexslider a:active {outline: none;}
Line 97: Line 120:
 
.flex-container {zoom: 1; position: relative;}
 
.flex-container {zoom: 1; position: relative;}
 
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
 
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
−
.flex-direction-nav li a.next {background:url(images/next.png) no-repeat center; right:0px;}
+
.flex-direction-nav li a.next {background:url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png) no-repeat center; right:0px;}
−
.flex-direction-nav li a.prev {background:url(images/prev.png) no-repeat center;right:65px;}
+
.flex-direction-nav li a.prev {background:url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat center;right:65px;}
−
.flex-direction-nav li a.next:hover {background:url(images/next_a.png) no-repeat center;}
+
.flex-direction-nav li a.next:hover {background:url(https://static.igem.org/mediawiki/2015/b/ba/NAIT_Next_a.png) no-repeat center;}
−
.flex-direction-nav li a.prev:hover {background:url(images/prev_a.png) no-repeat center;}
+
.flex-direction-nav li a.prev:hover {background:url(https://static.igem.org/mediawiki/2015/c/c4/NAIT_Prev_a.png) no-repeat center;}
 
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
 
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
Line 110: Line 133:
 
.flex-caption{ position: absolute;left:0px; top:150px; width:920px;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 
.flex-caption{ position: absolute;left:0px; top:150px; width:920px;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 
.flex-caption h0{font-size:30px; color:#FFFFFF}
 
.flex-caption h0{font-size:30px; color:#FFFFFF}
−
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:4px 4px 2px #000000}  
+
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:2px 4px 2px #000000}  
 
.flex-caption p{ text-align:center; padding:0 200px;}
 
.flex-caption p{ text-align:center; padding:0 200px;}
 
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
 
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
  
 
/* STRUCTURE */
 
/* STRUCTURE */
−
.section_full {padding:40px 40px 0 40px; float:left;}
+
.section_full {padding:40px 0px 0 0px; float:center;}
 
.section_one_two{ width:440px; float:left; padding:40px 0 0 40px;}
 
.section_one_two{ width:440px; float:left; padding:40px 0 0 40px;}
−
.section_one_three{ width:280px; float:left; padding:40px 0 0 40px;}
+
.section_one_three{width:280px; float:left; padding:40px 0 0 40px;}
 
.section_one_four{ width:200px; float:left; padding:40px 0 0 40px;}
 
.section_one_four{ width:200px; float:left; padding:40px 0 0 40px;}
−
.section_two_three{ width:600px; float:left; padding:40px 0 0 40px;}
+
.section_two_three{position:absolute;width:600px; float:left; padding:40px 0 0 40px;}
 
.main_content img {max-width: 100%; display: block;}
 
.main_content img {max-width: 100%; display: block;}
 +
 +
#nav_content {padding-right:auto;float:right; width:750px;background:transparent;padding-bottom:120px; }
 +
#nav_bar {padding-left:auto;float:left;width:250px;background:transparent;padding-bottom:120px;position:fixed; }
 +
.nav_bar li {font-family:'Source Sans Pro', sans-serif;color:#5AB3E3;font-size:14px;}
 +
.nav_bar li:hover {color:#159CD8}
 +
  
 
.roundimg{width:180px;height:150px;display:block;border-radius:90px;-moz-border-radius:90px;-webkit-border-radius:90px;-khtml-border-radius:90px;margin:auto;background-color:#8BC5EB;text-align:center; padding:30px 0 0 0;}
 
.roundimg{width:180px;height:150px;display:block;border-radius:90px;-moz-border-radius:90px;-webkit-border-radius:90px;-khtml-border-radius:90px;margin:auto;background-color:#8BC5EB;text-align:center; padding:30px 0 0 0;}
Line 146: Line 175:
 
.sidebar ul li{ padding:0 0 10px 0; margin:0px; display:block;}
 
.sidebar ul li{ padding:0 0 10px 0; margin:0px; display:block;}
 
.sidebar ul li a{ background:url(images/bullet.png) no-repeat left; display:block; padding:0 0 0 20px;}
 
.sidebar ul li a{ background:url(images/bullet.png) no-repeat left; display:block; padding:0 0 0 20px;}
−
.sidebar ul li a:hover{ color:#0D4D8C;}
+
.sidebar ul li a:hover{color:#0D4D8C;}
 
.sidebar .clear{ padding-bottom:40px;}
 
.sidebar .clear{ padding-bottom:40px;}
  
 
/* Footer */
 
/* Footer */
−
.footer{padding:20px 0 40px 0; margin:20px 0 0 0; clear:both; width:100%; background-color:#5AB3E3;}
+
.footer{padding:20px 0 40px 0; margin:0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C;margin-bottom:0;height:2px;}
 
.footer_content{margin:auto;width:1000px;}
 
.footer_content{margin:auto;width:1000px;}
−
.footer_left{ float:left; padding:0 0 0 40px;}
+
.footer_left{ float:left; padding:0 0 0 0px;}
−
.footer_right{ float:right; padding:0 40px 0 0;}
+
.footer_right{ float:right; padding:0 0px 0 0;}
 
ul.social_icons { margin:0px; padding:0px; list-style:none;}
 
ul.social_icons { margin:0px; padding:0px; list-style:none;}
 
ul.social_icons li{ float:left;}
 
ul.social_icons li{ float:left;}
−
ul.social_icons li a{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#b3b3b3;text-align:center;}
+
ul.social_icons li a{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#ADD3F0;text-align:center;}
 
ul.social_icons li a#top{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#ADD3F0;text-align:center;}
 
ul.social_icons li a#top{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#ADD3F0;text-align:center;}
−
ul.social_icons li a:hover{ background-color:#0D4D8C;}
+
ul.social_icons li a:hover{ background-color:#5AB3E3;}
 
ul.social_icons li a img{ width:60%; display:block; margin:5px auto;}
 
ul.social_icons li a img{ width:60%; display:block; margin:5px auto;}
  
 
ul.footer_menu{ padding:10px 0 0 0; margin:0px; list-style:none;}
 
ul.footer_menu{ padding:10px 0 0 0; margin:0px; list-style:none;}
 
ul.footer_menu li{ float:left; padding:0 15px 0 0;}
 
ul.footer_menu li{ float:left; padding:0 15px 0 0;}
−
ul.footer_menu li a{ background:url(images/bullet.png) no-repeat left; padding:0 0 0 12px;}  
+
ul.footer_menu li a{ background:url(https://static.igem.org/mediawiki/2015/1/17/NAIT_Bullet.png) no-repeat left; padding:0 0 0 12px;}  
  
 
/* Media Queries */
 
/* Media Queries */
  
 
@media screen and (max-width: 1000px) {
 
@media screen and (max-width: 1000px) {
−
#wrap{margin:0 auto;width:100%;}
+
#wrap{margin-top:auto;width:100%;}
 
#header{width:100%; height:auto; float:left; background-color:#5AB3E3; padding-bottom:40px;}
 
#header{width:100%; height:auto; float:left; background-color:#5AB3E3; padding-bottom:40px;}
−
.header_content{width:100%; float:left; margin:auto; line-height:100px;overflow-y:scroll}
+
.header_content{width:100%; float:left; margin:0; line-height:100px;}
 +
.header_left{width:500px; line-height:140px; margin-left:35%; position:relative; }
 +
.header_right{width:500px; line-height:140px; margin-left:50%; position:relative;}
 
.logo{margin:0 0 0 30px;}
 
.logo{margin:0 0 0 30px;}
 
.logo span{ display:none;}
 
.logo span{ display:none;}
 
.section_one_three, .section_two_three, .section_one_two, .section_one_four{ width:92%; float:left; padding:5% 0 0 4%;}
 
.section_one_three, .section_two_three, .section_one_two, .section_one_four{ width:92%; float:left; padding:5% 0 0 4%;}
 
.slider{ width:100%; margin:auto; clear:both;}
 
.slider{ width:100%; margin:auto; clear:both;}
−
.menu {float:right; padding:0 20px 0 0;margin-top:15px}
+
.menu {padding:0 20px 0 0; margin-top:-40px; width:1000px;}
 
.menu ul {list-style:none; position:relative;float:left;margin:0;padding:0}
 
.menu ul {list-style:none; position:relative;float:left;margin:0;padding:0}
 
.menu ul * {margin:0; padding:0;}
 
.menu ul * {margin:0; padding:0;}
 
.menu ul a {display:block;color:#159CD8;text-decoration:none;padding:10px 15px}
 
.menu ul a {display:block;color:#159CD8;text-decoration:none;padding:10px 15px}
 
.menu ul li {position:relative;float:left; padding:5px 5px 5px 5px}
 
.menu ul li {position:relative;float:left; padding:5px 5px 5px 5px}
−
.menu ul li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:14px;}
+
.menu ul li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
−
.menu ul li.current-menu-item{background:#5AB3E3}
+
.menu ul li.current-menu-item {background:#5AB3E3}
−
.menu ul ul{display:none; position:absolute; top:73.8%; left:0; background:#159CD8; padding:0 0px 0 0}
+
.menu ul ul{display:none; position:absolute; top:77%; left:10%; background:#0D4D8C; padding:0 0px 0 0}
−
.menu ul ul li:hover{background:#ADD3F0}
+
.menu ul ul li:hover{background:#159CD8}
−
.menu ul ul li{float:none; width:100px}
+
.menu ul ul li{float:none; width:120px}
−
.menu ul ul a {line-height:100%; padding:0 20px 0 0}
+
.menu ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 
.menu ul ul ul {top:0; left:200%}
 
.menu ul ul ul {top:0; left:200%}
−
.menu ul li.selected a{color:#0D4D8C}
+
.menu ul li.selected a{color:#8BC5EB}
−
.menu ul li:hover > ul{display:block}
+
.menu ul li:hover > ul{display:block;}
 +
.menu span {color:#FFFFFF;}
  
 
.top_slogan{ text-align:center;font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:18px; padding:10px; font-style:italic; line-height:22px; clear:both;}
 
.top_slogan{ text-align:center;font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:18px; padding:10px; font-style:italic; line-height:22px; clear:both;}
  
−
.footer_content{margin:auto;width:100%;}
+
.footer_content{margin:0;width:100%;}
 
.footer_left{ float:left; padding:0 0 0 10px;}
 
.footer_left{ float:left; padding:0 0 0 10px;}
 
.footer_right{ float:right; padding:0 10px 0 0;}
 
.footer_right{ float:right; padding:0 10px 0 0;}
Line 199: Line 231:
  
 
/*Portraits*/
 
/*Portraits*/
−
.abbie {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/abbie.jpg);background-position:50%;}  
+
.abbie {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.abbie:hover {width: 200px; height: 200px; background: url(images/portraits/abbieS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.abbie:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px; background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.david {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/david.jpg);background-position:50%;}  
+
.david {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.david:hover {width: 200px; height: 200px; background: url(images/portraits/davidS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.david:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.eduardo {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/eduardo.jpg);background-position:50%;}  
+
.eduardo {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.eduardo:hover {width: 200px; height: 200px; background: url(images/portraits/EduardoS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.eduardo:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.johannes {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/johannes.jpg);background-position:50%;}  
+
.johannes {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.johannes:hover {width: 200px; height: 200px; background: url(images/portraits/johannesS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.johannes:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.joy {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/joy.jpg);background-position:50%;}  
+
.joy {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;;background-position:50%;}  
−
.joy:hover {width: 200px; height: 200px; background: url(images/portraits/joyS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.joy:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.kevin {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/Kevin.jpg);background-position:50%;}  
+
.kevin {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.kevin:hover {width: 200px; height: 200px; background: url(images/portraits/KevinS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.kevin:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.marcelo {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/marcelo.jpg);background-position:50%;}  
+
.marcelo {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.marcelo:hover {width: 200px; height: 200px; background: url(images/portraits/marceloS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.marcelo:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.mattea {display:inline-block;width: 200px; height: 200px; background: url(images/portraits/mattea.jpg);background-position:50%;}  
+
.mattea {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.mattea:hover {width: 200px; height: 200px; background: url(images/portraits/matteaS.jpg);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.mattea:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
−
.NAIT {display:inline-block;width: 200px; height: 200px; background: url(images/NaitSmall.gif);background-position:50%;}  
+
.NAIT {display:inline-block;width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/8/82/Nait_question_bk.png);background-size:200px 200px ;background-position:50%;}  
−
.NAIT:hover {width: 200px; height: 200px; background: url(images/NaitSmall.gif);background-position:50%;border-radius:50%;width:200px;height:200px)}
+
.NAIT:hover {width: 200px; height: 200px; background: url(https://static.igem.org/mediawiki/2015/6/61/Nait_question_cl.png);background-size:200px 200px;background-position:50%;border-radius:50%;width:200px;height:200px)}
  
 
/*Fade Portrait Effect*/
 
/*Fade Portrait Effect*/
−
.imgwrap {width:636px;margin:0px;background-color:none;padding:0px;overflow:hidden}
+
.imgwrap {width:700px;margin:0px;background-color:none;padding:0px;overflow:hidden}
 
.imgwrap div {display:inline-block;width:200px;height:200px;border-radius:50%;margin:5px;-webkit-transition:opacity 0.26s ease-out;-moz-transition:opacity 0.26s ease-out;-ms-transition:opacity 0.26s ease-out;-o-transition:opacity 0.26s ease-out;transition:opacity 0.26s ease-out;}
 
.imgwrap div {display:inline-block;width:200px;height:200px;border-radius:50%;margin:5px;-webkit-transition:opacity 0.26s ease-out;-moz-transition:opacity 0.26s ease-out;-ms-transition:opacity 0.26s ease-out;-o-transition:opacity 0.26s ease-out;transition:opacity 0.26s ease-out;}
 
.imgwrap:hover div {opacity:0.2;}
 
.imgwrap:hover div {opacity:0.2;}
Line 234: Line 266:
  
 
/* Modal */
 
/* Modal */
−
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;}
+
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;z-index:999;}
 
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
 
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
 
.modal-state { display: none;}
 
.modal-state { display: none;}
Line 300: Line 332:
 
}
 
}
 
.booklet .b-wrap-left  {
 
.booklet .b-wrap-left  {
−
background:#fff url(../images/left_bg.jpg) no-repeat top left;
+
background:none;
 
-webkit-border-top-left-radius: 10px;
 
-webkit-border-top-left-radius: 10px;
 
-webkit-border-bottom-left-radius: 10px;
 
-webkit-border-bottom-left-radius: 10px;
Line 309: Line 341:
 
}
 
}
 
.booklet .b-wrap-right {
 
.booklet .b-wrap-right {
−
background:#fff url(right_bg.jpg) no-repeat top left;
+
background:none;
 
-webkit-border-top-right-radius: 10px;
 
-webkit-border-top-right-radius: 10px;
 
-webkit-border-bottom-right-radius: 10px;
 
-webkit-border-bottom-right-radius: 10px;
Line 340: Line 372:
 
height:540px;
 
height:540px;
 
position:relative;
 
position:relative;
−
background:#FFFFFF no-repeat 9px 27px;
+
background:#FFFFFF;
 +
        z-index:0;
 
}
 
}
 
.book_wrapper h1{
 
.book_wrapper h1{
Line 346: Line 379:
 
margin:5px 5px 5px 15px;
 
margin:5px 5px 5px 15px;
 
font-size:26px;
 
font-size:26px;
−
background:url(images/h1.png) no-repeat bottom left;
+
background:none;
 
padding-bottom:7px;
 
padding-bottom:7px;
 
}
 
}
Line 355: Line 388:
 
.book_wrapper a.article,
 
.book_wrapper a.article,
 
.book_wrapper a.demo{
 
.book_wrapper a.demo{
−
background:url(images/circle.png) no-repeat 50% 0px;
+
background:none;
 
display:block;
 
display:block;
 
width:95px;
 
width:95px;
Line 373: Line 406:
 
.book_wrapper a.demo:hover{
 
.book_wrapper a.demo:hover{
 
background-position:50% -41px;
 
background-position:50% -41px;
−
color:#13386a;
+
color:#FF0000;
 
}
 
}
 
.book_wrapper img{
 
.book_wrapper img{
Line 380: Line 413:
 
padding:4px;
 
padding:4px;
 
border:1px solid #ddd;
 
border:1px solid #ddd;
−
-moz-box-shadow:1px 1px 1px #000;
+
-moz-box-shadow:none;
−
-webkit-box-shadow:1px 1px 1px #000;
+
-webkit-box-shadow:none
−
box-shadow:1px 1px 1px #000;
+
box-shadow:none;
 
}
 
}
 
.booklet .b-wrap-right img{
 
.booklet .b-wrap-right img{
Line 396: Line 429:
 
margin-top:-20px;
 
margin-top:-20px;
 
top:50%;
 
top:50%;
−
background:#8BC5EB url(images/prev.png) no-repeat 0px -40px;
+
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat 0px -40px;
 +
        z-index:2;
 +
 
 
}
 
}
 
a#prev_page_button{
 
a#prev_page_button{
 
left:-30px;
 
left:-30px;
−
background:#8BC5EB url(images/prev.png)  
+
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png)  
 
}
 
}
 
a#next_page_button{
 
a#next_page_button{
 
right:-30px;
 
right:-30px;
−
background:#8BC5EB url(images/next.png)  
+
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png)  
 
}
 
}
 
a#next_page_button:hover{
 
a#next_page_button:hover{
−
background:#8BC5EB url(images/next.png)  
+
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png)  
 
}
 
}
 
a#prev_page_button:hover{
 
a#prev_page_button:hover{
−
background:#8BC5EB url(images/prev.png)  
+
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png)  
 
}
 
}
 
.loading{
 
.loading{
Line 423: Line 458:
 
padding-left:60px;
 
padding-left:60px;
 
font-size:15px;
 
font-size:15px;
−
background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;
+
background: url(ajaxloader.jpg) no-repeat 10px 50%;
 
opacity: 0.7;
 
opacity: 0.7;
 
z-index:9999;
 
z-index:9999;
Line 431: Line 466:
 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 
}
 
}
 +
 +
/*Table Properties*/
 +
 +
.tg  {border-collapse:collapse;border-spacing:0;color:none}
 +
.tg td{width:280px; border-style:none;border-width:0px;overflow:hidden;word-break:normal;text-align:center;}
 +
.tg th{width:280px; padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;text-align:center}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 01:45, 11 June 2015