Team:Groningen/CSS/DefaultPage

From 2013.igem.org

(Difference between revisions)
 
(254 intermediate revisions not shown)
Line 1: Line 1:
 +
/*FONT LAYOUT*/
 +
 +
h1{
 +
color:#002355;
 +
text-align:center;
 +
font-weight:bold;
 +
font-size:35px;
 +
 +
border-bottom: 1px solid #0047AB;
 +
}
 +
 +
h2{
 +
color:#002355;
 +
border-bottom: 0px solid #aaa;
 +
text-align:left;
 +
font-weight:bold;
 +
font-size:25px;
 +
 +
}
 +
 +
h3{
 +
color:#0047AB;
 +
text-align:left;
 +
font-weight:bold;
 +
font-size:20px;
 +
 +
}
 +
 +
h4{
 +
color:#0047AB;
 +
text-align:left;
 +
 +
font-size:18px;
 +
}
 +
 +
h5{
 +
 +
font-size:15px;
 +
}
 +
 +
h2#special{
 +
text-transform:none;
 +
}
 +
 +
h3#special{
 +
text-transform:none;
 +
}
 +
 +
h4#special{
 +
text-transform:none;
 +
}
 +
 +
h5#special{
 +
text-transform:none;
 +
}
 +
 +
b{
 +
color:#002355;
 +
}
 +
 +
h1#protocol{
 +
text-transform:none;
 +
}
 +
 +
h2#protocol{
 +
text-transform:none;
 +
}
 +
 +
h3#protocol{
 +
text-transform:none;
 +
}
 +
 +
h4#protocol{
 +
text-transform:none;
 +
}
 +
 +
h5#protocol{
 +
text-transform:none;
 +
}
 +
 +
 +
p{
 +
text-align:left;
 +
font-family:"Verdana";
 +
}
 +
 +
 +
/* Table layout*/
 +
 +
table{
 +
background-color:transparent;
 +
}
 +
 +
table#normal{
 +
border-collapse:collapse;
 +
table-layout: fixed;
 +
background: white;
 +
}
 +
 +
 +
table#normal th{
 +
background-color:#0047AB;
 +
color:white;
 +
 +
overflow: hidden;
 +
text-align:center;
 +
border: 2px solid #002355;
 +
}
 +
 +
table#normal td{
 +
overflow: hidden;
 +
padding:4px;
 +
text-align:center;
 +
border: 2px solid #002355;
 +
}
 +
 +
table#Frontpage{
 +
border: none;
 +
background: transparent;
 +
}
 +
table#Frontpage td{
 +
border: none;
 +
text-align:left;
 +
}
 +
 +
table#layout{
 +
border: none;
 +
table-layout: auto;
 +
border-collapse:collapse;
 +
table-layout: fixed;
 +
background: white;
 +
}
 +
 +
table#layout td{
 +
border: none;
 +
overflow: visible;
 +
width: auto;
 +
text-align:left;
 +
border-top: 2px solid #e5e5e5;
 +
}
 +
 +
table#layout th{
 +
background-color:#fff;
 +
border: none;
 +
overflow: visible;
 +
}
 +
 +
 +
table#sponsors{
 +
border-collapse:collapse;
 +
table-layout: fixed;
 +
background: white;
 +
margin-left: auto;
 +
margin-right: auto;
 +
table-layout: fixed;
 +
width:90%;
 +
border: none;
 +
}
 +
 +
table#sponsors th{
 +
border: none;
 +
}
 +
 +
table#sponsors td{
 +
border: none;
 +
vertical-align:middle;
 +
text-align:center;
 +
}
 +
 +
/*IMAGE LAYOUT */
 +
 +
/* images of sponsors in the footer */
 +
 +
img#sponsors{
 +
opacity:0.7;
 +
}
 +
img#sponsors:hover{
 +
opacity:1;
 +
}
 +
 +
 +
/* unvisited link */
 +
a:link {
 +
color:#0047AB;
 +
}
 +
     
 +
/* visited link */
 +
a:visited {
 +
color:#F68924;
 +
}
 +
 +
/* unvisited link */
 +
a#special:link {
 +
color:#0047AB; !important
 +
}
 +
     
 +
/* visited link */
 +
a#special:visited {
 +
color:#F68924; !important
 +
}
 +
 +
/*PAGE LAYOUT*/
 +
/*Splitting into two columns*/
/*Splitting into two columns*/
#header {
#header {
 +
  position: abolute;
 +
  top: 0px;
 +
  left: 0px;
   clear:both;
   clear:both;
   float:left;
   float:left;
   width:100%;
   width:100%;
 +
  min-width: 700px;
 +
  background:#e5e5e5;
}
}
Line 12: Line 220:
   width:100%;
   width:100%;
   border-top:1px solid #000;
   border-top:1px solid #000;
 +
  min-width: 700px;
 +
  background:#e5e5e5;
}
}
Line 29: Line 239:
width:100%; /* width of whole page */
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
overflow:hidden; /* This chops off any overhanging divs */
 +
        min-width: 700px;
}
}
/* common column settings */
/* common column settings */
Line 38: Line 249:
position:relative;
position:relative;
}
}
-
.col1,
+
 
-
.col2,
+
.mainContent{
-
.col3 {
+
position:relative;
 +
  padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
 +
only padding top and bottom is included here, make it whatever value you need */
 +
overflow:hidden;
 +
}
 +
.navigation{
 +
float:left;
 +
position:relative;
 +
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
 +
only padding top and bottom is included here, make it whatever value you need */
 +
overflow:hidden;
 +
 
 +
}
 +
.widgets {
float:left;
float:left;
position:relative;
position:relative;
Line 49: Line 273:
/* 3 Column settings */
/* 3 Column settings */
.threecol {
.threecol {
-
background:#eee; /* right column background colour */
+
background: #e5e5e5; /* right column background colour */
}
}
.threecol .colmid {
.threecol .colmid {
right:25%; /* width of the right column */
right:25%; /* width of the right column */
-
background:#fff; /* center column background colour */
 
}
}
.threecol .colleft {
.threecol .colleft {
-
right:50%; /* width of the middle column */
+
right:51%; /* width of the middle column */
-
background:#f4f4f4; /* left column background colour */
+
}
}
-
.threecol .col1 {
+
.threecol .mainContent {
-
width:46%; /* width of center column content (column width minus padding on either side) */
+
/* width:46%; width of center column content (column width minus padding on either side) */
-
left:102%; /* 100% plus left padding of center column */
+
/* left:0.5%; 100% plus left padding of center column */
 +
        background: #e5e5e5;
 +
        margin-right:205px;
}
}
-
.threecol .col2 {
+
.threecol .navigation {
-
width:21%; /* Width of left column content (column width minus padding on either side) */
+
width:168px; /* Width of left column content (column width minus padding on either side) */
-
left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
+
/* left:0.5%; width of (right column) plus (center column left and right padding) plus (left column left padding) */  
 +
        min-height: 600px; 
 +
    display: inline-block;
 +
     
}
}
-
.threecol .col3 {
+
.threecol .widgets {
-
width:21%; /* Width of right column content (column width minus padding on either side) */
+
        float: right;
-
left:85%; /* Please make note of the brackets here:
+
/* Width of right column content (column width minus padding on either side) */
-
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
+
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
 +
background: green;
 +
    display: inline-block;
}
}
 +
 +
Line 80: Line 311:
#menubar{
#menubar{
display: block;
display: block;
-
background-color:transparent;
 
}
}
#top-section {
#top-section {
     position: relative;
     position: relative;
     height: 0px;
     height: 0px;
-
     width: 100%;
+
     width: 99%;
#    margin-left: 10px;
#    margin-left: 10px;
margin: 0 auto 0 auto;
margin: 0 auto 0 auto;
Line 97: Line 327:
     width:  99%;
     width:  99%;
#    margin-left: 10px;
#    margin-left: 10px;
-
margin: 0 auto;
+
margin: 0px auto;
-
     padding: 5px 5px 5px 5px;;
+
     padding: 7px 5px 5px 5px;;
     background: white;
     background: white;
     color: black;
     color: black;
Line 111: Line 341:
     position: relative;
     position: relative;
     font-size: 127%;
     font-size: 127%;
-
     width: 99%;
+
     width: 100%;
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;

Latest revision as of 03:03, 5 October 2013

/*FONT LAYOUT*/

h1{ color:#002355; text-align:center; font-weight:bold; font-size:35px;

border-bottom: 1px solid #0047AB; }

h2{ color:#002355; border-bottom: 0px solid #aaa; text-align:left; font-weight:bold; font-size:25px;

}

h3{ color:#0047AB; text-align:left; font-weight:bold; font-size:20px;

}

h4{ color:#0047AB; text-align:left;

font-size:18px; }

h5{

font-size:15px; }

h2#special{ text-transform:none; }

h3#special{ text-transform:none; }

h4#special{ text-transform:none; }

h5#special{ text-transform:none; }

b{ color:#002355; }

h1#protocol{ text-transform:none; }

h2#protocol{ text-transform:none; }

h3#protocol{ text-transform:none; }

h4#protocol{ text-transform:none; }

h5#protocol{ text-transform:none; }


p{ text-align:left; font-family:"Verdana"; }


/* Table layout*/

table{ background-color:transparent; }

table#normal{ border-collapse:collapse; table-layout: fixed; background: white; }


table#normal th{ background-color:#0047AB; color:white;

overflow: hidden; text-align:center; border: 2px solid #002355; }

table#normal td{ overflow: hidden; padding:4px; text-align:center; border: 2px solid #002355; }

table#Frontpage{ border: none; background: transparent; } table#Frontpage td{ border: none; text-align:left; }

table#layout{ border: none; table-layout: auto; border-collapse:collapse; table-layout: fixed; background: white; }

table#layout td{ border: none; overflow: visible; width: auto; text-align:left; border-top: 2px solid #e5e5e5; }

table#layout th{ background-color:#fff; border: none; overflow: visible; }


table#sponsors{ border-collapse:collapse; table-layout: fixed; background: white; margin-left: auto; margin-right: auto; table-layout: fixed; width:90%; border: none; }

table#sponsors th{ border: none; }

table#sponsors td{ border: none; vertical-align:middle; text-align:center; }

/*IMAGE LAYOUT */

/* images of sponsors in the footer */

img#sponsors{ opacity:0.7; } img#sponsors:hover{ opacity:1; }


/* unvisited link */ a:link { color:#0047AB; }

/* visited link */ a:visited { color:#F68924; }

/* unvisited link */ a#special:link { color:#0047AB; !important }

/* visited link */ a#special:visited { color:#F68924; !important }

/*PAGE LAYOUT*/

/*Splitting into two columns*/

  1. header { 
 position: abolute;
 top: 0px;
 left: 0px;
 clear:both;
 float:left;
 width:100%;
 min-width: 700px;
 background:#e5e5e5;

}


  1. footer { 
 clear:both;
 width:100%;
 border-top:1px solid #000;
 min-width: 700px;
 background:#e5e5e5;

}

  1. layoutdims {

clear:both; background:#eee; border-top:4px solid #000; margin:0; padding:6px 15px !important; text-align:right; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ 

       min-width: 700px;

} /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; /* width of page */ position:relative; }

.mainContent{ position:relative; 

 	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead

only padding top and bottom is included here, make it whatever value you need */ overflow:hidden; } .navigation{ float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow:hidden;

} .widgets { float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow:hidden; } /* 3 Column settings */ .threecol { background: #e5e5e5; /* right column background colour */ } .threecol .colmid { right:25%; /* width of the right column */ } .threecol .colleft { right:51%; /* width of the middle column */ } .threecol .mainContent { /* width:46%; width of center column content (column width minus padding on either side) */ /* left:0.5%; 100% plus left padding of center column */ 

       background: #e5e5e5;	
       margin-right:205px;

} .threecol .navigation { width:168px; /* Width of left column content (column width minus padding on either side) */ /* left:0.5%; width of (right column) plus (center column left and right padding) plus (left column left padding) */ 

       min-height: 600px;  
   display: inline-block;

} .threecol .widgets { 

       float: right;

/* Width of right column content (column width minus padding on either side) */ (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ background: green; 

   display: inline-block;

}



/*Suppress iGEM defaults from iGEM 2012 Groningen*/ a[title="Main Page"]{display: none;} .firstHeading{display: none;} .noprint{display: none;}

  1. menubar{

display: block; }

  1. top-section { 
   position: relative;
   height: 0px;
   width: 99%;
  1. margin-left: 10px;

margin: 0 auto 0 auto; 

   border-left: 1px solid #44444;
   border-right: 1px solid #44444;
   border-bottom: 1px solid #44444;

}

  1. content { 
   position: relative;
   width:  99%;
  1. margin-left: 10px;

margin: 0px auto; 

   padding: 7px 5px 5px 5px;;
   background: white;
   color: black;
   border-left: 1px solid #444444;
   border-right: 1px solid #444444;
   line-height: 1.5em;
   z-index: 2;

}

/* scale back up to a sane default */

  1. globalWrapper { 
   position: relative;
   font-size: 127%;
   width: 100%;
   margin: 0;
   padding: 0;
   padding-bottom: 10px;

}

  1. search-controls{display: none;}
  2. contentSub{display: none;}
  3. catlinks{display: none;}
  4. footer-box{display: none;}
  5. p-logo{display: block;}

/* Remove comments to remove links towards accounts etc */ /*#top-section { display: block; position: relative; height: 98px; width: 975px; margin: -20px auto; TODO put correct colours here! border-left: 1px solid rgb(118,28,17); border-right: 1px solid rgb(118,28,17); border-bottom: 1px solid rgb(118,28,17); }*/

<script type="text/javascript"> 

   $(document).ready(function() {
       $("p").filter( function() {
           return $.trim($(this).html()) == ;
       }).remove()
   });

</script>

Retrieved from "http://2013.igem.org/Team:Groningen/CSS/DefaultPage"