Template:Queens Canada/Headernojs

From 2012.igem.org

(Difference between revisions)
(Undo revision 245155 by P.tsang (talk))
Line 18: Line 18:
<style type="text/css">
<style type="text/css">
-
<style type="text/css">
+
#ca-container h3
-
#navtoggle
+
{
{
-
height:75px;
+
font-family: 'Merienda One', cursive;
-
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;
+
}
}
-
#navtoggle a
+
#ca-container h6
{
{
-
color: white;
+
font-family: 'Merienda One', cursive;
-
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 820: Line 430:
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 908: Line 515:
margin-left:auto;
margin-left:auto;
margin-right:auto;
margin-right:auto;
-
margin-top: 100px;
+
margin-top: 150px;
-
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 951: Line 547:
{
{
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 1,176: Line 974:
     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,207: Line 1,003:
     -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:48, 1 October 2012
Control

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