Team:Trieste/static/main.css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
    html, body {
+
html, body {
-
    margin: 0px;
+
    margin: 0px;
-
    padding: 0px;
+
    padding: 0px;
-
    border: 0px;
+
    border: 0px;
-
}
+
}
-
#header {
+
-
    top: 0px;
+
-
    right: 0px;
+
-
    width: 100%;
+
-
    height: 100px;
+
-
    color: white;
+
-
    background-image: url('https://static.igem.org/mediawiki/2012/b/b2/Header_bg.jpg');
+
-
}
+
-
#header > h1 {
+
#menu a {
-
    width: 28em;
+
    color: white;
-
    position: relative;
+
    text-decoration: none;
-
    left: 25%;
+
}
-
    margin-left: 5%;
+
-
    margin-bottom: 0px;
+
-
    margin-top: 0.2em;
+
-
}
+
-
#header > h3 {
+
#header {
-
    width: 10em;
+
    top: 0px;
-
    position: relative;
+
    right: 0px;
-
    left: 25%;
+
    width: 100%;
-
    margin-top: 0px;
+
    height: 100px;
-
    padding-top: 0.5em;
+
    color: white;
-
    margin-bottom: 0.2em;
+
    background-image: url('img/header_bg.jpg');
-
}
+
}
-
#logo {
+
#header > h1 {
-
    position: absolute;
+
    width: 28em;
-
    top: 0px;
+
    position: relative;
-
    left: 10%;
+
    left: 25%;
-
    width: 120px;
+
    margin-left: 5%;
-
    height: 200px;
+
    margin-bottom: 0px;
-
    background-image: url('https://static.igem.org/mediawiki/2012/3/33/Logo_bg.png');
+
    margin-top: 0.2em;
-
    background-repeat: no-repeat;
+
}
-
}
+
-
#menu {
+
#header > h3 {
-
    width: 100%;
+
    width: 10em;
-
    padding-top: 0.5em;
+
    position: relative;
-
    padding-bottom: 0.5em;
+
    left: 25%;
-
    background-color: black;
+
    margin-top: 0px;
-
    color: white;
+
    padding-top: 0.5em;
-
}
+
    margin-bottom: 0.2em;
 +
}
-
#container {
+
#logo {
-
    width: 100%;
+
    position: absolute;
-
    background-color: #e7e7e7;
+
    top: 0px;
-
    background-image: url('https://static.igem.org/mediawiki/2012/6/6d/Container_bg.jpg');
+
    left: 10%;
-
    background-repeat: no-repeat;
+
    width: 120px;
-
    padding-bottom: 2em;
+
    height: 200px;
-
}
+
    background-image: url('img/logo_bg.png');
 +
    background-repeat: no-repeat;
 +
}
-
#content {
+
#menu {
-
    margin-left: auto;
+
    width: 100%;
-
    margin-right: auto;
+
    padding-top: 0.5em;
-
    padding-top: 15em;
+
    padding-bottom: 0.5em;
-
    width: 970px;
+
    background-color: black;
-
    background-image: url('https://static.igem.org/mediawiki/2012/5/55/Content_bg.jpg');
+
    color: white;
-
    background-color: white;
+
}
-
    background-repeat: no-repeat;
+
-
}
+
-
#col1 {
+
#menu ul li{
-
    width: 30%;
+
    display: inline;
-
    float: left;
+
    font-variant: small-caps;
-
}
+
    font-size: 1.2em;
-
+
    margin-left: 0.5em;
-
#col2 {
+
}
-
    width: 30%;
+
-
    margin-left: 37.5%;
+
-
}
+
-
#col3 {
+
#menu ul {
-
    width: 25%;
+
    margin: 0px auto;
-
    margin-top: 5em;
+
    text-align: center;
-
    float: right;
+
}
-
}
+
-
#col1 > h1 {
+
#menu img {
-
    background-color: blue;
+
    float: right;
-
}
+
    position: relative;
-
+
    bottom: 35px;
-
#col2 > h1 {
+
    right: 10%;
-
    background-color: red;
+
    background-color: white;
-
}
+
    padding: 5px;
-
+
    border-radius: 5px;
-
#col3 > h1 {
+
}
-
    background-color: green;
+
-
}
+
-
#content p {
+
#container {
-
    padding: 10px;
+
    width: 100%;
-
    background-color: white;
+
    background-color: #e7e7e7;
-
    margin: auto 1em;
+
    background-image: url('img/container_bg.jpg');
-
    border-radius: 5px;
+
    background-repeat: no-repeat;
-
    text-align: justify;
+
    padding-bottom: 2em;
-
}
+
}
-
#content h1 {
+
#content {
-
    height: 2em;
+
    margin-left: auto;
-
    color: white;
+
    margin-right: auto;
-
    background-image: url('https://static.igem.org/mediawiki/2012/5/53/Blue_bg.png');
+
    padding-top: 10em;
-
    background-repeat: no-repeat;
+
    width: 970px;
-
    padding-top: 0.7em;
+
    background-image: url('img/content_bg.jpg');
-
    padding-left: 1.5em;
+
    background-color: white;
-
    margin-top: 0px;
+
    background-repeat: no-repeat;
-
    margin-bottom: -25px;
+
    border-bottom-right-radius: 5px;
-
}
+
    border-bottom-left-radius: 5px;
 +
    text-align: justify;
 +
}
 +
 
 +
#footer {
 +
    width: 990px;
 +
    background-color: white;
 +
    padding-top: 0.2em;
 +
    margin-top: 2px;
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    border-radius: 5px;
 +
}
 +
 
 +
#footer img {
 +
    margin-top: 0px;
 +
    margin-left: 2em;
 +
    margin-bottom: 2em;
 +
}
 +
 
 +
#footer h1 {
 +
    margin-left: 1.5em;
 +
}
 +
 
 +
.column {
 +
    position: relative;
 +
}
 +
 
 +
#col1 {
 +
    width: 36%;
 +
    right: 10px;
 +
    float: left;
 +
}
 +
 
 +
#col1 .inner_column {
 +
    border-top-right-radius: 25px;
 +
}
 +
 
 +
#col2 {
 +
    width: 36%;
 +
    margin-left: 35%;
 +
    z-index: 3
 +
}
 +
 
 +
#col3 {
 +
    width: 30%;
 +
    margin-top: 5em;
 +
    left: 10px;
 +
    float: right;
 +
    z-index: 5;
 +
}
 +
 
 +
.inner_column {
 +
    position: relative;
 +
    padding: 0.5em 2em;
 +
    border-radius: 5px;
 +
    background-color: white;
 +
    z-index: 1;
 +
}
 +
 
 +
div.column h2 {
 +
    font-variant: small-caps;
 +
    font-size: 1.3em;
 +
    font-style: normal;
 +
    padding-bottom: 0.8em;
 +
    border-bottom: 1px dotted;
 +
}
 +
 
 +
#content h1 {
 +
    position: relative;
 +
    top: 25px;
 +
    right: 10px;
 +
    height: 2em;
 +
    color: white;
 +
    background-image: url('img/blue_bg.png');
 +
    background-repeat: no-repeat;
 +
    padding-top: 0.7em;
 +
    padding-left: 1em;
 +
    margin: 0px;
 +
}

Revision as of 08:56, 31 July 2012

html, body {

   margin: 0px;
   padding: 0px;
   border: 0px;

}

  1. menu a {
   color: white;
   text-decoration: none;

}

  1. header {
   top: 0px;
   right: 0px;
   width: 100%;
   height: 100px;
   color: white;
   background-image: url('img/header_bg.jpg');

}

  1. header > h1 {
   width: 28em;
   position: relative;
   left: 25%;
   margin-left: 5%;
   margin-bottom: 0px;
   margin-top: 0.2em;

}

  1. header > h3 {
   width: 10em;
   position: relative;
   left: 25%;
   margin-top: 0px;
   padding-top: 0.5em;
   margin-bottom: 0.2em;

}

  1. logo {
   position: absolute;
   top: 0px;
   left: 10%;
   width: 120px;
   height: 200px;
   background-image: url('img/logo_bg.png');
   background-repeat: no-repeat;

}

  1. menu {
   width: 100%;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   background-color: black;
   color: white;

}

  1. menu ul li{
   display: inline;
   font-variant: small-caps;
   font-size: 1.2em;
   margin-left: 0.5em;

}

  1. menu ul {
   margin: 0px auto;
   text-align: center;

}

  1. menu img {
   float: right;
   position: relative;
   bottom: 35px;
   right: 10%;
   background-color: white;
   padding: 5px;
   border-radius: 5px;

}

  1. container {
   width: 100%;
   background-color: #e7e7e7;
   background-image: url('img/container_bg.jpg');
   background-repeat: no-repeat;
   padding-bottom: 2em;

}

  1. content {
   margin-left: auto;
   margin-right: auto;
   padding-top: 10em;
   width: 970px;
   background-image: url('img/content_bg.jpg');
   background-color: white;
   background-repeat: no-repeat;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   text-align: justify;

}

  1. footer {
   width: 990px;
   background-color: white;
   padding-top: 0.2em;
   margin-top: 2px;
   margin-right: auto;
   margin-left: auto;
   border-radius: 5px;

}

  1. footer img {
   margin-top: 0px;
   margin-left: 2em;
   margin-bottom: 2em;

}

  1. footer h1 {
   margin-left: 1.5em;

}

.column {

   position: relative;

}

  1. col1 {
   width: 36%;
   right: 10px;
   float: left;

}

  1. col1 .inner_column {
   border-top-right-radius: 25px;

}

  1. col2 {
   width: 36%;
   margin-left: 35%;
   z-index: 3

}

  1. col3 {
   width: 30%;
   margin-top: 5em;
   left: 10px;
   float: right;
   z-index: 5;

}

.inner_column {

   position: relative;
   padding: 0.5em 2em;
   border-radius: 5px;
   background-color: white;
   z-index: 1;

}

div.column h2 {

   font-variant: small-caps;
   font-size: 1.3em;
   font-style: normal;
   padding-bottom: 0.8em;
   border-bottom: 1px dotted;

}

  1. content h1 {
   position: relative;
   top: 25px;
   right: 10px;
   height: 2em;
   color: white;
   background-image: url('img/blue_bg.png');
   background-repeat: no-repeat;
   padding-top: 0.7em;
   padding-left: 1em;
   margin: 0px;

}