Template:Team:Hong Kong HKUST/indexpage.css

From 2014.igem.org

(Difference between revisions)
 
(287 intermediate revisions not shown)
Line 1: Line 1:
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display:  
+
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);
 +
}
 +
#menu {
 +
padding: 0;
 +
text-align: center;
 +
text-transform:uppercase;
 +
}
-
none;} /*-- hides default wiki settings --*/
+
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;
 +
}
-
#top-section { /*-- styling for default menu bar (edit, page,
+
/*The access-menu start*/
 +
/* ============================================================================ */
 +
nav {
 +
background-color: #ff9900;
 +
background-image: url("https://static.igem.org/mediawiki/2014/d/d1/HKUST_2014_pneumosensor_banner.png");
 +
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: 22%;
 +
top: -75px;
 +
transition: none 0s ease 0s ;
 +
}
 +
.access_logo:first-child img {
 +
height: 100px;
 +
}
 +
nav ul.access-menu:nth-child(2) {
 +
position: relative;
 +
top: -20px;
 +
}
 +
.access-menu{
 +
display: table;
 +
margin: 0 auto;
-
history, etc.) --*/
+
}
-
background-color:black;
+
-
border: 0 none;
+
-
height: 20px;
+
-
z-index: 100;
+
-
top: 0;
+
-
position: fixed;
+
-
width: 100%;
+
-
left: 0;
+
-
margin-left: 0;
+
-
}
+
-
#globalWrapper, #content { /*-- changes default wiki settings
+
.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{
-
width: 100%;
+
border-left: solid 1px #000;
-
height: 100%;
+
}
-
border: 0px;
+
-
background-color:#FCEBE6;
+
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
html, body, .wrapper { /*-- changes default wiki settings --
+
.access-menu > li:hover .access-submenu{
 +
top: 100%;
 +
left: auto;
 +
letter-spacing: 1px;
 +
}
-
*/
+
.access-menu a{
-
+
color: #eee;
-
background-color: #FCEBE6;
+
display: block;
-
}
+
padding: .3em 1.5em;
-
+
text-decoration: none;
-
/*Changing default wiki setting. By Guillaume*/
+
#-webkit-transition: all .2s linear;
-
.left-menu li a{
+
#-moz-transition: all .2s linear;
-
color:#5E412F;
+
#-ms-transition: all .2s linear;
-
}
+
#-o-transition: all .2s linear;
-
.right-menu li a{
+
#transition: all .2s linear;
-
color:#5E412F;
+
font-size: 90%;
-
background-color:transparent;
+
}
-
}
+
.access-menu > li.access_logo {
-
#menubar{
+
background-color: white;
-
width:auto;
+
border: 5px solid black;
-
}
+
border-radius: 20px;
-
+
float: right;
-
/*End of changing default wiki setting.*/
+
margin: 15px 10px 0;
-
+
padding: 5px;
-
body {
+
transition: all 1s ease-in-out 0s;
-
width: 100%;
+
position: relative;
-
  padding:0;
+
top: -60px;
-
  margin:0;
+
}
-
  font: 14px Helvetica;
+
.access-menu > li.access_logo:hover {
-
}
+
background-color: white;
-
#content_container {
+
#border: 5px inset black;
-
  width:950px;
+
transform: rotate(360deg);
-
  margin: 0 auto;
+
}
-
-webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64);
+
.access-menu img{
-
-moz-box-shadow:   0px 6px 6px 0px rgba(50, 50, 50, 0.64);
+
height: 60px;
-
box-shadow:         0px 6px 6px 0px rgba(50, 50, 50, 0.64);
+
}
-
}
+
.access-menu li:hover,
-
a {
+
.access-menu li:focus{
-
  color: #c0392b;
+
background-color: black;
-
  text-decoration: none;
+
outline: none;
-
}
+
}
-
a:hover {
+
.access-submenu{
-
  color: #e74c3c;
+
left: -9999px;
-
}
+
position: absolute;
-
#menu {
+
top: -9999px;
-
  padding: 0;
+
min-width: 102%;
-
  text-align: center;
+
width: auto;
-
  text-transform:uppercase;
+
}
-
}
+
.access-submenu li{
 +
background-color: #665544;
 +
border: 1px solid white;
 +
position: relative;
 +
left: -6px;
 +
}
 +
.access-submenu > li + li{
 +
border-top: solid 1px #000;
 +
}
-
h1 {
+
.access-submenu > li:last-child{
-
  font-family: HelveticaNeue-UltraLight;
+
border-bottom: solid 3px #000;
-
  font-size: 100px;
+
}
-
  text-align: center;
+
-
  margin: 0 0 0 0;
+
-
  padding: 50px 0 0 0 ;
+
-
  background: #5E412F;
+
-
  color: #fff;
+
-
  font-weight:100;
+
-
  letter-spacing: 0.0625em;
+
-
}
+
-
/*----------------------------------drop down ---------------------------------*/
+
.access-submenu a{
-
h1 {
+
padding: .5em 1em;
-
font-size:60px;
+
}
-
}
+
.access-menu .access_logo > a {
 +
padding: 0;
 +
}
-
p {
+
.is-show{
-
  font-size:20px;
+
left: auto;
-
}
+
top: 100%;
-
nav {
+
}
-
margin:0 auto;
+
li.indent_list{
-
padding: 0 auto;
+
background-color:#998877;
-
background-color: orange;
+
-
width:990px;
+
-
display:block;
+
-
}
+
-
nav ul {
+
}
-
padding:0;
+
-
margin:0 auto;
+
-
list-style: none;
+
-
position: relative;
+
-
display:block;
+
-
text-align: center;
+
-
}
+
-
+
-
nav ul li {
+
-
display: inline-block;
+
-
float: left;
+
-
display:list-item;
+
-
list-style: none;
+
-
background-color:#5E412F;
+
-
+
-
}
+
-
nav ul li a {
+
li.indent_list a{
-
display:block;
+
        #color: black;
-
padding:20px 10px 0px;
+
}
-
+
li.indent_list a:hover{
-
color:#FFF;
+
        color: white;
-
font-size:16px;
+
}
-
text-decoration:none;
+
/* ============================================================================ */
-
font-family: 'Bree Serif', 'serif';
+
/*The access-menu end*/
-
}
+
-
li a:hover { background-color: #000000; }
 
-
+
#slide{
-
+
width: 100%;
-
+
height: 600px;
-
/* The Dropdown Styles */
+
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;
 +
}
-
/* Hide Dropdowns by Default */
 
-
nav ul ul {
 
-
display: none;
 
-
position: absolute;
 
-
top: 40px;
 
-
}
 
-
 
-
/* Display Dropdowns on Hover */
 
-
nav ul li:hover > ul {
 
-
display:list-item;
 
-
}
 
-
 
-
/* Fisrt Tier Dropdown */
 
-
nav ul ul li {
 
-
width:180px;
 
-
position: relative;
 
-
border-bottom:none;
 
-
list-style-type: none;
 
-
}
 
-
/* Second, Third and more Tiers */
+
div.project_area{
-
nav ul ul ul li {
+
margin:0 auto;
-
position: absolute relative;
+
padding:15px;
-
}
+
display: -webkit-box;     /* OLD - iOS 6-, Safari 3.1-6 */
-
.fixed {
+
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-
  position: fixed;
+
  display: -ms-flexbox;     /* TWEENER - IE 10 */
-
  z-index: 10;
+
  display: -webkit-flex;     /* NEW - Chrome */
-
  top: 0;
+
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
  width: 100%;
+
flex-wrap: nowrap;
-
}
+
justify-content:center;
-
.fixed ul ul ul li a {
+
-
  color: #fff;
+
-
  text-decoration: none;
+
-
}
+
-
+
-
div#nav_container{
+
-
  text-align: center;
+
-
      width:1000px;
+
-
  padding:0 auto;
+
-
  margin:0 auto;
+
-
  max-width:700px;
+
-
  z-index:100000;
+
-
}
+
-
#slide{
+
}
-
  width: 100%;
+
div.project_area > a , div.quick_link_area div.quick_link_row, div.quick_link_area div.quick_link_row div{
-
  height: 600px;
+
display:inline-block
-
  overflow:hidden;
+
}
-
  margin: 30px auto;
+
.project_area h4, .project_area p{
-
  box-shadow: 0 8px 6px -6px rgba(0,0,0,1);
+
color:white;
-
}
+
}
-
#slide div{
+
div.project_box{
-
  display:block;
+
width: 450px;
-
  width:0;
+
height: 150px;
-
  float: left;
+
text-align: center;
-
  -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:#5E412F;
+
-
  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:#5E412F;
+
-
}
+
-
div.quick_link_container{
+
div.project_box img{
-
padding:50px;
+
width: 90%;
-
height:300px;
+
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
-
-webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69);
+
transition: width 0.5s;
-
-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);
+
div.project_box img:hover{
-
width:200px;
+
width: 100%;
-
background-color:#F0A830;
+
}
-
}
+
-
+
-
+
-
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container {
+
-
background-color:#78C0A8;
+
-
}
+
-
.quick_link_row:nth-child(even) .quick_link_button:nth-child(even) div.quick_link_container{
+
-
background-color:#78C0A8;
+
-
}
+
-
+
-
table.site_map_table{
+
-
background-color: #5E412F;
+
-
width: 90%;
+
-
}
+
-
table.site_map_table td{
+
-
vertical-align: text-top;
+
-
+
-
}
+
-
table.site_map_table td h4{
+
-
text-align:center;
+
-
font-weight:900;
+
-
color:white;
+
-
}
+
-
table.site_map_table td a{
+
-
color: #eee;
+
-
}
+
-
.site_map_table h4{
+
-
color:#F07818;
+
-
}
+
-
.site_map_table p, .site_map_table ul, .site_map_table a{
+
-
color: #F0A830;
+
-
}
+
-
div.banner_area{
+
-
width:100%;
+
-
margin:0 auto;
+
-
padding:0 auto;
+
-
}
+
-
div.banner_area img{
+
-
width:100%;
+
-
height: 550px;
+
-
}
+
-
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: 0 30px;
+
-
}
+
-
table.content_table p {
+
-
font-size: 18px;
+
-
font-family: "helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
+
-
line-height: 2em;
+
-
}
+
-
div.content_area{
+
-
padding:0 20px 0 20px;
+
-
background-color:#FCEBB6;
+
-
border-radius: 2px;
+
-
height:600px;
+
-
}
+
-
td.content_cell img{
+
-
width:100%;
+
-
display:inline;
+
-
+
-
}
+
-
div.content_area_one_row p::first-letter{
+
div.quick_link_area{
-
font-size:300%;
+
background: none;
-
color: navy;
+
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-
}
+
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
-
td.content_cell h5{
+
  display: -ms-flexbox;      /* TWEENER - IE 10 */
-
font-size: 19px;
+
  display: -webkit-flex;    /* NEW - Chrome */
-
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
+
  display: flex;            /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
font-weight:bold;
+
flex-wrap:nowrap;
-
display:inline;
+
justify-content:center;
-
}
+
flex-direction:row;
-
td.content_cell{
+
margin:auto;
-
background-color: orange;
+
}
-
border-radius: 8px;
+
 
-
}
+
div.quick_link_row{
-
td.content_cell h6{
+
padding:5px 10px;
-
font-size: 15px;
+
background: none;
-
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
+
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-
font-weight:normal;
+
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
-
display:inline;
+
  display: -ms-flexbox;      /* TWEENER - IE 10 */
-
}
+
  display: -webkit-flex;    /* NEW - Chrome */
-
div#description_area{
+
  display: flex;            /* NEW, Spec - Opera 12.1, Firefox 20+ */
-
padding: 20px;
+
flex-wrap:nowrap;
-
border-bottom: 2px dotted black;
+
justify-content:space-around;
-
background-color:#5E412F;
+
flex-direction:row;
-
padding:10px 90px;
+
margin: auto;
-
}
+
}
-
div#description_area h2 {
+
div.quick_link_row div{
-
text-align:center;
+
flex-grow:1;
-
font-size: 30px;
+
height:200px;
-
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
+
width:145px;
-
font-weight:900;
+
}
-
display:block;
+
div.quick_link_row h4{
-
text-decoration:underline;
+
text-align:center;
-
color:#78C0A8;
+
}
-
text-transform:uppercase;
+
div.quick_link_row a{
-
}
+
text-align:center;
-
div#description_area p{
+
color:#666
-
text-indent:20px;
+
}
-
color:white;
+
 
-
}
+
div.quick_link_row img{
-
table.start_up_link_area{
+
width:90%;
-
width:100%;
+
max-height:150px;
-
}
+
-webkit-transition: width 0.5s;
-
td.start_up_link_button{
+
transition: width 0.5s;
-
width:25%;
+
}
-
height:300px;
+
div.quick_link_row > div:hover img{
-
}
+
width:100%;
-
div.start_up_link_container{
+
}
-
width:90%;
+
 
-
height:300px;
+
div.quick_link_row > div:hover{
-
padding:5px 10px 5px 10px;
+
flex-grow:2;
-
-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);
+
.quick_link_sub {
-
box-shadow:        0px 5px 2px 0px rgba(50, 50, 50, 0.69);
+
border-width: 1px solid  #db9356;
-
}
+
border-radius: 10px;
-
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{
+
float: left;
-
background-color:#F0A830;
+
margin: 5px;
-
}
+
padding: 5px;
-
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{
+
text-align: center;
-
background-color:#78C0A8;
+
width: 85%;
-
}
+
background-color:transparent;
 +
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;
 +
}
 +
.content_1 h3 a {
 +
color: brown;
 +
}
 +
table.content_table td{
 +
width:50%;
 +
vertical-align:top;
 +
padding: 30px;
 +
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;
 +
}
 +
div#description_area a {
 +
color: orange;
 +
}
 +
div#description_area .catalog_table a {
 +
color: blue;
 +
}
 +
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:#36C1A6;
 +
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: #C1E3D8;
 +
}
 +
.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:#FFCA75;
 +
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: #FFE3B4;
 +
}
 +
 
 +
div#medal_reqire_container{
 +
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+ */
 +
-webkit-flex-flow: row nowrap;
 +
  -moz-flex-flow: row nowrap;
 +
  -ms-flex-flow: row nowrap;
 +
  flex-flow: row nowrap;
 +
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;
 +
}
 +
 
 +
div.achievement_container{
 +
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;
 +
border: solid 5px;
 +
border-radius:10px;
 +
text-align:center;
 +
font-weight: bold;
 +
position:fixed;
 +
top:85%;
 +
right:50px;
 +
display: none;
 +
color:#383838;
 +
text-align:center;
 +
background-color:#78C0a8;
 +
font-size: 12px;
 +
z-index:100;
 +
padding:0px 15px 15px 15px;
 +
display:block;
 +
}
 +
.scrollToTop:hover,.nextPage:hover{
 +
text-decoration:none;
 +
}
 +
/*scroll to top / next page button end*/
 +
/*additional csssssss*/
 +
 
 +
p.under_line{
 +
border-bottom: 1px solid black;
 +
}

Latest revision as of 01:06, 18 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

}

  1. 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); }

  1. 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("HKUST_2014_pneumosensor_banner.png"); 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;

  1. left: 410px;

width: 97%; } nav ul.access-menu:first-child li.access_logo:first-child{ float:left; background-color: transparent; border: medium none; left: 22%; top: -75px; transition: none 0s ease 0s ; } .access_logo:first-child img { height: 100px; } nav ul.access-menu:nth-child(2) { position: relative; top: -20px; } .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*/


  1. slide{

width: 100%; height: 600px; overflow:hidden; margin: 0px auto; box-shadow: 0 8px 6px -6px rgba(0,0,0,1); }

  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: -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: 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: -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:nowrap; justify-content:center; flex-direction:row; margin:auto; }

div.quick_link_row{ padding:5px 10px; background: none; 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:nowrap; justify-content:space-around; flex-direction:row; margin: auto; } 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:transparent; 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; } .content_1 h3 a { color: brown; } table.content_table td{ width:50%; vertical-align:top; padding: 30px; 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; } div#description_area a { color: orange; } div#description_area .catalog_table a { color: blue; } 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:#36C1A6; 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: #C1E3D8; } .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:#FFCA75; 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: #FFE3B4; }

div#medal_reqire_container{ 

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+ */

-webkit-flex-flow: row nowrap; 

 -moz-flex-flow: row nowrap;
 -ms-flex-flow: row nowrap;
 flex-flow: row nowrap;

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

div.achievement_container{ 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; border: solid 5px; border-radius:10px; text-align:center; font-weight: bold; position:fixed; top:85%; right:50px; display: none; color:#383838; text-align:center; background-color:#78C0a8; font-size: 12px; z-index:100; padding:0px 15px 15px 15px; display:block; } .scrollToTop:hover,.nextPage:hover{ text-decoration:none; } /*scroll to top / next page button end*/ /*additional csssssss*/

p.under_line{ border-bottom: 1px solid black; }

Retrieved from "http://2014.igem.org/Template:Team:Hong_Kong_HKUST/indexpage.css"