User:Felice/layoutMaster.css.template

  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;
}