/**
 * 0.RESET 
 */
@import "reset.css";

/**
 * 1.GLOBAL
 */
body {
  background-color:#141414;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 83%;
  line-height:1.4;
  margin: 0;  
  padding: 0;
}
body.home{
  background-image: url('/assets/img/bg/bottom-bg-repeat.png');
  background-repeat:no-repeat;
  background-position:50% 750px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  font-size: 2.75em;
  line-height: 1em;
  margin-bottom: .5em; 
}

h2 {
  font-size: 1.8em;
  margin-bottom:.40em;
}

h3 {
  font-size: 1.916em;
  line-height: 2em;
}

h4 {
  font-size: 1.5em;
  line-height: 1.25em;
  margin-bottom: 0.35em;
  font-weight:bold;
}
h4.gold{
  font-size:1.4em;
}
h5 {
  font-size: 1.0em;
  font-weight: bold;
}
h5.gold {
  font-size: 1.3em;
  font-weight: bold;
}

h6 {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.8em;
  margin-bottom: 1em;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
  margin: 0;
}

p {
  margin: 0 0 4px 0;
}

a:link, a:visited {
  color: #74e8f4;
  outline: none;
  text-decoration: none !important;
}
a:hover{
	color:#a6a6a6;
}
a:focus {
  outline: 1px dotted;
}

a:hover, a:active, li a.active {
  color: #a6a6a6;
  outline: none;
  text-decoration: underline;
}
a.learn-more{
	font-size:13px;
}

span.clear       { clear:both; display:block; font-size:0; height:1px; line-height:0; margin-bottom:-1px; }
.clear           { clear:both; }
.clear-block     { display:block; }

.clearfix:after,
.container:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.clearfix,
.container       { display:block; }

.float-left      { float:left; }
.float-right     { float:right; }
.float-left.fifty{ float:left; width:49%;}
.float-right.fifty{ float:right; width:49%;}
.img-left        { float:left; margin:1.5em 1.5em 1.5em 0; }
.img-right       { float:right; margin:1.5em 0 1.5em 1.5em; }
.inline		     { display:inline; }
.display-block	 { display:block; }


.first           { margin-left:0; padding-left:0; }
.last            { margin-right:0; padding-right:0; }
.top             { margin-top:0; padding-top:0; }
.bottom          { margin-bottom:0; padding-bottom:0; }

.text-left       { text-align:left; }
.text-right      { text-align:right; }
.text-center     { text-align:center; }
.text-justify    { text-align:justify; }

.bold            { font-weight:bold; }
.normal			 { font-weight: normal !important;}
.italic          { font-style:italic; }
.underline       { border-bottom:1px solid; }
a.text-underline  { text-decoration: underline !important;}
.highlight       { background:#ffc; }
.quiet           { color:#666; }
.loud            { color:#000; }
.added           { background:#060; color:#fff; }
.removed         { background:#900; color:#fff; }
.small           { font-size:.8em; line-height:1.875em; }
.large           { font-size:1.2em; line-height:1.25em; }
.caps			 { text-transform:uppercase;}
.smallcaps		 { font-variant:small-caps;}
.nopadding       { padding:0; }
.pad_bottom      { padding-bottom:6px;}
.pad_top         { padding-top:6px;}
.noindent        { margin-left:0; padding-left:0; }
.nobullet        { background:none; list-style:none; list-style-image:none; }
.black			 { color:#2d2d2d !important; }
.gold			 { color:#e99817;}
.text-grey       { color:#b6b6b5 !important;}
.twelve-point    {font-size:.9em;}
.thirteen-point  {font-size:1.0em !important;}
.fourteen-point  {font-size:1.06em !important;}
/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be a collapsible fieldset that will be expanded with a click
 * from a user.
 */
.hide,.element-hidden        { display:none; }

/* Common Styling */


/**
 * 2.LAYOUT
 */
#wrapper.home{
	width:1311px;
	height:1015px;
	margin:0 auto;
}
#wrapper.inside{
	width:1296px;
	margin:0 auto;
}
#content{
	position:absolute;
	margin-top:-446px;
	width:917px;
	margin-left:150px;
}
#content-wrapper{
	position:relative;
}
/**
 * 7#slideshow
 */
#slideshow.home_slideshow{
	width:1311px;
	height:749px;
	position: relative;
	overflow: hidden;
}
#slideshow.home_slideshow > * {
	position: absolute;
	top: -10000;
	left: -10000;
}
#slideshow.home_slideshow > div {
	z-index: 2;
}
#slideshow.home_slideshow > div p {
	color: #fff;
	font: bold 1em Arial;
}
#slideshow.home_slideshow > div ul {
	margin-top:15px;
}
#slideshow.home_slideshow > div ul li {

	font-size: 1.3em;
	margin: 0;

	list-style-type: none;
}
#slideshow.home_slideshow > div ul li a {
	color: #c7c7c7;
	padding: 0px 4px;
	text-decoration: none;
	border-right:2px solid #fff;
}
#slideshow.home_slideshow > div ul li.last a{
	border-right:0px;
}
#slideshow.home_slideshow > div ul li a.active {
	color: #74e8f4;
}

/*overrides site.css slideshow settings*/
.home_slideshow > div {
	height:293px;
	left:705px;
	position:absolute;
	top:118px;
	width:385px;
	z-index:100;
	padding-top:10px;
}

.home_slideshow > div ul li{
	display:inline; 
	padding-right:3px;
	font-size:1.3em;
}
.home_slideshow > div ul li a {
	background:none repeat scroll 0 0 transparent;
	color:#c7c7c7;
	padding:3px;
	font-weight:bold;
}

.home_slideshow > div ul {
	display:block;
	margin-right:0;
	position:relative;
	margin-top:20px;
}
.home_slideshow>div ul li a.active {color:#74e8f4; background:transparent; text-decoration:none;} 
.home_slideshow div.description{
	height:270px; 
	margin-top:35px;
}
.home_slideshow div.slideshow_desc div.headline{
	font-weight:bold;
	color:#74e8f4;
	font-size:2.7em;
	line-height:1.2;
}
.home_slideshow div.slideshow_desc div.grey{
	color:#fefdfd;
	font-size:1.5em;
	font-weight:normal;
	margin-bottom:10px;
	line-height:1.3;
}
.home_slideshow div.slideshow_desc a{
	font-size:1.4em;
	text-transform:uppercase;

}
/**
 * 3.MAIN
 */
/* 1 column: global values*/
.nine-seventeen-content{
	width:917px;
	margin:0 auto;
}
#home-main{
	height:218px;
	background: url('/assets/img/bg/home-black-bar-under-slideshow.png') no-repeat top center;
}
#home-main-content{
	position:relative;
	top:70px;
	left:80px;
}

#home-main-copy{
	width:637px;
}
#home-main-link{
	height:215px;
	width:215px;
	margin-top:-45px;
}
#enter-roots-course-button{
	height:215px;
	width:215px;
	background: url('/assets/img/icon/enter-roots-course-button.png') no-repeat 0 0;
	display:block;
}
#enter-roots-course-button:hover{
	background-position: 0px -214px;
}


#home-bottom{
	position: relative;
	left: 47px;
	top:45px;
}
#home-bottom-left div.float-left{
	width:230px;
	margin-left:10px;

}
#home-bottom-right div.float-left{
	width:300px;
	margin-left:10px;
}
#home-bottom-left{
	border-right:1px solid #c3c3c3;
}
#home-bottom-right{
	margin-left:15px;
}



/****************************/
#inside-content-wrap{
	background: url('/assets/img/bg/inside-content-bg.jpg') repeat-y 0 0 ;
	width:1294px;
}
#inside-content{
	width:884px;
	margin:0 auto;
}


/**
 * 5.MASTHEAD
 */
#masthead{
	height:43px;
}
#masthead-left{
	width:460px;
}
#masthead-right{
	width:425px;
}

#masthead-content{
	width:950px;
	margin:0 auto;
	padding-top:15px;
}
#masthead ul li {
	padding-right:5px;
}
#masthead ul li, #navigation ul li{
	display:inline;
	font-weight:bold;
	border-right:1px solid #a6a6a6;
}
#navigation ul{
	margin-left:47px;
	padding-top:20px;
	overflow:hidden;
}
#navigation.inside ul{
	margin-left:0px;
}
#navigation ul li{
	padding:0 10px;
}
#navigation.inside ul li{
	padding:0 8px;
}
#masthead ul li.last, #navigation ul li.last{
	border-right:0px solid transparent;
}
/*enter roots course button - inside*/
#navigation.inside ul li.first{
	padding-left:0px !important;
}
#navigation.inside ul li.last{
	padding-right:0px !important;
}
#navigation.inside ul li.enter-course{
	padding-right:0px !important;
	padding-left:7px !important;
	position:relative;
	top:-20px;
}
#navigation.inside ul li.last.enter-course a{
	height:95px;
	width:111px;
	display:block;
	background-image:url('/assets/img/icon/enter-roots-course-button-inside.png');
	background-repeat: no-repeat;
	background-position: 0 0;
}
#navigation.inside ul li.last.enter-course a:hover{
	background-position: 0 -96px;
}
#navigation.home ul li.last.enter-course{
	display:none;
}
#masthead ul li a{
	color:#a6a6a6;
}
#masthead ul li a:hover, #navigation ul li a{
	color:#fefdfd;
	text-decoration:none;
}
#navigation ul li a:hover{
	color:#74e8f4;
	text-decoration:none;
}


#navigation.inside{
	width:890px;
	margin:0 auto;
}

#navigation.inside #navigation-inside-wrap{
	width:715px;
	
}
/**
 * 6.HEADER
 */
#header{
	background: url('/assets/img/bg/inside-masthead-bg.png') no-repeat 0 0 ;
	height:193px;
	width:1296px;
	margin:0 auto;

}

#roots-logo-home img{
	margin-left:1px;
}
#roots-logo-home{
	width:221px;
}
#roots-logo-inside{
	width:175px;
}
#navigation-home-wrap{
	width: 696px;
}

#navigation.home{
	padding-top:10px;
	position:relative;
	top:-749px;
}

#navigation ul#global-nav{
	font-size:16px;
	text-transform:uppercase;
	position:relative;
	overflow: visible;
	z-index:99;
}

#navigation ul#global-nav li{
	padding-right:6px;
	float:left;
	line-height:1.1em;
}
#navigation ul#global-nav li a.active{
	color:#74E8F4 !important;
}

#navigation ul#global-nav span{
	font-weight:100;
	display:block;
	font-size:14px;
	
}

#navigation ul#global-nav li ul
{	margin: 0;
	padding: 0;
	position: absolute;
	visibility: hidden;
	background:#f3f2f2;
}

#navigation ul#global-nav li ul li
{	
	float: none !important;
	display: block !important;
	border: 0px solid transparent;
	border-bottom:1px solid #2f2f2f;
	text-transform:none;
	padding:3px 3px;
	margin:0 4px;
}
#navigation ul#global-nav li ul li.last
{
	border-bottom:0px solid transparent;
}

#navigation ul#global-nav li ul li a
{	
	width: auto;
	color:#141414;
}

#navigation ul#global-nav li ul li a:hover
{	
	color: #585858;
}

/**
 * 10.FOOTER
 */
#footer {
  /*clear: both;*/
  padding: 15px 0;
  color:#EDE9E0;
  background-color:#000;
}


#footer a,
#footer a:visited {
  color:#EDE9E0;
}
#footer a:hover {
  color:#9BD2D2;
}
#footer-content {
  width:917px;
  margin:0 auto;
  text-align:right;
}
#footer.inside #footer-content{
	width:894px;
}
/*#footer-logo {
	margin-left: 6px;
	position: relative;
	top: -4px;
	
}*/
#footer.home div.footer-img{
	float:left !important;
}
#footer div.footer-img{
	display:inline;
	float:right;
	width: 129px;
	background:  url('/assets/img/logo/naccho_logo_footer.png') no-repeat transparent top center;
	height:66px;
}

#footer div.footer-text {
	color: #A6A6A6;
	width: 730px;
	display:inline;
	float:left;
}
#footer.inside div.footer-text{
	width: 765px;
}
#footer span.small {
	font-size:.9167em;
}



/**
 * 11.CSS SUPPORT
 */

/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be a collapsible fieldset that will be expanded with a click
 * from a user.
 */
.element-hidden {
  display: none;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
}


.collapsible-content-collapsed {
	display: none;
}
.collapsible-content {
	overflow: hidden;
}
.collapsible-content-expanded {
	display: block !important;
}


/**
 * Markup free clearing.
 */
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}



/*******INSIDE TEMPLATE, 2 COL*******/
#inside-right{
	width:202px;
	margin-left:15px;
	float:left;
	display:inline;
	padding-bottom:25px;
}
#inside-left{
	float:left;
	display:inline;
	width:650px;
	border-right:2px solid #494949;
	padding-right:15px;
	margin-bottom:25px;
}

#inside-left p,#inside-right p{
	margin-bottom:15px;
}
#inside-right p{
	margin-bottom:15px;
	padding-left:5px;
}
#inside-right img{
	margin-bottom:10px;
}

#inside-left h5.text-grey{
	font-size: 1.3em;
	font-weight: bold;
}
#inside-content ul{
	margin-left:20px;
}
#inside-content ul li{
	margin:6px 0;
}

/*****Interactives*****/
.interactive-wrap{
	border:5px solid #494949;
	width:860px;
	margin-bottom:35px;
}
.interactive-wrap #flashContent{
	min-height:580px;
}
#interactives-intro{
	margin-bottom:25px;
}
#interactive-bottom-left{
	width:645px;
	padding-right:15px;
}
#interactive-bottom-right{
	width:190px;
	padding-left:20px;
	border-left:1px solid #494949;
	margin-bottom:20px;
}
#interactive-bottom p{
	padding:5px 0;	
}
#social-sharing{
	background-color:#414040;
	margin-bottom:15px;
	padding:10px 0;
}
#share-this-wrap{
	width:140px;
	margin:0 auto;
	padding:10px 0;
}
#other-interactives{
	font-weight:bold;
}