Template:Queens Canada/Headernojs

From 2012.igem.org

(Difference between revisions)
Line 18: Line 18:
<style type="text/css">
<style type="text/css">
-
#ca-container h3
+
<style type="text/css">
 +
#navtoggle
{
{
-
font-family: 'Merienda One', cursive;
+
height:75px;
 +
width:75px;
 +
position:absolute;
 +
left:-75 px;
 +
margin-left: -75px;
 +
margin-bottom: -75px;
 +
margin-top: 35 px;
 +
text-align: center;
 +
background-color: maroon;
 +
border-radius: 5px 0px 0px 5px;
}
}
-
#ca-container h6
+
#navtoggle a
{
{
-
font-family: 'Merienda One', cursive;
+
color: white;
 +
font-size: 1.1em;
 +
vertical-align: middle;
 +
}
 +
.kwicks_container
 +
{
 +
width: 1000px;
 +
margin-left: 2.5px;
 +
margin-right: 2.5px;
 +
}
 +
.kwicks {
 +
list-style: none;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
width:100%;
 +
height:50px;
 +
z-index:2;
 +
        border-width: 10;
 +
        -khtml-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
}
 +
.kwicks li {
 +
display: block;
 +
float: left;
 +
overflow: hidden;
 +
padding: 0;
 +
cursor: pointer;
 +
width: 500px;
 +
height: 35px;
 +
z-index:2;
 +
cursor:pointer;
 +
border-left-width: 2.5px;
 +
border-left-style: solid;
 +
border-left-color: transparent;
 +
        border-right-color: transparent;
 +
        border-right-width: 2.5px;
 +
 
 +
}
 +
.kwicks li a {
 +
background-image:url(images/sprites_menu.png);
 +
background-repeat:no-repeat;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial;
 +
font-size: 1.5em;
 +
letter-spacing: -0.07em;
 +
color: #ffffff;
 +
height: 40px;
 +
outline:none;
 +
display:block;
 +
z-index:100;
 +
cursor:pointer;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
line-height: 37px;
 +
margin-left: 5px;
 +
text-decoration: none;
 +
        vertical-align: middle;
 +
}
 +
.kwicks li h3 {
 +
position: absolute;
 +
width: 120px;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial;
 +
font-size: 10px;
 +
color: #FF6600;
 +
letter-spacing: -0.02em;
 +
outline:none;
 +
z-index:0;
 +
cursor:pointer;
 +
text-transform: uppercase;
 +
font-weight: normal;
 +
margin-left: 5px;
 +
text-decoration: none;
 +
left: 0px;
 +
top: 5px;
 +
right: 0px;
 +
bottom: 0px;
 +
}
 +
#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 {
 +
 
 +
overflow: hidden;
 +
position: relative;
 +
display: inline;
 +
width: 50%;
 +
 
 +
}
 +
#kwick_1 {
 +
left: 0px;
 +
border-width: 0px 0px 0px 0px;
 +
        border-right-color: black;
 +
        width: 498px;
 +
        background-color: crimson;
 +
 
 +
-webkit-border-radius: 10px;
 +
-khtml-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
}
 +
#kwick_2 {
 +
 
 +
background-color: coral;
 +
width: 498px;
 +
border-right-width:2.5px;
 +
-webkit-border-radius: 10px;
 +
-khtml-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
}
 +
 
 +
#kwick_1 li a {
 +
background-position:0px 0px;
 +
        border-width: 0px 0px 0px 0px;
 +
        border-right-color:
 +
}
 +
 
 +
#kwick_1 li a:hover {
 +
background-position:0px 0px;
 +
        border-width: 0px 0px 0px 0px;
 +
        border-right-color: black;
 +
}
 +
#kwick_2 li a, a:hover, a:active
 +
{
 +
border-left-color: black;
 +
}
 +
 
 +
.kwicks a:hover, .kwicks #active {
 +
color: #ffffff;
 +
}
 +
.kwicks li a:hover h3, .kwicks li #active h3 {
 +
color: #999999;
 +
}
 +
#kwick_2 a {
 +
background-position:0px -50px;
 +
}
 +
#kwick_3 a {
 +
background-position:0px -192px;
 +
}
 +
#kwick_4 a {
 +
background-position:0px -100px;
 +
}
 +
#kwick_5 a {
 +
background-position:0px -150px;
 +
}
 +
#kwick_6 a {
 +
background-position:0px -250px;
 +
}
 +
#kwick_7 a {
 +
background-position:0px -300px;
 +
}
 +
      p fade1 { position:inline;  }
 +
      ul fade2 { position:inline; 
 +
        font-size:36px; text-align:center;
 +
        color:yellow; background:red;
 +
        padding-top:25px;
 +
        top:0; left:0; display:none; }
 +
        span { display:none; }
 +
#labcontent
 +
{
 +
-khtml-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-moz-box-shadow: 3px 3px 4px #000;
 +
-webkit-box-shadow: 3px 3px 4px #000;
 +
box-shadow: 3px 3px 4px #000;
 +
margin-bottom: 10px;
 +
        background-color: white;
 +
        margin-top: 350px;
 +
        width: 1000px;
 +
        height: auto;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
}
 +
 
 +
#labcontent h1, h2, h3, h4, h5
 +
{
 +
padding-top: 0px;
 +
padding-bottom:0px;
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
margin-top:0px;
 +
margin-bottom: 0px;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
line-height: normal;
 +
}
 +
#notebookcontent h1
 +
{
 +
font-size: 2em;
 +
color:grey;
 +
padding-top: 5px;
 +
}
 +
#notebookcontent h2
 +
{
 +
font-size: 1.1em;
 +
color:black;
 +
}
 +
#protocolcontent
 +
{
 +
display:none;
 +
}
 +
#NotebookTitle
 +
{
 +
background-color: MediumTurquoise;
 +
-webkit-border-radius: 10px 10px 0px 0px ;
 +
-khtml-border-radius: 10px 10px 0px 0px ;
 +
-moz-border-radius: 10px 10px 0px 0px ;
 +
border-radius: 10px 10px 0px 0px ;
 +
padding-left:  10px;
 +
margin-bottom: 0px;
 +
border-bottom: 0px;
 +
margin-top: -212px;
 +
}
 +
 
 +
#NotebookTitle p
 +
{
 +
color:white;
 +
font-size: 2em;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 +
text-decoration: bold;
 +
}
 +
 
 +
hr{
 +
margin:50px 0;
 +
color:#eee;
 +
}
 +
 
 +
ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
 +
_visibility: hidden; /*IE6 rule*/
 +
}
 +
 
 +
/* ######### Gel Menu CSS ######### */
 +
 
 +
ul.gelbuttonmenu{
 +
position:relative;
 +
padding: 0;
 +
margin: 0;
 +
margin-bottom:1em;
 +
text-align: center; //set value to "left", "center", or "right"*/
 +
z-index: 99;
 +
}
 +
 
 +
ul.gelbuttonmenu li{
 +
display: inline;
 +
z-index: 99;
 +
}
 +
 
 +
ul.gelbuttonmenu li a{
 +
color: black;
 +
font-weight:bold;
 +
padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/
 +
margin-right: 20px; /*spacing between each menu link*/
 +
text-decoration: none;
 +
z-index: 99;
 +
}
 +
 
 +
ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
 +
position:absolute;
 +
width:0;
 +
background:lightblue;
 +
background:url('http://dl.dropbox.com/u/46807995/gelbuttonleft.gif') top left no-repeat, url('http://dl.dropbox.com/u/46807995/gelbuttonright.gif') top right no-repeat, url('http://dl.dropbox.com/u/46807995/gelbuttoncenter.gif') top center repeat-x;
 +
z-index: 99;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* ######### Solid Block Menu CSS ######### */
 +
 
 +
 
 +
ul.solidblockmenu{
 +
margin: 0;
 +
margin-bottom:1em;
 +
padding: 0;
 +
list-style: none;
 +
position:relative;
 +
text-align: center; //set value to "left", "center", or "right"*/
 +
}
 +
 
 +
ul.solidblockmenu li{
 +
display: inline;
 +
}
 +
 
 +
ul.solidblockmenu li a{
 +
font: bold 14px Arial, Verdana, sans-serif;
 +
color: black;
 +
padding: 8px;
 +
margin-right: 20px; /*spacing between each menu link*/
 +
text-decoration: none;
 +
}
 +
 
 +
ul.solidblockmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
 +
position:absolute;
 +
width:0;
 +
border:1px solid black;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
border-radius:4px;
 +
-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
 +
-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
 +
box-shadow: 2px 2px 4px rgba(120,120,120,0.7);
 +
background:#d7ed93;
 +
background: -moz-linear-gradient(top, #d7ed93, #fff);
 +
background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));
 +
background: linear-gradient(top, #d7ed93, #fff);
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* ######### Thick Underline Menu CSS ######### */
 +
 
 +
 
 +
ul.underlinemenu{
 +
margin: 0;
 +
margin-bottom:1em;
 +
padding: 0;
 +
list-style: none;
 +
position:relative;
 +
text-align: center; //set value to "left", "center", or "right"*/
 +
}
 +
 
 +
ul.underlinemenu li{
 +
display: inline;
 +
}
 +
 
 +
ul.underlinemenu li a{
 +
font: bold 14px Arial, Verdana, sans-serif;
 +
color: black;
 +
padding: 8px;
 +
margin-right: 20px; /*spacing between each menu link*/
 +
text-decoration: none;
 +
}
 +
 
 +
 
 +
ul.underlinemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
 +
position:absolute;
 +
width:0;
 +
border-bottom:5px solid navy;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* ######### Frame Menu CSS ######### */
 +
 
 +
 
 +
ul.framemenu{
 +
margin: 0;
 +
margin-bottom:1em;
 +
padding: 0;
 +
list-style: none;
 +
position:relative;
 +
text-align: center; //set value to "left", "center", or "right"*/
 +
}
 +
 
 +
ul.framemenu li{
 +
display: inline;
 +
}
 +
 
 +
ul.framemenu li a{
 +
font: bold 14px Arial, Verdana, sans-serif;
 +
color: black;
 +
padding: 12px 10px 5px 18px;
 +
margin-right: 10px; /*spacing between each menu link*/
 +
text-decoration: none;
 +
}
 +
 
 +
 
 +
ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
 +
position:absolute;
 +
width:0;
 +
border:4px solid orange;
 +
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
 +
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
 +
box-shadow: 0 0 4px rgba(120,120,120,0.7);
 +
}
 +
#notebookmenu
 +
{
 +
height: 100px;
 +
z-index: 99;
 +
background-color:white;
}
}
#footer
#footer
{
{
width:1000px;
width:1000px;
 +
background-color: transparent;
}
}
body
body
Line 430: Line 820:
float:left;
float:left;
margin-top: 50px;
margin-top: 50px;
 +
background-image: url('http://dl.dropbox.com/u/46807995/retina_wood.png');
 +
border-radius: 5px;
 +
padding: 5px;
}
}
#twitter_wrapper
#twitter_wrapper
Line 515: Line 908:
margin-left:auto;
margin-left:auto;
margin-right:auto;
margin-right:auto;
-
margin-top: 150px;
+
margin-top: 100px;
 +
opacity: 1.0;
background-image: url('http://dl.dropbox.com/u/46807995/retina_wood.png');
background-image: url('http://dl.dropbox.com/u/46807995/retina_wood.png');
-
border-radius: 15px;
+
border-radius: 15px;
 +
padding: 10px;
 +
-moz-box-shadow: 3px 3px 4px #000;
 +
-webkit-box-shadow: 3px 3px 4px #000;
 +
box-shadow: 3px 3px 4px #000;
 +
 
 +
}
 +
#pagecontentcontainer
 +
{
 +
 
 +
opacity: 0.8;
}
}
#topbarcontainer
#topbarcontainer
Line 547: Line 951:
{
{
position:absolute; width:75px; right:0px; top:0px;
position:absolute; width:75px; right:0px; top:0px;
-
}
 
-
.ca-container{
 
-
position:relative;
 
-
margin:25px auto 20px auto;
 
-
width:990px;
 
-
height:450px;
 
-
        background-color: transparent;
 
-
}
 
-
.ca-wrapper{
 
-
width:100%;
 
-
height:100%;
 
-
position:relative;
 
-
}
 
-
.ca-item{
 
-
position:relative;
 
-
float:left;
 
-
width:330px;
 
-
height:100%;
 
-
text-align:center;
 
-
}
 
-
.ca-more{
 
-
position: absolute;
 
-
bottom: 10px;
 
-
right:0px;
 
-
padding:4px 15px;
 
-
font-weight:bold;
 
-
background: #ccbda2;
 
-
text-align:center;
 
-
color: white;
 
-
font-family: "Georgia","Times New Roman",serif;
 
-
font-style:italic;
 
-
text-shadow:1px 1px 1px #897c63;
 
-
}
 
-
.ca-close{
 
-
position:absolute;
 
-
top:10px;
 
-
right:10px;
 
-
background:#fff url('https://photos-2.dropbox.com/btj/fb944905/MtnDr20-rnUT6e81x8dYhcU0Gmu0f1ylMwkTjp1s2UQ/cross.png') no-repeat center center;
 
-
width:27px;
 
-
height:27px;
 
-
text-indent:-9000px;
 
-
outline:none;
 
-
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
opacity:0.7;
 
-
}
 
-
.ca-close:hover{
 
-
opacity:1.0;
 
-
}
 
-
.ca-item-main{
 
-
padding:20px;
 
-
position:absolute;
 
-
top:5px;
 
-
left:5px;
 
-
right:5px;
 
-
bottom:5px;
 
-
background:#fff;
 
-
overflow:hidden;
 
-
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
 
-
}
 
-
.ca-icon{
 
-
width:189px;
 
-
height:189px;
 
-
position:relative;
 
-
margin:0 auto;
 
-
background:transparent url('http://dl.dropbox.com/u/46807995/QGEM%202012%20Logo3.png') no-repeat center center;
 
-
}
 
-
.ca-item-2 .ca-icon{
 
-
background-image:url('http://dl.dropbox.com/u/46807995/QGEM%202012%20Logo3.png');
 
-
}
 
-
.ca-item-3 .ca-icon{
 
-
background-image:url(../images/animal3.png);
 
-
}
 
-
.ca-item-4 .ca-icon{
 
-
background-image:url(../images/animal4.png);
 
-
}
 
-
.ca-item-5 .ca-icon{
 
-
background-image:url(../images/animal5.png);
 
-
}
 
-
.ca-item-6 .ca-icon{
 
-
background-image:url(../images/animal6.png);
 
-
}
 
-
.ca-item-7 .ca-icon{
 
-
background-image:url(../images/animal7.png);
 
-
}
 
-
.ca-item-8 .ca-icon{
 
-
background-image:url(../images/animal8.png);
 
-
}
 
-
.ca-item h3{
 
-
font-family: 'Coustard', sans-serif;
 
-
text-transform:uppercase;
 
-
font-size:30px;
 
-
color:#000;
 
-
margin-bottom:20px;
 
-
height:85px;
 
-
text-align:center;
 
-
text-shadow: 0px 1px 1px #e4ebe9;
 
-
}
 
-
.ca-item h4{
 
-
font-family: 'Philosopher', sans-serif;;
 
-
font-style:italic;
 
-
font-size:12px;
 
-
text-align:left;
 
-
border-left:10px solid #b0ccc6;
 
-
padding-left:10px;
 
-
line-height:24px;
 
-
margin:10px;
 
-
position:relative;
 
-
}
 
-
.ca-item h4 span{
 
-
text-indent:40px;
 
-
display:block;
 
-
}
 
-
.ca-item h4  span.ca-quote{
 
-
color:#f4eee3;
 
-
font-size:100px;
 
-
position:absolute;
 
-
top:20px;
 
-
left:0px;
 
-
text-indent:0px;
 
-
}
 
-
.ca-content-wrapper{
 
-
background:#b0ccc6;
 
-
position:absolute;
 
-
width:0px; /* expands to width of the wrapper minus 1 element */
 
-
height:440px;
 
-
top:5px;
 
-
text-align:left;
 
-
z-index:10000;
 
-
overflow:hidden;
 
-
}
 
-
.ca-content{
 
-
width:660px;
 
-
overflow:hidden;
 
-
}
 
-
.ca-content-text{
 
-
font-size: 14px;
 
-
font-style: italic;
 
-
font-family: "Georgia","Times New Roman",serif;
 
-
margin:10px 20px;
 
-
padding:10px 20px;
 
-
line-height:24px;
 
-
        list-style-type: none;
 
-
}
 
-
.ca-content-text p{
 
-
padding-bottom:5px;
 
-
}
 
-
.ca-content h6{
 
-
margin:25px 20px 0px 35px;
 
-
font-size:32px;
 
-
padding-bottom:5px;
 
-
color:#000;
 
-
font-family: 'Coustard', sans-serif;
 
-
color:#60817a;
 
-
border-bottom:2px solid #99bcb4;
 
-
text-shadow: 1px 1px 1px #99BCB4;
 
-
}
 
-
.ca-content ul{
 
-
margin:20px 35px;
 
-
height:30px;
 
-
        list-style:none;
 
-
}
 
-
.ca-content ul li{
 
-
float:left;
 
-
margin:0px 2px;
 
-
}
 
-
.ca-content ul li a{
 
-
color:#fff;
 
-
background:#000;
 
-
padding:3px 6px;
 
-
font-size:14px;
 
-
font-family: "Georgia","Times New Roman",serif;
 
-
font-style:italic;
 
-
}
 
-
.ca-content ul li a:hover{
 
-
background:#fff;
 
-
color:#000;
 
-
text-shadow:none;
 
-
}
 
-
.ca-nav span{
 
-
width:25px;
 
-
height:38px;
 
-
background:transparent url('https://photos-1.dropbox.com/btj/4159138c/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY/arrows.png?size=1024x768') no-repeat top left;
 
-
position:absolute;
 
-
top:50%;
 
-
margin-top:-19px;
 
-
left:-40px;
 
-
text-indent:-9000px;
 
-
opacity:0.7;
 
-
cursor:pointer;
 
-
z-index:100;
 
-
}
 
-
.ca-nav span.ca-nav-next{
 
-
background-position:top right;
 
-
left:auto;
 
-
right:-40px;
 
-
}
 
-
.ca-nav span:hover{
 
-
opacity:1.0;
 
}
}
.ca-container{
.ca-container{
Line 974: Line 1,176:
     margin-top: 40px;
     margin-top: 40px;
     list-style: none outside none;
     list-style: none outside none;
 +
    cursor: pointer;
 +
    padding: 5px;
     -moz-transform: scaleY(0);
     -moz-transform: scaleY(0);
Line 1,003: Line 1,207:
     -webkit-transform: scaleY(1);
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     transform: scaleY(1);
 +
}
 +
 +
.subs li
 +
{
 +
width: 170px;
 +
border: 0px black solid;
 +
border-bottom: 2px;
 +
}
 +
.subs li:hover
 +
{
 +
width: 170;
 +
background-color: blue;
 +
background-image: url('http://dl.dropbox.com/u/46807995/menu2.png');
}
}
</style>
</style>

Revision as of 00:47, 1 October 2012
Control

Retrieved from "http://2012.igem.org/Template:Queens_Canada/Headernojs"