Team:NRP-UEA-Norwich/Test/css

From 2013.igem.org

(Difference between revisions)
 
(221 intermediate revisions not shown)
Line 1: Line 1:
-
/**
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
-
* jQuery lightBox plugin
+
 
-
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
+
 
-
* and adapted to me for use like a plugin from jQuery.
+
 
-
* @name jquery-lightbox-0.5.css
+
 
-
* @author Leandro Vieira Pinho - http://leandrovieira.com
+
/* Menu CSS */  
-
* @version 0.5
+
 
-
* @date April 11, 2008
+
#cssmenu, #cssmenu > ul{
-
* @category jQuery plugin
+
-
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
+
background: #1b1b1b;
-
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
+
padding-bottom: 3px;
-
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
+
font-family: Verdana, 'Open Sans', sans-serif;
-
*/
+
font-weight: 590;
-
#jquery-overlay {
+
        border-radius: 7px;
-
position: absolute;
+
 
-
top: 0;
+
       
-
left: 0;
+
-
z-index: 90;
+
-
width: 100%;
+
-
height: 500px;
+
}
}
-
#jquery-lightbox {
+
 
-
position: absolute;
+
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
-
top: 0;
+
 
-
left: 0;
+
content: '';
-
width: 100%;
+
display: table;
-
z-index: 100;
+
-
text-align: center;
+
-
line-height: 0;
+
}
}
-
#jquery-lightbox a img { border: none; }
+
 
-
#lightbox-container-image-box {
+
 
 +
#cssmenu:after, #cssmenu > ul:after {
 +
 
 +
clear: both;
 +
 +
}
 +
 
 +
#cssmenu {
 +
 
 +
zoom:1;
 +
 +
}
 +
 
 +
#cssmenu > ul{
 +
 +
background: url(https://static.igem.org/mediawiki/2013/e/e0/Menu-bg.png) repeat;
 +
margin: 0;
 +
padding: 0;
 +
        position: relative;
 +
        border-radius: 7px;
 +
       
 +
       
 +
 +
}
 +
 
 +
#cssmenu > ul li{
 +
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
 +
}
 +
 
 +
#cssmenu > ul > li{
 +
 
 +
float: left;
position: relative;
position: relative;
-
background-color: #fff;
+
-
width: 250px;
+
-
height: 250px;
+
-
margin: 0 auto;
+
}
}
-
#lightbox-container-image { padding: 10px; }
+
 
-
#lightbox-loading {
+
#cssmenu > ul > li > a{
-
position: absolute;
+
 
-
top: 40%;
+
padding: 23px 26px;
-
left: 0%;
+
display: block;
-
height: 25%;
+
color: white;
-
width: 100%;
+
font-size: 12px;
-
text-align: center;
+
text-decoration: none;
-
line-height: 0;
+
text-transform: uppercase;
 +
text-shadow: 0 -1px 0 #0d0d0d;
 +
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
 +
line-height: 18px;
 +
}
}
-
#lightbox-nav {
+
 
 +
 
 +
#cssmenu > ul > li:hover > a{
 +
 
 +
background: url(https://static.igem.org/mediawiki/2013/d/d4/Menu-bg11.png) repeat;
 +
text-shadow: 0 -1px 0 #97321f;
 +
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
 +
       
 +
 
 +
       
 +
 +
}
 +
 
 +
#cssmenu > ul > li > a > span{
 +
 
 +
line-height: 15px;
 +
 +
}
 +
 
 +
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
 +
 +
background: url(https://static.igem.org/mediawiki/2013/8/86/ActiveUEA_Button.png) repeat;
 +
       
 +
       
 +
 +
}
 +
 
 +
 
 +
 
 +
/* Childs */
 +
 
 +
#cssmenu > ul ul{
 +
 
 +
opacity: 0;
 +
visibility: hidden;
position: absolute;
position: absolute;
-
top: 0;
+
top: 120px;
 +
background: url(https://static.igem.org/mediawiki/2013/e/e0/Menu-bg.png) repeat;
 +
margin: 0;
 +
padding: 0;
 +
z-index: -1;
 +
     
 +
 
 +
 +
}
 +
 
 +
#cssmenu > ul li:hover ul{
 +
opacity: 1;
 +
visibility: visible;
 +
margin: 0;
 +
color: #000;
 +
z-index: 2;
 +
top:64px;
left: 0;
left: 0;
-
height: 100%;
+
 +
}
 +
 
 +
#cssmenu > ul ul:before{
 +
 
 +
content: '';
 +
position: absolute;
 +
top: -10px;
width: 100%;
width: 100%;
-
z-index: 10;
+
height: 20px;
 +
background: transparent;
 +
}
}
-
#lightbox-container-image-box > #lightbox-nav { left: 0; }
+
 
-
#lightbox-nav a { outline: none;}
+
 
-
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
+
#cssmenu > ul ul li{
-
width: 49%;
+
 
-
height: 100%;
+
list-style: none;
-
zoom: 1;
+
padding: 0;
 +
margin: 0;
 +
width: 100%;
 +
 +
}
 +
 
 +
#cssmenu > ul ul li a{
 +
 
 +
padding: 18px 26px;
display: block;
display: block;
 +
color: white;
 +
font-size: 13px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
width: 150px;
 +
border-left: 4px solid transparent;
 +
-webkit-transition: all .35s ease-in-out;
 +
-moz-transition: all .35s ease-in-out;
 +
-ms-transition: all .35s ease-in-out;
 +
transition: all .35s ease-in-out;
 +
}
}
-
#lightbox-nav-btnPrev {  
+
 
-
left: 0;  
+
#cssmenu > ul ul li a:hover{
-
float: left;
+
 
 +
border-left: 4px solid #b30e0e;
 +
background: url(https://static.igem.org/mediawiki/2013/8/86/ActiveUEA_Button.png) repeat;
 +
       
 +
 
}
}
-
#lightbox-nav-btnNext {  
+
 
-
right: 0;
+
#cssmenu > ul ul li a:active{
-
float: right;
+
 
 +
background: url(https://static.igem.org/mediawiki/2013/e/e0/Menu-bg.png) repeat;
 +
       
 +
 
}
}
-
#lightbox-container-image-data-box {
+
 
-
font: 10px Verdana, Helvetica, sans-serif;
+
 
-
background-color: #fff;
+
 
-
margin: 0 auto;
+
 
-
line-height: 1.4em;
+
 
-
overflow: auto;
+
 
-
width: 100%;
+
 
-
padding: 0 10px 0;
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
 +
 
 +
/*body {background-image: linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);
 +
background-image: -o-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);
 +
background-image: -moz-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);
 +
background-image: -webkit-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);
 +
background-image: -ms-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);
 +
 
 +
background-image: -webkit-gradient(
 +
linear,
 +
left bottom,
 +
left top,
 +
color-stop(0.28, rgb(219,219,219)),
 +
color-stop(0.71, rgb(143,143,143))
 +
);
}
}
-
#lightbox-container-image-data {
+
*/
-
padding: 0 10px;  
+
body {
-
color: #666;  
+
 
 +
background: url('https://static.igem.org/mediawiki/2013/2/2f/Dirt.png') no-repeat center center fixed;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
}
}
-
#lightbox-container-image-data #lightbox-image-details {  
+
h1.firstHeading {
-
width: 70%;  
+
 
-
float: left;  
+
visibility:hidden;
-
text-align: left;  
+
}
-
}
+
 
-
#lightbox-image-details-caption { font-weight: bold; }
+
#center {
-
#lightbox-image-details-currentNumber {
+
text-align:center; <!-- not sure if need this-->
-
display: block;  
+
-
clear: left;  
+
}
-
padding-bottom: 1.0em;
+
 
-
}
+
#p-logo {
-
#lightbox-secNav-btnClose {
+
    visibility:hidden;
-
width: 66px;  
+
}
-
float: right;
+
 
-
padding-bottom: 0.7em;
+
#searchform {
 +
    visibility:hidden;
 +
}
 +
 
 +
 
 +
#top-section{
 +
 
 +
border:none;
 +
margin-bottom: -85px;
 +
}
 +
#catlinks{
 +
border:none;
 +
display:none;
 +
}
 +
#content {padding:0px; width: 975px; border:none; background: none;}
 +
 
 +
 
 +
#footer-box {
 +
position:absolute;
 +
background:none;
 +
border:none;
 +
}
 +
 
 +
 
 +
 
 +
.content-wrap {
 +
        position:absolute;
 +
        left:50px;
 +
        top:700px;
 +
width: 291px;
 +
        height: 54px;
 +
margin: 0 auto;
 +
display:block;
 +
clear:both;
 +
margin-top: 0px;
 +
background: #f0e8e8;
 +
padding: 0px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 10px;
 +
 
}
}

Latest revision as of 10:20, 2 October 2013

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);



/* Menu CSS */

  1. cssmenu, #cssmenu > ul{

background: #1b1b1b; padding-bottom: 3px; font-family: Verdana, 'Open Sans', sans-serif; font-weight: 590;

       border-radius: 7px;



}

  1. cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

content: ; display: table;

}


  1. cssmenu:after, #cssmenu > ul:after {

clear: both;

}

  1. cssmenu {

zoom:1;

}

  1. cssmenu > ul{

background: url(Menu-bg.png) repeat; margin: 0; padding: 0;

       position: relative;
       border-radius: 7px;
       
       

}

  1. cssmenu > ul li{

margin: 0; padding: 0; list-style: none;

}

  1. cssmenu > ul > li{

float: left; position: relative;

}

  1. cssmenu > ul > li > a{

padding: 23px 26px; display: block; color: white; font-size: 12px; text-decoration: none; text-transform: uppercase; text-shadow: 0 -1px 0 #0d0d0d; text-shadow: 0 -1px 0 rgba(0, 0, 0, .70); line-height: 18px;

}


  1. cssmenu > ul > li:hover > a{

background: url(Menu-bg11.png) repeat; text-shadow: 0 -1px 0 #97321f; text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);



}

  1. cssmenu > ul > li > a > span{

line-height: 15px;

}

  1. cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{

background: url(ActiveUEA_Button.png) repeat;


}


/* Childs */

  1. cssmenu > ul ul{

opacity: 0; visibility: hidden; position: absolute; top: 120px; background: url(Menu-bg.png) repeat; margin: 0; padding: 0; z-index: -1;


}

  1. cssmenu > ul li:hover ul{

opacity: 1; visibility: visible; margin: 0; color: #000; z-index: 2; top:64px; left: 0;

}

  1. cssmenu > ul ul:before{

content: ; position: absolute; top: -10px; width: 100%; height: 20px; background: transparent;

}


  1. cssmenu > ul ul li{

list-style: none; padding: 0; margin: 0; width: 100%;

}

  1. cssmenu > ul ul li a{

padding: 18px 26px; display: block; color: white; font-size: 13px; text-decoration: none; text-transform: uppercase; width: 150px; border-left: 4px solid transparent; -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -ms-transition: all .35s ease-in-out; transition: all .35s ease-in-out;

}

  1. cssmenu > ul ul li a:hover{

border-left: 4px solid #b30e0e; background: url(ActiveUEA_Button.png) repeat;


}

  1. cssmenu > ul ul li a:active{

background: url(Menu-bg.png) repeat;


}


















@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);

/*body {background-image: linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%); background-image: -o-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%); background-image: -moz-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%); background-image: -webkit-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%); background-image: -ms-linear-gradient(bottom, rgb(219,219,219) 28%, rgb(143,143,143) 71%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.28, rgb(219,219,219)), color-stop(0.71, rgb(143,143,143)) ); }

  • /

body {

background: url('https://static.igem.org/mediawiki/2013/2/2f/Dirt.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1.firstHeading {

visibility:hidden; }

  1. center {

text-align:center;

}

  1. p-logo {
   visibility:hidden;

}

  1. searchform {
   visibility:hidden;

}


  1. top-section{

border:none; margin-bottom: -85px; }

  1. catlinks{

border:none; display:none; }

  1. content {padding:0px; width: 975px; border:none; background: none;}


  1. footer-box {

position:absolute; background:none; border:none; }


.content-wrap {

       position:absolute;
       left:50px;
       top:700px;

width: 291px;

       height: 54px;

margin: 0 auto; display:block; clear:both; margin-top: 0px; background: #f0e8e8; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 10px;

}