Template:Team:Hong Kong HKUST/indexpage.css
From 2014.igem.org
body { width: 100%;
padding:0; margin:0; font: 14px Helvetica;
} html, body, .wrapper {
background-color: #ffdd66;
}
- content_container {
width:950px; margin: 0 auto;
-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-UltraLight; 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;
} nav ul{ list-style: none; margin: 0; padding: 0;
}
.access-menu{ display: table; margin: 1em auto; min-width: 100%; overflow:scroll
}
.access-menu > li{ background: #554433; display: inline-block; position: relative; margin-top: 15px;
}
.access-menu > li + li{ border-left: solid 1px #000; }
.access-menu > li:hover .access-submenu{ top: 100%; left: auto; }
.access-menu a{ color: #eee; display: block; padding: .5em 2em; text-decoration: none; border: 1px solid white; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .access-menu .access_logo{ padding:0; } .access-menu img{ height: 30px; } .access-menu a:hover, .access-menu a:focus{ background: #000000; outline: none; }
.access-submenu{ background: #665544; left: -9999px; position: absolute; top: -9999px; width: 150%; }
.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; }
.is-show{
left: auto;
top: 100%;
}
li.indent_list a{
background-color:#776655;
}
/* ============================================================================ */
/*The access-menu end*/
- slide{
width: 100%; height: 600px; overflow:hidden; margin: 30px 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;
} button.prev:hover, button.next:hover {
background: rgba(0,0,0,0.8);
} button.next {
margin-left:926px;
}
div.project_area{
margin:0 auto; border: 1px solid black; background-color:#006699; padding:15px; }
.project_area h4, .project_area p{ color:white; } div.project_box{ border: 1px solid gray; width: 450px; height: 150px; text-align: center; background-color:#006699; } div.project_box:hover {
background-color: #0077AA;
}
div.quick_link_container{
border-radius: 15px;
padding:50px; height:300px; -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); width:200px; background-color:#F0A830; } .quick_link_container > h4,.start_up_link_container > h4{ font-size: 25px;
color: black; font-weight: 600;
}
.quick_link_container > p, .start_up_link_container > p{
font-size: 17px;
}
table.site_map_table{ background-color: #554433; width: 90%; padding: 5px 20px; border-radius: 5px;
} table.site_map_table td{ vertical-align: text-top;
} 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; } div.banner_area img{ width:100%; height: 150px; padding-top: 10px; } div.content_1{ width:100%; margin-top:80px; } div.content_1 h3{ font-size:45px; color:#5E412F; border-bottom: 2px solid black; padding:0px 30px; } table.content_table td{ width:50%; padding: 30px; } table.content_table p { font-size: 18px; font-family: "helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; line-height: 1.5em; } div.content_area{ padding:0 20px 0 20px; border-radius: 2px; height:auto; } td.content_cell img{ width:100%; display:inline;
}
div.content_area_one_row p::first-letter, div.content_area p::first-letter{ font-size:300%; color: navy; } td.content_cell h5{ font-size: 19px; font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; font-weight:bold; display:inline; } td.content_cell{ background-color: #FFFFAA; border-radius: 8px; } td.content_cell h6{ font-size: 15px; font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; font-weight:normal; display:inline; } 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:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; font-weight:900; display:block; text-decoration:underline; color:#78C0A8; text-transform:uppercase; } div#description_area p{ text-indent:20px; color:white; } 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:#FF6600; color: #c0392b; } .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: #FF7700; color:#78C0A8; } .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: #c0392b; } .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; color:#F0A830; }