Team:DTU-Denmark/stylesheet2

From 2011.igem.org

(Difference between revisions)
(Created page with "/* Removing wiki-like stuff */ - →**************************: #toc, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { display:none;} /* Redesig...")
Line 50: Line 50:
     background: url("https://static.igem.org/mediawiki/2011/f/f0/Horisontal-line.png") repeat-x scroll 0 100% transparent;
     background: url("https://static.igem.org/mediawiki/2011/f/f0/Horisontal-line.png") repeat-x scroll 0 100% transparent;
     border: none;
     border: none;
-
     //margin-top: 40px;
+
     padding: 20px 0 5px;
-
     padding-bottom: 5px;}
+
    font-family: Arial;
 +
     font-size: 24px;
 +
    font-weight: bold;}
h3 {
h3 {
     font-size: 30px;}
     font-size: 30px;}
Line 159: Line 161:
     border-left: 1px solid #777777;}
     border-left: 1px solid #777777;}
#footer-panel h4 {
#footer-panel h4 {
-
     color: #666666;}
+
     color: #999999;
 +
    font-weight: bold;}
 +
#footer-panel p {
 +
    color: #CCCCCC;}
/* Slider (thanks to flowplayer.org) */
/* Slider (thanks to flowplayer.org) */
/*************************************/
/*************************************/
-
.slider {
 
-
        background: url(https://static.igem.org/mediawiki/2011/c/c0/DTU-Denmark2011-slider-.png) no-repeat;
 
-
width: 1000px;
 
-
height:480px;
 
-
    margin-left: -37px;
 
-
    margin-top: -15px;}
 
.scrollable {
.scrollable {
-
/* required settings */
+
/* required settinsg */
-
position:relative;
+
position: relative;
-
overflow:hidden;
+
overflow :hidden;
-
width: 870px;
+
    width: 963px;
-
height: 370px;
+
    height: 370px;
-
        /*background-color: #FAFAFA;*/
+
    border: 1px solid #FFFFFF;
-
        /*border-radius: 10px;*/
+
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-
        /*top: 58px;*/
+
    background: #FFFFFF;}
-
        /*left: 65px;*/
+
-
        margin-left: -20px;
+
-
        width: 962px;}
+
.scrollable .items {
.scrollable .items {
/* this cannot be too large */
/* this cannot be too large */
-
width:50000px;
+
width: 50000px;
-
position:absolute;}
+
position: absolute;}
.items div {
.items div {
-
float:left;
+
float: left;
-
width:870px;
+
width: 963px;
-
height:370px;
+
height: 370px;}
-
        border: 1px solid #EEE;}
+
.prev {
.prev {
         background: url(https://static.igem.org/mediawiki/2011/5/53/DTU-Denmark2011-slider-left.png) no-repeat;
         background: url(https://static.igem.org/mediawiki/2011/5/53/DTU-Denmark2011-slider-left.png) no-repeat;
         height: 40px;
         height: 40px;
         width: 42px;
         width: 42px;
-
         position: relative;
+
         position: absolute;
-
             top: -140px;
+
             left: -504px; /* floor(963/2) + 42 + 10 = 534 */
-
             left: -5px;
+
             top: 325px;
-
         cursor: pointer;}
+
        margin-left: 50%;
 +
         cursor: pointer;
 +
        border: 1px solid #FFFFFF;
 +
        border-radius: 20px;}
.next {
.next {
         background: url(https://static.igem.org/mediawiki/2011/9/91/DTU-Denmark2011-slider-right.png) no-repeat;
         background: url(https://static.igem.org/mediawiki/2011/9/91/DTU-Denmark2011-slider-right.png) no-repeat;
         height: 40px;
         height: 40px;
         width: 42px;
         width: 42px;
-
         position: relative;
+
        margin-right: 50%;
-
             top: -180px;
+
         position: absolute;
-
             left: 962px;
+
             right: -505px; /* ceil(963/2) + 42 + 10 = 535 */
-
         cursor:pointer;}
+
             top: 325px;
 +
         cursor: pointer;
 +
        border: 1px solid #FFFFFF;
 +
        border-radius: 20px;}
.disabled {
.disabled {
         visibility: hidden;}
         visibility: hidden;}

Revision as of 21:34, 13 September 2011

/* Removing wiki-like stuff */ /****************************/

  1. toc, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display:none;}

/* Redesigning the topmenu */ /***************************/ body { 

   margin: 10px 0 0 0;
   padding: 0;}
  1. top-section { 
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;}
  1. menubar { 
   font-size: 65%;
   top: -14px;}

.left-menu:hover { 

   background-color: transparent;}
  1. menubar li a { 
   background-color: transparent;}
  1. menubar:hover { 
   color: white;}
  1. menubar li a { 
   color: transparent;}
  1. menubar:hover li a { 
   color: white;}


/* Font style and general */ /**************************/

  1. content { 
   font-family: 'Lucida Sans Unicode',sans-serif;
   font-size: 14px;
   color: #444444;}

h2, h3, h4, h5, h6 { 

   border: none;
   font-weight: lighter;
   color: #444444;}

h1 { 

   border: none;
   color: #383838;
   text-shadow: 0 1px rgba(255, 255, 255, 0.5);
   font-size: 35px;
   margin: 0;
   padding: 18px 0 0 0;
   font-weight: bold;}

h2 { 

   background: url("Horisontal-line.png") repeat-x scroll 0 100% transparent;
   border: none;
   padding: 20px 0 5px;
   font-family: Arial;
   font-size: 24px;
   font-weight: bold;}

h3 { 

   font-size: 30px;}
  1. bodyContent h1, #bodyContent h2 { 
   margin-bottom: 0;}

ul { 

   margin: 5px 0 0 0;
   list-style-position: inside;}

hr { 

   height: 0;
   border-top: 1px solid #AAA;
   border-bottom: 1px solid #FFF;}

.clear { 

   clear: both;
   height: 0;
   padding: 0;
   margin: 0;
   border: none;
   visibility: hidden;}

.farve1 { 

       background-color: #FFCC00;}

.farve2 { 

       background-color: #FF9900;}

.farve3 { 

       background-color: #FF6600;}

.farve4 { 

       background-color: #FF0000;}

.farve5 { 

       background-color: #990000;}

.farve6 { 

       background-color: #FF0099;}

.farve7 { 

       background-color: #CC3399;}

.farve8 { 

       background-color: #990066;}

.farve9 { 

       background-color: #660066;}

.farve10 { 

       background-color: #990099;}

.farve11 { 

       background-color: #3366CC;}

.farve12 { 

       background-color: #33CCFF;}

.farve13 { 

       background-color: #99CC33;}

.farve14 { 

       background-color: #66CC00;}

.coloredBg { 

   font-size: 12px;
   font-weight: normal;
   color:#FFF;
   padding: 5px;}

/* Layout */ /**********/ body { 

   background: #808080;}
  1. content, #globalWrapper { 
   border: none;
   width: 100%;
   margin: 0;
   padding: 0;}

.centering { 

   margin: 0 auto;
   width: 965px;}
  1. header { 
   background: url("DTU-Denmark2011-5element.png") no-repeat right -30px #990000;
   height: 100px;
   width: 100%;
   border-top: 1px solid #660000;
   border-bottom: 1px solid #660000;}
  1. header .centering { 
   background: url("DTU-Denmark2011-temp-header.png") no-repeat top left transparent;
   height: 100px;}
  1. heading { 
   background: url("DTU-Denmark2011-bg.png") repeat #D7D7D7;
   height: 50px;
   border-top: 1px solid #FFFFFF;}
  1. innercontent { 
   background: url("DTU-Denmark2011-bg.png") repeat #D7D7D7;
   padding: 20px 0 0 0;}
  1. innercontent .centering .whitebox { 
   padding: 0 20px;
   background: url("DTU-Denmark2011-innercontent-bg.png") repeat-x #FFFFFF;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   width: 673px;
   border: 1px solid #FFFFFF;
   text-align: justify;
   margin: 5px 0;}

/* Footer */ /**********/

  1. footer-panel { 
   background: #333333;
   border-top: 1px solid #D9D9D9;}
  1. bodyContent { 
   background: #333333;}

.coloum-left { 

   width: 472px;
   float: left;
   padding: 0 10px 0 0;
   border-right: 1px solid #000000;}

.coloum-right { 

   width: 471px;
   float: right;
   padding: 0 0 0 10px;
   border-left: 1px solid #777777;}
  1. footer-panel h4 { 
   color: #999999;
   font-weight: bold;}
  1. footer-panel p { 
   color: #CCCCCC;}

/* Slider (thanks to flowplayer.org) */ /*************************************/ .scrollable { /* required settinsg */ position: relative; overflow :hidden; 

   width: 963px;
   height: 370px;
   border: 1px solid #FFFFFF;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   background: #FFFFFF;}

.scrollable .items { /* this cannot be too large */ width: 50000px; position: absolute;} .items div { float: left; width: 963px; height: 370px;} .prev { 

       background: url(DTU-Denmark2011-slider-left.png) no-repeat;
       height: 40px;
       width: 42px;
       position: absolute;
           left: -504px; /* floor(963/2) + 42 + 10 = 534 */
           top: 325px;
       margin-left: 50%;
       cursor: pointer;
       border: 1px solid #FFFFFF;
       border-radius: 20px;}

.next { 

       background: url(DTU-Denmark2011-slider-right.png) no-repeat;
       height: 40px;
       width: 42px;
       margin-right: 50%;
       position: absolute;
           right: -505px; /* ceil(963/2) + 42 + 10 = 535 */
           top: 325px;
       cursor: pointer;
       border: 1px solid #FFFFFF;
       border-radius: 20px;}

.disabled { 

       visibility: hidden;}

/* Sexy Drop Down Menu (thanks to noupe.com) */ /*********************************************/

  1. navigation,.navigation { 
   height: 35px;}

.navigation { 

   background: url("Topnav_bg.gif") repeat-x scroll 0 -1px #222222;
   z-index: 1;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   position: relative;}

.stickToTop { 

   position: fixed;
   top:0;
   width:100%;}

ul.topnav { list-style: none; padding: 0; margin: 0; float: left; width: 100%; font-size: 15px; } ul.topnav li { float: left; margin: 0; padding: 0 25px 0 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/ } ul.topnav li a{ padding: 6px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:first-child{ padding-left: 0; } ul.topnav li a:hover{ background: url(Topnav_hover.gif) no-repeat center -1px; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(Subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { 

   z-index: 1; //Stay on top of slider

list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; border: 1px solid #111; 

       border-radius: 0 0 5px 5px;
       width: 170px;

} ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; 

       list-style: none outside none;
       width: 170px;

} ul.topnav li ul.subnav li:last-child{ 

       border-radius: 0 0 5px 5px;

} html ul.topnav li ul.subnav li a { float: left; background: #333 url(Dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; 

       padding-right: 15px;
       width: 135px;

} html ul.topnav li ul.subnav li a:last-child{ 

       border-radius: 0 0 5px 5px;

} html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(Dropdown_linkbg.gif) no-repeat 10px center; }

Retrieved from "http://2011.igem.org/Team:DTU-Denmark/stylesheet2"