Team:NRP-UEA-Norwich/Test/css

From 2013.igem.org

(Difference between revisions)
 
(220 intermediate revisions not shown)
Line 1: Line 1:
-
/* Credit: http://www.templatemo.com */
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
-
body {
 
-
margin: 0px;
 
-
padding: 0px;
 
-
color: #666;
 
-
font-family: Tahoma, Geneva, sans-serif;
 
-
font-size: 13px;
 
-
line-height: 1.7em;
 
-
background-color: #4a4d51;
 
-
background-image: url(images/templatemo_body.jpg);
 
-
background-repeat: repeat-x;
 
-
background-position: top
 
-
}
 
-
a, a:link, a:visited { color: #c89806; font-weight: bold; text-decoration: none; }
 
-
a:hover { color: #FF6600; text-decoration: underline; }
 
-
p { margin: 0 0 10px 0; padding: 0; }
 
-
img { border: none; }
 
-
em { color: #000; font-weight: bold; font-style: normal }
 
-
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
+
/* Menu CSS */
-
h1 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0 }
+
-
h2 { font-size: 25px; margin: 0 0 15px 0; padding: 5px 0; }
+
-
h3 { font-size: 22px; margin: 0 0 15px; padding: 0; }
+
-
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
+
-
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
+
-
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
+
-
.cleaner { clear: both }
+
#cssmenu, #cssmenu > ul{
-
.h10 { height: 10px }
+
-
.h20 { height: 20px }
+
background: #1b1b1b;
-
.h30 { height: 30px }
+
padding-bottom: 3px;
-
.h40 { height: 40px }
+
font-family: Verdana, 'Open Sans', sans-serif;
-
.h50 { height: 50px }
+
font-weight: 590;
-
.h60 { height: 60px }
+
        border-radius: 7px;
-
a.more { display: block; width: 75px; height: 25px; text-align: center; padding: 0px 15px 0 0; color: #fff; font-weight: normal; background: url(images/templatemo_button.png) }
+
       
-
a.more:hover { text-decoration: none; color: #faca39; }
+
 +
 +
}
-
.float_l { float: left }
+
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
-
.float_r { float: right }
+
-
.image_wrapper { display: inline-block; border: 5px solid #fff; background: none; margin-bottom: 5px }
+
content: '';
-
.image_fl { float: left; margin: 3px 15px 0 0 }
+
display: table;
-
.image_fr { float: right; margin: 3px 0 0 15px }
+
 +
}
-
.tmo_list { margin: 20px 0 20px 20px; padding: 0; list-style: none }
+
#cssmenu:after, #cssmenu > ul:after {
-
.tmo_list li { color:#d7a202; margin: 0; padding: 0 0 0 15px; background: url(images/templatemo_list.png) no-repeat scroll 0 6px  }
+
-
.tmo_list li a { color: #c89806; font-weight: normal }
+
-
.tmo_list li a:hover { color: #d7a202 }
+
-
#templatemo_wrapper {
+
clear: both;
-
width: 960px;
+
-
padding: 0 30px;
+
-
margin: 0 auto
+
}
}
-
#templatemo_header {
+
#cssmenu {
-
width: 930px;
+
 
-
height: 50px;
+
zoom:1;
-
padding: 15px;
+
}
}
-
#site_title { float: left; }
+
#cssmenu > ul{
-
#site_title h1 { margin: 0; padding: 0 }
+
-
#site_title h1 a { display: block; width: 275px; height: 57px; color: #F60; text-indent: -10000px; background: url(images/templatemo_logo.png) no-repeat }
+
background: url(https://static.igem.org/mediawiki/2013/e/e0/Menu-bg.png) repeat;
-
 
+
margin: 0;
-
#twitter a{ float: right; font-weight: normal; display: block; padding: 13px 50px 13px 0; color: #f0c132; font-size: 18px; background: url(images/twitter.png) no-repeat right center }
+
padding: 0;
-
 
+
        position: relative;
-
/* menu */
+
        border-radius: 7px;
-
#templatemo_menu {
+
       
-
clear: both;
+
       
-
width: 930px;
+
-
height: 45px;
+
-
padding: 0 15px;
+
-
background: url(images/menu.jpg) no-repeat
+
}
}
-
#templatemo_menu ul {
+
#cssmenu > ul li{
-
float: left;
+
-
width: 695px;
+
margin: 0;
margin: 0;
padding: 0;
padding: 0;
list-style: none;
list-style: none;
 +
}
}
-
#templatemo_menu ul li {
+
#cssmenu > ul > li{
-
padding: 0px;
+
-
margin: 0px;
+
-
display: inline;
+
-
}
+
-
#templatemo_menu ul li a {
 
float: left;
float: left;
 +
position: relative;
 +
 +
}
 +
 +
#cssmenu > ul > li > a{
 +
 +
padding: 23px 26px;
display: block;
display: block;
-
padding: 8px 20px;
+
color: white;
-
margin: 0 1px 0 0;
+
font-size: 12px;
-
font-size: 14px;
+
-
font-weight: bold;
+
-
text-align: center;
+
text-decoration: none;
text-decoration: none;
-
color: #000;
+
text-transform: uppercase;
-
outline: none;
+
text-shadow: 0 -1px 0 #0d0d0d;
-
border: none;
+
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
-
background: url(images/templatemo_menu_divider.png) center right no-repeat
+
line-height: 18px;
 +
}
}
-
#templatemo_menu ul li a:hover, #templatemo_menu ul li .current { color: #fff; background: #d5a30b; }
 
-
#search_box { float: right; width: 200px; height: 20px; margin: 10px 15px 10px 0; background: url(images/templatemo_search.jpg) left bottom no-repeat }
+
#cssmenu > ul > li:hover > a{
-
#search_box form { clear: both; width: 200px; height: 19px; padding: 0; margin: 0 }
+
-
#searchfield { height: 18px;  line-height: 18px; width: 190px; padding: 0 5px; font-size: 11px; color: #a09391; background: #605654; border: 1px solid #453c3a; }
+
-
/* end of menu */
+
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);
 +
       
-
/* slider */
+
       
-
#slider_wrapper {
+
-
clear: both;
+
-
width: 960px;
+
-
height: 300px;
+
-
margin-bottom: 15px;
+
-
background: url(images/slider_bottom.jpg) bottom no-repeat
+
}
}
-
#slider_wrapper_n { clear: both; width: 900px; padding: 30px; margin-bottom: 15px; background: #000 url(images/slider_bottom.jpg) no-repeat bottom }
+
#cssmenu > ul > li > a > span{
-
#slider_wrapper_n h2 {
+
 
-
color: #fff;
+
line-height: 15px;
 +
}
}
-
#slider_wrapper_n p { font-size: 16px }
 
-
#slider {  
+
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
-
width: 960px;
+
-
height: 280px;
+
background: url(https://static.igem.org/mediawiki/2013/8/86/ActiveUEA_Button.png) repeat;
-
overflow: hidden;
+
       
 +
       
 +
}
}
-
/* end of slider */
 
-
#templatemo_main {
+
/* Childs */
-
clear: both;
+
-
position: relative;
+
-
width: 960px;
+
-
padding: 30px 0;
+
-
background: #fff url(images/content_top.jpg) no-repeat top
+
-
}
+
-
#templatemo_main span.bottom {
+
#cssmenu > ul ul{
 +
 
 +
opacity: 0;
 +
visibility: hidden;
position: absolute;
position: absolute;
 +
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;
-
bottom: 0;
+
-
width: 960px;
+
-
height: 15px;
+
-
background: url(images/content_bottom.jpg) no-repeat
+
}
}
-
.col_w900 { width: 900px; padding: 0 30px 70px 30px; margin-bottom: 0; background: url(images/content_divider.jpg) repeat-x bottom }
+
#cssmenu > ul ul:before{
-
.col_w580 { width: 580px }
+
-
.col_w420 { width: 420px }
+
-
.col_w280 { width: 280px }
+
-
.col_allw280 { float: left; width: 280px; margin-right: 30px }
+
-
.col_w900_last { padding: 0 30px; margin: 0; background: none; }
+
-
.col_last { margin: 0; }
+
-
.frontpage_box h2 { padding: 0; margin-bottom: 5px; color: #333 }
+
content: '';
-
.frontpage_box img { float: left; margin-right: 15px }
+
position: absolute;
-
.frontpage_box a.more { margin-top: 15px }
+
top: -10px;
-
.tagline { display: block; font-size: 12px; font-weight: bold; font-style: italic; color: #999; margin-bottom: 20px }
+
width: 100%;
 +
height: 20px;
 +
background: transparent;
 +
 +
}
-
.lbe_box { clear: both; margin-bottom: 20px }
 
-
.lbe_box h3 { font-size: 16px; margin-bottom: 0 }
 
-
.lbe_box h3 a { color: #c89806; font-size: 16px; font-weight: normal }
 
-
.lbe_box p { margin-bottom: 0; }
 
-
.lbe_box p.date { font-size: 10px; font-weight: 700; color: #000 }
 
-
.lp_box { float: left; width: 280px; margin-right: 30px }
+
#cssmenu > ul ul li{
-
.lp_box_last { margin: 0 }
+
-
.lp_box img { border: 1px solid #CCC; padding: 4px }
+
-
#map img { width: 270px; height: 160px; border: 1px solid #999; padding: 4px }
+
list-style: none;
 +
padding: 0;
 +
margin: 0;
 +
width: 100%;
 +
 +
}
-
#cp_contact_form { padding: 0; width: 380px }
+
#cssmenu > ul ul li a{
-
#cp_contact_form form { margin: 0px; padding: 0px; }
+
-
#cp_contact_form form .input_field {
+
padding: 18px 26px;
-
width: 380px; font-size: 12px; color: #333; padding: 5px;  
+
display: block;
-
height: 20px; border: 1px solid #ccc; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
+
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;
-
#cp_contact_form form label { display: block; width: 220px; margin-bottom: 5px; font-size: 12px; color: #000; }
+
}
-
#cp_contact_form form textarea {  
+
#cssmenu > ul ul li a:hover{
-
width: 380px; height: 160px; padding: 5px; color: #333;  
+
 
-
border: 1px solid #ccc; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
+
border-left: 4px solid #b30e0e;
 +
background: url(https://static.igem.org/mediawiki/2013/8/86/ActiveUEA_Button.png) repeat;
 +
       
 +
 
 +
}
 +
 
 +
#cssmenu > ul ul li a:active{
 +
 
 +
background: url(https://static.igem.org/mediawiki/2013/e/e0/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;
 +
}
 +
 
 +
#center {
 +
text-align:center; <!-- not sure if need this-->
-
#cp_contact_form form .submit_btn { margin: 10px 0px; padding: 5px 14px; border: 1px solid #ccc; background: #fff; }
+
}
-
.news_box { clear: both; margin-bottom: 30px }
+
#p-logo {
-
.news_box h2 { font-size: 20px; margin-bottom: 0 }
+
    visibility:hidden;
-
.news_box p.date { color: #000 }
+
}
-
.news_box img { float: left; width: 100px; height: 100px; padding: 4px; border: 1px solid #000; margin-right: 30px }
+
-
.news_box a.more { float: right; }
+
-
.sb_lp_box { clear: both; margin-bottom: 20px }
+
#searchform {
-
.sb_lp_box img { padding: 9px; border: 1px solid #ccc }
+
    visibility:hidden;
 +
}
-
.post_box { clear: both; margin-bottom: 30px }
 
-
.post_box h2 { font-size: 20px; margin-bottom: 10px }
 
-
.post_box p.post_meta { margin-bottom: 0 }
 
-
.post_box p span.cat a { color: #cb5c02; font-weight: 400 }
 
-
.post_box img { width: 550px; height: 160px; border: 10px solid #eee; margin-bottom: 10px }
 
-
.post_box a.more { float: right; }
 
-
#gallery { margin: 0; padding: 0 }
+
#top-section{
-
#gallery .gallery_box { display: block; float: left; width: 210px; margin: 0 20px 40px 0; }
+
-
#gallery .lmb { margin: 0 0 20px 0; }
+
-
.gallery_box h3 { margin-bottom: 10px }
+
border:none;
-
.gallery_box h3 a { font-size: 18px; font-weight: normal; color: #1184df }
+
margin-bottom: -85px;
-
.gallery_box p { font-style: italic; font-size: 11px; font-weight: bold }
+
}
-
.gallery_box a img { border: 1px solid #ccc; width: 190px; height: 130px; padding: 8px }
+
#catlinks{
-
.gallery_box a img:hover { background: #ccc }
+
border:none;
 +
display:none;
 +
}
 +
#content {padding:0px; width: 975px; border:none; background: none;}
-
#gallery a.more { float: left; margin-right: 10px }
 
 +
#footer-box {
 +
position:absolute;
 +
background:none;
 +
border:none;
 +
}
-
#templatemo_footer {
+
 
-
clear: both;
+
 
-
width: 960px;
+
.content-wrap {
-
padding: 10px 0;
+
        position:absolute;
 +
        left:50px;
 +
        top:700px;
 +
width: 291px;
 +
        height: 54px;
margin: 0 auto;
margin: 0 auto;
-
color: #000;
+
display:block;
-
text-align: center;
+
clear:both;
-
font-size: 11px;
+
margin-top: 0px;
-
}
+
background: #f0e8e8;
 +
padding: 0px;
 +
-webkit-border-radius: 5px;
 +
-moz-border-radius: 5px;
 +
border-radius: 10px;
-
#templatemo_footer a {
 
-
font-weight: normal;
 
-
color: #000;
 
}
}

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;

}

Retrieved from "http://2013.igem.org/Team:NRP-UEA-Norwich/Test/css"