/* CSS Reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}Details,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}


/*
 * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. 
* 
*/

@font-face {
	font-family: 'M+2clight';
	src: url('m+2c/mplus2clight.eot');
	src: local('M+ 2c'), local('mplus-2c-light'), url('m+2c/mplus2clight.ttf') format('truetype');
}

html{
	font-size: 16px;
	background: #ffffff;
	font-family: sans-serif;
}

body{
}

#Container{
	width: 60em;
	margin: 0em auto;
	position: relative;
}

h1{
	font-family: 'M+2clight';
	font-size: 6em;
	font-weight: normal;
	line-height: 1em;
	color: red;
	width: 70%;
	padding-top: 1.075em;
}

h2{
	font-family: 'M+2clight';
	font-size: 2em;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: 1px;
	width: 22em;
	margin-top: 1.365em;
	margin-left: .125em;
	margin-bottom: 1em;
}

a{
	color: black;
	text-decoration: none;
}

a:hover, a.active{
	color: red;
}

em{
	font-style: normal;
}

sup{
	font-size: .5em;
	vertical-align: super;
}

p, ul.pull, h3, h4{
	font-family: 'M+2clight';
	line-height: 1.5em;
	/* width: 38em; */
	margin: 1em 0em 1em .365em;
	margin-right: 248px;
}

h4{
	clear: both;
}

	p .pull, ul.pull{
		font-size: 1.125em;
		line-height: 1.25em;
		display: block;
		float: left;
		border-top: solid silver 1px;
		border-bottom: solid silver 1px;
		padding: .75em 0.5em;
		margin: .25em 1em .5em 0em;
		width: 12em;
		text-align: left;
	}
	
	ul.pull{
		padding: .25em 0.5em;
	}
	
	ul.pull li{
		margin: .5em 0em;
	}
	
	p img{
		float: left;
		margin: 0em 1em 0em 0em;
	}
	
	p img.right{
		float: right;
		margin: 0em 0em 0em 1em;
	}

h3{
	color: red;
	font-size: 1.125em;
	margin-right: .5em;
}

h4{
	font-size: 1.125em;
	margin: 2em 0em 0em .25em;
}

#Logo{
	position: absolute;
	top: 0;
	right: 4.125em;
}

#Details{
	font-family: 'M+2clight';
	font-size: .75em;
	line-height: 16px;
	
	width: 17.875em;
	
	position: absolute;
	top: 8.365em;
	right: 1.5em;
}

	#Details em{
		font-family: 'M+2clight';
	}
	
	#Details ul{
		margin-bottom: 1.365em;
	}

#Navigation{
	width: 60em;
	height: 7em;
	clear: both;
	margin: 1em auto 6em;
}

	#Navigation li, li.presskit{
		position: relative;
		float: left;
		
		width: 14em;
		height: 7em;
		margin: 3em .5em;
		overflow: hidden;
	}
	
	#Navigation li a, li.presskit a{
		font-family: 'M+2clight';
		font-size: 1.5em;
		text-align: right;
		
		position: absolute;
		top: 0em;
		left: 0em;
		
		width:224px;
		height:112px;
		line-height: 180px;
		vertical-align: text-bottom;
		color: white;
	}
	
	li.presskit a{		
		width: 158px;
		height: 84px;
		line-height: 18px;
		text-align: right;
		padding: 40px 10px 10px 0px;
		color: white;
	}
	
	#Navigation li a:hover, #Navigation li a.active, li.presskit a:hover{
		opacity: .7;
		background: black;
		color: red;
	}

/* PRODUCTS SECTION */

#Products{
	clear: both;
	width: 60em;
	margin-top: 4em;
}

#Products li{
	height: 14em;
	width: 14em;
	margin: .5em;
	float: left;
	position: relative;
	overflow: hidden;
}

#Products li img{
	width: 14em;
	height: 14em;
}

#Products li a{
	font-family: 'M+2clight';
	font-size: 1.5em;
	position: absolute;
	top: 0;
	left: 0;
	width: 224px;
	height: 224px;
	line-height: 400px;
	vertical-align: text-bottom;
	text-align: right;	
}

#Products li a.soon{
	color:white;
}

#Products li a:hover{
	background: red;
	color: white;
	opacity: .7;
}

#Gallery{
	width: 14em;
}

#Gallery li{
	float: left;
	margin: .5em;
}

#maunProduct #Container{
	background: url(../images/products/maun_full.jpg) bottom right no-repeat;
	padding-bottom: 14em;
}
#tswanaProduct #Container{
	background: url(../images/products/tswana_full.jpg) bottom right no-repeat;
	padding-bottom: 22em;
}
#kikaProduct #Container{
	background: url(../images/products/kika_full.jpg) bottom right no-repeat;
	padding-bottom: 0em;
}
#peoProduct #Container{
	background: url(../images/products/peo_full.jpg) bottom right no-repeat;
	padding-bottom: 7em;
}
#nalediProduct #Container{
	background: url(../images/products/naledi_full.jpg) bottom 28em no-repeat;
	padding-bottom: 10em;
	margin-bottom: -5em;
}
#thuthuProduct #Container{
	background: url(../images/products/thuthu_full.jpg) bottom right no-repeat;
	padding-bottom: 17em;
}
#kalahariCProduct #Container{
	background: url(../images/products/kalahariC_full.jpg) bottom right no-repeat;
	padding-bottom: 26em;
}
#kalahariBProduct #Container{
	background: url(../images/products/kalahariB_full.jpg) bottom right no-repeat;
	padding-bottom: 26em;
}
#kalahariTProduct #Container{
	background: url(../images/products/kalahariT_full.jpg) bottom right no-repeat;
	padding-bottom: 26em;
}