Team:Heidelberg/Stylesheet

From 2013.igem.org

(Difference between revisions)
m
m
 
(235 intermediate revisions not shown)
Line 14: Line 14:
}
}
#content {
#content {
 +
overflow:hidden;
 +
display:inline-block;
position:relative;
position:relative;
-
width:1024px;
+
min-width:800px;
 +
width:100%;
 +
max-width:3000px;
margin:0px;
margin:0px;
padding:0px;
padding:0px;
-
display:inline-block;
+
text-align:center;
-
text-align:left;
+
z-index:888;
z-index:888;
 +
border-style:none;
}
}
#top-section, #footer-box {
#top-section, #footer-box {
-
width:1014px;
+
min-width:800px;
-
padding:5px;
+
width:100%;
 +
max-width:3000px;
 +
padding:0px;
margin:0px;
margin:0px;
display:inline-block;
display:inline-block;
text-align:left;
text-align:left;
 +
border-style:none;
}
}
 +
#footer-box{background-color: #292929;}
#top-section {
#top-section {
-
position:fixed;
+
position:absolute;
-
width:1024px;
+
height:5px;
height:5px;
-
border:none;
 
z-index:999;
z-index:999;
 +
}
 +
#footer-box * {
 +
margin:5px;
}
}
#bodyContent {
#bodyContent {
Line 41: Line 50:
}
}
#top-matter {
#top-matter {
-
position:fixed;
+
width:100%;
-
width:1024px;
+
position: relative;
-
height:220px;
+
z-index:777;
z-index:777;
}
}
Line 49: Line 57:
display:inline-block;
display:inline-block;
width:100%;
width:100%;
-
position:relative;
 
-
top:220px;
 
color:#000000;
color:#000000;
background-color:white;
background-color:white;
}
}
.content-hori {
.content-hori {
-
float:left;
+
vertical-align:top;
-
min-height:1000px;
+
display:block;
-
padding:3px;
+
text-align:left;
}
}
 +
#navigation-bar {
#navigation-bar {
-
border-right-style:solid;
+
position:absolute;
-
border-right-color:#606060;
+
width:13em;
-
width:170px;
+
color: white;
 +
padding:0.5em;
}
}
 +
#main {
 +
background-color:#292929;
 +
min-height:500px;
 +
}
 +
#main-content {
 +
margin-left:14em;
 +
min-height:500px;
 +
padding:5px;
 +
height:100%;
 +
background-color:white;
 +
border-bottom: 0.3em solid #FFCC00;
 +
border-left-style:solid;
 +
border-left-width:0.3em;
 +
border-left-color:#FFCC00;
 +
text-align: justify;
 +
 +
}
 +
 +
#slider-container {
 +
background-color: white;
 +
width: 60%;
 +
height: 20em;
 +
margin-left: 20em;
 +
 +
}
 +
 +
#flags {
 +
background-color:white;
 +
left: 20em;
 +
width: 20%;
 +
min-height: 20em;
 +
float: left;
 +
}
 +
table{margin-right: 5%;}
 +
/*
 +
#bottom-matter{
 +
background-color: #292929;
 +
min-height: 10em;
 +
width: 100%
 +
} */
/* Override general formatting */
/* Override general formatting */
/*******************************/
/*******************************/
-
* { font-family:Calibri;}
+
* { font-family:sans-serif;}
p { margin:0px;}
p { margin:0px;}
 +
a:link { color:#009cc2; text-decoration:none; }
 +
a:visited { color:#009cc2;font-weight:bold; text-decoration:none; }
 +
a:focus { color:#009cc2; font-weight:bold; text-decoration:none;}
 +
a:hover { color:#009cc2; text-decoration:none; }
 +
a:active { font-weight:bold; color:#009cc2; text-decoration:none; }
 +
 +
ul{ list-style-image: url("https://static.igem.org/mediawiki/2013/d/de/HD_Bullet.png");
 +
list-style-type: square;}
 +
 +
a.menu-link:link { color:#FFFFFF; text-decoration:none; }
 +
a.menu-link:visited { color:#FFFFFF; text-decoration:none; }
 +
a.menu-link:focus { color:#FFCC00;text-decoration:none;}
 +
a.menu-link:hover { fond-weight:normal;color:#FFCC00; text-decoration:none; }
 +
a.menu-link:active {color:#FFCC00; text-decoration:none; }
 +
a.left-nav:link { color:white; text-decoration:none; }
 +
a.left-nav:visited { color:#FFFFFF; text-decoration:none; }
 +
a.left-nav:focus { color:#FFCC00; text-decoration:none;}
 +
a.left-nav:hover { font-weight:bold; color:#FFCC00; text-decoration:none; }
 +
a.left-nav:active { font-weight:bold; color:#FFCC00; text-decoration:none; }
/* Change user editing menu appearance */
/* Change user editing menu appearance */
/***************************************/
/***************************************/
Line 97: Line 164:
/*****************************/
/*****************************/
#main-menu {
#main-menu {
-
width:1024;
+
height:15.5em;
-
height:200px;
+
position:absolute;
 +
top:-7em;
 +
width:120%;
 +
        left: -10%;
 +
z-index:999;
 +
background-color:#292929;
 +
border:1px solid #292929;
 +
border-bottom-left-radius:100%;
 +
border-bottom-right-radius:100%;
 +
box-shadow: 0px 1px 5px 8px #404040;
 +
}
 +
#main-menu > a {
 +
text-decoration:none;
 +
}
 +
#menu-title {
 +
top:95px;
 +
color:#009cc2;
position:relative;
position:relative;
-
top:0px;
+
border-bottom:none;
-
/*background-image:url(../png/Imagemap_Menue_schrift_angepasst.jpg);*/
+
-
background-repeat:no-repeat;
+
-
background-color:#FFFFFF;
+
}
}
 +
 +
.menu-title-green { color:#009cc2; }
 +
.menu-title-blue{ color:#009cc2; }
 +
.menu-item {
.menu-item {
-
position:absolute;
+
display:inline-block;
-
float:left;
+
vertical-align:top;
-
z-index:666;
+
z-index:999;
-
top:-3px;
+
position:relative;
 +
width:10%;
background-color:transparent;
background-color:transparent;
 +
top:100px;
}
}
.menu-item a {
.menu-item a {
display:block;
display:block;
 +
text-align:center;
border:none;
border:none;
-
line-height:50px;
+
width:100%;
-
background-color:#333;
+
-
font-size:12pt;
+
-
}
+
-
.menu-item a:active {
+
-
text-decoration:none;
+
}
}
.menu-item ul {
.menu-item ul {
 +
width:100%;
display:none;
display:none;
-
background-color:#93ADAE;
+
background-color:#292929;
list-style:none;
list-style:none;
-
margin:0px;
+
padding-top:1em;
border:none;
border:none;
 +
margin:0pt;
 +
color:white;
 +
}
 +
 +
.menu-item a * {
 +
display:block;
}
}
.menu-item ul li {
.menu-item ul li {
border-bottom: 1pt solid;
border-bottom: 1pt solid;
}
}
-
#menu-team { left:44px;}
+
.menu-item a:hover + ul, .menu-item ul:hover {
-
#link-team {
+
display:block;
-
/*background-image:url(../png/Team_all.png);*/
+
-
background-position:0px 0px;
+
-
height:105px;
+
}
}
-
#link-team, #link-team  + ul { width:65px;}
+
#menu-symbol{
-
#menu-team:hover a { background-position:0px 105px;}
+
height:4em;
-
#menu-team:hover ul { display:inline-block;}
+
margin:auto;
-
 
+
-
#menu-project { left:110px;}
+
-
#link-project {
+
-
/*background-image:url(../png/Project_all.png);*/
+
-
background-position:0px 0px;
+
-
height:141px;
+
}
}
-
#link-project, #link-project  + ul { width:76px;}
 
-
#menu-project:hover a { background-position:0px 141px;}
 
-
#menu-project:hover ul{ display:inline-block;}
 
-
#menu-modelling { left:214px;}
+
/* Define title line containing logos */
-
#link-modelling {
+
/**************************************/
-
/*background-image:url(../png/Modelling_all.png);*/
+
#title-line {
-
background-position:0px 0px;
+
width:100%;
-
height:173px;
+
z-index:888;
 +
padding-top:8em;
 +
padding-bottom:0.5em;
 +
text-align:left;
}
}
-
#link-modelling, #link-modelling  + ul { width:86px;}
+
#title-line * {
-
#menu-modelling:hover a { background-position:0px 173px;}
+
display:inline-block;
-
#menu-modelling:hover ul{ display:inline-block;}
+
vertical-align:bottom;
-
 
+
-
#menu-parts { left:343px;}
+
-
#link-parts {
+
-
/*background-image:url(../png/SubmittedParts_all.png);*/
+
-
background-position:0px 0px;
+
-
height:173px;
+
}
}
-
#link-parts, #link-parts  + ul { width:153px;}
+
#title-line a {
-
#menu-parts:hover a { background-position:0px 173px;}
+
height:5em;
-
#menu-parts:hover ul{ display:inline-block;}
+
-
 
+
-
#menu-notebook { left:532px;}
+
-
#link-notebook {
+
-
/*background-image:url(../png/Notebook_all.png);*/
+
-
background-position:0px 0px;
+
-
height:173px;
+
}
}
-
#link-notebook, #link-notebook  + ul { width:105px;}
+
#team-logo{
-
#menu-notebook:hover a { background-position:0px 173px;}
+
margin-left:4.5em;
-
#menu-notebook:hover ul{ display:inline-block;}
+
padding-bottom:0.5em;
-
 
+
-
#menu-human { left:677px;}
+
-
#link-human {
+
-
/*background-image:url(../png/HumanPractice_all.png);*/
+
-
background-position:0px 0px;
+
-
height:173px;
+
}
}
-
#link-human, #link-human  + ul { width:155px;}
+
#team-logo img {
-
#menu-human:hover a { background-position:0px 173px;}
+
height:110%;
-
#menu-human:hover ul{ display:inline-block;}
+
-
 
+
-
#menu-safety { left:837px;}
+
-
#link-safety {
+
-
/*background-image:url(../png/Safety_all.png);*/
+
-
background-position:0px 0px;
+
-
height:126px;
+
}
}
-
#link-safety, #link-safety  + ul { width:74px;}
+
#PS {
-
#menu-safety:hover a { background-position:0px 126px;}
+
margin-left:4.5em;
-
#menu-safety:hover ul{ display:inline-block;}
+
-
 
+
-
#team-logo{
+
-
position:absolute;
+
-
top:135px;
+
-
left:40px;
+
-
z-index:4;
+
}
}
-
#PS {
+
#PS h1 {
-
position:absolute;
+
padding:0em;
-
height:30px;
+
border-style:none;
-
top:165px;
+
color: #009cc2;
-
left:139px;
+
margin:0em;
-
z-index:3;
+
}
}
#flubber {
#flubber {
-
position:absolute;
+
width:2em;
-
height:60px;
+
}
-
top:135px;
+
#flubber img {
-
right:139px;
+
width:100%;
-
z-index:6;
+
}
}
#igem-2013 {
#igem-2013 {
-
position:absolute;
+
float:right;
-
top:135px;
+
margin-right:4.5em;
-
right:40px;
+
}
-
z-index:5;
+
#igem-2013 img {
 +
height:100%;
}
}
-
 
#top-separator {
#top-separator {
-
background-color:#F5B800;
+
background-color:#FFCC00;
height:20px;
height:20px;
 +
text-align:left;
 +
}
 +
#top-separator * {
 +
margin-left:14em;
}
}
Line 237: Line 286:
/*****************************/
/*****************************/
-
#navigation-bar ul, #navigation-bar li{
+
#navigation-bar ul, #navigation-bar li {
margin-top:0px;
margin-top:0px;
margin-bottom:0px;
margin-bottom:0px;
Line 245: Line 294:
}
}
-
.drop-navi-left + ul {
+
#navi-highlight {
-
display:none;
+
/* change color in javascript*/
-
}
+
-
.drop-navi-left:hover + ul, .drop-navi-left + ul:hover {
+
-
display:block;
+
}
}
Line 257: Line 303:
#goto-top {
#goto-top {
position:fixed;
position:fixed;
-
bottom:20px;
+
z-index:999;
-
margin-left:700px;
+
bottom:5%;
 +
left:70%;
}
}
#tour-navi {
#tour-navi {
position:fixed;
position:fixed;
-
bottom:10px;
+
z-index:999;
-
margin-left:650px;
+
bottom:5%;
 +
left:60%;
width:100px;
width:100px;
height:50px;
height:50px;
Line 300: Line 348:
#tour-navi #tour-fwd:hover + li, #tour-navi #tour-pause:hover + li, #tour-navi #tour-rev:hover + li {
#tour-navi #tour-fwd:hover + li, #tour-navi #tour-pause:hover + li, #tour-navi #tour-rev:hover + li {
display:block;
display:block;
 +
}
 +
 +
 +
/* Styling of other template elements */
 +
/**************************************/
 +
 +
#gel-right{
 +
background-color:transparent;
 +
text-align:center;
 +
float: right;
 +
margin-right:1em;
 +
padding:0.5em;
 +
border-style:solid;
 +
border-width:1pt;
 +
border-color:#292929;
 +
border-radius:1em;
}
}

Latest revision as of 20:18, 21 September 2013

/* Hiding predefined html elements */ /***********************************/

  1. contentSub, #search-controls, #catlinks, #p-logo, .firstHeading {

display:none; padding:0px; margin:0px; }

/* Resize general layout */ /*************************/ body { background-color:#606060; text-align:center; }

  1. content {

overflow:hidden; display:inline-block; position:relative; min-width:800px; width:100%; max-width:3000px; margin:0px; padding:0px; text-align:center; z-index:888; border-style:none; }

  1. top-section, #footer-box {

min-width:800px; width:100%; max-width:3000px; padding:0px; margin:0px; display:inline-block; text-align:left; border-style:none; }

  1. footer-box{background-color: #292929;}
  2. top-section {

position:absolute; height:5px; z-index:999; }

  1. footer-box * {

margin:5px; }

  1. bodyContent {

margin:0px; z-index:877; }

  1. top-matter {

width:100%; position: relative; z-index:777; } .center-vert { display:inline-block; width:100%; color:#000000; background-color:white; } .content-hori { vertical-align:top; display:block; text-align:left; }

  1. navigation-bar {

position:absolute; width:13em; color: white; padding:0.5em; }

  1. main {

background-color:#292929; min-height:500px; }

  1. main-content {

margin-left:14em; min-height:500px; padding:5px; height:100%; background-color:white; border-bottom: 0.3em solid #FFCC00; border-left-style:solid; border-left-width:0.3em; border-left-color:#FFCC00; text-align: justify;

}

  1. slider-container {

background-color: white; width: 60%; height: 20em; margin-left: 20em;

}

  1. flags {

background-color:white; left: 20em; width: 20%; min-height: 20em; float: left; } table{margin-right: 5%;} /*

  1. bottom-matter{

background-color: #292929; min-height: 10em; width: 100% } */ /* Override general formatting */ /*******************************/

  • { font-family:sans-serif;}

p { margin:0px;} a:link { color:#009cc2; text-decoration:none; } a:visited { color:#009cc2;font-weight:bold; text-decoration:none; } a:focus { color:#009cc2; font-weight:bold; text-decoration:none;} a:hover { color:#009cc2; text-decoration:none; } a:active { font-weight:bold; color:#009cc2; text-decoration:none; }

ul{ list-style-image: url("HD_Bullet.png"); list-style-type: square;}

a.menu-link:link { color:#FFFFFF; text-decoration:none; } a.menu-link:visited { color:#FFFFFF; text-decoration:none; } a.menu-link:focus { color:#FFCC00;text-decoration:none;} a.menu-link:hover { fond-weight:normal;color:#FFCC00; text-decoration:none; } a.menu-link:active {color:#FFCC00; text-decoration:none; }

a.left-nav:link { color:white; text-decoration:none; } a.left-nav:visited { color:#FFFFFF; text-decoration:none; } a.left-nav:focus { color:#FFCC00; text-decoration:none;} a.left-nav:hover { font-weight:bold; color:#FFCC00; text-decoration:none; } a.left-nav:active { font-weight:bold; color:#FFCC00; text-decoration:none; } /* Change user editing menu appearance */ /***************************************/

  1. menubar {

top:-5px; }

  1. menubar, #menubar:hover, .left-menu, .left-menu:hover, .right-menu, .right-menu:hover, .right-menu li a, .right-menu a:hover, #top-section, #top-section:hover {

background-color:transparent; } .left-menu li a { color:transparent; } .left-menu ul li:last-child, .right-menu li a { color:#AAAAAA; color:#AAAAAA !important; }

  1. top-section:hover .left-menu li a{

color:#AAAAAA; }

  1. menubar li a:hover {

color:#FFD83D; color:#FFD83D !important; }

/* Define top navigation bar */ /*****************************/

  1. main-menu {

height:15.5em; position:absolute; top:-7em; width:120%; 

       left: -10%;

z-index:999; background-color:#292929; border:1px solid #292929; border-bottom-left-radius:100%; border-bottom-right-radius:100%; box-shadow: 0px 1px 5px 8px #404040; }

  1. main-menu > a {

text-decoration:none; }

  1. menu-title {

top:95px; color:#009cc2; position:relative; border-bottom:none; }

.menu-title-green { color:#009cc2; } .menu-title-blue{ color:#009cc2; }

.menu-item { display:inline-block; vertical-align:top; z-index:999; position:relative; width:10%; background-color:transparent; top:100px; } .menu-item a { display:block; text-align:center; border:none; width:100%; } .menu-item ul { width:100%; display:none; background-color:#292929; list-style:none; padding-top:1em; border:none; margin:0pt; color:white; }

.menu-item a * { display:block; } .menu-item ul li { border-bottom: 1pt solid; } .menu-item a:hover + ul, .menu-item ul:hover { display:block; }

  1. menu-symbol{

height:4em; margin:auto; }

/* Define title line containing logos */ /**************************************/

  1. title-line {

width:100%; z-index:888; padding-top:8em; padding-bottom:0.5em; text-align:left; }

  1. title-line * {

display:inline-block; vertical-align:bottom; }

  1. title-line a {

height:5em; }

  1. team-logo{

margin-left:4.5em; padding-bottom:0.5em; }

  1. team-logo img {

height:110%; }

  1. PS {

margin-left:4.5em; }

  1. PS h1 {

padding:0em; border-style:none; color: #009cc2; margin:0em; }

  1. flubber {

width:2em; }

  1. flubber img {

width:100%; }

  1. igem-2013 {

float:right; margin-right:4.5em; }

  1. igem-2013 img {

height:100%; }

  1. top-separator {

background-color:#FFCC00; height:20px; text-align:left; }

  1. top-separator * {

margin-left:14em; }

/* Style left navigation bar */ /*****************************/

  1. navigation-bar ul, #navigation-bar li {

margin-top:0px; margin-bottom:0px; margin-right:0px; padding:0px; line-height:20px; }

  1. navi-highlight {

/* change color in javascript*/ }

/* Go to top and guided tour navigation */ /*********************************************/

  1. goto-top {

position:fixed; z-index:999; bottom:5%; left:70%; }

  1. tour-navi {

position:fixed; z-index:999; bottom:5%; left:60%; width:100px; height:50px; display:none; }

  1. tour-navi ul {

/* background-image:url(../png/Guided_Navigation.svg); */ background-repeat:no-repeat; background-position:top center; width:100%; height:100%; list-style:none; }

  1. tour-navi ul li {

float:left; }

  1. tour-navi ul .tour-text {

position:absolute; width:70px; top:40px; left:15px; display:none; }

  1. tour-navi #tour-rev, #tour-navi #tour-pause, #tour-navi #tour-fwd { 
   height: 80%;
   width: 33%;

}

  1. tour-navi ul li a {

display:block; text-decoration:none; width:100%; height:100%; }

  1. tour-navi #tour-fwd:hover + li, #tour-navi #tour-pause:hover + li, #tour-navi #tour-rev:hover + li {

display:block; }


/* Styling of other template elements */ /**************************************/

  1. gel-right{

background-color:transparent; text-align:center; float: right; margin-right:1em; padding:0.5em; border-style:solid; border-width:1pt; border-color:#292929; border-radius:1em; }

Retrieved from "http://2013.igem.org/Team:Heidelberg/Stylesheet"