Difference between revisions of "Template:NAIT Edmonton/CSS"
(61 intermediate revisions by 2 users not shown) | |||
Line 48: | Line 48: | ||
/* Top */ | /* Top */ | ||
/*-- Remove borders, float content left and remove padding/margin */ | /*-- Remove borders, float content left and remove padding/margin */ | ||
− | #globalWrapper, #content, #top_slogan{ | + | #globalWrapper, #content, #top_slogan { |
background-color: transparent; | background-color: transparent; | ||
border: none; | border: none; | ||
Line 61: | Line 61: | ||
#wrap {width:1000px;padding-top:140px;padding-bottom:120px;z-index:-5;margin-left:auto;margin-right:auto;} | #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;position:fixed;z-index:10;background:-webkit-linear-gradient(top, #5AB3E3, #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} |
#footer{z-index:15;} | #footer{z-index:15;} | ||
− | .header_content{margin:auto; width:1000px; line-height:140px; | + | .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;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 80: | Line 76: | ||
margin-top:0px; | margin-top:0px; | ||
− | margin-left: | + | margin-left: 41.5%; |
− | margin-right: | + | margin-right:25%; |
− | color:#ff0000; | + | color:#ff0000; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 109: | Line 85: | ||
/* Menu */ | /* Menu */ | ||
− | .menu { | + | .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: | + | .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: | + | .menu ul ul{display:none; position:absolute; top:77%; left:10%; background:#0D4D8C; padding:0 0px 0 0} |
.menu ul ul li:hover{background:#159CD8} | .menu ul ul li:hover{background:#159CD8} | ||
− | .menu ul ul li{float:none; width: | + | .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:#8BC5EB} | .menu ul li.selected a{color:#8BC5EB} | ||
− | .menu ul li:hover > ul{display:block} | + | .menu ul li:hover > ul{display:block;} |
/* Slider */ | /* Slider */ | ||
Line 221: | Line 197: | ||
@media screen and (max-width: 1000px) { | @media screen and (max-width: 1000px) { | ||
− | #wrap{ | + | #wrap{margin-top:auto;width:100%;} |
− | #header{width:100%; height: | + | #header{width:100%; height:auto; float:left; background-color:#5AB3E3; padding-bottom:40px;} |
.header_content{width:100%; float:left; margin:0; line-height:100px;} | .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 { | + | .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: | + | .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: | + | .menu ul ul{display:none; position:absolute; top:77%; left:10%; background:#0D4D8C; padding:0 0px 0 0} |
.menu ul ul li:hover{background:#159CD8} | .menu ul ul li:hover{background:#159CD8} | ||
− | .menu ul ul li{float:none; width: | + | .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:#8BC5EB} | .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;} | .menu span {color:#FFFFFF;} | ||
Line 253: | Line 231: | ||
/*Portraits*/ | /*Portraits*/ | ||
− | .abbie {display:inline-block;width: 200px; height: 200px; background: url( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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( | + | .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*/ |
Latest revision as of 01:45, 11 June 2015