/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
	* {
	  margin: 0;
	  padding: 0;
	}
	body {
		background:url(../images/bg_twona.jpg) repeat-x left top #ebb8b7;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
	/*GLOBALS */
	p {
	font-size:13px;
	line-height:1.8em;
	color:#333333;
	margin:10px;		
	}
	
	a {
	color:#b93734;
	text-decoration:none;
	}
	
	a:hover {
		text-decoration:underline;
	}
	
	.clear {
	clear:both;
	}
	
	.center {
		text-align:center;
	}
	
	.align-right {
		text-align:right;
	}
	
	.readMore {
		text-align:right;
	
	}
	
	.container p {
	color: #fff;
	line-height: 1.5em;
	margin: 10px 0 0 0;
	}
	
	.red {
		color: #b93734;
	}
	
	img {
	border: 1px solid #9cb599;
	}
	
	hr {
	border: 1px dashed #9cb599;
	margin:5px;
	}


	/* LOGO */
	
	#headerTop {
		padding-top:5px;
	}
	
	#headerLogo {
	*position: absolute;
  	*width:30%;
	*margin-bottom:30px;
	*height:100%;
	}
	
	#headerLogo h1 {
		overflow: hidden;
		margin:0;
		padding:0;
	}
	#headerLogo h1 a {
		background : url("../images/twona_logo.png") no-repeat center top;
		background-size:auto;
		display: block;
		min-height: 180px;
		*width:100%;
	}
	
	#headerLogo h1 a span {
		display: block;
		text-indent: -9999px;
	}
	
	
	/* MENU */
	
	#menuItem {
	*border-bottom: 5px solid #224f22;
	margin-top:125px;
	*width:100%;

	
	}
	#menuItem ul {
	text-align: left; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
	margin: 0 0 5px 0; /* Just some margin to align the blue border below the menu */
	}
	#menuItem li {
	display: inline; /* Menu links are horizontally aligned using display: inline */
	}
	#menuItem li a {
	padding: 1.5%; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
	color: #5d5350;
	text-decoration: none;
	
	}
	#menuItem li a:hover,#menuItem li a.active  {
	   background:#224f22;
	   color:#fff;
	   border-radius: 10px 10px 0px 0px;
	   moz-border-radius: 10px 10px 0px 0px;	 
	}
	
	
	#menuItem ul li a.home:hover, #menuItem ul li a.active.home  {
		background:url(../images/home.png) no-repeat center	5px #224f22;
		background-size: 42%;
		border-radius: 10px 10px 0px 0px;
	   	moz-border-radius: 10px 10px 0px 0px;
	}
	#menuItem ul li a.home{
		background:url(../images/home.png) no-repeat center 5px transparent;
		background-size: 42%;
		border-radius: 10px 10px 0px 0px;
	   	moz-border-radius: 10px 10px 0px 0px;
	}
	
	#menuItem ul li a.home span{
		visibility:hidden;
	}

	/* Containers */
	#mainContent {
		margin-top:2%;
	}


.contentContainer {
	background:#fff;
	border: 1px solid #9cb599;
	margin:10px 0px;
	padding:10px;
	border-radius: 10px;
   	moz-border-radius: 10px;
	box-shadow:0 0 .5em #B4D16A;
	moz-box-shadow:0 0 .5em #e9f6e8;
}

.contentContainer p {
	background:none;
	font-size:13px;
	line-height:1.8em;
	color:#333333;
}

.contentContainer h2 {
	color: #b93734;
	font-size:180%;
	font-weight:normal;
	border-bottom: 1px solid #9cb599;
	text-indent: -60px;
	margin-left:60px;
	margin-bottom:10px;
	padding-bottom: 10px;
}

.contentContainer h3 {
	color: #b93734;
	font-size:150%;
	font-weight:normal;
	border-bottom: 1px solid #b93734;
	text-indent: -60px;
	margin-left:60px;
	margin-bottom:10px;
	padding-bottom: 10px;
}

.contentContainer li, .contentList li {
	list-style:disc;
	font-size:13px;
	line-height:1.5em;
	color:#333333;
	margin:10px;
}



.flax {
	background:url(../images/flax.jpg) repeat-y left top #fff;
	padding-left: 50px;
}


#footer {
	background:url(../images/bg_footer.jpg) repeat-x left top #c7d3c5;
	min-height: 160px;
	padding-top:20px;
}

#footer p, #footer a, #footer a:visited {
	background:none;
	color:#999999;
}


#footerLogo{
	background:url(../images/twona_footer.png) no-repeat center top transparent;
	background-size:contain;
	min-height:72px;
	max-height:72px;
}

#footerLogo span{
	visibility:hidden;

}

.footerLink {
	text-align:right;
	font-size:70%;
}

#footerCompanies img{
		width: 25%;
}

.resourceButton {
	margin:5px;
	font-size:75%;
	text-align:center;
}


.resourceButton a{
	border: 1px solid #cecece;
	margin:5px;
	padding:10px;
	background:#CCCCCC;
}

.resourceButton a:hover{
	text-decoration:none;
	background:#666666;
	color:#FFFFFF;
	font-size:80%;
	font-weight:bold;

}

.videoBlock, .pictureBlock {
	text-align:center;
	border: 1px dashed #cecece;
	padding:5px;
	margin-bottom:5px;
}

.imgBlock {

}

.refPic {
	width:100px;
	border:none;
	margin:0 5px;	
}


.info_box {
	border: 1px solid #cecece;
	background: #b93734;
	padding:5px;
	font-size:12px;
	line-height:1.5em;
	color:#fff;
}

.info_box p {
  color: #fff;
}

.alliance_cont {
  border-bottom: 1px dashed #e2e2e2;
  padding-bottom: 10px;
}
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		
	}
	
	.container p {
	color: #fff;
	*line-height: 100px;
	*background: #FF0;
	*text-align: center;
	margin: 20px 0 0 0;
	}
	
	#headerTop {
		font-size:9px;
	}
	
	/* MENU FOR SMALLER */
	
	#menuItem {
	*background:#FF0000;
	border-bottom: 5px solid #224f22;
	font-size:50%;
	margin-top:5%;
	*padding:10px;
	width:100%;
	}
	#menuItem ul {
	text-align: center; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
	margin: 0 0 0 0; /* Just some margin to align the blue border below the menu */
	}
	#menuItem li {
	display: inline; /* Menu links are horizontally aligned using display: inline */
	}
	#menuItem li a {
	padding: 2%; /* Display: block won't work in this example, instead we are using padding to make the whole tab a clickable link */
	color: #5d5350;
	text-decoration: none;
	
	}
	#menuItem li a:hover, #menuItem li a.active {
	   background:#224f22;
	   color:#fff;
	   border-radius:0;
	   moz-border-radius:0;
	}
	
	
	#menuItem ul li a.home:hover, #menuItem ul li a.active.home {
		background:none #224f22;
		color:#fff;
		border-radius: 0;
	   	moz-border-radius: 0;
	}
	
	#menuItem ul li a.home{
		background:none;
		color:#5d5350;
		border-radius: 0;
	   	moz-border-radius: 0;
	}
	
	#menuItem ul li a.home span{
		visibility:visible;
	}
	
	
	.contentContainer p {
	background:none;
	font-size:80%;
	line-height:150%;
	color:#333333;
	}

	.footerLink, #footerCompanies {
	text-align:center;
	}
	#footerCompanies img{
		width: 70px;
	
	}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}