User:Felice/layoutMaster.css.template
Jump to navigation
Jump to search
This page is monitored by the OLPC team.
/*
Author: Cristian Deschamps, cristian.deschamps@nurun.com
Updated: 11 November 2007
Content: Layout Master
Body
*/
/* ---[ Layout Master ]------------------------------- */
/* ---[ Body ]----------------------------------- */
#skipLink { display: none; }
body {
background-color: #ffffff;
}
/* ---[ Header ]----------------------------------- */
#header {
width: 918px;
height: 182px;
}
#header1 {
width: 918px;
height: 32px;
}
#logo {
position: absolute;
top: 0;
left: 17px;
z-index: 1000;
}
#navigation {
position: absolute;
top: 0;
left: 155px;
}
<!--
#sub-navigation {
position: absolute;
top: 0;
right: 0;
}
-->
#sub-navigation {
position: absolute;
top: 0;
left: 699;
}
#header hr {
display: none;
}
/* ---[ Body Content ]----------------------------------- */
#main-body {
width: 922px;
}
#main-content {
background: url(../img/UI/backgroundMainContent.gif) repeat-y 0 0;
}
#main-content #sub-content {
width: 204px;
min-height: 380px;
float: left;
margin: 0 36px 0 0;
padding: 6px 0 12px 0;
}
#main-content #content {
width: 441px;
min-height: 380px;
float: right;
margin: 0 28px 0 0;
padding: 6px 5px 12px 0;
}
#main-content #tools {
width: 200px;
min-height: 380px;
float: right;
margin: 0 8px 0 0;
padding: 6px 0 12px 0;
background-color: transparent;
}
/* ---[ Main-Content - Tools ]----------------------------------- */
#main-content #tools ul,
#main-content #tools ul li {
padding: 0 0 5px 0;
margin: 0;
list-style: none;
}
#main-content #tools a {
color: #aeb0b2;
text-decoration: none;
font-size: 120%;
padding-bottom: 1px;
line-height: 1.1em;
}
#main-content #tools li.selected a {
color: #5a5758;
}
#main-content #tools a:hover {
color: #5a5758;
}
/* ---[ Main-Content - Content ]----------------------------------- */
a.more {
background: url(../img/UI/icnMore.gif) no-repeat 100% 100%;
padding-bottom: 12px;
}
a.more img {
border: 1px solid #aeb0b2;
}
a.read-more {
text-decoration: none;
}
a.read-more:hover {
text-decoration: underline;
}
#content ul,
div.sections ul {
padding: 3px 0 9px 6px;
margin: 0;
list-style: none;
}
#content ul li,
div.sections ul li {
padding: 3px 0 3px 10px;
margin: 0;
list-style: none;
background-repeat: no-repeat;
background-position: 0 8px;
}
/* News */
div.news {
margin: 12px 0 12px 0;
}
div.news h3 {
padding: 0;
margin: 0;
}
/* FAQ */
div#faq p {
padding: 12px 0 9px 0;
}
div#faq dl {
padding: 0;
margin: 3px 0 14px 0;
}
div#faq dt {
padding: 0;
margin: 0;
color: #CC6600;
cursor:help;
text-decoration: none;
margin: 0 0 3px 0;
}
div#faq dt.hover {
text-decoration: underline;
}
div#faq dd {
padding: 0;
margin: 3px 0 9px 0;
display: none;
}
/* FAQIE */
div#faqIE p {
padding: 12px 0 9px 0;
}
div#faqIE dl {
padding: 0;
margin: 3px 0 14px 0;
}
div#faqIE dt {
padding: 0;
margin: 0;
color: #CC6600;
cursor:help;
text-decoration: none;
margin: 0 0 3px 0;
}
div#faqIE dt.hover {
text-decoration: underline;
}
div#faqIE dd {
padding: 0;
margin: 3px 0 9px 0;
display: visible;
}
/* Progress */
#content #timeline ul,
#content #timeline ul li {
position: relative;
padding: 0;
margin: 0;
list-style: none;
clear: both;
}
#content #timeline ul li:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#content #timeline ul li {
display:inline-block;
}
#content #timeline ul li {
display:block;
}
* html #content #timeline ul li {
height:1px;
}
#content #timeline ul li h3 {
padding: 4px 0 4px 0;
margin: 0;
font-size: 110%;
background: #fff;
}
#content #timeline ul li ul {
padding: 6px 0 14px 0;
background: url(../img/UI/timelineVisual.gif) repeat-y 12px 0;
}
#content #timeline ul li ul li {
padding: 0 0 14px 0;
background: url(../img/UI/timelineVisual2.gif) no-repeat 12px 7px;
}
#content #timeline ul li ul li h4 {
position: absolute;
top: 0;
left: 26px;
padding: 0 5px 0 5px;
margin: 0;
line-height: 1.3em;
background: #fff;
}
#content #timeline ul li ul li p {
width: 310px;
float: right;
padding: 0 10px 10px 8px;
margin: 0;
line-height: 1.3em;
background: #fff;
}
/* People */
div.people {
width: 100%;
min-height: 110px;
margin: 15px 0 15px 0;
}
div.people h3 {
margin-left: 84px;
padding: 0 0 3px 0;
}
div.people h4 {
margin-left: 84px;
font-weight: bold;
}
div.people div.img {
position: absolute;
top: 0;
left: 0;
}
div.people p {
margin-left: 84px;
}
h3.position {
color: #000 !important;
font-size: 110%;
font-weight: bold;
margin: -6px 0 12px 0;
padding: 0;
}
/* Pager */
body #content ul.pager,
body #content ul.pager li {
list-style: none;
padding: 0;
margin: 0;
}
body #content ul.pager {
margin-top: 40px;
height: 1%;
}
body #content ul.pager li a {
color: #aeb0b2 !important;
text-decoration: none;
}
body #content ul.pager li a:hover {
color: #5a5758 !important;
}
body #content ul.pager li.previous {
float: left;
padding-left: 12px;
background: url(../img/UI/icnPrevious.gif) no-repeat 0 2px;
}
body #content ul.pager li.page {
position: absolute;
left: 46%;
background: transparent;
color: #aeb0b2;
}
body #content ul.pager li.next {
float: right;
padding-right: 12px;
background: url(../img/UI/icnNext.gif) no-repeat 100% 2px;
}
/* Demo */
#interface-demo {
cursor: hand;
cursor: pointer;
}
/* ---[ Main-Content - Sub Content ]----------------------------------- */
#main-content #sub-content h3,
#main-content #sub-content h2 {
font-size: 110%;
}
#main-content #sub-content div.coming {
padding: 3px 0 3px 0;
}
#main-content #sub-content div.coming h3 {
font-size: 110%;
padding: 3px 0 0 0;
margin: 0;
color: #000;
font-weight: bold;
}
#main-content #sub-content div.coming p {
color: #404040;
}
div.sub-image {
position: absolute;
left: -240px;
}
/* ---[ Body Content - Section Home Page ]----------------------------------- */
div.sections {
background: url(../img/UI/backgroundSections.gif) repeat-y 0 0;
}
div.sections div.section {
width: 200px;
min-height: 380px;
float: left;
margin: 0 38px 0 0;
padding: 6px 0 12px 0;
}
div.sections div.section.last {
margin-right: 0;
}
div.sections div.section h2 {
margin: 0 0 10px 0;
padding: 0;
}
div.sections div.section img {
margin: 0 0 4px 0;
}
div.sections div.section p {
margin: 6px 0 7px 0;
line-height: 1.3em;
}
/* ---[ HomePage ]----------------------------------- */
body#homepage #main-body {
}
ul#homenav {
width: 690px;
margin: 134px auto 0 auto;
padding: 0 0 260px 0;
list-style: none;
font-family: verdana, arial, sans-serif;
}
ul#homenav li {
list-style: none;
float: left;
margin: 0;
padding: 0;
background-position: 0 0;
background-repeat: no-repeat;
}
ul#homenav li a {
display: block;
height: 20px;
padding-top: 160px;
padding-bottom: 3px;
font-size: 170%;
text-decoration: none;
text-align: center;
}
ul#homenav li a:hover {
text-decoration: none;
}
ul#homenav li a span {
display: none;
}
ul#homenav li.hover a span {
display: inline;
}
/* vision */
ul#homenav li#homenav-vision {
background-image: url(../img/UI/vision.gif);
}
ul#homenav li#homenav-vision a {
width: 167px;
}
li#homenav-vision a {
color: #CC6600; !important;
}
/* laptop */
ul#homenav li#homenav-laptop {
background-image: url(../img/UI/laptop.gif);
}
ul#homenav li#homenav-laptop a {
width: 166px;
}
li#homenav-laptop a {
color: #669900 !important;
}
/* participate */
ul#homenav li#homenav-foundation {
background-image: url(../img/UI/participate.gif);
}
ul#homenav li#homenav-foundation a {
width: 167px;
}
li#homenav-foundation a {
color: #0077CC !important;
}
/* children */
ul#homenav li#homenav-children {
background-image: url(../img/UI/children.gif);
}
ul#homenav li#homenav-children a {
width: 171px;
}
li#homenav-children a {
color: #BB0077 !important;
}
/* ---[ Contact ]----------------------------------- */
#contact div.adr {
font-size: 110%;
}
#contact div.adr div {
padding: 0 0 3px 0;
}
#contact div.adr div.org {
font-weight: bold;
}
#contact div.adr div.country-name {
padding: 3px 0 3px 0;
}
#contact h3 {
padding: 15px 0 0 0;
}
/* ---[ Main Section Colors ]----------------------------------- */
/* Vision */
body h1,
body h2,
body h3,
body #main-body a,
body.vision h1,
body.vision h2,
body.vision h3,
body.vision #main-body a {
color: #CC6600;
}
body #content ul li,
body.vision #content ul li,
body.vision div.sections ul li {
background-image: url(../img/UI/bulletVision.gif);
}
/* Getting Started */
body.start h1,
body.start h2,
body.start h3,
body.start #main-body a {
color: #669900;
}
body.start #content ul li,
body.start div.sections ul li {
background-image: url(../img/UI/bulletLaptop.gif);
}
/* Laptop */
body.laptop h1,
body.laptop h2,
body.laptop h3,
body.laptop #main-body a {
color: #669900;
}
body.laptop #content ul li,
body.laptop div.sections ul li {
background-image: url(../img/UI/bulletLaptop.gif);
}
/* Participate */
body.foundation h1,
body.foundation h2,
body.foundation h3,
body.foundation #main-body a {
color: #0077CC;
}
body.foundation #content ul li,
body.foundation div.sections ul li {
background-image: url(../img/UI/bulletParticipate.gif);
}
/* Children */
body.children h1,
body.children h2,
body.children h3,
body.children #main-body a {
color: #BB0077;
}
body.children #content ul li,
body.children div.sections ul li {
background-image: url(../img/UI/bulletChildren.gif);
}
/* ---[ Footer ]----------------------------------- */
#homepage #footer {
display: none;
}
#footer {
width: 918px;
height: 40px;
margin-top: 80px;
font-size: 80%;
color: #666666;
text-decoration: none;
}
#footer p {
width: 50%;
float: left;
}
#footer p#sponsor {
text-align: right;
width: 50%;
float: right;
}
#footer1 {
width: 459px;
height: 40px;
left: 0px;
margin-top: 40px;
font-size: 80%;
color: #666666;
text-align: left;
text-decoration: none;
}
#footer1 p a {
color: #669900;
text-decoration: none;
}
#footer1 p a:hover {
text-decoration: underline;
}