Template:Team:DukeHomePage/CSS

From 2014.igem.org

(Difference between revisions)
Line 23: Line 23:
</style>
</style>
 +
<style media="screen" type="text/css">
 +
@font-face {
 +
font-family: 'Raleway';
 +
src: url('<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Raleway:400,700,200,300,900,800" rel="stylesheet" type="text/css">') format('woff');
 +
}
 +
.igemlogo {
 +
position:absolute;
 +
z-index:200;
 +
padding:20px;
 +
}
 +
.slidingpics {
 +
background-color: #000;
 +
clear: both;
 +
height: 420px;
 +
margin-left: auto;
 +
margin-left: auto;
 +
padding:10px;
 +
position:relative;
 +
z-index:1;
 +
        overflow:hidden;
 +
        padding-bottom:30px;
 +
}
 +
.fourfocus {
 +
background-color: #000;
 +
color: white;
 +
padding: 15px;
 +
height: 380px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
padding-left:50px;
 +
        overflow:hidden;
 +
}
 +
.fourfocus p {
 +
color:#6A6A6A;
 +
}
 +
.fourfocus h2 {
 +
color: #FFFFFF;
 +
}
 +
.bottom {
 +
background-color: #000;
 +
color: #FFFFFF;
 +
padding: 35px 15px 15px 15px;
 +
height: 700px;
 +
clear: both;
 +
border-top-width: 1px;
 +
border-top-style: solid;
 +
border-top-color: rgba(153,153,153,0.7);
 +
}
 +
.footer {
 +
background-color: #000000;
 +
padding: 5px;
 +
text-align: center;
 +
display: block;
 +
font-size: 12px;
 +
color: #FFFFFF;
 +
}
 +
.footer h3 {
 +
font-size: 18px;
 +
text-transform: capitalize;
 +
text-align: center;
 +
border-bottom-width: thin;
 +
border-bottom: 1px solid rgba(255,255,255,0.3);
 +
color:#FFFFFF;
 +
}
 +
.footer a {
 +
text-decoration:none;
 +
color: #E94730;
 +
}
 +
.footer a:hover {
 +
color: blue;
 +
}
 +
#picbox {
 +
margin-left:auto;
 +
margin-right:auto;
 +
width:1000px;
 +
padding-top:50px;
 +
        overflow:hidden;
 +
}
 +
#boxes {
 +
width: 1000px;
 +
margin-left: auto;
 +
margin-right:auto;
 +
        overflow:hidden;
 +
}
 +
#fbox1 {
 +
float: left;
 +
width: 235px;
 +
margin-right: 20px;
 +
text-align:center;
 +
margin-left:auto;
 +
}
 +
#fbox2 {
 +
float: left;
 +
width: 235px;
 +
margin-right: 20px;
 +
text-align:center;
 +
}
 +
#fbox3 {
 +
float: left;
 +
width: 235px;
 +
text-align:center;
 +
margin-right: 20px;
 +
}
 +
#fbox4 {
 +
float: left;
 +
width: 235px;
 +
text-align:center;
 +
}
 +
.topbanner {
 +
background-color: #000000;
 +
padding: 5px;
 +
height: 250px;
 +
position:relative;
 +
z-index:100;
 +
}
 +
#logo {
 +
height: 110px;
 +
margin: 30px auto 0px auto;
 +
}
 +
#VGEM, #logo p {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#VGEM {
 +
text-align: center;
 +
text-transform: uppercase;
 +
color:#FFFFFF;
 +
}
 +
#VGEM span {
 +
color: #E94730;
 +
}
 +
#logo p#VGEM a {
 +
font-size: 60px;
 +
color: #FFF;
 +
        font-weight:400;
 +
}
 +
#logo p {
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-size: 25px;
 +
font-family: 'Raleway', sans-serif;
 +
color: #595959;
 +
}
 +
#logo p a {
 +
color:#595959;
 +
}
 +
#logo a {
 +
border: none;
 +
background: none;
 +
text-decoration: none;
 +
color: #1F1F1F;
 +
}
 +
#menu11 ul {
 +
text-transform: uppercase;
 +
font-size: 18px;
 +
line-height: 1.2em;
 +
clear: both;
 +
margin-left: auto;
 +
    margin-right:auto;
 +
    height:70px;
 +
    width:900px;       
 +
}
 +
#menu11 ul li{
 +
    display:block;
 +
    text-decoration:none;
 +
    padding:0px 0px 0px 10px;
 +
    width:150px;
 +
    height:55px;
 +
    border-left:6px dotted #fff;
 +
    float:left;
 +
}
 +
#menu11 ul li span{
 +
    display:block;
 +
}
 +
#menu11 ul li span.title{
 +
    color:#fff;
 +
list-style-type: none;
 +
}
 +
#menu11 ul li:hover{
 +
    border-left:10px dotted #E94730;
 +
}
 +
#menu11 ul li:hover span.title{
 +
list-style-type: none;
 +
}
 +
#menu11 ul li span.text{
 +
color: #325281;
 +
font-size: 14px;
 +
letter-spacing: 0px;
 +
visibility: hidden;
 +
line-height: 0px;
 +
padding-top: 8px;
 +
list-style-type: square;
 +
        background-color: #000000;
 +
        padding-bottom:2px;
 +
        padding-left:2px;
 +
        border-radius:10px;
 +
}
 +
#menu11 ul li:hover span.text{
 +
    visibility:visible;
 +
}
 +
#menu11 ul li:hover span.text a{
 +
    text-decoration:none;
 +
color:#66CCFF;
 +
}
 +
#images {
 +
    width: 900px;
 +
    height: 350px;
 +
    overflow: hidden;
 +
    position: relative;
 +
    margin: 20px auto;
 +
    }
 +
    #images img {
 +
    width: 900px;
 +
    height: 350px;
 +
    position: absolute;
 +
    top: 0;
 +
    left: -400px;
 +
    z-index: 2;
 +
    opacity: 0;
 +
    transition: all linear 500ms;
 +
    -o-transition: all linear 500ms;
 +
    -moz-transition: all linear 500ms;
 +
    -webkit-transition: all linear 500ms;
 +
    }
 +
    #images img:target {
 +
    left: 0;
 +
    z-index: 9;
 +
    opacity: 1;
 +
    }
 +
    #images img:first-child {
 +
    left: 0;
 +
    opacity:.9;
 +
    z-index:8;
 +
    }
 +
    #slider {
 +
    width:200px;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
}
 +
    #slider a {
 +
    text-decoration: none;
 +
    background: #E3F1FA;
 +
    border: 1px solid #C6E4F2;
 +
    padding: 4px 6px;
 +
    color: #222;
 +
    }
 +
    #slider a:hover {
 +
    background: #C6E4F2;
 +
    }
 +
/** WRAPPER */
 +
#featured-wrapper {
 +
overflow: hidden;
 +
width:1000px;
 +
padding: 25px 50px;
 +
background: #E54732;
 +
color: #2D2D2D;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
#btitle
 +
{
 +
margin-bottom: 30px;
 +
text-transform: uppercase;
 +
font-weight: 300;
 +
font-size: 22px;
 +
color: #FFF;
 +
}
 +
#featured-wrapper span
 +
{
 +
font-size: 18px !important;
 +
color: #323232;
 +
}
 +
#sponsors
 +
{
 +
float: left;
 +
width: 330px;
 +
margin-right: 24px;
 +
}
 +
#sponsors .style4
 +
{
 +
padding-top: 10px;
 +
}
 +
#dates
 +
{
 +
float: left;
 +
width: 370px;
 +
padding: 0px 20px;
 +
}
 +
#updates
 +
{
 +
float: left;
 +
width: 200px;
 +
}
 +
p, ol, ul {
 +
margin-top: 0px;
 +
}
 +
p {
 +
line-height: 180%;
 +
}
 +
a {
 +
color: #0000FF;
 +
}
 +
a:hover {
 +
text-decoration: none;
 +
}
 +
a img {
 +
border: none;
 +
}
 +
ul.style3
 +
{
 +
margin: 0;
 +
padding: 0;
 +
overflow: hidden;
 +
list-style: none;
 +
color: #6c6c6c
 +
}
 +
ul.style3 li
 +
{
 +
padding: 16px 0px 0px 0px;
 +
margin: 0 0 1em 0;
 +
}
 +
ul.style3 p
 +
{
 +
margin: 0;
 +
}
 +
ul.style3 a
 +
{
 +
display: block;
 +
text-decoration: none;
 +
color: #2D2D2D;
 +
}
 +
ul.style3 a:hover
 +
{
 +
text-decoration: underline;
 +
}
 +
ul.style3 h3
 +
{
 +
padding: 10px 0px 5px 0px;
 +
text-transform: uppercase;
 +
font-size: 14px;
 +
font-weight: 300;
 +
color: #FFFFFF;
 +
}
 +
ul.style3 .first
 +
{
 +
padding-top: 0;
 +
background: none;
 +
}
 +
ul.style3 .date
 +
{
 +
float: left;
 +
position: relative;
 +
width: 66px;
 +
height: 64px;
 +
margin: 0.5em 1.5em 0em 0.5em;
 +
padding: 20px 0em 0em 0em;
 +
background: #262626;
 +
border-radius: 5px;
 +
box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.1);
 +
line-height: normal;
 +
text-align: center;
 +
text-transform: uppercase;
 +
text-shadow: 0px 1px 0px rgba(0,0,0,.2);
 +
font-size: 12px;
 +
font-weight: 400;
 +
color: #FFF;
 +
}
 +
ul.style3 .date:after
 +
{
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 6px;
 +
}
 +
ul.style3 .date b
 +
{
 +
margin: 0;
 +
padding: 0;
 +
display: block;
 +
margin-top: -5px;
 +
font-size: 24px;
 +
font-weight: 700;
 +
color: #FFFFFF;
 +
}
 +
ul.style3 .date a
 +
{
 +
color: #FFFFFF !important;
 +
}
 +
ul.style3 .date a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
ul.style4
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
ul.style4 li
 +
{
 +
padding: 10px 0px 20px 0px;
 +
border-top: 1px solid rgba(255,255,255,0.3);
 +
}
 +
ul.style4 a
 +
{
 +
color: #2D2D2D;
 +
text-decoration: underline;
 +
}
 +
ul.style4 .first
 +
{
 +
padding-top: 0px;
 +
border-top: none;
 +
}
 +
/* Button Style 1 */
 +
.button-style {
 +
display: inline-block;
 +
margin-top: 20px;
 +
padding: 7px 20px;
 +
background: #272727;
 +
border-radius: 5px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
color: #FFFFFF;
 +
}
 +
.button-style a {
 +
color:#66CCFF;
 +
}
 +
.button-style-alt
 +
{
 +
background: #E94730;
 +
padding: 15px 20px;
 +
font-size: 14px;
 +
font-weight: 600;
 +
}
 +
</style>
</head>
</head>
</html>
</html>

Revision as of 18:08, 21 July 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeHomePage/CSS"