/* WEBSITE LAYOUT */
body {
	text-align:center;  /* IE6 needs this to center the layout in the browser window */	
	}
#bg_wrapper {
	width:1050px; /* widths of columns will scale proportionately as this width is changed */
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	margin-top:20px;
	}
#wrapper {
	width:1050px; /* widths of columns will scale proportionately as this width is changed */
	margin-top:0px;
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	background-position:center;
	}
#body {
	width:1050px; /* widths of columns will scale proportionately as this width is changed */
	padding-top:40px;
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
	/*background-image:url(../images/bgbody.png);
	background-repeat:no-repeat;
	background-position:center;*/
	float:left;
	}
#header {
	width:100%;
	float:left;
	height:77px;
	}
.header_inner {
	float:left;
	height:77px;
	padding:0px 0px 0px 580px;
	}
#showreelbutton {
	text-align:right;
	float:right;
	width:150px; 
	padding: 0px 70px 0px 0px;
	}
#index_copy {
	float:left;
	width:930px; 
	padding: 0px 60px 60px 60px;
	margin: -20px 0px 0px 0px;
	}
.index_copy_left {
	width:440px;
	float:left;
	margin:0px 35px 0px 0px;
	}
.index_copy_right {
	width:435px;
	float:left;
	margin:30px 0px 0px 0px;
	}
#footer {
	width:924px;
	clear:both;
	float:left;
	border-top:dotted;
	border-top-color:#333;
	border-top-width:2px;
	border-top-color:#959ca1;
	margin-left:60px;
	}
.footer_l {
	width:350px;
	float:left;
	background-color: transparent;
	padding-top:10px;
}
.footer_l_inner {
	width:330px;
	float:left;
	margin:10px;
	border-right:dotted;
	border-right-color:#333;
	border-right-width:1px;
	background-color: transparent;
}
.footer_m {
	width:350px;
	float:left;
	padding-top:10px;
}
.footer_m_inner {
	width:330px;
	float:left;
	margin:10px;
	
}
.footer_r	{
	width:349px;
	float:left;
	padding-top:10px;
}
.footer_r_inner {
	width:285px;
	float:left;
	margin:10px;
	padding-right:35px;
	border-left:dotted;
	border-left-color:#333;
	border-left-width:1px;
}
.footer_address {
	height:20px;
	width:100%;
	float:left;
	text-align:center;
	padding:50px 0px 0px 0px;
	}
.footer_address_inner {
	margin-top:4px;
	width:100%;
	
	}
.footerimage3	{
	padding-left:5px;
	display:block;
	float:right;
} 
.footerimage4	{
	padding-left:5px;
	padding-right:5px;
	display:block;
	float:right;
}
.footerimage5	{
	padding-left:5px;
	float:right;
}
.footerimage6	{
	padding-left:5px;
	float:right;
}
.footerimage7	{
	float:right;
	padding-left:5px;
	float:right;
}
#content {
	width:990px;
	margin:0px 0px 60px 60px;
	padding:10px 0px 20px 0px;
	clear:both;
	float:left;
	text-align:left;
	}
.mainleft {
	width:474px;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 0px;
	clear:both;
	float:left;
	text-align:left;
	}
.mainright {
	width:474px;
	float:left;
	text-align:left;
	}
.mainright_inner {
	
	
	margin:20px 0px 0px 70px;
	float:left;
	text-align:left;
	}
.mainright_contact {
	padding:30px 0px 0px 90px;
	float:left;
	text-align:left;
	}
.mainright_socialmedia {
	padding:30px 0px 0px 90px;
	float:left;
	text-align:left;
	}
.news_left {
	margin:0px 0px 0px 0px;
	padding:20px 20px 0px 0px;
	float:left;
	text-align:left;
	}
.news_right {
	padding:65px 30px 0px 10px;
	float:left;
	text-align:left;
	}
#tweet {
	height:350px;
	width:290px;
	padding:30px 60px 0px 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em; /* 12pt */
	line-height:1.25em; /* on 15pt */
	color:#82898e;
	list-style: none;
	list-style-type: none;
	line-height:16px;
	background-image:url(../images/twitter2.png);
	background-repeat:no-repeat;
	}
#tweet1 {
	height:350px;
	width:210px;
	padding:30px 50px 0px 30px;
	margin:0px 0px 0px 5px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em; /* 12pt */
	line-height:1.25em; /* on 15pt */
	color:#82898e;
	list-style: none;
	list-style-type: none;
	line-height:16px;
	background-image:url(../images/twitter3.png);
	background-repeat:no-repeat;
	}	
a img	{
	border:none;
	}
.newsimage	{
	display:block;
	float:left;
	margin:0px 5px 0px 0px;
}
.spacer	{
	float:left;
	margin:4px 0px 0px 0px;
}
#header_inner, #nav_inner, #content_inner, #promo_inner, .footer_inner, .mainright_inner {
	overflow:hidden; /* prevents oversize elements from breaking the layout */
	}
	
/* FOOTER LEFT LOGO LINKS MENU */


ul#footer_logos {
	height:10px;
	padding:0;
}
ul#footer_logos li {
	width:240px;
	color:#00aedb;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style:none;
	border-bottom-style:dotted;
	border-bottom-color:#333;
	border-bottom-width:1px;
	padding:0px 0px 4px 0px;
	margin:5px 0px 0px 40px;
	
}


a.logotext	{
	margin:0px 0px 0px 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
}

a.footlogo1, a.footlogo1_a{
	display:block;
	margin:0px 0px 0px 0px;
	float:left;
	width:220px;
	height:35px;
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -35px;
	margin:0px 20px 0px 10px;

}
a.footlogo1:hover{
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
}
a.footlogo2, a.footlogo2_a{
	display:block;
	margin:0px 0px 0px 0px;
	float:left;
	width:200px;
	height:35px;
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -105px;
	margin:0px 20px 0px 10px;

}
a.footlogo2:hover{
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -70px;
}	
	a.footlogo3, a.footlogo3_a{
	display:block;
	margin:0px 0px 0px 0px;
	float:left;
	width:200px;
	height:36px;
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -175px;
	margin:0px 20px 0px 10px;

}
a.footlogo3:hover{
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -140px;
}	
a.footlogo4, a.footlogo4_a{
	display:block;
	margin:0px 0px 0px 0px;
	float:left;
	width:200px;
	height:35px;
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -245px;
	margin:0px 20px 0px 10px;

}
a.footlogo4:hover{
	background-image:url(../images/logos.png);
	background-repeat:no-repeat;
	background-position:0px -210px;
}	

	
/* MAIN NAV BAR */


#navigation {
	width:1000px;
	height:25px;
	float:left;
	margin:10px 0px 0px 0px;
	padding:5px 0px 0px 50px;
	}
ul#menu {
	height:10px;
	padding:0;
}
ul#menu li {
	color:#00aedb;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style:none;
}
ul#menu li a {
	color:#00aedb;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style-type:none;
	text-decoration:none;
	padding:0px 10px 0px 10px;
}
ul#menu li a:hover{
	color:#333;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style-type:none;
	text-decoration:none;
	padding:0px 10px 0px 10px;
}

/*  GALLERY SQUARE */
#gallery {
	height:553px;
	width:1050px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	clear:both;
	}
/*  SHOWREEL */
#showreel {
	height:598px;
	width:1050px;
	clear:both;
	padding-top:50px;
	}

/*  HOMEPAGE SQUARES */
#slice {
	height:380px;
	width:1030px;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 20px;
	clear:both;
	}
.qitem1 {
	width:260px;
	height:260px;	
	border:4px solid #959ca1;
	margin:50px 30px 5px 40px;
	background:url(../images/index_creative.png) no-repeat;	
	/* required to hide the image after resized */
	overflow:hidden;
	/* for child absolute position */
	position:relative;
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}
.qitem2 {
	width:260px;
	height:260px;	
	border:4px solid #00aedb;	
	margin:50px 30px 5px 30px;
	background:url(../images/index_pr.png) no-repeat;
	/* required to hide the image after resized */
	overflow:hidden;
	/* for child absolute position */
	position:relative;
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}
.qitem3 {
	width:260px;
	height:260px;	
	border:4px solid #959ca1;	
	margin:50px 5px 5px 30px;
	background:url(../images/index_digital.png) no-repeat;
	/* required to hide the image after resized */
	overflow:hidden;
	/* for child absolute position */
	position:relative;
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}
.qitem1 .qitem2 .qitem3 img {
	border:0;
	/* allow javascript moves the img position*/
	position:absolute;
	z-index:200;
	}
.qitem1 .qitem2 .qitem3 .caption {
	position:absolute;
	z-index:0;	
	color:#ccc;
	display:block;
	}
	.qitem1 .qitem2 .qitem3 .caption h4 {
	font-size:12px;
	padding:10px 5px 0 8px;
	margin:0;
	color:#369ead;
	}
.qitem1 .qitem2 .qitem3 .caption p {	
	font-size:10px;	
	padding:3px 5px 0 8px;
	margin:0;
	}
.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}
.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}

.clear {
	clear:both;	
}





/* CONTENT LIST STYLING */

.listbox	{
	clear:both;
	padding:6px 0px 3px 0px;
}
ul#list {
	padding:0;
}
ul#list li {
	color:#00aedb;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style:none;
}
ul#list li a {
	color:#00aedb;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style-type:none;
	text-decoration:none;
	padding:0px 0px 0px 0px;
}
ul#list li a:hover {
	color:#00aedb;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:400;
	list-style-type:none;
	text-decoration:underline;
	padding:0px 0px 0px 0px;
}	

/* BULLET LIST STYLING */

.bull{
	color:#00aedb;
	padding:0px 5px 0px 0px;
}
.bullw{
	color:#00aedb;
	padding:0px 10px 0px 0px;
}

/* TEXT COLORS & FONT SIZES */
a	{ 
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em; /* 12pt */
	color:#00aedb;
	text-decoration:none;
	}
a:hover	{ 
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em; /* 12pt */
	color:#00aedb;
	text-decoration:underline;
	}
p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em; /* 12pt */
	line-height:1.25em; /* on 15pt */
	color:#82898e;
	}
h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#00aedb;
	padding:0px 0px 10px 0px;
	}
h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em; /* 12pt */
	line-height:01.25em; /* on 15pt */
	color:#00aedb;
	}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:26px;
	color:#00aedb;
	}
h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#00aedb;
	}
h5 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:34px;
	color:#00aedb;
	}
h6 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#00aedb;
	}
.footer_address p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:1.25em; /* on 15pt */
	color:#82898e;
	}



/* HACKS SECTION */

/* a fix for IE6 only - see Star Hack in Stylin' with CSS to see how the comments and * html hide this hack from other browsers */
* html * {
	zoom:100%; 
/* triggers IE6 "haslayout" - google 'IE6 haslayout' for details*/
	}
/* without the above hack, IE6 does not draw the header until the page is resized */
/* the problem is triggered by the universal * selector below that resets the margins, but I need to do that, hence the hack */
* {
	margin:0;
	padding:0;
	}
.float_left {float:left; margin: 0 .3em .3em 0;}      /* apply this class to any image or element with width - text will wrap it to the right */
.float_right {float:right;  margin: 0 0 .3em .3em;} /* apply this class to any image or element with width  - text will wrap it to the left */
/* THE ALSETT CLEARING METHOD */
.clearfix:after {
	content: “.”;
	display: block; 
	height: 0;
 	clear: both;
 	visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/ LEAVE THIS COMMENT RIGHT HERE! 
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */ 
/* END OF HACKS SECTION */




/* CSS FOR NEWS TICKER */






#ticker-wrapper * {
	margin: 0px;
}
#ticker-wrapper.has-js {
	margin: 5px 0px 0px 0px;
	width: 925px;
	height: 30px;
	/*border: 1px solid #CFCFCF;*/
	display: block;
	font-family: Arial;
	font-size: 0.75em;
}
#ticker {
	padding: 0px 0px 0px 2px;
	width: 715px;
	height: 23px;
	display: block;
	float: left;
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
}
#ticker-title {
	padding-top: 7px;
	float: left; 	
	color: #00aedb;
	font-weight: bold;
	background-color: #ffffff;
	text-transform: uppercase;
}
#ticker-content {
	margin: 0px;
	padding-top: 7px;
	float: left;
	position: absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #959ca1;
	background-color: #ffffff;
}
#ticker-content:focus {
	none;
}
#ticker-content A {
	text-decoration: none;	
	color: #959ca1;
}
#ticker-content A:hover {
	text-decoration: underline;	
	color: #00aedb;
}
#ticker-swipe {
	padding-top: 7px;
	position: absolute;
	top: 0px;
	left: 100px;
	background-color: #ffffff;
	display: block;
	width: 800px;
	height: 23px; 
}
#ticker-swipe SPAN {
	margin-left: 1px;
	background-color: #ffffff;
	border-bottom: 1px solid #1F527B;
	height: 12px;
	width: 7px;
	display: block;
}
#ticker-controls {
	padding: 7px 10px 0px 0px;
	list-style-type: none;
	float: right;
}
#ticker-controls LI {
	padding: 0px;
	margin-left: 5px;
	float: left;
	cursor: pointer;
	height: 16px;
	width: 16px;
	display: block;
}
#ticker-controls LI#play-pause {
	background-image: url('../images/controls.png');
	background-position: 32px 16px;
}
#ticker-controls LI#play-pause.over {
	background-position: 32px 32px;
}
#ticker-controls LI#play-pause.down {
	background-position: 32px 0px;
}
#ticker-controls LI#play-pause.paused {
	background-image: url('../images/controls.png');	
	background-position: 48px 16px;
}
#ticker-controls LI#play-pause.paused.over {
	background-position: 48px 32px;
}
#ticker-controls LI#play-pause.paused.down {
	background-position: 48px 0px;
}
#ticker-controls LI#prev {
	background-image: url('../images/controls.png');
	background-position: 0px 16px;		
}
#ticker-controls LI#prev.over {
	background-position: 0px 32px;		
}
#ticker-controls LI#prev.down {
	background-position: 0px 0px;		
}
#ticker-controls LI#next {
	background-image: url('../images/controls.png');	
	background-position: 16px 16px;	
}
#ticker-controls LI#next.over {
	background-position: 16px 32px;	
}
#ticker-controls LI#next.down {	
	background-position: 16px 0px;	
}
.js-hidden {
	display: none;
}








/* CSS FOR SLIDOUT PANEL  */


/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
  	background: url(../images/tab_b.png) repeat-x 0 0;
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
}

.tab ul.login li.left {
  	background: url(../images/tab_l.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}

.tab ul.login li.right {
  	background: url(../images/tab_r.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}

.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url(../images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
	color: white;
}

.tab ul.login li a:hover {
	color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
}

.tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
	width: 100%;
	height: 270px;
	color: #333;			/*  Form font colour  */
	background: #00aedb;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}

#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
}

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
}

#panel p {
	margin: 5px 0;
	padding: 0;
}

#panel a {
	text-decoration: none;
	color: #15ADFF;
}

#panel a:hover {
	color: white;
}

#panel a-lost-pwd {
	display: block;
	float: left;
}

#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: left;
	font-size: 0.85em;
}

#panel .content .left {
	width: 280px;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #939ba1;
}

#panel .content .right {
	border-right: 1px solid #939ba1;
}

#panel .content form {
	margin: 0 0 10px 0;
}

#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
		margin-left:10px;
}

#panel .content input.field {
	border: 1px #6a737a solid;
	background: #e6f5f9;
	margin-right: 5px;
	margin-left:10px;
	margin-top: 4px;
	width: 250px;
	color:#333;
	height: 16px;
}

#panel .content input:focus.field {
	background: #e6f5f9;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}

#panel .content input.bt_login {
	width: 74px;
	background: transparent url(../images/bt_login1.png) no-repeat 0 0;
}

#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(../images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
	color:#333;
}
.grey	{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em; /* 12pt */
	line-height:1.25em; /* on 15pt */
}











/* NEWS TICKER - liScroll styles */

.tickercontainer { /* the outer div with the black border */
/*border: 1px solid #000;*/
background: #fff; 
width: 920px; 
height: 20px; 
margin: 0; 
padding: 0
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 5px;
top: 3px;
width: 905px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 905px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #82898e;
font: bold 10px Verdana;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
}