﻿/*////////////////////////////////////////////////

CONTENT DYNAMICS V2.1

Stylesheet: Public Website: Structure.Css
Design: Cubeular Systems
Development by: Justin Harrison
Date: 01/03/2010

///////////////////////////////////////////////*/

/* //////////////Site Structure//////////////// */


#wrapper
{
	padding: 10px;
	left: 0px;
	width: 980px;
	position: relative;
	z-index: 1;
	top: 5px;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
}

#header
{

    width: 100%;
    height: 116px;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
}

#header_left
{

    width: 300px;
    height: 116px;
    position: relative;
    z-index: 2;
	float: left;
	left: 0px;
}

#header_right
{

    width: 650px;
    height: 116px;
    position: relative;
    z-index: 2;
	float: right;
	right: 10px;
	text-align: right;
}


#main
{
    width: 100%;
    height: 310px;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
	background-color: #ffffff;
}

#main_inner
{
    width: 100%;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
	background-color: #ffffff;
	top: 0px;
}

#main_left
{
    width: 500px;
    height: 300px;
    position: relative;
    z-index: 2;
	float: left;
	left: 0px;
	
}

#main_centre
{
    width: 130px;
    height: 300px;
    position: relative;
    z-index: 2;
	float: left;
	left: 10px;
}

#main_right
{
    width: 309px;
    height: 300px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
}

#grey
{
    width: 100%;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
	background-color: #ffffff;
	top: 0px;
}

#grey_left
{
	width: 621px;
	height: 208px;
	position: relative;
	z-index: 2;
	float: left;
	left: 0px;
	background-color: #f5f4f4;
	padding: 15px 15px 15px 24px;
}

#grey_left_inner
{
    width: 660px;
    position: relative;
    z-index: 2;
	float: left;
	left: 0px;
	background-color: #f5f4f4;
	
}

#grey_right
{
    width: 308px;
    height: 238px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
}

#grey_right_inner
{
    width: 308px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
}

#grey_right_top
{
	width: 278px;
	height: 94px;
	position: relative;
	z-index: 2;
	float: right;
	right: 0px;
	background-color: #f5f4f4;
	margin-bottom: 10px;
	padding: 5px 15px 15px 15px;
	font-size: x-small;
	color: #999999;
}


#grey_right_bottom
{
    width: 308px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
	top: 0px;
}

.grey_right_bottom_boxes
{
    width: 278px;
    height: 84px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
	background-color: #f5f4f4;
	padding:15px;
	top: 0px;
	margin-bottom:10px;
}

#EventList
{
    width: 180px;
    height: 200px;
    margin-right: 30px;
}

.breaker
{
	width: 980px;
    height:12px;
    z-index: 5;
    float: left;
    left: 0px;
    top: 0px;
    position: relative;
    background-image: url('../Template/breaker.jpg');
	background-repeat: repeat;
	background-color: Black;
}

#features
{
    width: 100%;
    height: 220px;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
	background-color: #ffffff;
}

#features_left
{
    width: 400px;
    height: 200px;
    position: relative;
    z-index: 2;
	float: left;
	left: 0px;
		
}

#features_right
{
    width: 580px;
    height: 200px;
    position: relative;
    z-index: 2;
	float: right;
	right: 0px;
	top: 0px;
}

footer_grey
{    
	width: 100%;
    height: 80px;
    position: relative;
    z-index: 1;
	float: left;
	left: 0px;
	background-color: #ffffff;
}

#footer_grey_left
{
    width: 640px;
    height: 70px;
    position: relative;
    z-index: 2;
	float: left;
	left: 0px;
	background-color: #f5f4f4;
	padding-top: 10px;
	padding-left: 20px;
	
}

#footer_grey_right
{
	width: 290px;
	height: 65px;
	position: relative;
	z-index: 2;
	float: right;
	right: 0px;
	background-color: #f5f4f4;
	padding-top: 15px;
	padding-left: 18px;
}

#content
{
	padding: 10px 30px 30px 20px;
}

#cubeular
{
	padding: 10px;
	left: 0px;
	width: 980px;
	position: relative;
	z-index: 1;
	top: 5px;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	text-align:right;
}



#footer
{
    float: left;
    left: 0px;
    width: 990px;
    height: 30px;
    position: relative;
    z-index: 1;
    top: 0px;
    background-image: url('../Template/BkgdFooter.jpg');
    background-repeat:no-repeat;
    text-align: right;
    padding-top: 8px;
    padding-right: 10px;
}




#news
{
	float: left;
	left: 0px;
	width: 309px;
	height: 300px;
	background-image: url('../Template/News.jpg');
    background-repeat:no-repeat;
	
}

#newsbody
{
	float: left;
	left: 0px;
	width: 240px;
	padding-top: 40px;
    padding-left: 40px;
    padding-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	color: #ffffff;
}

#newsfooter
{
	float: left;
	left: 0px;
	width: 320px;
	height: 50px;
	
}

/* //////////////Site Structure: END//////////////// */

/*/////////////////////////////////////////////////////////////////////////////*/
/* MAIN IMAGE CONTENT SLIDER  */

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 500px; /*width of featured content slider*/
height: 300px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 300px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination
{
	width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
	text-align: right;
	background-color: #660033;
	padding: 7px 0px;
	opacity: 0.9;
    filter: alpha(opacity=90);
    position: absolute;
    left: 0px;
    top: 270px;
    z-index: 100;
}

.pagination a
{
	background-position: white;
	padding: 9px 14px 9px 14px;
	text-decoration: none;
	color: #660066;
	background: white;
	margin-left: -3px;
	
}

.pagination a:hover, .pagination a.selected
{
	color: #FFFFFF;
	background-color: #660066;
	margin-left: -3px;
}
