Template:Team:Hong Kong HKUST/indexpage.css

From 2014.igem.org

(Difference between revisions)
m
Line 86: Line 86:
   letter-spacing: 0.0625em;
   letter-spacing: 0.0625em;
}
}
-
 
-
/*----------------------------------drop down ---------------------------------*/
 
-
h1 {
 
-
font-size:60px;
 
-
}
 
-
 
-
p {
 
-
  font-size:20px;
 
-
}
 
-
nav {
 
-
margin:0 auto;
 
-
padding: 0 auto;
 
-
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 {
 
-
display:block;
 
-
padding:20px 10px 3px;
 
-
color:#FFF;
 
-
font-size:16px;
 
-
text-decoration:none;
 
-
font-family: Arial, 'Bree Serif', 'serif';
 
-
}
 
-
#nav_container a{
 
-
color:#FFF;
 
-
}
 
-
li a:hover { background-color: #000000; }
 
/*The access-menu start*/
/*The access-menu start*/
-
 
+
/* ============================================================================ */
.access-menu{
.access-menu{
display: table;
display: table;
Line 193: Line 146:
.access-submenu a{
.access-submenu a{
padding: .5em 1em;
padding: .5em 1em;
 +
}
 +
.access-menu img{
 +
height: 50px;
 +
width: 50px;
}
}
Line 202: Line 159:
background-color:#aaa;
background-color:#aaa;
}
}
 +
/* ============================================================================ */
/*The access-menu end*/
/*The access-menu end*/
 +
 +
 +
/*----------------------------------drop down ---------------------------------*/
 +
h1 {
 +
font-size:60px;
 +
}
 +
 +
p {
 +
  font-size:20px;
 +
}
 +
nav {
 +
margin:0 auto;
 +
padding: 0 auto;
 +
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 {
 +
display:block;
 +
padding:20px 10px 3px;
 +
color:#FFF;
 +
font-size:16px;
 +
text-decoration:none;
 +
font-family: Arial, 'Bree Serif', 'serif';
 +
}
 +
#nav_container a{
 +
color:#FFF;
 +
}
 +
li a:hover { background-color: #000000; }
 +
 +

Revision as of 03:25, 30 September 2014

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {

display: none; } /*-- hides default wiki settings --*/

  1. top-section { /*-- styling for default menu bar (edit, page,

history, etc.) --*/ background-color:black; border: 0 none; height: 20px; z-index: 100; top: 0; position: fixed; width: 100%; left: 0; margin-left: 0; }

  1. globalWrapper, #content { /*-- changes default wiki settings

--*/ width: 100%; height: 100%; border: 0px; background-color:#FCEBE6; margin: 0px; padding: 0px; }

html, body, .wrapper { /*-- changes default wiki settings --

  • /
background-color: #FCEBE6;

}

/*Changing default wiki setting. By Guillaume*/ .left-menu li a{ color:#5E412F; } .right-menu li a{ color:#5E412F; background-color:transparent; }

  1. menubar{

width:auto; }

/*End of changing default wiki setting.*/

body { width: 100%;

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

}

  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 ;
 background: #5E412F;
 color: #fff;
 font-weight:100;
 letter-spacing: 0.0625em;

}

/*The access-menu start*/ /* ============================================================================ */ .access-menu{ display: table; margin: 1em auto; }

.access-menu > li{ background: #333; display: inline-block; position: relative; }

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

-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 a:hover, .access-menu a:focus{ background: #369; outline: none; }

.access-submenu{ background: #444; 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; } .access-menu img{ height: 50px; width: 50px; }

.is-show{ left: auto; top: 100%; } li.indent_list{ background-color:#aaa; } /* ============================================================================ */ /*The access-menu end*/


/*----------------------------------drop down ---------------------------------*/ h1 { font-size:60px; }

p {

 font-size:20px;

} nav { margin:0 auto; padding: 0 auto; 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 { display:block; padding:20px 10px 3px; color:#FFF; font-size:16px; text-decoration:none; font-family: Arial, 'Bree Serif', 'serif'; }

  1. nav_container a{

color:#FFF; } li a:hover { background-color: #000000; }



/* The Dropdown Styles */ /* =================== */

/* Hide Dropdowns by Default */ nav ul ul { display: none; position: absolute; top: 50px; }

/* 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 */ nav ul ul ul li { position: absolute relative; } .fixed {

 position: fixed;
 z-index: 10;
 top: 0;
 width: 100%;

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

}


/* End of drop-down section*/

  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:#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{ 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_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; 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; } 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: 2em; } 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: #F0E68C; 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%; } .start_up_link_area h4 { color: inherit;

} .start_up_link_area p { color: inherit; } 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); } 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:#F0A830; color: #c0392b; } 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: #F8B038; color:#78C0A8; } 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:#78C0A8; color: #c0392b; } 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: #80C8B0; color:#F0A830; }