Team:IBB Pune/style2

From 2009.igem.org

(Difference between revisions)
(New page: /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts ********************************************...)
Line 1: Line 1:
-
/*******************************************************************************
 
-
DESIGN INFORMATION: describes color scheme, borders, fonts
+
/*
 +
Design by Free CSS Templates
 +
http://www.freecsstemplates.org
 +
Released for free under a Creative Commons Attribution 2.5 License
 +
*/
-
*******************************************************************************/
+
body {
 +
margin-top: 20px;
 +
padding: 0;
 +
background: #A8A604;
 +
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 +
font-size: 13px;
 +
color: #FFFFFF;
 +
}
-
/* Outermost menu container has borders on all sides */
+
h1, h2, h3 {
-
ul.MenuBarVertical
+
margin: 0;
-
{
+
font-family: Georgia, "Times New Roman", Times, serif;
-
border: 1px solid #CCC;
+
font-weight: normal;
 +
color: #649632;
}
}
-
/* Submenu containers have borders on all sides */
+
 
-
ul.MenuBarVertical ul
+
h1 { font-size: 44px; }
-
{
+
 
-
border: 1px solid #CCC;
+
h2 { font-size: 26px; }
 +
 
 +
h3 { }
 +
 
 +
p, ul, ol {
 +
margin-top: 0;
 +
line-height: 240%;
 +
text-align: justify;
 +
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 +
font-size: 11px;
}
}
-
/* Menu items are a light gray block with padding and no text decoration */
+
 
-
ul.MenuBarVertical a
+
ul, ol { }
-
{
+
 
 +
blockquote { }
 +
 
 +
a { color: #000000; }
 +
 
 +
a:hover { text-decoration: none; }
 +
 
 +
a img {
 +
border: none;
 +
}
 +
 
 +
img.left {
 +
float: left;
 +
margin: 7px 30px 0 0;
 +
}
 +
 
 +
img.right {
 +
float: right;
 +
margin: 7px 0 0 30px;
 +
}
 +
 
 +
hr { display: none; }
 +
 
 +
.list1 {
 +
}
 +
 
 +
.list1 li {
 +
float: left;
 +
line-height: normal;
 +
}
 +
 
 +
.list1 li img {
 +
margin: 0 30px 30px 0;
 +
}
 +
 
 +
.list1 li.alt img {
 +
margin-right: 0;
 +
}
 +
 
 +
#wrapper {
 +
}
 +
 
 +
/* Header */
 +
 
 +
#header-wrapper {
 +
width: 900px;
 +
margin: 0 auto;
 +
}
 +
 
 +
#header {
 +
width: 900px;
 +
height: 70px;
 +
margin: 0 auto;
 +
background: url(images/img02.jpg) no-repeat left top;
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#menu {
 +
float: left;
 +
width: 1000px;
 +
height: 50px;
 +
}
 +
 
 +
#menu ul {
 +
margin: 0;
 +
padding: 13px 0 0 10px;
 +
list-style: none;
 +
line-height: normal;
 +
}
 +
 
 +
#menu li {
 +
display: block;
 +
float: left;
 +
}
 +
 
 +
#menu a {
display: block;
display: block;
-
cursor: pointer;
+
float: left;
-
background-color: #EEE;
+
margin-right: 17px;
-
padding: 0.5em 0.75em;
+
padding: 5px 12px;
-
color: #333;
+
text-decoration: none;
text-decoration: none;
 +
font: 14px Georgia, "Times New Roman", Times, serif;
 +
color: #FFFFFF;
}
}
-
/* Menu items that have mouse over or focus have a blue background and white text */
+
 
-
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
+
#menu a:hover { text-decoration: underline; }
-
{
+
 
-
background-color: #33C;
+
#menu .current_page_item a {
-
color: #FFF;
+
color: #FFFFFF;
}
}
-
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
+
 
-
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
+
/* Search */
-
{
+
 
-
background-color: #33C;
+
#search {
-
color: #FFF;
+
float: right;
 +
width: 305px;
 +
height: 76px;
}
}
-
/*******************************************************************************
+
#search form {
 +
float: right;
 +
margin: 0;
 +
padding: 15px 20px 0 0;
 +
}
-
SUBMENU INDICATION: styles if there is a submenu under a given menu item
+
#search fieldset {
 +
margin: 0;
 +
padding: 0;
 +
border: none;
 +
}
-
*******************************************************************************/
+
#search input {
 +
float: left;
 +
font: 12px Georgia, "Times New Roman", Times, serif;
 +
border: none;
 +
}
-
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
+
#search-text {
-
ul.MenuBarVertical a.MenuBarItemSubmenu
+
width: 135px;
-
{
+
height: 18px;
-
background-image: url(SpryMenuBarRight.gif);
+
padding: 3px 0 0 5px;
-
background-repeat: no-repeat;
+
background: #ECF9E4;
-
background-position: 95% 50%;
+
color: #658453;
}
}
-
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
+
#search-submit {
-
ul.MenuBarVertical a.MenuBarItemSubmenuHover
+
height: 21px;
-
{
+
margin-left: 12px;
-
background-image: url(SpryMenuBarRightHover.gif);
+
color: #39561D;
-
background-repeat: no-repeat;
+
-
background-position: 95% 50%;
+
}
}
-
/*******************************************************************************
+
/* Page */
-
BROWSER HACKS: the hacks below should not be changed unless you are an expert
+
#page {
 +
width: 900px;
 +
margin: 0 auto;
 +
}
-
*******************************************************************************/
+
/** LOGO */
-
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
+
#logo {
-
ul.MenuBarVertical iframe
+
height: 260px;
-
{
+
background: url(images/img01.jpg) no-repeat left top;
-
position: absolute;
+
-
z-index: 1010;
+
-
filter:alpha(opacity:0.1);
+
}
}
-
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
+
 
-
@media screen, projection
+
#logo h1, #logo p {
-
{
+
float: left;
-
ul.MenuBarVertical li.MenuBarItemIE
+
margin: 0;
-
{
+
padding: 0 0 0 20px;
-
display: inline;
+
line-height: normal;
-
f\loat: left;
+
}
-
background: #FFF;
+
 
-
}
+
#logo h1 { padding-top: 140px; }
 +
 
 +
#logo h1 a {
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
color: #FFFFFF;
 +
}
 +
 
 +
#logo h1 a:hover { text-decoration: underline; }
 +
 
 +
#logo p {
 +
padding: 165px 0 0 15px;
 +
font: italic 13px Georgia, "Times New Roman", Times, serif;
 +
color: #B6ACA2;
 +
}
 +
 
 +
#logo p a {
 +
text-decoration: none;
 +
color: #B6ACA2;
 +
}
 +
 
 +
#logo p a:hover { text-decoration: underline; }
 +
 
 +
/* Content */
 +
 
 +
#content {
 +
float: left;
 +
width: 620px;
 +
}
 +
 
 +
/* Post */
 +
 
 +
.post {
 +
margin-bottom: 25px;
 +
}
 +
 
 +
.post .title {
 +
height: 55px;
 +
margin-bottom: 3px;
 +
padding: 19px 0px 2px 20px;
 +
background: url(images/img05.jpg) no-repeat left top;
 +
color: #FFFFFF;
 +
}
 +
 
 +
.post .date {
 +
float: right;
 +
margin-top: -60px;
 +
padding-right: 40px;
 +
font-weight: bold;
 +
font-size: 14px;
 +
color: #B6ACA2;
 +
}
 +
 
 +
.post .meta {
 +
margin: -40px  0 3px 25px;
 +
padding: 2px 30px 2px 0px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: normal;
 +
font-size: 10px;
 +
color: #B6ACA2;
 +
}
 +
 
 +
.post .meta a { color: #B6ACA2; }
 +
 
 +
.post .entry {
 +
padding: 25px 20px;
 +
}
 +
 
 +
.post .links {
 +
margin: 0 250px 0 0;
 +
padding: 0 0 0 0px;
 +
}
 +
 
 +
.post .links .comments {
 +
}
 +
 
 +
.post .links .permalink {
 +
padding-left: 17px;
 +
}
 +
 
 +
/* Sidebar */
 +
 
 +
#sidebar {
 +
float: right;
 +
width: 250px;
 +
}
 +
 
 +
#sidebar ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
line-height: normal;
 +
}
 +
 
 +
#sidebar li {
 +
margin-bottom: 30px;
 +
padding: 0 0 20px 0px;
 +
background: url(images/img04.jpg) no-repeat left bottom;
 +
}
 +
 
 +
#sidebar li ul {
 +
line-height: 200%;
 +
padding-bottom: 20px;
 +
}
 +
 
 +
#sidebar li li {
 +
margin: 0;
 +
padding: 0 20px;
 +
background: none;
 +
}
 +
 
 +
#sidebar h2 {
 +
height: 33px;
 +
margin: 0 0 20px 0px;
 +
padding: 15px 0 2px 20px;
 +
background: url(images/img03.jpg) no-repeat left top;
 +
font-size: 18px;
 +
color: #FFFFFF;
 +
}
 +
 
 +
 
 +
#sidebar p {
 +
padding: 0px 15px;
 +
line-height: 200%;
 +
}
 +
 
 +
#sidebar a {
 +
color: #FFFFFF;
 +
}
 +
 
 +
/* Calendar */
 +
 
 +
#calendar {
 +
}
 +
 
 +
#calendar caption {
 +
padding-bottom: 5px;
 +
font-weight: bold;
 +
}
 +
 
 +
#calendar table {
 +
width: 90%;
 +
border-collapse: collapse;
 +
}
 +
 
 +
#calendar thead th {
 +
padding: 5px 0;
 +
text-align: center;
 +
}
 +
 
 +
#calendar tbody td {
 +
padding: 5px 0;
 +
text-align: center;
 +
}
 +
 
 +
#calendar tfoot td {
 +
padding: 5px;
 +
}
 +
 
 +
#calendar tfoot #next {
 +
text-align: right;
 +
}
 +
 
 +
#calendar #today {
 +
background: #000000;
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer {
 +
width: 900px;
 +
height: 60px;
 +
margin: 0 auto;
 +
padding: 0;
 +
background: url(images/img06.jpg) no-repeat left top;
 +
}
 +
 
 +
#footer p {
 +
margin: 0;
 +
padding: 20px 0;
 +
text-align: center;
 +
line-height: normal;
 +
color: #B5ADA5;
 +
}
 +
 
 +
#footer a {
 +
color: #B5ADA5;
}
}

Revision as of 19:11, 6 July 2009

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License

  • /

body { margin-top: 20px; padding: 0; background: #A8A604; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; }

h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #649632; }

h1 { font-size: 44px; }

h2 { font-size: 26px; }

h3 { }

p, ul, ol { margin-top: 0; line-height: 240%; text-align: justify; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; }

ul, ol { }

blockquote { }

a { color: #000000; }

a:hover { text-decoration: none; }

a img { border: none; }

img.left { float: left; margin: 7px 30px 0 0; }

img.right { float: right; margin: 7px 0 0 30px; }

hr { display: none; }

.list1 { }

.list1 li { float: left; line-height: normal; }

.list1 li img { margin: 0 30px 30px 0; }

.list1 li.alt img { margin-right: 0; }

  1. wrapper {

}

/* Header */

  1. header-wrapper {

width: 900px; margin: 0 auto; }

  1. header {

width: 900px; height: 70px; margin: 0 auto; background: url(images/img02.jpg) no-repeat left top; }

/* Menu */

  1. menu {

float: left; width: 1000px; height: 50px; }

  1. menu ul {

margin: 0; padding: 13px 0 0 10px; list-style: none; line-height: normal; }

  1. menu li {

display: block; float: left; }

  1. menu a {

display: block; float: left; margin-right: 17px; padding: 5px 12px; text-decoration: none; font: 14px Georgia, "Times New Roman", Times, serif; color: #FFFFFF; }

  1. menu a:hover { text-decoration: underline; }
  1. menu .current_page_item a {

color: #FFFFFF; }

/* Search */

  1. search {

float: right; width: 305px; height: 76px; }

  1. search form {

float: right; margin: 0; padding: 15px 20px 0 0; }

  1. search fieldset {

margin: 0; padding: 0; border: none; }

  1. search input {

float: left; font: 12px Georgia, "Times New Roman", Times, serif; border: none; }

  1. search-text {

width: 135px; height: 18px; padding: 3px 0 0 5px; background: #ECF9E4; color: #658453; }

  1. search-submit {

height: 21px; margin-left: 12px; color: #39561D; }

/* Page */

  1. page {

width: 900px; margin: 0 auto; }

/** LOGO */

  1. logo {

height: 260px; background: url(images/img01.jpg) no-repeat left top; }

  1. logo h1, #logo p {

float: left; margin: 0; padding: 0 0 0 20px; line-height: normal; }

  1. logo h1 { padding-top: 140px; }
  1. logo h1 a {

text-decoration: none; text-transform: uppercase; color: #FFFFFF; }

  1. logo h1 a:hover { text-decoration: underline; }
  1. logo p {

padding: 165px 0 0 15px; font: italic 13px Georgia, "Times New Roman", Times, serif; color: #B6ACA2; }

  1. logo p a {

text-decoration: none; color: #B6ACA2; }

  1. logo p a:hover { text-decoration: underline; }

/* Content */

  1. content {

float: left; width: 620px; }

/* Post */

.post { margin-bottom: 25px; }

.post .title { height: 55px; margin-bottom: 3px; padding: 19px 0px 2px 20px; background: url(images/img05.jpg) no-repeat left top; color: #FFFFFF; }

.post .date { float: right; margin-top: -60px; padding-right: 40px; font-weight: bold; font-size: 14px; color: #B6ACA2; }

.post .meta { margin: -40px 0 3px 25px; padding: 2px 30px 2px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 10px; color: #B6ACA2; }

.post .meta a { color: #B6ACA2; }

.post .entry { padding: 25px 20px; }

.post .links { margin: 0 250px 0 0; padding: 0 0 0 0px; }

.post .links .comments { }

.post .links .permalink { padding-left: 17px; }

/* Sidebar */

  1. sidebar {

float: right; width: 250px; }

  1. sidebar ul {

margin: 0; padding: 0; list-style: none; line-height: normal; }

  1. sidebar li {

margin-bottom: 30px; padding: 0 0 20px 0px; background: url(images/img04.jpg) no-repeat left bottom; }

  1. sidebar li ul {

line-height: 200%; padding-bottom: 20px; }

  1. sidebar li li {

margin: 0; padding: 0 20px; background: none; }

  1. sidebar h2 {

height: 33px; margin: 0 0 20px 0px; padding: 15px 0 2px 20px; background: url(images/img03.jpg) no-repeat left top; font-size: 18px; color: #FFFFFF; }


  1. sidebar p {

padding: 0px 15px; line-height: 200%; }

  1. sidebar a {

color: #FFFFFF; }

/* Calendar */

  1. calendar {

}

  1. calendar caption {

padding-bottom: 5px; font-weight: bold; }

  1. calendar table {

width: 90%; border-collapse: collapse; }

  1. calendar thead th {

padding: 5px 0; text-align: center; }

  1. calendar tbody td {

padding: 5px 0; text-align: center; }

  1. calendar tfoot td {

padding: 5px; }

  1. calendar tfoot #next {

text-align: right; }

  1. calendar #today {

background: #000000; }

/* Footer */

  1. footer {

width: 900px; height: 60px; margin: 0 auto; padding: 0; background: url(images/img06.jpg) no-repeat left top; }

  1. footer p {

margin: 0; padding: 20px 0; text-align: center; line-height: normal; color: #B5ADA5; }

  1. footer a {

color: #B5ADA5; }

Retrieved from "http://2009.igem.org/Team:IBB_Pune/style2"