﻿/***
	O2 blueroom v4
	HOMEPAGE
	www.aislondon.com (2008)

	:: Last update: MB 8/10/2008

	-[Inherits]------------------------
	Base.css > Generic.css
	-----------------------------------

	-[Contents]------------------------
	1. EVENTS LISTS			
		1.1 Detail	
			1.1.1 Status	
		1.2 Items		
			1.2.1 Item detail
			1.2.2 Item summary
			1.2.3 Priority ticket tab
	2. PRORITY LIST (specific)
		2.1 Items		
			2.1.1 Item detail
			2.1.2 Item summary
			2.1.3 Priority ticket tab
	3. JS Only
	4. SLIDE DOWN ALERT
	-----------------------------------

***/

/**
	1. EVENTS LISTS
*/

.outer-content-first {
	/* CSS 3*/ border-top-left-radius: 0em; border-top-right-radius: 0em; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; 
    /* Webkit */ -webkit-border-radius: 0em; -webkit-border-top-right-radius: 0em; -webkit-border-bottom-left-radius: 0.5em; -webkit-border-bottom-right-radius: 0.5em;
	/* Moz */ -moz-border-radius-topleft: 0em; -moz-border-radius-topright: 0em; -moz-border-radius-bottomleft: 0.5em; -moz-border-radius-bottomright: 0.5em;    
}
.outer-content-last {
	/* CSS 3*/ border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-bottom-left-radius: 0; border-bottom-right-radius: 0; 
    /* Webkit */ -webkit-border-radius: 0.5em; -webkit-border-top-right-radius: 0.5em; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0;
	/* Moz */ -moz-border-radius-topleft: 0.5em; -moz-border-radius-topright: 0.5em; -moz-border-radius-bottomleft: 0em; -moz-border-radius-bottomright: 0em;    
}
.outer-content .eventGenres {
	overflow: hidden;
	background: #FFF;
	list-style: none;
	margin: 0 0 0.6em;
}
.outer-content .eventGenres li {
	float: left;
	display: block;
	overflow: hidden;
	font-size: 1em;
	margin: 0 0 6px;
}
.outer-content .eventGenres li.first {}
.outer-content .eventsList {
	background: #F6F6F6 url(../../../Generic/Images/Panels/EventLists/bg-genres.png) repeat-x bottom;
	/* CSS 3*/ border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; 
    /* Webkit */ -webkit-border-radius: 0.5em; -webkit-border-top-right-radius: 0.5em; -webkit-border-bottom-left-radius: 0.5em; -webkit-border-bottom-right-radius: 0.5em;
	/* Moz */ -moz-border-radius-topleft: 0.5em; -moz-border-radius-topright: 0.5em; -moz-border-radius-bottomleft: 0.5em; -moz-border-radius-bottomright: 0.5em;    
	display: block;
	float: left;
	list-style: none;
	min-height: 96px;
	overflow: hidden;
	position: relative;
	width: 936px;
}
.outer-content .eventsList li {
	margin: 0;
}

/**
	1.1 Event detail
*/

.eventsList .eventsList-detail {
	display: block;
	float: left;
	width: 145px;
}

.eventsList .eventsList-detail h2 {
	color: #0054a6;
	font-size: 1.4em;
	font-weight: normal;
	margin: 0.75em 0 0 0.7em;
}

/**
	1.1.1 Event detail status
*/

.eventsList .eventsList-detail .status {
	position: absolute; bottom: 9px; left: 0;
	overflow: hidden;
	width: 139px;
	height: 1.9em;
	margin: 0 4px 0 11px;
	color: #3c8bd0;
}
.eventsList .eventsList-detail .status .status-count {
	float: left;
}
.eventsList .eventsList-detail .status .status-icons {
	display: none; /*ADD WITH JS*/
	float: left;
	margin: 0.1em 0 0;
	padding: 0.2em 0 0 0.9em;
	background: url(../../../Generic/Images/Panels/EventLists/seperator-genres.gif) no-repeat top left;
}
.eventsList .eventsList-detail .status .status-icons img {
	margin: 0 2px;
}
.eventsList .eventsList-detail .status .status-count {
	color: #3c8bd0;
	display: inline;
	margin: 0 14px 0 0;
	padding: 0.2em 0 0;
	font-size: 1.2em;
}

/**
	1.2 Event list items
*/

.eventsList .eventsList-items {
	float: right;
	width: 780px;
}

.eventsList .eventsList-items ul {
	overflow: hidden;
	height: auto;
	margin: 0;
	padding: 0 0 6px;
	list-style-type: none;
}
.eventsList .eventsList-items ul li {
	min-height: 8.4em;
	display: block;
	font-size: 1em;
	position: relative;
	float: left;
	width: 189px;
	padding-top: 6px;
	padding-left: 6px;
}
* html .eventsList .eventsList-items ul li {
	height: 8.4em;
}

.eventsList .eventsList-items ul li img {
	position: absolute;
}

.eventsList .eventsList-items ul li a:hover {
	text-decoration: none;
}
* html .eventsList .eventsList-items ul li a:hover {
	zoom:1;
}
.eventsList .eventsList-items ul li a:hover * {
	cursor: pointer;
}

.eventsList .eventsList-items ul li h3 {
	display: none;
}




/* 1.2.1 Item detail */
.eventsList .eventsList-items ul li .item-detail {
	visibility: hidden;
	position: relative;
	min-height: 6.3em;
	display: block;
}
* html .eventsList .eventsList-items ul li .item-detail {
	height: 6.3em;
}

.eventsList .eventsList-items ul li a:hover .item-detail {
	visibility: visible;
}
.eventsList .eventsList-items ul li .item-detail b {
	background-color: #0a477d;
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	/* IE */ filter:alpha(opacity=90); _zoom: 1;
	/* Moz */ -moz-opacity: 0.90;
	/* CSS3 */ opacity: 0.90;
}

/*fix IE6's interpretation of position absolute*/
* html .eventsList .eventsList-items ul li .item-detail b {
	width: 193px;
	height: 6.3em;
}
.eventsList .eventsList-items ul li .item-detail .p {
	display: block;
	position: relative;
	background: url(../../../Generic/Images/Icons/peel.gif) no-repeat top right;
	padding: 6px;
	font-size: 1em;
	color: #fff;
}
.eventsList-items li .item-detail .p span  {
	display: block;
}
.eventsList-items li .item-detail .p strong {
	/* float: left; MB: Not sure this should be floating */ 
	background: url(../../../Generic/Images/Icons/bg-blueArrowRight.gif) no-repeat right 3px;
	color: #93cffd;
	padding: 0 10px 0 0;
	position: relative;	
}

/* 1.2.2 Item summary */

.eventsList .eventsList-items ul li .item-summary {
	/* background-color: #5DAFEE; */
	position: relative;
	min-height: 1.9em;
	display: block;
	padding: 2px 8px 0 8px;
}

* html .eventsList .eventsList-items ul li .item-summary {
	height: 1.9em;
}

.eventsList .eventsList-items ul li .item-summary b {
	background-color: #5DAFEE;
	display: block;
	/* IE */ filter:alpha(opacity=94); _zoom: 1;
	/* Moz */ -moz-opacity:0.94;
	/* CSS 3*/ opacity: 0.94;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

* html .eventsList .eventsList-items ul li .item-summary b {
	width: 193px;
	height: 2.1em;
}

.eventsList-items .item-summary .p {
	color: #FFF;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	margin: 0;
	text-decoration: none;
}


/**
	1.2.3 Priority ticket tab
*/

.eventsList-items .item .item-summary span.priority-ticket {
	color: #a3eaff;
	display: block;
	font-weight: bold;
	padding-top: 41px;
	position: absolute; bottom: 5px; right: 3px;
	text-align: center;
	width: 60px;
	z-index: 20;
	/* font-size: 1.2em; */
	
}
.eventsList-items .item .item-summary span.priority-ticket span {
	background: url(../../../Generic/Images/Icons/priorityTicket.png) no-repeat top;
	width: 50px;
	height: 40px;
	display: block;
	margin-left: 5px;
	margin-bottom: 1px;
}

/**
	1.2.4 Dates
*/

.eventsList-items .item .item-summary span.date {
	color: #a3eaff;
	/* font-size: 1.2em; */
	position: relative;
}

/**
	2. Priority List
*/

.eventsList#eventsList-priority {
	background: #0A78BF url(../../../Generic/Images/Panels/EventLists/bg-priority.png) repeat-x bottom;
}


.eventsList#eventsList-priority .eventsList-detail .status-count {
	color: #89d1ff;
}
.eventsList#eventsList-priority .eventsList-detail .status .status-icons {
	background: url(../../../Generic/Images/Panels/EventLists/seperator-priority.gif) no-repeat top left;
}

.eventsList#eventsList-priority .eventsList-detail h2 {
	color: #FFF;
}

/**
	2.1 Priority Items
*/

.eventsList#eventsList-priority .eventsList-items {
	background: #053E7A url(../../../Generic/Images/bg-event-list-priority.png) repeat-x bottom;
	border-left: solid 0.1em #1b6dad;
	
	
}

.eventsList#eventsList-priority .eventsList-items .item {
	min-height:	148px;
}
* html .eventsList#eventsList-priority .eventsList-items .item {
	height:	148px;
}
/**
	2.1.1 Priority Item detail
*/

.eventsList#eventsList-priority .eventsList-items ul li .item-detail .p {
	background: url(../../../Generic/Images/Icons/priority-peel.gif) no-repeat top right;
}

.eventsList#eventsList-priority .eventsList-items .item .item-detail {
	min-height: 104px;/*IE7 is rounded up ems here for some reason*/
}
* html .eventsList#eventsList-priority .eventsList-items .item .item-detail {
	height: 10.4em;
}

.eventsList#eventsList-priority .eventsList-items .item .item-detail b {
	background-color: #01579b;
}


/*fix IE6's interpretation of position absolute*/
* html .eventsList#eventsList-priority .eventsList-items ul li .item-detail b {
	height: 10.4em;
}

/**
	2.1.2 Priority Item summary
*/

.eventsList#eventsList-priority .eventsList-items .item .item-summary {
	min-height: 3.5em;
	padding-top: 9px;
}
* html .eventsList#eventsList-priority .eventsList-items .item .item-summary {
	height: 3.5em;
}
.eventsList#eventsList-priority .eventsList-items .item .item-summary b {
	/* 
		background-color: #0a4b84;
		TB: After looking at it for a while in IE7, seems it has a problem with hover speeds in combination with transparent PNG's (they become really sluggish)
		TB: We would have done this with opacity, although 'filter' seems to act like overflow hidden and unfortuantely thats a problem here...  although with different markup....
	*/
	background: url(../../../../Assets/Generic/Images/TransparentColours/blue-94.png) repeat top left;
	*background: #0a4b84;
}

/*fix IE6's interpretation of position absolute*/
* html .eventsList#eventsList-priority .eventsList-items ul li .item-summary b {
	height:  4.5em;
}


/**
	3. JS Only
*/

.eventsList .leftscroller {
	position: absolute;
	left: 125px;
	width: 31px;
	height: 96px;
	z-index: 30;
	background-image: url('../Images/scroll-left-background.gif');
}
.eventsList .rightscroller {
	position: absolute;
	right: 0px;
	width: 30px;
	height: 96px;
	z-index: 30;
	/*background-image: url('../Images/scroll-right-background.gif');*/
	border-left: 1px solid #dedede;
}
.eventsList .leftscroller a,
.eventsList .rightscroller a {
	width: 20px;
	height: 86px;
	display: block;
	margin: 5px 0 0 5px;
	cursor: default;
	outline: none;
}
.eventsList .leftscroller a.clickable,
.eventsList .rightscroller a.clickable {
	cursor: pointer;
}
.eventsList .leftscroller a {
	background-image: url('../Images/scroll-left-disabled.gif');
}
.eventsList .leftscroller a.clickable {
	background-image: url('../Images/scroll-left.gif');
}
.eventsList .leftscroller a.clickable:hover {
	background-image: url('../Images/scroll-left-hover.gif');
}
.eventsList .rightscroller a {
	background-image: url('../Images/scroll-right-disabled.gif');
}
.eventsList .rightscroller a.clickable {
	background-image: url('../Images/scroll-right.gif');
}
.eventsList .rightscroller a.clickable:hover {
	background-image: url('../Images/scroll-right-hover.gif');
}

/*priority changes*/
#eventsList-priority.eventsList .leftscroller {
	height: 160px;
}
#eventsList-priority.eventsList .leftscroller a {
	background-image: url('../Images/scroll-priority-left-disabled.gif');
	height: 150px;
}
#eventsList-priority.eventsList .leftscroller a.clickable {
	background-image: url('../Images/scroll-priority-left.gif');
}
#eventsList-priority.eventsList .leftscroller a.clickable:hover {
	background-image: url('../Images/scroll-priority-left-hover.gif');
}
#eventsList-priority.eventsList .rightscroller {
	height: 160px;
	/*background-image: url('../Images/scroll-priority-right-background.gif');*/
	border-left: 1px solid #1a70b1;
}
#eventsList-priority.eventsList .rightscroller a {
	background-image: url('../Images/scroll-priority-right-disabled.gif');
	height: 150px;
}
#eventsList-priority.eventsList .rightscroller a.clickable {
	background-image: url('../Images/scroll-priority-right.gif');
}
#eventsList-priority.eventsList .rightscroller a.clickable:hover {
	background-image: url('../Images/scroll-priority-right-hover.gif');
}
.eventsList .shadowleft {
	position: absolute;
	left: 156px;
	width: 12px;
	height: 96px;
	background-image: url('../Images/shadow-left.png');
	z-index: 30;
}
.eventsList .shadowright {
	position: absolute;
	right: 31px;
	width: 12px;
	height: 96px;
	background-image: url('../Images/shadow-right.png');
	z-index: 30;
}
#eventsList-priority.eventsList .shadowleft {
	height: 160px;
}
#eventsList-priority.eventsList .shadowright {
	height: 160px;
}

/**
	4. Slide down alert
*/

div#alert {
	overflow: hidden;
	padding: 12px;
}

div#alert h2 {
	width: 650px;
	font-size: 1.4em;
	font-weight: bold;
}

div#alert p {
	font-size: 1.2em;
	width: 650px;
}

div#alert div#alert-buttons {
	position: absolute; bottom: 0; right: 0;
	margin: 0 12px 6px 0;
	overflow: hidden;
	width: auto;
}

div#alert div#alert-buttons div.button{
	margin: 0 0 0.6em 12px;
}

#divSignUp {
	background: #000000;
	overflow: hidden;
}

#divSignUp #priorityHeaderFlash, #divSignUp #priorityHeaderStatic {
	float:left;
}
#divSignUp .panel p {
	font-weight:bold;
	font-size:1.4em;
	float:left;
	width:157px;
	margin:3px 0 0 3px;
	min-height:61px;
}

#divSignUp .panel .button {
	float:right;
	margin:0 6px 12px 0;
}

#divSignUp .panel {
	width: 182px;
	float: right;
	margin: 8px 8px 8px 0;
}

#divSignUp .panel input {
	display:none;
	width: 16px;
	height: 16px;
	background: transparent url(../Images/close.gif);
	font-size: 1.2em;
	color: #ffffff;
	font-weight: bold;
	line-height: 1em;
	padding: 0;
	margin: 0;
	float:right;
	cursor:pointer;
	text-indent:-2000px;
}

#flashcontent {float:left;}
