@charset "utf-8";

/* Gold Coast City Council - goldcoast.qld.gov.au
---------------------------------------------------

[Home Page Stylesheet]

[Table of contents]

1. Home Page Generic Styles
2. Home Page Feature  - Moved to Global
		2.1  Feature Pagination - Moved to Global
3. Events Slider
4. News Slider
5. Councillors Slider
6. Slider Button
7. City Highlight
8. Popular pages 


/*====================================
1.	HOME PAGE GENERIC STYLES
=====================================*/

.content-top { /* Prototype only */
	background:url(/_images/ct-top-home.png) top center no-repeat !important;
}

#content-main-inner {
	border-top:none;
}
#breadcrumb {
	display:none;
}
#page {
	padding: 17px 25px 25px 25px; 
}
#page.home {
	font-size:100% !important;
}
#welcome { 
	margin-bottom:25px; }
	
/*====================================
3.	EVENTS SLIDER
=====================================*/

#events-slide {
	border-right:1px dotted #E2E2E2;
	width:319px;
	float:left;	
	position:relative;
	padding-right:25px;
	margin:0 0 25px 0
}
#events-slide .slide-container {
	overflow:hidden;
	width:320px;
	height:335px;
	z-index:0;
}
#events-slide .slide-container .slide {
	width:320px;
	display:block;
}
.event {
	height:140px;
	margin-bottom: 25px; }
 
.event-img {
	float: left;
	margin-right: 25px;
	width:100px;
 }

.event-text {
	width:195px;
	height:100px;
    display: block; /* or inline-block */
    overflow: hidden;
    -o-text-overflow: ellipsis;    /* Opera */
    text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
}
#events-slide .prev {
	position:absolute;
	top:-5px;
	right:60px;
	height:26px;
	width:26px;
	background-position:-174px -50px;
	display:block;
	text-indent:-9999px
}
#events-slide .prev:hover, #events-slide .prev:focus {
	background-position:-226px -50px;
}
#events-slide .next {
	position:absolute;
	top:-5px;
	right:25px;
	height:26px;
	width:26px;
	background-position:-200px -50px;
	display:block;
	text-indent:-9999px
}
#events-slide .next:hover, #events-slide .next:focus {
	background-position:-252px -50px;
}

#events-slide .pagination-ct {
	position:absolute;
	left:0px;
	bottom:10px !important;
	padding:0;
	width:175px; }
	
#events-slide .pagination-inner {
	float:left;
   width:100%;
   overflow:hidden;
   position:relative; }
   	
#events-slide .pagination {
    float: left;
	left:0;
    list-style: none outside none;
    margin:0;
    padding: 0;
}

#events-slide .pagination li {
	float:left;
	list-style:none;
	margin:0 6px 0 0;
	padding:0;
    position: relative;
	right:0;
	width:12px;
	height:12px;
}

#events-slide .pagination li a {
	background-position:-926px -227px;
	display:block;
	font-size:0.625em;
	width:12px;
	height:12px;
	float:left;
	color:#305c7f;
	text-indent:-9999px;
	z-index:0
}
#events-slide .pagination li a:hover, #events-slide .pagination li a:focus {
	background-position:-910px -227px;
	text-decoration:none;
	color:#f1f1f1;
}
#events-slide .pagination li.current a {
	background-position:-910px -227px;
	text-decoration:none;
	color:#f1f1f1;
}

/*====================================
4.	NEWS SLIDER
=====================================*/

#news-panel {
	float: left;
	width: 320px;
	margin:0 0 25px 0;
	padding-left:25px;
	position:relative;
}
#news-panel .slide-container {
	overflow:hidden;
	width:320px;
	height:315px;
	z-index:0;
	margin-bottom:24px;
}
#news-panel .slide-container .slide {
	width:320px;
	display:block;
}
.news-item {
	margin:0px 0 10px 0;
	min-height:96px;
	border-bottom:1px dotted #ccc }
 
.news-item a {  }
 
.news-item h3.title { 
	color: #3A4B5B;
    font-size: 0.688em;
	font-weight:bold;
    margin-bottom: 15px;
	margin-bottom:5px;
	height:18px;
	overflow:hidden
	}

.news-item p.date {
	color:#6F8090;
	font-size:0.688em;
	font-weight:normal;
	margin-bottom:5px;
}
.news-item p.leadin {
	font-size:0.688em;
	margin-bottom:10px;
	height:38px;
	overflow:hidden
}
.news-text { line-height: 1.2em; }

.news-img {
	float: left;
	margin-right: 15px; }

#news-panel .prev {
	position:absolute;
	top:-5px;
	right:60px;
	height:26px;
	width:26px;
	background-position:-174px -50px;
	display:block;
	text-indent:-9999px
}
#news-panel .prev:hover, #news-panel .prev:focus {
	background-position:-226px -50px;
}
#news-panel .next {
	position:absolute;
	top:-5px;
	right:25px;
	height:26px;
	width:26px;
	background-position:-200px -50px;
	display:block;
	text-indent:-9999px
}
#news .next:hover, #news-panel .next:focus{
	background-position:-252px -50px;
}

#news-panel .pagination-ct {
	position:absolute;
	left:25px;
	bottom:10px !important;
	padding:0;
	width:175px; }
	
#news-panel .pagination-inner {
	float:left;
   width:100%;
   overflow:hidden;
   position:relative; }
   	
#news-panel .pagination {
    float: left;
	left:0;
    list-style: none outside none;
    margin:0;
    padding: 0;
}

#news-panel .pagination li {
	float:left;
	list-style:none;
	margin:0 6px 0 0;
	padding:0;
    position: relative;
	right:0;
	width:12px;
	height:12px;
}

#news-panel .pagination li a {
	background-position:-926px -227px;
	display:block;
	font-size:0.625em;
	width:12px;
	height:12px;
	float:left;
	color:#305c7f;
	text-indent:-9999px;
	z-index:0
}
#news-panel .pagination li a:hover, #news-panel .pagination li a:focus {
	background-position:-910px -227px;
	text-decoration:none;
	color:#f1f1f1;
}
#news-panel .pagination li.current a {
	background-position:-910px -227px;
	text-decoration:none;
	color:#f1f1f1;
}

/*====================================
5.	COUNCILLOR SLIDER
=====================================*/

#crs {
	border-right:1px dotted #E2E2E2;
	width:319px;
	height:345px;
	padding-right:25px;
	margin:0 0 0px 0;
	float:left;	
	position:relative;
}
#crs .slide-container {
	overflow:hidden;
	width:320px;
	height:300px;
	z-index:0;
}
#crs .slide-container div.slide {
	width:320px;
	height:300px;
	display:block;
}
#crs .cr-img {
	float:left;
	padding-right:25px;
}
#crs .cr-caption {
	float:left;
	height:300px;
	width:170px;
}
#crs h3 {
	margin-bottom:5px;
}
#crs p.division {
	font-size:0.688em;
	margin-bottom:5px;
}
#crs .prev {
	position:absolute;
	top:-5px;
	right:60px;
	height:26px;
	width:26px;
	background-position:-174px -50px;
	display:block;
	text-indent:-9999px
}
#crs .prev:hover, #crs .prev:focus{
	background-position:-226px -50px;
}
#crs .next {
	position:absolute;
	top:-5px;
	right:25px;
	height:26px;
	width:26px;
	background-position:-200px -50px;
	display:block;
	text-indent:-9999px
}
#crs .next:hover, #crs .next:focus {
	background-position:-252px -50px;
}
#crs ul {
	margin-left:15px;
}
#crs li {
	font-size:0.688em;
	padding-bottom:5px;
}

/*====================================
6.	SLIDER BUTTONS
=====================================*/

.slider-button {
	float:right;
	height:28px;
}
#crs .slider-button {
	margin-top:-25px;
}

/*====================================
7.	CITY HIGHLIGHT
=====================================*/
 
#city-highlight {
	height:345px;
	float: left;
	width: 320px;
	padding-left:25px;
	margin:0 0 0px 0; }
 
#city-highlight-inner {
	height: 250px; }
 
#city-highlight img { }
 
#city-highlight-img {
	float: left;
	margin-right: 25px;
	margin-bottom:15px;
	padding-top: 5px; }
 
#city-highlight ul li {
	font-size:0.688em;
	 }

#city-highlight .slider-button {
	margin-top:25px;
}

/*====================================
7.	Popular pages - icons can be found in images.css
=====================================*/

.popular-heading {
    background: #f1f1f1 none repeat scroll 0 0;
    border-color: #fff #fff #e2e2e2;
    border-style: solid;
    border-width: 1px;
    clear: both;
    height: 32px;
    margin: 25px -25px;
    padding: 8px 25px 0 20px;
}
#popular {
	height: auto;
	margin: 0 0 25px;
	float: left;
}
.popular-column {
	border-right: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	float: left;
	width: 208px;
	padding: 10px;
}
.popular-column img{
	float:left;
	margin-right:10px;
}
.popular-column.nbr {
	border-right: none;
}
.popular-column.nbb {
	border-bottom: none;
}
.popular-column h2 {
	text-transform: none;
	display: inline-block;
	margin-top:0px;
	margin-bottom:0px;
}
.pop-icon{
	display: inline-block;
    height: 33px;
    padding: 18px 0 5px 60px;
	width:148px;
}
.qtip-content {
	text-align: center!important;
}