@import url("reset.css");
@import url("typography.css");
@import url("grid.css");

/*----------------------------------------------------------------------------------------

COLOUR TABLE 
#3AC2D6__________Cyan
#9ce0ea__________50% Cyan
#cef0f5__________25% Cyan
#ebf9fb__________10% Cyan

----------------------------------------------------------------------------------------*/

html { height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical; } 

body { background:#2c2c2c; padding:15px 0 20px 0; font-size:62.5%; font-family: Lucida Console, monospace; }

.wrapper { width:760px;/*TOTAL WEBSITE WIDTH*/ margin: 0 auto; position: relative; }

.content { position:relative; z-index:20; float:left; display:inline; background:none; width: 760px; padding:0; }

.header { width:760px; background:#2c2c2c; min-height:85px; height:auto !important; height:85px; float:left; position:relative; z-index:30; }

.header-inner {padding:0; margin:0;}

.footer { min-height:20px; height:auto !important; height:20px; background:#2c2c2c; padding-top:22px; clear:both; position:relative; z-index:10; /*sets the width of the left gutter*/ padding-right:20px; padding-left:130px; /*sets the width of the right gutter*/ }

.footer {color:#FFFFFF;}

.footer a {color:#FFFFFF; text-decoration:underline;}

.footer a:hover {color:#FFFFFF;text-decoration:none;}

.footer p.credit {margin-top:22px; margin-left:3px; float:left; clear:both;}

/*.addthis_toolbox  {float:left;}*/

/*----------------------------------------------------------------------------------------
NAVIGATION
----------------------------------------------------------------------------------------*/

.navigation { background:#2c2c2c; float:left; width:130px; position:relative; }

.nav { padding: 0; margin: 0; font: normal 1em Lucida Console, monospace; float:left; display:inline; width:108px; background: #FFFFFF; }

.nav li { list-style: none; margin: 0; padding:0; display: inline; background:none; float:left; width:108px; }

.nav li a { padding: 3px; background: #fff; text-decoration: none; color:#2c2c2c; float:left; display:block; width:106px; line-height:1;}

.nav li a:hover { color: #2c2c2c; background: #969696; }

.nav li.active a { color:#fff; background: #2c2c2c; }

/*----------------------------------------------------------------------------------------
DROP DOWN
----------------------------------------------------------------------------------------*/

.menu { width:130px; height:27px; position:absolute; z-index:200; float:left; bottom:48px; right:240px; }

.menu ul { padding:0; margin:0; list-style-type:none; float:right; width:130px; position:relative; z-index:100; }

.menu ul ul { padding:0; margin:0; position:relative; z-index:90; }

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li { float:left; position:relative; margin:0; background:none; width:130px; font-size:100%; padding:0; }

/* style the links for the top level */
.menu ul li ul li { text-align:left; }

.menu ul li a { display:block; text-decoration:none; /*color:#7CCECF;*/ height:27px; border:0; line-height:27px; font-weight:normal; font-size:1.4em; background: url(../images/drop-down-menu.gif) bottom left; padding-bottom:2px; cursor:pointer; }

.menu ul li a strong { margin-bottom:2px; padding-left: 8px; padding-right:8px; width:114px; background: url(../images/drop-down-menu.gif) top left; position:relative; display:block; font-weight:normal; float:left; }

.menu ul li a:hover { text-decoration:none; background: url(../images/drop-down-menu.gif) bottom right; }

.menu ul li a:hover strong { text-decoration:none; background: url(../images/drop-down-menu.gif) top right; color:#000000; }

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility:hidden; position:absolute; top:27px; left:0; }

.menu ul ul a { border:none; cursor:pointer; }

.menu ul li ul li { width:130px; padding:0; float:left; font-size:100%; }

/* style the second level links */
.menu ul li ul li a { /*color:#7CCECF;*/ height:auto; line-height:1em; margin:0; padding:0.2em 8px 0.4em 8px; width:114px; display:block; font-size:1.2em; background: url(../images/drop-down-menu.gif) center left; }

.menu ul li ul li a:hover { color:#fff; background: url(../images/drop-down-menu.gif) center left; }

.menu ul li ul li a.last,
.menu ul li ul li a:hover.last { border-bottom: none; background: url(../images/drop-down-menu.gif) bottom left; padding-bottom:1em; }

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul { visibility:visible; }

.menu :hover > a { color:#000; background: url(../images/drop-down-menu.gif) bottom right; }

.menu :hover > a strong { color:#000; background: url(../images/drop-down-menu.gif) top right; }

/*----------------------------------------------------------------------------------------
BREADCRUMB
----------------------------------------------------------------------------------------*/
.breadcrumb { background:#ffffff; width:100%; width:920px; padding:10px 20px 10px 20px; text-align:left; float:left; }

.breadcrumb p { background-color: transparent; margin-bottom: 0px; font-size:100%; }

.breadcrumb p a { background-color: transparent; color: #3AC2D6; text-decoration:none; }

.breadcrumb p a:hover { text-decoration:underline; }

/*----------------------------------------------------------------------------------------
SEARCH
----------------------------------------------------------------------------------------*/
.search { display:inline; width:200px; float:right; /*CHANGE THIS FLOAT WHEN PLACING SEARCH CONTAINER ELSEWHERE*/ padding:0; margin: 0; height:1%; font-size:100%; position:relative; bottom:10px; right:20px }

.search input.search-input { background-color:transparent; background-image:url(../images/search-box.gif); background-repeat:no-repeat; border:medium none; display:inline; float:left; font-size:1.2em; margin:0; padding:2px 5px 3px 5px; width:140px; }

.search input.search-submit { float:left; display:inline; margin:0; padding:0; }

/*----------------------------------------------------------------------------------------
FOOTER: PIPED LIST
----------------------------------------------------------------------------------------*/

ul.pipe-list { margin: 0 0 1em 0; padding: 0; }

ul.pipe-list li { margin: 0; padding:0; list-style-type: none; background:none; border:0px; float:left; float:left; }

ul.pipe-list li a { padding: 0 8px; margin:0; border-right: 1px solid #fff; color:#fff; color: #fff; text-decoration: none; }

ul.pipe-list li a.feed { margin-left: 8px; padding-left: 19px; background: url(../images/rss.png) no-repeat 0 50%; }

ul.pipe-list li a:hover { color: #3ac2d6; }

.footer ul.pipe-list li a { border-right: 1px solid #fff; color:#fff; }

.footer ul.pipe-list li a:hover { color: #3ac2d6; }

ul.pipe-list li a.last { border-right: 0 none; }

/*TEXT SIZE*/ 
ul.pipe-list li.text-size { position:relative; top:-2px; padding:0 0 0 5px; } /*position applied to line up the text size difference*/

ul.pipe-list li.text-size a { border:none; padding:0 0 0 5px; margin:0; }

ul.pipe-list li.text-size a.medium { font-size:125%; }

ul.pipe-list li.text-size a.large { font-size:150%; }

/*----------------------------------------------------------------------------------------
BUTTONS
----------------------------------------------------------------------------------------*/

a.button { /* Right half of button */ background: transparent url(../images/button.gif) no-repeat scroll top right; display: block; float: left; height: 30px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ margin-right: 6px; padding-right: 20px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ text-decoration: none; color: #fff; font-size:1.2em; font-weight:bold; margin-bottom:1em; }

a.button span { /* Left half of button */ background: transparent url(../images/button.gif) no-repeat; display: block; line-height: 22px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ padding: 5px 0 5px 18px; }

a.button:hover { background:url(../images/button.gif) scroll right -250px; }

a.button:hover span { background: url(../images/button.gif) no-repeat scroll 0px -250px; }

a.button-to-top { display:block; font-weight:bold; text-decoration:none; background:#333333; padding:0; margin:0 0 1em 0; color:#FFFFFF; width:7em; text-align:center; border:1px solid #fff; }

a:hover.button-to-top { color:#333333; border:1px solid #333333; background:#fff; }

/*----------------------------------------------------------------------------------------
FEATURE
----------------------------------------------------------------------------------------*/
.feature dl { padding: 15px 0 15px 0; border-top: 1px dotted #ccc; }

.feature dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.feature dl dt { margin: 0 0 .5em 0; font-size: 1.6em; }

.feature dl dt img { float: left; margin: 0 15px 0 0; padding: 0; }

.feature dl dd { margin-left: 120px; color: #666; font-size:1.2em; }

/*----------------------------------------------------------------------------------------
NEWS FEED
----------------------------------------------------------------------------------------*/
.news-feed dl { padding: 15px 0 15px 0; border-bottom: 1px dotted #ccc; }

.news-feed dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.news-feed dl dt { margin: 0; font-size: 1.6em; }

.news-feed dl dt img { float: left; margin: 0 15px 0 0; padding: 0; }

.news-feed dl dd { margin-left: 65px; color: #666; font-size:1.2em; }

.news-feed dl:hover { background: #EDEDED; }

/*----------------------------------------------------------------------------------------
HELPER CLASSES
----------------------------------------------------------------------------------------*/

.right { float:right; }

.left { float:left; }

.clear { clear:both; overflow: hidden; width: 100%; }

.clear-left { clear:left; }

.clear-right { clear:right; }

.logo { margin:0; padding:0; float:left; }

.content p img { padding:5px 10px; }

/*----------------------------------------------------------------------------------------
FRAMEWORK
----------------------------------------------------------------------------------------*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.s-h { display: block; height: 0; float: left; overflow: hidden; width: 0; } /* accessible display none */

.s-h-o { left: -9999em; position: absolute; top: -9999em; } /* place content off screen */

.s-i-bg { background-color: transparent; background-position: 0 0; background-repeat: no-repeat; display: block; position: absolute; }

.s-i-i { background-color: transparent; background-position: 0 0; background-repeat: no-repeat; display: block; position: absolute; }

.s-break { display: block; }

.no-margin { margin:0;}

/*----------------------------------------------------------------------------------------
EVENT BOX
----------------------------------------------------------------------------------------*/
.event-box {width:492px; padding:0; float:left; display:inline; background:#FFFFFF; padding:3px; margin-bottom:22px; }
.event-box.last {margin-bottom:0;} 

.event-box .event-info { width:235px; padding:3px 20px 3px 3px; position:relative; min-height:209px; height:auto !important; height:209px; float:left; }

.event-box ul.pipe-list { padding:0; position:absolute; bottom:0px; margin:0; }

.event-box ul.pipe-list li a.first { padding: 0 8px 0 0; }

.event-box ul.pipe-list li a { padding: 0 8px; margin:0; border-right: 1px solid #2c2c2c; color:#2c2c2c; text-decoration: none; vertical-align:middle; }

/*----------------------------------------------------------------------------------------
PAYPAL
----------------------------------------------------------------------------------------*/
form.paypal-form { padding:0; margin:0; float:left; display:inline; }

input.paypal-button { background: none; border:none; cursor:pointer; font-family: Lucida Console, monospace; color:#2c2c2c; font-size:1em; padding:0; margin:1px 0 0 8px; float:left; }

/*----------------------------------------------------------------------------------------
TABS
----------------------------------------------------------------------------------------*/



#organic-tabs ul li a { display: block; padding: 3px; color: #2c2c2c; line-height:1; }

#organic-tabs ul li:last-child a { border: none; }

#organic-tabs { width: 630px; padding: 0; margin: 0; }

#explore-nav { overflow: hidden; margin: 6px 0 0 0; }


/*Butted up*/
#explore-nav li { width: 210px; float: left; margin: 0 0 0 0; padding:0; background:none;  }
#explore-nav li#ex-one { width:800px; }
#explore-nav li.last { margin-right: 0px; width:210px; }
.boxcaption {width: 210px;}



/*three col
#explore-nav li { width: 195px; float: left; margin: 0 22px 0 0; padding:0; background:none; }
#explore-nav li.last { margin-right: 0px; width:195px; }
.boxcaption {width: 195px;}*/


/*two col*/
/*#explore-nav li { width: 304px; float: left; margin: 0 22px 0 0; padding:0; background:none; }
#explore-nav li.last { margin-right: 0px; }
*/


#explore-nav li a { display: block; padding: 5px; background: #424242; color: #2c2c2c; font-size: 10px; text-align: left; border: 0; text-decoration:none; }

#explore-nav li a:hover { background-color: #969696; text-decoration:none;}

#featuredTwo,
#featuredThree { display: none; }

#explore-nav li#ex-one a.current,
#explore-nav li#ex-two a.current,
#explore-nav li#ex-three a.current { background-color: #fff; color: #2c2c2c; display:block; line-height:1; }

#featuredOne,
#featuredTwo,
#featuredThree { height:370px; width:730px; }

.boxgrid { width: 630px; height: 370px; /*margin:10px;*/ 
				float:left; background:#161613; /*border: solid 2px #8399AF; */
				overflow: hidden; position: relative; }

.boxgrid img { position: absolute; top: 0; left: 0; border: 0; }

.boxgrid p { padding: 1px; color:#2c2c2c; font-weight:normal; }

.boxcaption { float: left; position: absolute; background: #fff; left:630px; height: 100%;  opacity: .8; padding:3px; 				
/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
				
.buy-now-form {display: inline; vertical-align:middle;}	

.random-logo {margin-bottom:35px;}