/* ----------------------------------------------------- */
/*  Team Taranaki - Screen CSS  					     */
/*  Ver     : 1                                          */
/*  Created : 31 March 2010                              */
/*  Note    :                                            */
/*  - IE7 : IE7 specific styles exist in screen-ie7.css  */
/* ----------------------------------------------------- */

/*------------------*/
/* Table of Content */
/*------------------*/

/*
1. General
	1.1. Hyperlink
	1.2. Heading
	1.3. Text
	1.4. Class
	1.5. Table
	1.6. Form

2. Lay-out

3. Header

4. Navigation
	4.1. Accessibility Navigation
	4.2. Main Navigation

5. Content
	5.1. Main Content
		5.1.1. Home Notice Board
		
	5.2. Side Content
		5.2.1. Latest News Section		
		5.2.2. Sponsor Section
		5.2.3. Small Calendar

6. Footer

7. Plug-in Related CSS

8. Additional CSS
*/

/*------------*/
/* 1. General */
/*------------*/

* {line-height: 1.5;}

body
{
margin: 0;
padding: 0;
font: 62.5% Arial, Helvetica, Verdana ,sans-serif;
color: #000;
background-color: #FFF;
}

/* 1.1. Hyperlink */

a
{
color: #f1a102;
font-size: 1.2em;
text-decoration: none;
cursor: pointer;
}

a:hover {text-decoration: underline;}

/* 1.2. Heading */

h1, h2, h3, h4, h5, h6 {margin: 0 0 10px 0;}

h1 { font-size: 3.2em;}
h2 { font-size: 1.6em;}
h3 { font-size: 1.2em;}
h4 { font-size: 1.1em;}
h5 { font-size: 0.9em;}

/* 1.3. Text */

p
{
font-size: 1.2em;
margin: 0 0 10px 0;
}

/* 1.4. Class */

.clear  {clear: both;}
.strong  {font-weight: bold;}

/* 1.5. Table */

table {margin: 0 0 10px 0;}

td, th 
{
font-size: 1.1em;
padding: 5px;
}

/* 1.6. Form */

input, textarea
{
margin: 0;
padding: 0;
border: 0;
background: none;
}

input.submit {cursor: pointer;}

label
{
font-size: 1.2em;
display: block;
margin: 0 0 3px 0;
}

textarea {margin: 0 0 10px 0;}

/*-------------*/
/* 2. Lay-out  */
/*-------------*/

div.grand-wrapper /* Important to remove space on the top of page in Opera Browser */
{
margin: 0;
padding: 0;
width: 100%;
position: absolute;
top: 0;
}

div.wrapper
{
width: 984px;
margin: 0 auto;
}

/*-----------*/
/* 3. Header */
/*-----------*/

/*  with banner ver.1 */

/*
div.header
{
width: 940px;
height: 155px;
margin: 0 10px 20px 10px;
background: transparent url(../img/team_taranaki_banner.jpg) no-repeat 266px -0px;
position: relative;
border-bottom: 1px solid #666;
}

.header div.logo
{
width: 256px;
height: 113px;
position: absolute;
top: 15px;
left: 10px;
}

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

div.header
{
width: 940px;
height: 155px;
margin: 0 9px 20px 9px;
xbackground: transparent url(../img/team_taranaki_banner.jpg) no-repeat 286px 0px;
position: relative;
border: 1px solid #000;
}

.header div.logo
{
width: 256px;
height: 113px;
position: absolute;
top: 15px;
left: 5px;
}

div.visual-container
{
width: 658px;
height: 155px;
overflow: hidden;
position: relative;
overflow: hidden;
left: 282px;
}

.visual-container img
{
position: absolute;
top: 0;
left: 0;
display: none;
}

.visual-container img.active-slide {display: inline;}


/*---------------*/
/* 4. Navigation */
/*---------------*/

/* 4.1. Accessibility Navigation */

ul.nav-access
{
position: absolute;
top: -9999px;
left: -9999px;
}

/* 4.2. Main Navigation */

div.main-navigation
{
width: 170px;
float: left;
padding: 0 10px;
margin: 0 0 25px 0;
}

.main-navigation ul.top-nav, div.main-nav-container
{
margin: 0 0 20px 0;
}

.main-navigation li
{
margin: 0 0 2px 0;
display: block;
}

.main-navigation a
{
background-color: #000; 
display: block;
padding: 5px 10px;
font-weight: bold;
font-size: 1.3em;
}

.main-navigation a:hover, .main-navigation .selected a
{
text-decoration: none;
background-color: #f1a102;
color: #000;
}

li.sub-menu  /* IE7 */
{
} 

.sub-menu-lv-2 a
{
background-color: #CCC;
color: #000;
padding: 5px 10px 5px 17px;
}

div.social-link a
{
background: transparent;
display: inline;
margin: 0 5px 0 0;
padding: 0;
}

.social-link a:hover {background: transparent;}

.social-link h2
{
color: #f1a102;
}

/*------------*/
/* 5. Content */
/*------------*/

.content div.top
{
width: 984px;
height: 31px;
background: transparent url(../img/top-bg.png) no-repeat 0 0;
}

.content div.middle
{
width: 960px;
padding: 0 15px 0 9px;
background: transparent url(../img/middle-bg.png) repeat-y 0 0;
}

	/* 5.1. Main Content */

	div.main-content
	{
	width: 510px;
	float: left;
	padding: 0 10px 25px 10px;
	}

	.main-content h2
	{
	color: #F1A102;
	font-size: 2.4em;
	}

	.main-content img {margin: 0 0 10px 0;}
	div.cms-editable-area {margin: 0 0 25px 0;}
	.cms-editable-area h1 {line-height: 1.2;}
	.cms-editable-area a {font-size: 1em;}
	.cms-editable-area ol, .cms-editable-area ul {list-style: disc outside none;}

	.cms-editable-area li
	{
	margin: 0 0 5px 15px;
	font-size: 1.2em;
	}
	
		/* 5.1.1. Home Notice Board */
		
		.notice-board li
		{
		display: block;
		padding: 0 0 10px 76px;
		background: transparent url(../img/notice-icon.jpg) no-repeat 0 0;
		width: 434px;
		margin: 0 0 15px 0;
		border-bottom: 1px solid #eee;
		}
		
		.notice-board h3
		{
		font-size: 1.4em;
		}
		
		/* 5.1.2. Notice Board Page */
		
		.individual-notice-board h2 {margin: 0;}
		
		.individual-notice-board span.date
		{
		font-size: 1.1em;
		color: #666;
		display: block;
		margin: 0 0 10px 0;
		}
		
		/* 5.1.3. Location and Facilities Page */
		
		div.map-container span {display: block;}
		
		a.terms-of-use-link
		{
		display: block;
		font-size: 1em;		
		margin: 0 2px 0 0;		
		}
		
		/* 5.1.4. Gallery Landing Page */
		
		ul.gallery-list li a
		{
		width: 488px;
		height: 120px;
		display: block;
		padding: 10px;
		margin: 0 0 15px 0;
		border: 1px solid #e3e3e3;
		position: relative;
		}
		
		.gallery-list li a:hover {border: 1px solid #F1A102;}
		
		.gallery-list span.image
		{
		float: left;
		width: 122px;
		height: 122px;
		}
		
		.gallery-list img {border: 1px solid #e3e3e3;}
		
		.gallery-list span.gallery-desc
		{
		width: 351px;
		float: right;
		}
		
		.gallery-list span.title
		{
		display: block;
		font-size: 1.4em;
		font-weight: bold;		
		margin: 0 0 5px 0;
		}
		
		.gallery-list span.description {color: #000;}		
		.gallery-list a:hover {text-decoration: none;}
		
		/* 5.1.5. Individual Gallery Page */
		
		p.gallery-description {margin: 0 0 25px 0;}
				
		.gallery li
		{
		width: 122px;
		height: 122px;
		display: block;
		margin: 0 5px 10px 5px;
		float: left;
		}
		
		.gallery a
		{
		display: block;
		width: 120px;
		height: 120px;
		border: 1px solid #e3e3e3;		
		}
		
		.gallery a:hover {border: 1px solid #F1A102;}
		
		/* 5.1.6. Individual Gallery Page */
		
		.video-gallery li {margin: 0 0 25px 0;}		
		.video-gallery h3 {font-size: 1.7em;}		
		.video-gallery iframe {width: 510px !important;}
		
		/* 5.1.7. Squad Page */
		
		.squad-list li
		{		
		width: 150px;
		height: 240px;
		margin: 0 10px 25px 10px;
		float: left;
		}
		
		.squad-list a
		{
		color: #000;
		display: block;
		width: 148px;
		height: 238px;
		border: 1px solid #e3e3e3;
		text-align: center;
		}
		
		.squad-list a:hover 
		{
		text-decoration: none;
		color: #000;
		border: 1px solid #F1A102;
		color: #F1A102;
		}
		
		.squad-list img
		{
		width: 148px;
		height: 198px;
		margin: 0;
		}
		
		.squad-list span.image
		{
		display: block;
		margin: 0 0 10px 0;
		}
		
		.squad-list span.name
		{
		height: 20px;
		vertical-align: middle;
		}
			
		/* 5.1.8. Individual Squad Page */
		
		.squad-info-area div.photo 
		{
		float: left;
		margin: 0 25px 10px 0;
		width: 150px;
		height: 200px;
		border: 1px solid #F1A102;
		}
		
		.squad-info-area .photo img
		{
		width: 150px;
		height: 200px;
		margin: 0;
		}
		
		.squad-info-area div.bio {float: left;}
		
		div.bio {margin: 10px 0 0 0;}
		
		.bio dl {font-size: 1.2em;}
		
		.bio dt
		{
		font-size: 1.2em;
		font-weight: bold;
		color: #F1A102;
		}
		
		.bio dd {margin: 0 0 7px 0;}
		
		.profile-area h3
		{
		font-size: 1.4em;
		color: #F1A102;
		margin: 0 0 7px 0;		
		}
		
	/* 5.2. Side Content */
	
	div.side-content
	{
	width: 220px;
	float: left;
	padding: 0 10px;
	}

	.side-content h2 {color: #f1a102;}

	div.section{margin: 0 0 25px 0;}
	
	
		/* 5.2.1. Latest News Section */
		
		.latest-news-area li {margin: 0 0 15px 0;}
		.latest-news-area h3, .notice-board h3 {margin: 0;}
		.latest-news-area h3 a, .notice-board h3 a {font-size: 1.1em;}

		.latest-news-area h3 a:hover, .notice-board h3 a:hover
		{
		color: #000;
		text-decoration: none;
		}

		.latest-news-area span.date, .notice-board span.date
		{
		font-size: 1.1em;
		display: block;
		margin: 0 0 7px 0;
		color: #666;
		}

		.latest-news-area p {margin: 0 0 5px 0;}
		
		/* 5.2.2. Sponsor Section */
		
		div.sponsor-logo 
		{
		width: 220px;
		text-align: center;
		}

		.sponsor-logo img
		{		
		margin: 0 0 20px 0;		
		width: 200px;
		}
		
		/* 5.2.3. Small Calendar */
		
		div.small-calendar-area
		{
		width: 220px;
		height: 300px;
		}
		
		.small-calendar-area iframe
		{
		width: 220px !important;
		height: 250px !important;
		}
        
        div.month-control
		{
        width: 220px;
        background: #e3e3e3;
		position: relative;
		height: 25px;
        }
        
		.month-control li
		{
		display: inline-block;	
		height: 15px;
		line-height: 15px;
		}
		
		.month-control li.month
		{
		width: 188px;
		text-align: center;
		font-size: 1.2em;
		font-weight: bold;
		position: absolute;
		left: 16px;
		top: 5px;
		}
		
		.month-control a
		{
		display: block;
		width: 6px;
		height: 12px;
		text-indent: -9999px;
		font-size: 0;
		line-height: 0;
		position: relative;
		position: absolute;
		top: 7px;
		}
		
		a.prev-month-button 
		{
		background: transparent url(../img/arrow-left.gif) no-repeat 0 0;
		left: 7px;
		}
		
		a.next-month-button 
		{
		background: transparent url(../img/arrow-right.gif) no-repeat 0 0;
		right: 7px;
		}
		
		div.calendarSmall
		{
		width: 220px;
		position: relative;		
		}

		.calendarSmall table
		{
		position: absolute;
		top: 30px;
		left: 1px;
		width: 218px !important;		
		}
		
		.calendarSmall td
		{
		border: 1px solid #e3e3e3;		
		vertical-align: middle;
		width: 30px !important;
		height: 30px !important;
		padding: 0;
		}

		.calendarSmall div.today
		{
		width: 30px;
		height: 30px;
		border: 1px solid red;
		line-height: 28px;		
		}
		
		.calendarSmall td.calendarDaySelected {background-color: #DDD !important;}
		
		.calendarSmall td .selected a
		{
		font-size: 1.1em;
		font-weight: bold;
		color: #ffa800;
		}
		
		div.modal-window {display: none;}
		
		.event-info h1
		{
		background-color: #000;
		color: #F1A102;
		font-size: 2em;
		padding: 0 10px;
		}
		
		.event-info p, .event-info h2 {padding: 0 10px;}
		
/*-----------*/
/* 6. Footer */
/*-----------*/

div.footer
{
width: 984px;
height: 90px;
background: transparent url(../img/bottom-bg.png) no-repeat 0 0;
position: relative;
}

div.copy
{
font-size: 1.1em;
position: absolute;
bottom: 30px;
left: 280px;
}

.copy a
{
font-size: 1em;
}

div.by
{
position: absolute;
font-size: 1.1em;
vertical-align: middle;
right: 35px;
bottom: 25px;
}

.by span
{
position: relative;
top: -7px;
display: inline-block;
padding: 0 5px 0 0;
}

/*------------------------*/
/* 7. Plug-in Related CSS */
/*------------------------*/

/*-------------------*/
/* 8. Additional CSS */
/*-------------------*/

/* 8.1. Framed Page Header */

.frame-page div.wrapper
{
width: 996px !important;
position: relative;
}

.frame-page div.logo
{
margin: 10px 0 0 0;
position: relative;
left: -10px;
}

.frame-page div.main-nav
{
display: inline-block;
position: absolute;
right: 10px;
top: 65px;
}

.frame-page .main-nav li
{
display: inline-block;
float: left;
margin: 0 1px;
}

.frame-page .main-nav a
{
background-color: #000;
padding: 7px 10px;
font-weight: bold;
display: inline-block;
}

.frame-page .main-nav a:hover
{
text-decoration: none;
background-color: #F1A102;
color: #000;
}

.frame-page div.social-link
{
position: absolute;
top: 0px;
right: 30px;
}