/***************************************************
	      think simple by marija zaric and distributed by http://freehtml5templates.com
***************************************************


***************************************************
			      Reset
***************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary {
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}


a img {border:none}


aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}


/***************************************************
			      Global styles
***************************************************/

html, body {
	width:100%;
	height:100%;

	}


html, body{
	font-family:Trebuchet MS, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	margin:0 0 1px;
	line-height: 1.5;
	background-color:white;
	
	background-position:left top;
	background-repeat:repeat;

}



p {
	margin-bottom:7px;
	}
	
a, p a {
	text-decoration:underline;
	color:white;
	}
	a:hover {color:white;}


h1, h2, h3, h4, h5, h6 {
	font-family: Trebuchet MS, Helvetica, sans-serif;
    font-weight: normal;
	position:relative;

	

}


	
h1{
	font-size: 28px;
	line-height:1.6;
	color:#75919d;
	text-align:left;
	margin-left:40px;

	
	}
	h1 span{
	line-height:1.7px;
	color:black;
	font-size:15px;
	text-transform:none;
	display:block;


}

	
h2{
	font-size: 15px;
	line-height:1.7;
	color:black;
	text-align:left;
	width:420px;
	padding-top:8px;
	margin-left:40px;


	}

	
h3{

	font-size: 24px;
	line-height:1.6;
	color:#75919d;
	text-align:left;
	background-color:transparent;
	padding-top:12px;
	margin-bottom:9px;




	}
	
	
 h3 span{
	font-size: 12px;
	color: black;
	height:24px;
	margin-top:15px;
	text-align:left;
    display:block;


}

h4{
	font-size: 18px;
	line-height:1.7;
	color:black;
	text-align:left;
	width:350px;
	padding-top:8px;
	margin-bottom:12px;



	}
	
h4 span{
	font-weight:bold;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFCC33;
	padding:8px;
	margin-left:20px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;




}

h5{

	font-size: 24px;
	line-height:1.6;
	color:#75919d;
	text-align:center;
	background-color:transparent;
	padding-top:12px;
	margin-bottom:9px;




	}

	

/***************************************************
			    Main containers
***************************************************/

#container, #container_left, #container_right{
	position: relative;
	width:100%;
	
	}
	#container{
			position:relative;
			width:980px;
			margin:0 auto;
			text-align:left;
			background-color:transparent;
			padding:15px;
			
}




#container1, #container_left1, #container_right1{
	position: relative;
	width:100%;
	
	}
	#container1{
			position:relative;
			width:1500px;
			margin:0 auto;
			text-align:left;
			background-color:transparent;
			padding:15px;
			
}





.group1 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	

	


	}
	
.group2 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	margin-left:10px;
	margin-right:10px;


	}
	
.group3 {
	float: left;
	width: 290px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;


	}
	
.group4 {
	float: left;
	width: 550px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;
	margin-right:12px;


	}
	
.group5 {
	float: left;
	width: 350px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;


	}


.group7 {
	float: left;
	width: 1300px;
	position: relative;
	background:transparent;
	padding:15px;
	margin-bottom:10px;


	}


	
.logo_left {
	width: 420px;
	position: absolute;
	top:150px;
	background:transparent;
	margin-top:-140px;
	margin-left:110px;
	
	
	}	
	
	
.group_bannner_left {
	width: 420px;
	position: absolute;
	top:290px;
	background:transparent;
	margin-top:-158px;
	margin-left:40px;
	
	
	}
	
.group_bannner_right{
	width: 410px;
	position: absolute;
	top:-7px;
	right:70px;
	background:transparent;
	margin-top:50px;
	
	
	}
	


			
header{
	position: relative;
	float:left;
	width: 100%;
	height:100px;


	}
	
	
/***************************************************
				INTRO
***************************************************/	
	
	#intro{
	width: 960px;
	position: relative;
	float: left;
	height:318px;
	padding:10px;
	background:transparent;
	margin-top:17px;



	
	}

/***************************************************
				   HOLDERS
***************************************************/	

.holder_content {
	position: relative;
	float: left;
	width: 100%;
	margin-top:750px;
	background:transparent;
	background: url(../images/line.png) 0 -18px no-repeat;



	}
	
.holder_content1 {
	position: relative;
	float: left;
	width: 100%;
	margin-top:6px;
	margin-bottom:-725px;
	background: url(../images/line.png) 0 -18px no-repeat;

	}


.holder_content2 {
	position: relative;
	margin-left:-150px;;
	width: 100%;
	margin-top:6px;
	margin-bottom:-725px;
	background: url(../images/line.png) 0 -18px no-repeat;

	}
	
	
.holder_content_separator{
	margin-bottom:20px;
	}
	
	
	

	
/***************************************************
			        GALLERY
***************************************************/
	 
	 	 
	 a.photo_hover3{
	position:relative;
	float: right;
	margin:5px 13px 8px 0;
	padding: 8px;

	}
	a.photo_hover3{ background-color:white;
	border: 1px solid #E1E1E1;

}
	a.photo_hover3:hover {
	border: 1px dotted #66CCFF;
	background-color:#C7EDFF;
	opacity:0.9;
	z-index:1000;
}

	
	 a.photo_hover2{
	position:relative;
	float: left;
	margin:5px 13px 8px 0;
	padding: 8px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;


	}
	a.photo_hover2{ background-color:white;
	border: 1px solid #E1E1E1;

}
	a.photo_hover2:hover {
	border: 1px solid #E1E1E1;
}

/***************************************************
				   GALLERY
***************************************************/	

.holder_gallery {
	width:610px;
	float:left;
	margin-right:10px;
	padding:0;
	}		
	.holder_gallery a.photo_hover {left:42px}
	.holder_gallery h3 { clear:left}
	
.holder_gallery a.name{
	font-size:12px;
	text-align:left;
	position:relative;
	margin-top:15px;
	display:block;
	clear:left;
	line-height:15px;



}

.holder_gallery a.name1{
	font-size:12px;
	position:relative;
	display:inline;
    text-align:left;
	top:20px;
    left:0;

}

.holder_gallery a.description{
	font-size:12px;
	float:left;
	position:relative;
	margin-right:5px;
	padding-top:7px;
	color:gray;
	width:300px;
	display:inline;


}

	
	
/***************************************************
			        FOOTER
***************************************************/


footer{
	position:relative;
	height:90px;
	clear:both;
	width:100%;
	margin-bottom:18px;
	background-color:#75919d;
	

	}

#FooterOne, #FooterTwo, #FooterTree {
	position: absolute;	
}

#FooterTwo{
	position: absolute;
	right: 225px;
	top:5px;
	color:white;

}

#FooterTree{
	position: absolute;
	left: 225px;
	top:26px;
	color:white;

}

.container{
    width:980px;
    margin:0 auto;
	background-color:transparent;


}




/***************************************************
				       MENU
***************************************************/

nav{
	position:absolute;
	width:950px;
	top:43px;
	right:-14px;
	background:transparent;


}

nav2{
	position:absolute;
	width:950px;
	top:43px;
	right:-30px;
	background:transparent;


}


nav ul li{
	float: left;
	line-height:normal;
	
}

nav ul li a{
	font-size: 15px;
	font-family:Arial, Helvetica, sans-serif;
	color: black;
	text-transform:capitalize;
	font-weight:normal;
	display:block;	/* IE6, IE7 line height fix */
	padding:15px;
	background-color:transparent;
	margin-top:0px;
	margin-right:6px;
    text-decoration:none;
	


}

nav ul li a:hover{
	color: gray;

}
nav ul li a.current{
	background-color:white;
	padding:15px;
	color:black;
	-moz-border-radius: 8px;
	border-radius: 8px;


}




nav2 ul li{
	float: left;
	line-height:normal;
	
}

nav2 ul li a{
	font-size: 15px;
	font-family:Arial, Helvetica, sans-serif;
	color: black;
	text-transform:capitalize;
	font-weight:normal;
	display:block;	/* IE6, IE7 line height fix */
	padding:15px;
	background-color:transparent;
	margin-top:0px;
	margin-right:6px;
    text-decoration:none;
	


}

nav2 ul li a:hover{
	color: gray;

}
nav2 ul li a.current{
	background-color:white;
	padding:15px;
	color:black;
	-moz-border-radius: 8px;
	border-radius: 8px;


}













.content_menu{
	float: left;
	width: 274px;
	margin-top:-10px;
	margin-bottom:15px;

	}
	
.content_menu ul{	
	margin: 0px;
	padding: 0px;
	float: none;
}

.content_menu ul li{
	float: none;
	padding-bottom: 16px;

}


.content_menu ul li a{
	font-size:14px;
	line-height:normal;
    color:#33CC99;
	text-align:left;
	text-decoration:none;
	padding-left:20px;
	

	}
	
.content_menu ul li a:hover{color:#33CC99;}




/***************************************************
				   GLOSSARY
***************************************************/


 iframe.c2 {border:1px solid black}
 p.c1 {text-align: left}
iframe {
  margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

  -moz-box-shadow: 1px 1px 7px #000;
  -webkit-box-shadow: 1px 1px 7px #000;
  box-shadow: 1px 1px 7px #000;

  
} 
	


video {
  margin-top: 1px;
  margin-bottom: 1px;

  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

  -moz-box-shadow: 1px 1px 7px #000;
  -webkit-box-shadow: 1px 1px 7px #000;
  box-shadow: 1px 1px 7px #000;

  
} 


/***************************************************
				   SPECIFIC
***************************************************/

#logo{
	position:relative;
   	float:left;
   	top:30px;
	left:0px;
	width:250px;
	height:160px;
	

}

.clearing{
	clear: both;
	display: inline;
	width: 100%;
	height: 0;
	overflow:hidden;
}



.purple{
	font-size:30px;
	color:#75919d;
	float:left;
	padding:12px;
	margin:20px;
}
.read_more{
	color:#663366;
	font-size:14px;
	float:right;
	margin-top:15px;
}




    MOBILE: Main
   ============== */

#main{
	padding:30px 0;
}

#main article h1{
	font-size:1em;
}

#main aside{
	color:white;
	padding:0px 5% 10px;
}

#footer-container footer{
	color:white;
	padding:20px 0;
}

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #eee url(modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	
	
	
	
.card-container
{
   text-align: center;
   margin-bottom: 2.5em;
}
#canvas
{
   border: 1px solid #aaa;
   background-image: url('images/cardbg.jpg');
   -moz-box-shadow: 3px 3px 8px #222;
   -webkit-box-shadow: 3px 3px 8px #222;
   box-shadow: 3px 3px 8px #222;
}
.title
{
   text-align: center;
   font-family: Segoe UI Light, Arial, Helvetica;
   font-size: 2.2em;
   margin: 1em;
}
.info
{
   text-align: center;
   font-family: Segoe UI Light, Arial, Helvetica;
   font-size: 1.2em;
   margin: 0.25em;
}

      
#zero {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}



#six {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


#seven {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


#eight {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


#nine {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


#eleven {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


#twelve {


border:0px;

margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;

  -moz-box-shadow: 0px 0px 0px #000;
  -webkit-box-shadow: 0px 0px 0px #000;
  box-shadow: 0px 0px 0px #000;

}


table.center {
    margin-left:auto; 
    margin-right:auto;
  }


.nounder a {
text-decoration: none;
color: #75919d;
text-align:center
}





.classname { border:solid 1px #2d2d2d;  text-align:center; background:#575757; padding:1px 1px 1px 1px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px; border-radius: 5px;}

/* =Your Generated css 
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.classname{-moz-box-shadow: 1px  2px  2px  #000000;-webkit-box-shadow: 1px  2px  2px  #000000;box-shadow: 1px  2px  2px  #000000;}
/* End of Your Generated css 
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/





/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}
img.floatRight { 
    float: right; 
    margin: 4px; 
}

	
	
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/