Template:Team:Hong Kong HKUST/indexpage.css

From 2014.igem.org

(Difference between revisions)
Line 4: Line 4:
   margin:0;
   margin:0;
   font: 14px Helvetica;
   font: 14px Helvetica;
-
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 
}
}
html, body, .wrapper {
html, body, .wrapper {
-
     background-color: #000;
+
     background-color: white;
}
}
#content_container {
#content_container {
Line 30: Line 29:
h1 {
h1 {
-
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
   font-family: HelveticaNeue-UltraLight;
   font-size: 100px;
   font-size: 100px;
   text-align: center;
   text-align: center;
Line 62: Line 61:
position: relative;
position: relative;
margin-top: 15px;
margin-top: 15px;
-
    display: inline-block;
+
        display: inline-block;
-
    white-space: nowrap
+
        white-space: nowrap
Line 134: Line 133:
#slide{
#slide{
-
width: 100%;
+
  width: 100%;
-
height: 600px;
+
  height: 600px;
-
overflow:hidden;
+
  overflow:hidden;
-
margin: 30px auto;
+
  margin: 30px auto;
-
box-shadow: 0 8px 6px -6px rgba(0,0,0,1);
+
  box-shadow: 0 8px 6px -6px rgba(0,0,0,1);
}
}
#slide div{
#slide div{
-
display:block;
+
  display:block;
-
width:0;
+
  width:0;
-
float: left;
+
  float: left;
-
-webkit-transition: all 0.75s;
+
  -webkit-transition: all 0.75s;
-
-moz-transition: all 0.75s;
+
  -moz-transition: all 0.75s;
-
-o-transition:all 0.75s;
+
  -o-transition:all 0.75s;
-
transition: all 0.75s;
+
  transition: all 0.75s;
}
}
img.picture {
img.picture {
-
width:960px;
+
  width:960px;
}
}
button.prev, button.next {
button.prev, button.next {
-
position: absolute;
+
  position: absolute;
-
z-index: 999;
+
  z-index: 999;
-
display: block;
+
  display: block;
-
padding:0 10px;
+
  padding:0 10px;
-
width: auto;
+
  width: auto;
-
height:350px;
+
  height:350px;
-
background: rgba(0,0,0,0);
+
  background: rgba(0,0,0,0);
-
color: #ffffff;
+
  color: #ffffff;
-
font-size:26px;
+
  font-size:26px;
-
cursor: pointer;
+
  cursor: pointer;
-
border:none;
+
  border:none;
-
outline:none;
+
  outline:none;
}
}
button.prev:hover, button.next:hover {
button.prev:hover, button.next:hover {
-
background: rgba(0,0,0,0.8);
+
  background: rgba(0,0,0,0.8);
}
}
button.next {
button.next {
-
margin-left:926px;
+
  margin-left:926px;
}
}
div.project_area{
div.project_area{
-
margin:0 auto;
+
  margin:0 auto;
-
border: 1px solid black;  
+
  border: 1px solid black;  
-
background-color:#006699;
+
  background-color:#006699;
-
padding:15px;
+
  padding:15px;
   }
   }
.project_area h4, .project_area p{
.project_area h4, .project_area p{
Line 184: Line 183:
}
}
div.project_box{
div.project_box{
-
border: 1px solid gray;
+
border: 1px solid gray;
-
width: 450px;
+
width: 450px;
-
height: 150px;
+
height: 150px;
-
text-align: center;
+
text-align: center;
-
background-color:#006699;
+
background-color:#006699;
}
}
div.project_box:hover {
div.project_box:hover {
Line 222: Line 221:
}
}
table.site_map_table td{
table.site_map_table td{
-
vertical-align: text-top;
+
vertical-align: text-top;
}
}
Line 231: Line 230:
}
}
table.site_map_table td a{
table.site_map_table td a{
-
color: #eee;
+
color: #eee;
}
}
.site_map_table h4{
.site_map_table h4{
Line 252: Line 251:
margin:0 auto;
margin:0 auto;
padding:0 auto;
padding:0 auto;
 +
display:block;
}
}
div.banner_area img{
div.banner_area img{
-
width:100%;
+
width:100%;
-
height: 150px;
+
height: 150px;
-
padding-top: 10px;
+
padding-top: 10px;
}
}
div.content_1{
div.content_1{
width:100%;
width:100%;
-
margin-top:80px;
+
margin-top:20px;
}
}
div.content_1 h3{
div.content_1 h3{
Line 275: Line 275:
table.content_table p {
table.content_table p {
font-size: 18px;
font-size: 18px;
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
font-family: "helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
line-height: 1.5em;
line-height: 1.5em;
}
}
Line 284: Line 284:
}
}
td.content_cell img{
td.content_cell img{
-
width:100%;
+
width:100%;
-
display:inline;
+
display:inline;
}
}
Line 295: Line 295:
td.content_cell h5{
td.content_cell h5{
font-size: 19px;
font-size: 19px;
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
font-weight:bold;
font-weight:bold;
display:inline;
display:inline;
Line 305: Line 305:
td.content_cell h6{
td.content_cell h6{
font-size: 15px;
font-size: 15px;
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
font-weight:normal;
font-weight:normal;
display:inline;
display:inline;
Line 328: Line 328:
text-align:center;
text-align:center;
font-size: 30px;
font-size: 30px;
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
font-weight:900;
font-weight:900;
display:block;
display:block;
Line 384: Line 384:
}
}
-
/*ksdjflkjfsj dedicate to ERIC */
 
div#medal_reqire_container{
div#medal_reqire_container{
display: flex;
display: flex;
Line 404: Line 403:
margin:10px;
margin:10px;
}
}
-
/*akdsjfhaksjfdhkjhsadf end of dedication*/
 

Revision as of 19:32, 2 October 2014

body { width: 100%; 

 padding:0;
 margin:0;
 font: 14px Helvetica;

} html, body, .wrapper { 

   background-color: white;

}

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

}

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

white-space: nowrap;
}

.access-menu{ display: table; margin: 1em auto;

}

.access-menu > li{ background: #554433; display: inline-block; position: relative; margin-top: 15px; 

       display: inline-block;
       white-space: nowrap


}

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


  1. slide{ 
 width: 100%;
 height: 600px;
 overflow:hidden;
 margin: 30px 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;

} 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; margin: 20px auto; } 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; display:block; } div.banner_area img{ width:100%; height: 150px; padding-top: 10px; } div.content_1{ width:100%; margin-top:20px; } 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; vertical-align:top; } 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;

}

p.first_letter_enhanced::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; } .embedded_image_right{ float: right; 

   margin: 20px;

width:50%; } .embedded_image_left{ float: left; 

   margin: 20px;

width:50%; } 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; }

div#medal_reqire_container{ display: flex; 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: tomato; padding: 10px; margin:10px; }

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