Template:Team:KULeuven/Stylesheet2

From 2009.igem.org

(Difference between revisions)
 
(294 intermediate revisions not shown)
Line 3: Line 3:
<!--  
<!--  
div#content {
div#content {
-
     background:#fff url(https://static.igem.org/mediawiki/2009/c/cc/NTUwhitegradient.jpg) bottom center repeat-x;
+
     background:#fff url(https://static.igem.org/mediawiki/2009/9/9b/KULPageBottomShadow.png) bottom center repeat-x;
}
}
 +
div#header {
div#header {
-
     height: 100px;
+
     height: 160px;
-
     background-color: #1b1a44;
+
     background-color: none;
-
     background: #1b1a44 url(https://static.igem.org/mediawiki/2009/c/c1/KULIgem_titel_achtergrond.gif) no-repeat;  
+
     background: url(https://static.igem.org/mediawiki/2009/b/b5/IGEM_Site_Header_3.png) no-repeat;  
-
     background-position: bottom right;
+
     background-position: top left;
     position: relative;
     position: relative;
     vertical-align: bottom;
     vertical-align: bottom;
-
     margin-bottom: 15px;
+
     margin-bottom: 30px;
 +
}
 +
 
 +
div#Team {
 +
    position: absolute;
 +
    top: 30px;
 +
    left: 115px;
 +
    font-size: 160%;
 +
    z-index: 1;
 +
    font-family: "Times New Roman"; /*,Georgia,Serif; */
 +
    /*font-weight: bold;*/
 +
    color: white;
}
}
div#title {
div#title {
     position: absolute;
     position: absolute;
-
     top: 20px;
+
     top: 70px;
-
     left: 30px;
+
     left: 150px;
-
     font-size: 250%;
+
     font-size: 370%;
     z-index: 1;
     z-index: 1;
     font-family: "Times New Roman"; /*,Georgia,Serif; */
     font-family: "Times New Roman"; /*,Georgia,Serif; */
     font-weight: bolder;
     font-weight: bolder;
     font-style: oblique;
     font-style: oblique;
 +
    color: white;
 +
}
 +
 +
div#title a, div#title a:visited, div#slogan a, div#slogan a:visited, div#Team a,div#Team a:visited {
 +
    text-decoration: none;
     color: white;
     color: white;
}
}
Line 30: Line 47:
div#slogan {
div#slogan {
     position: absolute;
     position: absolute;
-
     top: 45px;
+
     top: 110px;
-
     left: 60px;
+
     left: 220px;
-
     font-size: 150%;
+
     font-size: 180%;
     z-index: 1;
     z-index: 1;
     font-family: "Times New Roman"; /*,Georgia,Serif; */
     font-family: "Times New Roman"; /*,Georgia,Serif; */
Line 39: Line 56:
     color: white;
     color: white;
}
}
 +
 +
div#countdown {
 +
    position: absolute;
 +
    top: 10px;
 +
    right: 300px;
 +
    border:none;
 +
}
 +
 +
div#submenu {
 +
    width: 147px;
 +
    height:100%;
 +
    position:absolute;
 +
    left:0px;
 +
    top: 206px;
 +
    left:5px;
 +
    float: left;
 +
    background:url(https://static.igem.org/mediawiki/2009/b/be/Headerver2.png) no-repeat;
 +
}
 +
 +
div#submenu ul {
 +
    position: relative;
 +
    margin-top:50px;
 +
}
 +
div#submenu ul a {
 +
    display: block;
 +
    background-color:none;
 +
    color: white;
 +
    padding: 3px 3px 3px 16px;
 +
    margin: 0 20px -2px -19px;
 +
    text-decoration: none;
 +
    font-weight: bold;
 +
    border: 1px solid white;
 +
    border-left:none;
 +
    border-right:none;
 +
}
 +
 +
div#submenu ul a:hover {
 +
    color: Black;
 +
    background-color: #C9D5E0;
 +
 
 +
}
 +
 +
div#submenu ul .selflink {
 +
    display: block;
 +
    background-color: #C9D5E0;
 +
    color: Black;
 +
    padding: 3px 3px 3px 16px;
 +
    margin: 0 20px -3px -19px;
 +
    text-decoration: none;
 +
    font-weight:bold;
 +
    border: 1px solid white;
 +
    border-left:none;
 +
    border-right:none;
 +
}
 +
 +
div#submenu li {
 +
    list-style: none;
 +
    color: #1b1a44;
 +
}
 +
 +
 +
div#content h1.firstHeading {
div#content h1.firstHeading {
Line 44: Line 123:
}
}
 +
div#content {
 +
    text-align: justify;
 +
}
 +
div#smoothmenu1container {
 +
position: absolute;
 +
bottom: -26px;
 +
left: 0px;
 +
width: 100%;
 +
background-color: #275472;
 +
border-bottom: 1px solid white;
 +
border-top: 1px solid white;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
div#ContactUs {
 +
    float: right;
 +
}
 +
 +
div#ContactUs ul{
 +
z-index:100;
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
list-style: none;
 +
}
 +
 +
/*Top level list items*/
 +
div#ContactUs ul li{
 +
position: relative;
 +
display: inline;
 +
float: left;
 +
color: white;
 +
font-weight:bold;
 +
}
 +
 +
/*Top level menu link items style*/
 +
div#ContactUs ul li a, div#ContactUs ul li strong.selflink {
 +
display: block;
 +
background: #275472; /*#414141; / *background of menu items (default state)*/
 +
color: white;
 +
font-weight:bold;
 +
margin-right:-1px;
 +
padding: 2px 8px;
 +
border: 1px solid white;
 +
border-bottom: none;
 +
border-top:none;
 +
text-decoration: none;
 +
}
 +
 +
div#ContactUs ul li a:hover {
 +
color: black;
 +
font-weight:bold;
 +
background-color: #C9D5E0;
 +
}
 +
 +
div#ContactUs ul li strong.selflink {
 +
Background-color:#C9D5E0;
 +
}
 +
 +
* html div#ContactUs ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
 +
display: inline-block;
 +
}
Line 62: Line 203:
   .center {
   .center {
     text-align: center;
     text-align: center;
 +
  }
 +
 +
  div#centerall, div#centerall div {
 +
    text-align: center;
 +
    width: 100%;
   }
   }
Line 160: Line 306:
   text-indent: 1.5em;
   text-indent: 1.5em;
   margin-top: 0  
   margin-top: 0  
 +
}
 +
 +
div#content h1, div#content h2, div#content h3  {
 +
    color: #1b1a44;
}
}
Line 167: Line 317:
}
}
-
div#sponsor {
 
-
    position: absolute;
 
-
    width: 136px;
 
-
    text-align: center;
 
-
    background: #ffffe8;
 
-
    border: 2px solid #ffddaa;
 
-
    font-size: 200%;
 
-
    font-weight: bold;
 
-
    color: #777;
 
-
   
 
-
}
 
-
div#sponsor.gold{
 
-
    position: relative;
 
-
    width: 136px;
 
-
    border: none;
 
-
    border-bottom: 2px solid #ffddaa;
 
-
    border-top: 2px solid #ffddaa;
 
-
    text-align:center;
 
-
    font-size: 85%;
 
-
    color: #D4AF37;
 
-
    margin-bottom: 5px;
 
-
    padding: 2px 0px 2px 0px;
 
-
}
 
-
 
-
div#sponsor.silver {
 
-
    position: relative;
 
-
    width: 136px;
 
-
    border: none;
 
-
    border-bottom: 2px solid #ffddaa;
 
-
    border-top: 2px solid #ffddaa;
 
-
    text-align: center;
 
-
    font-size: 85%;
 
-
    color: #C0C0C0;
 
-
    margin-bottom: 5px;
 
-
    padding: 2px 0px 2px 0px;
 
-
}
 
-
 
-
div#sponsor.header {
 
-
    position: relative;
 
-
    width: 136px;
 
-
    border: none;
 
-
    border-top: 2px solid #ffddaa;
 
-
    text-align: center;
 
-
    font-size: 100%;
 
-
    color: #777;
 
-
    margin-bottom: 10px;
 
-
    padding: 2px 0px 2px 0px;
 
-
}
 
-
 
-
div#sponsor span {
 
-
}
 
-
 
-
div#sponsor.topright {
 
-
    left: auto;
 
-
    right: -141px;   
 
-
    top: 0px;
 
-
    bottom: auto;
 
-
}
 
-
 
-
div#sponsor.topleft {
 
-
    left: -141px;
 
-
    right: auto;   
 
-
    top: 0px;
 
-
    bottom: auto;
 
-
}
 
-
 
-
div#sponsor.bottomright {
 
-
    left: auto;
 
-
    right: -141px;   
 
-
    top: auto;
 
-
    bottom: 0px;
 
-
}
 
-
 
-
div#sponsor.bottomleft {
 
-
    left: -141px;
 
-
    right: auto;   
 
-
    top: auto;
 
-
    bottom: 0px;
 
-
}
 
-
 
-
div#sponsor img {
 
-
    width:130px;
 
-
}
 
-
 
-
div#sponsor a {
 
-
    color: white;
 
-
    text-decoration: none;
 
-
}
 
h2 span.mw-headline {
h2 span.mw-headline {
Line 321: Line 383:
div#KULfooter {
div#KULfooter {
     position: relative;
     position: relative;
-
     left: 100px;
+
    width: 965px;
-
     width: 860px;
+
    bottom: 0px;
-
     bottom: 100px;
+
    left: 0px;
 +
    margin-top: 90px;
 +
}
 +
 
 +
div#KULfooterText {
 +
    position: relative;
 +
     left: 147px;
 +
     width: 808px;
 +
     bottom: 0px;
     padding-right: 10px;
     padding-right: 10px;
     margin-top: 30px;
     margin-top: 30px;
-
     background: #1a1b44;
+
     background: #275472;
     color: white;
     color: white;
     text-align: right;
     text-align: right;
-
     font-weight: bolder;
+
     font: bold 12px Verdana;
-
     font-style: oblique;
+
}
 +
 
 +
div#KULfooterText a {
 +
     color: #dddddd;
}
}
Line 337: Line 410:
     float: left;
     float: left;
     bottom: 0px;
     bottom: 0px;
 +
    width: 100px;
     z-index: 1;
     z-index: 1;
 +
    text-align: center;
 +
}
 +
 +
div#KULigemlogo img {
 +
    height:70px;
}
}
div#pagecontent {
div#pagecontent {
     position: relative;
     position: relative;
-
     left: 100px;
+
     left: 150px;
-
     width: 860px;
+
     width: 770px;
}
}
 +
 +
div#sponsor {
 +
    position: absolute;
 +
    width: 818px;
 +
    left: 147px;
 +
}
 +
 +
div#goldsponsor {
 +
    background: #ffec85;
 +
    margin-top: 2px;
 +
    float: left;
 +
}
 +
 +
div#silversponsor {
 +
    background: #c0c0c0;
 +
    margin-top: 2px;
 +
    float: right;
 +
}
 +
 +
div#sympasponsor {
 +
    background: #aaaaff;
 +
    margin-top: 2px;
 +
    margin-left: 35px;
 +
    float: right;
 +
}
 +
 +
 +
div#goldsponsor img,div#silversponsor img,div#sympasponsor img{
 +
    height:32px;
 +
    margin: 3px;
 +
}
 +
 +
div#goldsponsor a,div#silversponsor a,div#sympasponsor a {
 +
    color: white;
 +
    text-decoration: none;
 +
}
 +
 +
#imap {display:block; width:800px; height:500px; background:url(https://static.igem.org/mediawiki/2009/8/83/IGEM_Team_foto_800px.png); position:relative; border: 1px solid black;}
 +
 +
#imap a#title {display:block; width:800px; height:0; padding-top:500px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(https://static.igem.org/mediawiki/2009/1/18/IGEM_Team_foto_800px_hover.png) no-repeat 800px 500px; cursor:default;}
 +
 +
* html #imap a#title {height:500px; }
 +
 +
#imap a#title:hover {background-position: 0 0; z-index:10;}
 +
 +
#imap dd {position:absolute; padding:0; margin:0;}
 +
#imap #pic1  {left:210px; top:173px; z-index:20;}
 +
#imap #pic2  {left:265px; top:203px; z-index:20;}
 +
#imap #pic3  {left:293px; top:166px; z-index:20;}
 +
#imap #pic4  {left:333px; top:187px; z-index:20;}
 +
#imap #pic5  {left:369px; top:178px; z-index:20;}
 +
#imap #pic6  {left:403px; top:202px; z-index:20;}
 +
#imap #pic7  {left:435px; top:185px; z-index:20;}
 +
#imap #pic8  {left:472px; top:198px; z-index:20;}
 +
#imap #pic9  {left:506px; top:179px; z-index:20;}
 +
#imap #pic10 {left:549px; top:196px; z-index:20;}
 +
#imap #pic11 {left:308px; top:309px; z-index:20;}
 +
#imap #pic12 {left:378px; top:311px; z-index:20;}
 +
 +
#imap a#text1:hover span {left:265px; top:107px;}
 +
#imap a#text2:hover span {left:210px; top:77px;}
 +
#imap a#text3:hover span {left:182px; top:114px;}
 +
#imap a#text4:hover span {left:142px; top:93px;}
 +
#imap a#text5:hover span {left:106px; top:102px;}
 +
#imap a#text6:hover span {left:72px; top:78px;}
 +
#imap a#text7:hover span {left:40px; top:95px;}
 +
#imap a#text8:hover span {left:3px; top:82px;}
 +
#imap a#text9:hover span {left:-31px; top:101px;}
 +
#imap a#text10:hover span {left:-74px; top:84px;}
 +
#imap a#text11:hover span {left:167px; top:-29px;}
 +
#imap a#text12:hover span {left:97px; top:-31px;}
 +
 +
 +
#imap a#text1, #imap a#text2, #imap a#text3, #imap a#text4, #imap a#text5, #imap a#text6, #imap a#text7, #imap a#text8, #imap a#text9, #imap a#text10, #imap a#text11, #imap a#text12 {display:block; width: 61px; height:65px; text-decoration:none; z-index:20;}
 +
#imap a span, #imap a:visited span {display:none;}
 +
 +
#imap a#text1:hover, #imap a#text2:hover, #imap a#text3:hover, #imap a#text4:hover, #imap a#text5:hover, #imap a#text6:hover, #imap a#text7:hover, #imap a#text8:hover, #imap a#text9:hover, #imap a#text10:hover, #imap a#text11:hover, #imap a#text12:hover {border: 1px solid white; background: transparent url(https://static.igem.org/mediawiki/2009/2/2c/Transppixel50.png);}
 +
 +
#imap a:hover span {position:absolute;  width:300px; height: 150px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:2px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/2/2c/Transppixel50.png);}
 +
 +
#imap a span:first-line {font-weight:bold; font-style:italic;}
 +
#imap a span img { height: 150px; float: left; margin-right: 10px;}
 +
#imap a span div#type { background: black; color: white; font-weight: bolder; text-align: center; position: absolute; right: 0px; bottom: 0px; padding: 10px; font-size: 150%;}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
div#imap2wrapper {
 +
    position: relative;
 +
    left: -90px;
 +
}
 +
 +
#imap2 {display:block; width:800px; height:535px; background:url(https://static.igem.org/mediawiki/2009/b/bc/Stripv4.png); position:relative; border: none;}
 +
 +
#imap2 a#title {display:block; width:800px; height:0; padding-top:535px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(https://static.igem.org/mediawiki/2009/f/fd/Strip_hover5.png) no-repeat 800px 535px; cursor:default;}
 +
 +
* html #imap2 a#title {height:500px; }
 +
 +
#imap2 a#title:hover {background-position: 0 0; z-index:10;}
 +
 +
/* posities van witte kaders */
 +
#imap2 dd {position:absolute; padding:0; margin:0;}
 +
#imap2 #pic1  {left:1px; top:121px; z-index:20;}
 +
#imap2 #pic2  {left:302px; top:8px; z-index:20;}
 +
#imap2 #pic3  {left:259px; top:306px; z-index:20;}
 +
#imap2 #pic4  {left:549px; top:223px; z-index:20;}
 +
#imap2 #pic5  {left:350px; top:200px; z-index:20;}
 +
 +
 +
/* relatieve positie van de tekstkader, tov de witte kader */
 +
#imap2 a#text1:hover span {left:430px; top:-140px;}
 +
#imap2 a#text2:hover span {left:-100px; top:280px;}
 +
#imap2 a#text3:hover span {left:-400px; top:-275px;}
 +
#imap2 a#text4:hover span {left:-650px; top:-100px;}
 +
 +
 +
 +
/* grootte van de witte kader */
 +
#imap2 a#text1 {display:block; width: 233px; height:303px; text-decoration:none; z-index:20;}
 +
#imap2 a#text2 {display:block; width: 309px; height:182px; text-decoration:none; z-index:20;}
 +
#imap2 a#text3 {display:block; width: 198px; height:205px; text-decoration:none; z-index:20;}
 +
#imap2 a#text4 {display:block; width: 236px; height:307px; text-decoration:none; z-index:20;}
 +
#imap2 a#text5 {display:block; width: 275px; height:100px; text-decoration:none; z-index:20;}
 +
 +
 +
 +
#imap2 a span, #imap2 a:visited span {display:none;}
 +
 +
#imap2 a#text1:hover, #imap2 a#text2:hover, #imap2 a#text3:hover, #imap2 a#text4:hover, #imap2 a#text5:hover {border: 2px dashed grey; background: transparent url(https://static.igem.org/mediawiki/2009/2/2c/Transppixel50.png);}
 +
 +
#imap2 a#text1:hover span {position:absolute;  width:385px; height: 260px; display:block; font-family:arial; font-size:13px; background:#fff; color:#000; border:2px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/c/cc/Transpixel80.png);}
 +
 +
#imap2 a#text2:hover span {position:absolute;  width:450px; height: 270px; display:block; font-family:arial; font-size:13px; background:#fff; color:#000; border:2px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/c/cc/Transpixel80.png);}
 +
 +
#imap2 a#text3:hover span {position:absolute;  width:500px; height: 250px; display:block; font-family:arial; font-size:13px; background:#fff; color:#000; border:2px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/c/cc/Transpixel80.png);}
 +
 +
#imap2 a#text4:hover span {position:absolute;  width:400px; height: 200px; display:block; font-family:arial; font-size:13px; background:#fff; color:#000; border:2px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/c/cc/Transpixel80.png);}
 +
 +
#imap2 a span:first-line {font-weight:bold; font-style:italic;}
 +
#imap2 a span img { height: 150px; float: left; margin-right: 10px;}
 +
#imap2 a span div#type { background: black; color: white; font-weight: bolder; text-align: center; position: absolute; right: 0px; bottom: 0px; padding: 10px; font-size: 150%;}
 +
 +
div#imap2wrapper div#promovid {
 +
    z-index: 5;
 +
    float: right;
 +
    position: absolute;
 +
    bottom: 0px;
 +
    right: -130px;
 +
}
 +
 +
div#imap2wrapper div#smallabstract {
 +
    z-index: 5;
 +
    float: left;
 +
    font-size: 10px;
 +
    text-align: left;
 +
    border: none;
 +
    position: relative;
 +
    left: -30px;
 +
    width: 300px;
 +
    margin: 5px;
 +
}
 +
 +
div#imap2wrapper div#smallabstract a span {
 +
    font-size: 12px;
 +
    font-weight: bold;
 +
}
 +
 +
div#imap2wrapper div#smallabstract a p {
 +
    margin-left: 10px;
 +
    margin-bottom: 5px;
 +
}
 +
 +
 +
div#imap2wrapper div#smallabstract a {
 +
    text-decoration: none;
 +
    color: black;
 +
}
 +
 +
div#imap2wrapper div#smallabstract:hover {
 +
  background: #c0c0c0;
 +
}
 +
 +
 +
div#hiddentools {
 +
    position: absolute;
 +
    left:-82px;
 +
    bottom: 0px;
 +
}
 +
 +
div#hiddentools a {
 +
    color: #aaaaaa;
 +
}
 +
 +
 +
div#hiddentools a:hover {
 +
    color: black;
 +
}
 +
 +
div#MedalChecklist ul {
 +
    list-style: none;
 +
    padding: 20px;
 +
    margin-bottom: 20px;
 +
/*    list-style-position: inside; */
 +
}
 +
 +
div#MedalChecklist ul.bronze {
 +
    background-color: #f2dbc3;
 +
    border: 2px solid #cd7f32;
 +
}
 +
 +
div#MedalChecklist ul.silver {
 +
    background-color: #f0f0f0;
 +
    border: 2px solid #c0c0c0;
 +
}
 +
 +
div#MedalChecklist ul.gold {
 +
    background-color: #ffec85;
 +
    border: 2px solid #ffd700;
 +
}
 +
 +
div#MedalChecklist ul li {
 +
    padding-left: 60px;
 +
    padding-right: 10px;
 +
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
    margin-bottom: 5px;
 +
 +
    min-height: 100px;
 +
}
 +
 +
div#MedalChecklist ul li em {
 +
    font-weight:bold;
 +
}
 +
 +
div#MedalChecklist ul li p {
 +
    padding-left: 10px;
 +
}
 +
 +
 +
div#MedalChecklist ul li.complete {
 +
    background:transparent url(https://static.igem.org/mediawiki/2009/7/7a/KUL_Medal_complete.png) top left no-repeat;
 +
    /*border-right: 1px solid green;
 +
    border-bottom: 1px solid green; */
 +
}
 +
 +
div#MedalChecklist ul li.pending {
 +
    background:transparent url(https://static.igem.org/mediawiki/2009/7/74/KUL_Medal_pending.png) top left no-repeat;
 +
/*    border-right: 1px solid blue;
 +
    border-bottom: 1px solid blue; */
 +
}
 +
 +
div#MedalChecklist ul li.notdone {
 +
    background:transparent url(https://static.igem.org/mediawiki/2009/1/1a/KUL_Medal_notdone.png) top left no-repeat;
 +
/*    border-right: 1px solid red;
 +
    border-bottom: 1px solid red; */
 +
}
 +
 +
/* https://static.igem.org/mediawiki/2009/1/1a/KUL_Medal_notdone.png
 +
  https://static.igem.org/mediawiki/2009/7/74/KUL_Medal_pending.png
 +
  https://static.igem.org/mediawiki/2009/7/7a/KUL_Medal_complete.png
 +
*/
 +
-->
-->
</style>
</style>
</html>
</html>

Latest revision as of 15:11, 21 October 2009

Retrieved from "http://2009.igem.org/Template:Team:KULeuven/Stylesheet2"