"
Template:Team:Hong Kong HKUST/indexpage.css
From 2014.igem.org
Mfcheungaa (Talk | contribs) |
|||
| Line 515: | Line 515: | ||
div#medal_reqire_container{ | div#medal_reqire_container{ | ||
display: flex; | display: flex; | ||
| + | display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | ||
| + | display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | ||
| + | display: -ms-flexbox; /* TWEENER - IE 10 */ | ||
| + | display: -webkit-flex; /* NEW - Chrome */ | ||
| + | display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | ||
flex-wrap: row; | flex-wrap: row; | ||
justify-content: center; | justify-content: center; | ||
Revision as of 15:32, 17 October 2014
body { width: 100%; padding:0; margin:0; font: 14px Helvetica; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } html, body, .wrapper {pro
background-color: #fcebb67
}
- content_container {
width:950px; margin: 10px auto 0; position: relative; top: -30px; border: 5px brown solid; -webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); -moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); } a { color: #c0392b; text-decoration: none; } a:hover { color: #e74c3c; }
- menu {
padding: 0; text-align: center; text-transform:uppercase; }
h1 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 100px; text-align: center; margin: 0 0 0 0; padding: 50px 0 0 0 ; color: #fff; font-weight:100; letter-spacing: 0.0625em; }
/*The access-menu start*/
/* ============================================================================ */
nav {
background-color: #ff9900;
background-image: url("
");
background-size: 100% 100%;
height: 170px;
width: 100%;
min-width: 950px;
max-width: 1500px;
top: 10px;
position: relative;
margin:auto;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
vertical-align: bottom;
z-index: 1000000000;
}
nav ul.access-menu:first-child { position: relative; top: 60px;
- left: 410px;
width: 97%; } nav ul.access-menu:first-child li.access_logo:first-child{ float:left; background-color: transparent; border: medium none; left: 15%; top: -75px; transition: none 0s ease 0s ; } .access_logo:first-child img { height: 100px; } nav ul.access-menu:nth-child(2) { position: relative; top: 0px; } .access-menu{ display: table; margin: 0 auto;
}
.access-menu > li{
background-color: rgba(136, 106, 77, 1);
display: inline-block; position: relative; white-space: nowrap; border:1px solid white; margin-top: 15px; padding: 0 4px; letter-spacing: 1.2px; font-size: 1em;}
.access-menu > li + li{ border-left: solid 1px #000; }
.access-menu > li:hover .access-submenu{ top: 100%; left: auto; letter-spacing: 1px; }
.access-menu a{ color: #eee; display: block; padding: .3em 1.5em; text-decoration: none; #-webkit-transition: all .2s linear; #-moz-transition: all .2s linear; #-ms-transition: all .2s linear; #-o-transition: all .2s linear; #transition: all .2s linear; font-size: 90%; } .access-menu > li.access_logo { background-color: white; border: 5px solid black; border-radius: 20px; float: right; margin: 15px 10px 0; padding: 5px; transition: all 1s ease-in-out 0s; position: relative; top: -60px; } .access-menu > li.access_logo:hover { background-color: white; #border: 5px inset black; transform: rotate(360deg); } .access-menu img{ height: 60px; } .access-menu li:hover, .access-menu li:focus{ background-color: black; outline: none; } .access-submenu{ left: -9999px; position: absolute; top: -9999px; min-width: 102%; width: auto; } .access-submenu li{ background-color: #665544; border: 1px solid white; position: relative; left: -6px; } .access-submenu > li + li{ border-top: solid 1px #000; }
.access-submenu > li:last-child{ border-bottom: solid 3px #000; }
.access-submenu a{ padding: .5em 1em; } .access-menu .access_logo > a { padding: 0; }
.is-show{ left: auto; top: 100%; } li.indent_list{ background-color:#998877;
}
li.indent_list a{
#color: black;
} li.indent_list a:hover{
color: white;
} /* ============================================================================ */ /*The access-menu end*/
- slide{
width: 100%; height: 600px; overflow:hidden; margin: 0px auto; box-shadow: 0 8px 6px -6px rgba(0,0,0,1); }
- slide div{
display:block; width:0; float: left; -webkit-transition: all 0.75s; -moz-transition: all 0.75s; -o-transition:all 0.75s; transition: all 0.75s; } img.picture { width:960px; } button.prev, button.next { position: absolute; z-index: 999; display: block; padding:0 10px; width: auto; height:350px; background: rgba(0,0,0,0); color: #ffffff; font-size:26px; cursor: pointer; border:none; outline:none; margin-top: 100px; } button.prev:hover, button.next:hover { background: rgba(0,0,0,0.8); } button.next { margin-left:911px; }
div.project_area{
margin:0 auto;
padding:15px;
display:flex;
display:-ms-flex;
flex-wrap: nowrap; justify-content:center;
} div.project_area > a , div.quick_link_area div.quick_link_row, div.quick_link_area div.quick_link_row div{ display:inline-block } .project_area h4, .project_area p{ color:white; } div.project_box{ width: 450px; height: 150px; text-align: center; }
div.project_box img{ width: 90%; -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */ transition: width 0.5s; } div.project_box img:hover{ width: 100%; }
div.quick_link_area{ background: none; display:flex; flex-wrap:nowrap; justify-content:center; flex-direction:row; }
div.quick_link_row{ padding:5px 10px; background: none; display:flex; flex-wrap:nowrap; justify-content:space-around; flex-direction:row; } div.quick_link_row div{ flex-grow:1; height:200px; width:145px; } div.quick_link_row h4{ text-align:center; } div.quick_link_row a{ text-align:center; color:#666 }
div.quick_link_row img{ width:90%; max-height:150px; -webkit-transition: width 0.5s; transition: width 0.5s; } div.quick_link_row > div:hover img{ width:100%; }
div.quick_link_row > div:hover{ flex-grow:2; } .quick_link_sub { border-width: 1px solid #db9356; border-radius: 10px; float: left; margin: 5px; padding: 5px; text-align: center; width: 85%; background-color:#fceeb4; color:black; transition-property: borde-width; transition-duration: 1s;
} .quick_link_sub:hover{ border:5px solid #db9356; background-color:#ffffc5; color:#444; } table.site_map_table{ background-color: #554433; width: 100%; min-width:1000px; padding: 5px 20px; border-radius: 5px; text-align: left; margin: 20px auto; } table.site_map_table td{ vertical-align: text-top; width: 14%;
} table.site_map_table td h4{ font-weight:900; color:white; font-size:100%; } table.site_map_table td a{ color: #eee; } .site_map_table h4{ color:#F07818; } .site_map_table ul ul{ padding:0 15px; }
.site_map_table p, .site_map_table ul, .site_map_table a{ color: #F0A830; }
.site_map_table a:hover { text-decoration: underline; }
div.banner_area{ width:100%; margin:0 auto; padding:0 auto; display:block; } div.banner_area img{ display: none; width:100%; height: 150px; padding-top: 10px; } div.content_1{ width:100%; } div.content_1 h3{ font-size:45px; color:#5E412F; border-bottom: 2px solid black; padding:0px 30px; } table.content_table td{ width:50%; vertical-align:top;
text-align: justify; } } table.content_table td p{
} table.content_table p { font-size: 14px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.5em; } table.content_table{ background-color:transparent; } div.content_area{ padding:0 20px 0 20px; border-radius: 2px; height:auto; } td.content_cell img{ width:100%; display:block;
}
p.first_letter_enhanced::first-letter{ font-size:300%; color: navy; } td.content_cell h5{ font-size: 19px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:bold; display:inline; } td.content_cell{ background-color: #FFFFF5; border-radius: 8px; } td.content_cell h6{ font-size: 15px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:normal; display:inline; } .embedded_image_right{ float: right; margin: 20px; width:50%; padding:10px; } .embedded_image_left{ float: left; margin: 20px; width:50%; padding:10px; } div#description_area{ padding: 20px; border-bottom: 2px dotted black; background-color:#5E412F; padding:10px 90px; } div#description_area h2 { text-align:center; font-size: 30px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:900; display:block; color:#78C0A8; text-transform:uppercase; } div#description_area p{
color:white; text-align: justify; } table.start_up_link_area{ width:100%; } td.start_up_link_button{ width:25%; height:300px; } div.start_up_link_container{ width:90%; height:300px; padding:5px 10px 5px 10px; -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); }
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container, .quick_link_row:nth-child(even) .quick_link_button:nth-child(odd) div.quick_link_container, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container, tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container{ background-color:#FF9c00; color: #000000; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container:hover, .quick_link_row:nth-child(even) .quick_link_button:nth-child(odd) div.quick_link_container:hover, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover , tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover { background-color: #FFad11; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container, .quick_link_row:nth-child(even) .quick_link_button:nth-child(even) div.quick_link_container, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(odd) div.start_up_link_container, tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container{ background-color:#009999; color: #000000; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container:hover, .quick_link_row:nth-child(even) .quick_link_button:nth-child(even) div.quick_link_container:hover, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover , tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover { background-color: #11aaaa; }
div#medal_reqire_container{ display: flex;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-wrap: row; justify-content: center; align-items: stretch; align-content: space-between; } h3.What_medal{ font-size: large; font-weight: 200; text-transform: uppercase; text-align: center; border-bottom: 2px solid black; } div.each_medal{ background: #00CAAA; padding: 10px; margin:10px; }
div.achievement_container{ padding: 10px; margin:0 auto;
} div.achievement_container ul{ padding: 10px; margin:10px; background-color: #E3E0D7; } div.achievement_container ul li{ background-color: gray; list-style: none; font-size: 16px; }
/* smart image enlarger starts here */ /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
.ienlarger {
clear: none; /* set to left or right if needed */ padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ }
.ienlarger a { display:block; text-decoration: none; cursor:default;/* add cursor:default; to this rule to disable the hand cursor */ }
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img { border: 1px solid #FFFFFF; /* adds a border around the image */ margin-bottom: 8px; /* pushes the text down from the image */ }
.ienlarger a span { /* this is for the large image and the caption */ position: absolute; display:none; color: #FFCC00; /* caption text colour */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* caption text size */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; }
.ienlarger img { /* leave or IE puts a border around links */ border-width: 0; }
.ienlarger a:hover span { display:block; top: 50px; /* means the pop-up's top is 50px away from thumb's top */ left: -250px; /* means the pop-up's left is 90px far from the thumb's left */ z-index: 100; cursor:default;/* add cursor:default; to this rule to disable the hand cursor only for the large image */
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
/* If you want the pop-up open above the thumb, remove the top: 50px; and add bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ }
.resize_thumb { width: 700px; /* enter desired thumb width here */ height : auto; }
/* smart image enlarger ends here */
/*scroll to top/next page button start*/ .scrollToTop,.nextPage { width:50px; height:50px; border: solid 2px; border-radius:100%; text-align:center; font-weight: bold; position:fixed; top:85%; right:50px; display: none; color:#383838; text-align:center; background-color:#00CAAA; font-size: 12px; z-index:100; } .scrollToTop:hover,.nextPage:hover{ text-decoration:none; } /*scroll to top / next page button end*/ /*additional csssssss*/
p.under_line{ border-bottom: 1px solid black; }
