/* UNICEF Innovation Base
 * vim:set noet:
 * --
 * This is the UNICEFinnovation.org stylesheet.
 * There are many others like it,
 * But this one is mine.
 * --
 * (c) UNICEF 2009
 * by Meghana Khandehar
 *    and Adam Mckaig
 */


* {
	margin: 0;
	padding: 0;
	zoom: 1;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
	font-size: 100%;
}

body {
	font: 9pt sans-serif;
	line-height: 1;
	padding: 1em;
	background: #fff;
	color: #000;
}

#wrapper {
	margin: 0 auto;
	
	/* this is a temporary hack to accomodate
	 * the non-flexible products page */
	/*width: 80em;*/
	width: 1000px;
}

	#header {
		border: 1px solid #06a1db;
		background: #87d1ed url("../../images/masthead.png") no-repeat;
		position: relative;
		
		/*padding-bottom: 1px;
		height: 7em;*/
		height: 112px;
	}
	
		#masthead {
		}
			
			/* float everything to make IE6 happy;
			 * the static #masthead height ensures
			 * that the container doesn't collapse */
			#masthead h1,
			#masthead h1 a,
			#tagline {
				display: block;
				float: left;
			}
			
			#masthead h1 {
				font-size: 200%;
				font-weight: normal;
				padding-left: 20px;
			}
	
				#masthead h1 a {
					width: 380px;
					height: 112px;
				}
				
					#masthead h1 a span {
						position: absolute;
						top: -9999px;
					}
	
			#tagline {
				color: #aaa;
				font-family: serif;
				
				/* align the baseline of this text with the
				 * baseline of the H1, via rough offsetting.
				 * this will go away when we overlay images */
				padding: 0.85em 0 0.15em 0;
			}
	
		#nav-tabs {
			position: absolute;
			margin-right: 1em;
			right: 0;
			
			/* align the bottom of the tabs with the border-bottom
			 * of the header, so the active tab can overlay it with
			 * white, giving the illusion of it being "in front" */
			margin-top: -3em;
			top: 111px;
		}
		
			#nav-tabs li {
				display: block;
				float: right;
				padding: 1em;
				border: 1px solid #06a1db;
				background: #4fa6cc url("../../images/tab-off-bg.png") repeat-x;
				border-left: 0;
			}
			
				/* left border is disabled in the child LIs
				 * (to ensure a single pixel boundary), so
				 * add it here (for the first "tab"), which
				 * is actually the last in the html */
				#nav-tabs li.home {
					border-left: 1px solid #06a1db; }
			
				#nav-tabs li.active {
					border-bottom-color: #fff;
					background: #fff;
				}
					
					#nav-tabs li a {
						text-decoration: none;
						font-weight: bold;
						color: #fff;
						
						/* more floating trash for IE6
						 * (an appropriate mental image) */
						display: block;
						float: left;
					}
					
					#nav-tabs li.active a {
						color: #009fdb; }

	#intro {
		/* use a background image, to dodge
		 * the weird mismatch with the blue
		 * background of icons in safari */
		background: #2c2f53 url("../../images/statement-bg.png");
		position: relative;
		/*overflow: auto;*/
    height: 250px;
	}
		
		/* pages with no nav links across the
		 * top need a little manual shunt to
		 * line everything up correctly */
		#intro.no-nav-links {
			margin-top: 0.5em; }
	
		body.mobile-and-sms    #intro { background: #6b462e url("../../images/intros/mobile-and-sms.png")    no-repeat; }
		body.rugged-computing  #intro { background: #325a1c url("../../images/intros/rugged-computing.jpg")  no-repeat; }
		body.wiki              #intro { background: #b0482b url("../../images/intros/wiki.jpg")              no-repeat; }
		body.social-networking #intro { background: #b0482b url("../../images/intros/social-networking.jpg") no-repeat; }
		
			body.mobile-and-sms #statement,
			body.rugged-computing #statement,
			body.wiki #statement,
			body.social-networking #statement {
				width: 50%; }
		
		#nav-links {
			background: #fff;
			padding: 1em 0 1em 0;
			
			/* the child LIs are inline;
			 * center them horizontally */
			text-align: center;
		}
			
			#nav-links li {
				display: inline;
				margin-right: 1em;
				padding-top: 0.5em;
			}
				
				/* remove the margin on the last item,
				 * to correct the centering. this doesn't
				 * work in IE6, but nobody retarded enough
				 * to use internet exploder will notice */
				#nav-links li:last-child {
					margin-right: 0; }
				
				#nav-links li a {
					text-decoration: none;
					font-weight: bold;
					color: #68c6eb;
				}
				
				/* add a large block to the top of
				 * the active link to highlight it */
				#nav-links li.active {
					border-top: 0.5em solid #009fdb; }
					
					#nav-links li.active a {
						color: #009fdb; }

		#statement {
      color: #fff;
			
			/* note to potential future employers - this
			 * absolute pixel positioning stuff is all
			 * wrong, and i'm doing it under protest */
			padding: 35px 0;
    }
		
      #statement h1 {
        font-size: 200%;
        margin-bottom: 0.25em;
        /*margin-left: 2em;*/
        margin-left: 35px;
      }
      	
      	/* some pages have graphical headers */
      	body.products #statement h1,
      	body.mobile-and-sms #statement h1,
      	body.rugged-computing #statement h1,
      	body.wiki #statement h1,
      	body.about #statement h1,
      	body.social-networking #statement h1 {
      		height: 34px;
      		overflow: hidden;
      		text-indent: -9999px;
      		background-repeat: no-repeat;
      		background-position: 0 50%;
      	}
      	
      	body.products          #statement h1 { background-image: url("../../images/our-products.png"); }
      	body.mobile-and-sms    #statement h1 { background-image: url("../../images/mobile-and-sms.png"); }
      	body.rugged-computing  #statement h1 { background-image: url("../../images/rugged-computing.png"); }
      	body.wiki              #statement h1 { background-image: url("../../images/wiki.png"); }
      	body.about             #statement h1 { background-image: url("../../images/our-mission.png"); }
      	body.social-networking #statement h1 { background-image: url("../../images/social-networking.png"); }
      
      #statement p {
        font-size: 125%;
        line-height: 1.4;
        
        /* 0, 4, 0.5, 4 @ 100% */
        /*margin: 0 3.2em 0.4em 3.2em;*/
        margin: 0 3.2em 0.4em 35px;
      }
		
			body.index #statement {
				width: 50%;
				float: left;
				text-align: center;
				height: 171px; /* <-- bg image height */
				background: url("../../images/statement.png") no-repeat 50% 50%;
			}
			
				/* hide accessible text
				 * on the home page*/
				body.index #statement h1,
				body.index #statement p {
					position: absolute;
					text-indent: -9999px; }
		
		#product-links {
			width: 50%;
			float: right;
			
			/* each h3 product link has a 1.25em margin-
			 * top (to space them out vertically), but
			 * we need a 35px gap at the top! begrudgingly
			 * undo the flexible top and add some pixels...*/
			margin-top: -1.25em;
			padding: 35px 0;
		}
		
			#product-links li {
				display: block;
				float: left;
				width: 50%;
				
				/* line up icons with text */
				background-repeat: no-repeat;
				background-position: 0 1.25em;
			}
				
				/* icons for each of the products on the home page */
				#product-links li.mobile { background-image:  url("../../images/icons/mobile.png"); }
				#product-links li.bee    { background-image:  url("../../images/icons/bee.png");    }
				#product-links li.social { background-image:  url("../../images/icons/social.png"); }
				#product-links li.wiki   { background-image:  url("../../images/icons/wiki.png");   }
				
				/* make space for the 30x36 icon
				 * on the left of each item */
				#product-links h3,
				#product-links p {
					padding-left: 1em;
					margin-left: 30px;
				}
			
				#product-links h3 {
					margin-bottom: 0.5em;
					font-weight: bold;
					color: #68c6eb;
					
					/* space out the
					 * LIs vertically */
					margin-top: 1.25em;
				}
				
					/* links are in-cognito */
					#product-links h3 a {
						text-decoration: none;
						color: #68c6eb;
					}
				
				#product-links p {
					line-height: 1.4;
					font-size: 90%;
					color: #fff;
					
					/* four lines high (at 1.4 line
					 * height), to stay aligned */
					height: 5.6em;
					
					/* keep text away from
					 * the right margin */
					padding-right: 1em;
				}

		/* we must use a clearing hack element
		 * here, since we don't know how high
		 * the LIs will be, or how many */
		#product-links span.float-hack {
			display: block;
			overflow: hidden;
			clear: both;
			height: 0;
		}
	
	#content form div {
		padding-bottom: 0.5em;
	}

		#content form label {
			display: block;
			float: left;
			width: 7em;
			margin-top: 0.25em;
		}
		
		#content form textarea {
			width: 40em;
			height: 12em;
		}



#content,
#sidebar {
	color: #666;
	/*overflow: auto;*/
	
	/* the last element will only have a 1em, margin-bottom,
	 * so we need a bit of extra padding here to compensate */
	padding-bottom: 1em;
}

	#content.with-sidebar {
		float: left;
		width: 70%;
	}

	#sidebar {
		float: right;
		color: #aaa;
		width: 30%;
	}
	
	/* spacing around content */
	#content div.nest,
	#sidebar div.nest {
		padding: 0 30px; }

		#sidebar div.nest {
			padding-left: 0; }

	#content h2,
	#sidebar h2 {
		color: #4077a2;
		font-size: 125%;
		font-weight: bold;
		font-family: serif;
		padding-top: 1.6em; /* 2 @ 100% */
		margin: 1.6em 0 0.8em 0; /* 2 0 1 0 @ 100% */
		border-top: 1px dotted #eee;
	}
	
	/* remove the divider from the first 
	 * header/para pair in sane browsers */
	#content > div.nest > h2:first-child,
	#sidebar > div.nest > h2:first-child {
		padding-top: 0;
		border-top: 0;
	}
		
		/* remove the border and padding from the
		 * first header in internet exploder 6 */
		#content h2,
		#sidebar h2 {
			border-top-style: expression(this.previousSibling == null ? "none" : "dotted");
			padding-top:      expression(this.previousSibling == null ? "0"    : "1.6em");
		}
	
	/* space out paragraphs a little more
	 * in the content than the sidebar */
	#content p {
		margin: 1em 0; }
	
	#content li {
		margin-left: 1.5em; }
	
	#sidebar p {
		font-size: 90%;
		margin: 0.5em 0;
	}
	
	#content h3 {
		font-weight: bold;
		margin: 1em 0 0.5em 0;
	}
	
	/* space out the real
	 * text content a bit */
	#content p,  #content li,
	#sidebar p , #sidebar li {
		line-height: 1.6; }

	#sidebar li {
	
		/* space out the real
		 * text content more */
		padding-top:.3em;
		
		/* remove bullets */
		display: block;
	}
	
		/* a short snip of additional information,
		 * which isn't as important as most paragraphs */
		#content p.more {
			font-size: 80%;
			color: #bbb;
		}
	
	/* within the content (and sidebar)
	 * sections, links are orange. outside
	 * of that, all bets are off */
	#content a,
	#sidebar a {
		color: #df5e32;
		text-decoration: none;
	}
	
		#content a:hover,
		#sidebar a:hover {
			text-decoration: underline; }
	
	#sidebar h4 {
		font-weight: bold;
		color: #888;
	}
	
		#sidebar h4 span {
			font-weight: normal; }
	
	/* blocks of text can "pop out" from the content
	 * in a block of color. so far, i think there's
	 * only one of these, on the home page */
	#content div.popout {
		border: 1px solid #e5c78d;
		background: #fbf9f0;
		padding: 1em;
		margin: 2em 0;
	}
		
		/* remove margins from content in pooped boxes,
		 * since the box itself provides it (note that
		 * paragraphs still have m-t to space them out) */
		#content div.popout h2 { margin-top: 0; }
		#content div.popout p  { margin-bottom: 0; }
		
		/* also remove divider from
		 * first header+para pair */
		#content div.popout h2:first-child {
			padding-top: 0;
			border-top: 0;
		}
	
	#content div.popout + h2 {
		border-top: 0;
		padding-top: 0;
	}
	
	#content .feed { }
		
		/* despite being a list of links, we want
		 * to display feeds in the #content as if
		 * they're regular content */
		#content .feed li {
			display: block;
			margin: 1em 0;
		}
			
			#content .feed h3,
			#content .feed span.source {
				line-height: 1.4;
				margin: 0;
			}
			
			#content .feed span.source {
				font-weight: bold;
				color: #aaa;
			}
			
			/* hide junk in the NYT sample feed
			 * during development (TODO: remove) */
			#content .feed br,
			#content .feed .advertisment {
				display: none; }
		
		/* the dates are far too wordy, for now,
		 * but might be improved in future */
		#content .feed .date {
			font-size: 80%;
			color: #ccc;
		}
		
		/* half-width front page feeds */
		#content .feeds .blog,
		#content .feeds .twitter {
			float: left;
			padding: 0;
			width: 50%;
		}
			
			/* insert a hacky gap between the columns */
			#content .feeds .blog    .feed, #content .feeds .blog    h2 { padding-right: 1em; }
			#content .feeds .twitter .feed, #content .feeds .twitter h2 { padding-left:  1em; }
	
	
	/* compensate for p-t gap
	 * between event links */
	#sidebar ul.events {
		margin-top: -1em; }
	
		#sidebar ul.events li {
			padding-top: 1.25em; /* 1 @ 100% */
			display: block;
			font-size: 80%;
		}
			
			#sidebar ul.events h4,
			#sidebar ul.events p {
				line-height: 1.4; }
			
			#sidebar ul.events img {
				padding-right: 1em;
				border: none;
				float: left;
			}
			
			#sidebar ul.events p {
				color: #888;
				margin: 0;
			}
	
	/* compensate for m-r gap
	 * between floaty partner links */
	#sidebar ul.partners {
		margin-left: -0.5em; }
	
		#sidebar ul.partners li {
			display: block;
			float: left;
			width: 50%;
		}
		
			#sidebar ul.partners a {
				border: 1px solid #ccc;
				margin: 0 0 0.5em 0.5em;
				padding: 1em;
				display: block;
			}
			
			/* another float hack; not absolutely
			 * required, but i'd rather put the
			 * complexity here than in the html */
			#sidebar ul.partners span.float-hack {
				display: block;
				overflow: hidden;
				clear: both;
				height: 0;
			}

	/* rss feeds in the sidebar
	 * are like... panel panes! */
	#sidebar .feed ul {
		overflow-y: scroll;
		height: 25em;
	}
	
		#sidebar .feed li {
			padding-right: 1em;
			display: block;
		}
		
			#sidebar .feed h3 a {
				text-decoration: none;
				background: #eee;
				line-height: 1.4;
				display: block;
				padding: 0.5em;
				color: #444;
			}
			
			#sidebar .feed li div.date {
				display: none;
				font-size: 80%;
				font-weight: bold;
				color: #aaa;
			}

	/* content in the products page is entirely different from
	 * every other page. TODO: move this to a separate stylesheet */
	body.products #content .nest div {
		display: block;
		float: left;
		width: 459px;
	}
		
		/* each section has a graphical header */
		body.products #content h2 {
			background-repeat: no-repeat;
			border-top: none;
			padding: 0;
		}
		
			body.products #content h2 a {
				text-indent: -9999px;
				height: 100px;
				width: 459px;
				display: block;
			}
			
			/* space between columns, in pixels
			 * (30 + 459 + 22 + 459 + 30 = 1000) */
			body.products div.mobile-and-sms,
			body.products div.rugged-computing {
				margin-right: 22px; }
			
			/* each section has a graphical header */
			body.products div.mobile-and-sms    h2 { background-image: url("../../images/products/mobile-and-sms.png");    }
			body.products div.social-networking h2 { background-image: url("../../images/products/social-networking.png"); }
			body.products div.rugged-computing  h2 { background-image: url("../../images/products/rugged-computing.png");  }
			body.products div.wiki              h2 { background-image: url("../../images/products/wiki.png");              }
		
		body.products #content p {
			padding: 0 2em; }




#footer {
	clear: both;
	text-align: center;
	border-top: 1px solid #02a0db;
	background: #e1f4fd;
	font-size: 80%;
	color: #ccc;
	
	/* 1 @ 100% */
	padding: 1.25em;
}

	#footer p {
		margin-bottom: 0.5em; }
	
	#footer a {
		color: #02a0db;
		text-decoration: none;
	}
	
		#footer a:hover {
			text-decoration: underline; }
	
	#footer a.cc {
		background: url("../../images/buttons/cc-by-nc-nd-80x15.png") no-repeat;
		display: block;
		width: 80px;
		height: 15px;
		overflow: hidden;
		text-indent: -9999px;
		margin: 1em auto 0 auto;
	}
	
	#footer #cc-more {
		display: none; }