/*********************************************************************************************************

Project: Barbados Amateur Swimming Association

Author: Marcus Thompson
Date: 13th November 2009

Contents

01 - GENERAL
	01.1 - SUPERSIZE BACKGROUND
02 - HEADER
03 - MAIN NAVIGATION
	03.1 - NAVIGATION BUTTON STYLES
04 - CONTENT
	04.1 - TABS
05 - FOOTER

Colors Used

Green : #74a125
Light Grey: #d9d9d9

/*********************************************************************************************************

01 - GENERAL

*********************************************************************************************************/
* {
outline:none
}

html {
height:100%;
margin:0;
padding:0;
width:100%
}

body {
color:#1e1e1e;
font:.75em/1.7em Verdana,Helvetica,Arial,Geneva,Helvetica,sans-serif;
height:100%;
margin:0;
min-width:1024px;
padding:0;
width:100%
}

#bg_image {
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:1
}

#scrollable {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:2
}

blockquote {
background:rgba(153, 134, 117, 0.2);
border-left:3px solid #FFCC33;
color:#454545;
font-size:1em;
font-style:italic;
margin:22px 45px;
padding:15px 20px 10px 20px;
font-variant:small-caps
}

img {
border:0
}

a img {
border:0
}

p {
margin-bottom:1.15em;
clear: both;
}

h2 {
margin-bottom:1.15em
}

a {
text-decoration:none
}

em {
font-style:italic;
font-weight:700
}

strong {
font-weight:bold
}

.alignleft {
float:left;
margin-right:10px
}

.alignright {
float:right;
margin-left:10px
}

.aligncenter {
margin:0 auto;
text-align:center
}

#wrap {
margin:0 auto;
position:relative;
width:900px;
z-index:1
}

/*********************************************************************************************************

01.1 - SUPERSIZE BG

*********************************************************************************************************/
#supersize {
position:fixed
}

#supersize img {
height:100%;
position:absolute;
width:100%;
z-index:0
}

/*********************************************************************************************************

02 - HEADER

*********************************************************************************************************/
#header {
margin:2.3em 0 0;
position:relative
}

#greeting {
	position:absolute;
	width:400px;
	top: 45px;
	left: 200px;
	text-transform: uppercase;
	color:#FFCC00;
	font-weight:bold;
	font-size: 22px;
	line-height:26px;
	text-shadow: #999 0px 2px 2px;
}

#logo {
height:200px;
width:175px
}

#logo a:hover {
border:0
}

#tagline {
background:#fff;
color:#222;
font-family:"Verdana", "Helvetica", "Arial", sans-serif;
font-size:11px;
padding:0.75em 2em
}

#tagline a {
color:#06C;
font-style:italic;
font-weight:700
}

#tagline a:hover {
border-bottom:1px solid #00F
}

div.synopsis h2 {
font-weight:700;
margin-bottom:0.5em;
padding-top:0.7em
}

div.synopsis a {
color:#FC3;
font-weight:700
}

div.synopsis a:hover {
border-bottom:1px solid #FC3
}

span.date {
color:#FC3;
font-size:10px;
font-style:italic;
white-space:nowrap
}

#search {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
background:#fff;
padding:0.75em;
position:absolute;
right:0;
top:-2.3em;
width:400px
}

#search label {
background:url(../images/label-search.png) 0 1px no-repeat;
color:#333;
display:block;
float:left;
font-weight:700;
height:25px;
text-align:right;
width:50px
}

#search input {
border:solid 1px #aacfe4;
color:#999;
float:left;
font-size:12px;
margin:2px 0 0 10px;
padding:4px 2px;
width:275px
}

#search input:hover {
border:solid 1px #FC3
}

#search input:focus {
border:solid 1px #FC3
}

#search button {
background:#666 url(../images/button.png) no-repeat;
border:0;
color:#FFF;
font-size:11px;
font-weight:700;
height:25px;
line-height:25px;
margin-left:5px;
margin-top:2px;
text-align:center;
width:50px
}

#search button:hover {
color:#FC3
}

/*********************************************************************************************************

03 - MAIN NAVIGATION

*********************************************************************************************************/
#navigation {
position:relative;
text-align:right;
width:100%;
z-index:100
}

#subactivep,#subactive {font-weight:bold}


/*********************************************************************************************************

04 - CONTENT

*********************************************************************************************************/
#content {
margin:2.5em 0 0
}

#content p a:hover {
border-bottom:1px solid #00F
}

.col {
float:left;
width:290px
}

#column2 {
margin:0 15px
}

.col h3.colheader {
background:url(../images/bg-columns-transparent.png) repeat-y;
color:#fff;
font-weight:700;
padding:0.5em 1.3em
}

.coltext a {
color:#06C;
font-style:italic
}

.coltext {
background:url(../images/bg-columns-white.png) repeat-y;
font-size:11px;
padding:1.5em 0 0.5em
}

#column1 .coltext img {
-moz-box-shadow:0 0 7px #000;
-moz-transform:rotate(-1deg);
-webkit-box-shadow:0 0 7px #000;
-webkit-transform:rotate(-1deg);
border:3px solid #eee;
box-shadow:0 0 7px #000
}

#column1 .coltext img:nth-child(odd) {
-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg); 
}

#affiliates,.btn {
padding: 5px 15px;
text-align:center
}

#affiliates a,.btn a {
background: #FFCC33;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #222;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}

#affiliates a:hover,.btn a:hover {
background:#222;
color:#FFCC33
}


#links {
background:#eee;
display:none
}

#links h4 {
padding: 5px 15px;
font-weight:bold;
border-top:1px solid #eee;
text-align:center
}

#links ul {
padding: 5px 10px;
margin: 0 auto;
background:#fff
}

#links ul li {
/*float:left;
width:48%;*/
}


ol.recentnews h3 {
font-size:12px;
font-weight:700
}

ol.recentnews span.date {
color:#666
}

ol.recentnews li {
margin-bottom:0.65em
}

ol.recentnews li a {
color:#06C
}

ol.recentnews li a:hover {
border-bottom:1px solid #06C
}

ol.recentnews li p {
margin: 0 0 0 -15px;
padding: 0;
}

#home #content p {
padding:0 1.5em
}

#home #content ol {
padding:0 1.5em
}

.readmore {
font-style:italic;
font-weight:700
}


ul#records {
width:290px;
margin: 0 10px 5px 10px;
}

ul#records a:hover {
color:#FFCC33
}

ul#records li {
width:90px;
float:left;
text-align:center;
line-height:1.2
}

span.recdist {
font-size:30px
}

span.recdist a {
color:#333
}

span.rectext,.caption {
font-size:10px;
}



/*********************************************************************************************************

04.1 - SPONSORS

*********************************************************************************************************/
#sponsors {
background:#333;
display:none;
margin:2.5em 0 0;
padding:1.5em;
position:relative
}

/*********************************************************************************************************

04.2 - UPCOMING EVENTS

*********************************************************************************************************/
#upcoming {
bottom:15px;
/*display:none;*/
position:absolute;
right:0;
width:620px
}

#upcoming h2 {
font-family:Geneva, Arial, Helvetica, sans-serif;
margin:0 30px 10px 0px;
text-align:right;
}

#upcoming dl {
width:620px
}

#upcoming dt {
clear:left;
float:left;
font-weight:700;
line-height:24px;
vertical-align:top;
width:295px;
text-align:right;
padding-right:25px;
color:#01288F
}

#upcoming dd {
float:left;
line-height:24px;
margin:0 0 8px;
vertical-align:top;
width:280px
}

/*********************************************************************************************************

04.3 - SECTION PAGE

*********************************************************************************************************/
#section #content {
background:url(../images/bg-clear.png) repeat;
border-top:1px solid #eee;
margin:0
}

#twocol #content {
background:#fff url(../images/bg-section-color.png) bottom right no-repeat;
border-top:1px solid #eee;
margin:0
}

#maincol {
background:#fff;
width:900px
}

#leftcol {
float:left;
width:600px
}

#sidebar {
float:right;
width:299px;
border-left:1px solid #eee
}

#content h2 {
margin-bottom:0.8em;
color:#01288F
}

#maincol h1 {
margin-bottom:1.15em
}

#maincol h3 {
margin-bottom:1.15em;
font-weight:bold
}

#maincol table {
margin-bottom:1.15em
}

#leftcol h1 {
margin-bottom:1.15em
}

#leftcol h3 {
margin-bottom:1.15em;
font-weight:bold;
clear:both;
}

#leftcol h2 {
clear:both;
}

#leftcol table {
margin-bottom:1.15em
}

.innerpad {
padding:2em
}

#maincol ul,#leftcol ul {
margin:0 0 1.15em 2em
}

#maincol ol,#leftcol ol {
margin:0 0 1.15em 2em
}

#maincol ul li,#leftcol ul li {
list-style:square
}

#maincol ol li,#leftcol ol  li{
list-style:decimal
}

#leftcol ul ul,#leftcol ol ol {
margin-bottom:0
}

/*#maincol p {text-indent:20px;}
#leftcol p {text-indent:20px;}*/

#leftcol img {
/*-moz-transform:rotate(-1deg);
-webkit-transform:rotate(-1deg);
border:4px solid #ccc;*/
float:left;
margin:5px 15px 5px 0;
/*width:150px*/
}


#leftcol p img.aligncenter {
float:none;
text-align:center
}

/*#leftcol img:nth-child(odd) {
-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
float:right;
margin:0 0 5px 15px;
}
*/
#leftcol ul.picturelist img {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
float:none;
}

#sidebar ul {
list-style:square;
margin:0 0 1.15em 2em
}

#sidebar ol {
list-style:square;
margin:0 0 1.15em 2em
}

#ver-zebra {
border-collapse:collapse;
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size:12px;
margin:0 20px 20px 0;
text-align:left;
width:845px
}

#ver-zebra th {
border-left:1px solid #fff;
border-right:1px solid #fff;
color:#039;
font-size:14px;
font-weight:400;
padding:12px 15px
}

#ver-zebra td {
border-left:1px solid #fff;
border-right:1px solid #fff;
color:#669;
padding:8px 15px
}

.vzebra-odd {
background:#eff2ff
}

.vzebra-even {
background:#e8edff
}

#ver-zebra #vzebra-adventure {
background:#d0dafd;
border-bottom:1px solid #c8d4fd
}

#ver-zebra #vzebra-children {
background:#d0dafd;
border-bottom:1px solid #c8d4fd
}

#ver-zebra #vzebra-comedy {
background:#dce4ff;
border-bottom:1px solid #d6dfff
}

#ver-zebra #vzebra-action {
background:#dce4ff;
border-bottom:1px solid #d6dfff
}

#section ul.imagegal {
display:none;
margin:0
}

#section ul.imagegal li {
background:#FF9;
float:left;
height:140px;
list-style:none;
margin:5px 10px 10px;
width:142px
}

#section .thumb {
width:100px;
height:200px;
float:left;
list-style:none;
margin:5px 10px 20px;
}

#section .picturelist .thumb {
	height:100px;
}

#section .thumb a {
/*border:5px solid #999;*/
display:block;
width:100%;
overflow:hidden;
}

.albumname { text-align: center; font-size:10px; font-weight: bold }

#section span.albumcomment,.picturelist .caption { display:none }

.picturelist li { float: left } 

#section ul.imagegal li a {
border:5px solid #999;
display:block;
height:140px;
width:140px
}

.NewsPostDate,.NewsPostDetailCategory,.NewsPostDetailAuthor {
font-size:80%;
color:#666666
}

.NewsPostDetailCategory,.NewsPostDetailAuthor {
font-variant: small-caps;
color:#999
}

.recentnews h3 {
margin-bottom:5px;
}

div.newsummary {
margin-top:-10px
}

p.news-pagination {
font-variant:small-caps;
font-weight:bold;
color:#01288F
}

/**RESULTS**/
div.event {
margin-top:5px;
border-top:1px solid #eee;
padding:15px 0;
}

div.meta {
margin-top: -10px
}

#maincol a:link, #leftcol a:link {
/*color:#444*/
}

#maincol a:hover,#leftcol a:hover {
/*color:#55DBC2*/
}

#twocol a:hover,#section a:hover {
color:#FFB900
}

#twocol li.thumb,#section li.thumb {
list-style-type:none;
}

#section span.albumcomment {
display:none
}

#twocol .thumb a {
border-right:0px;
border-bottom:0px;
border-left:0px
}

table {
font-size:11px;
border:1px solid #ccc
}

tbody tr:nth-child(odd) {
   background-color: #eee;
}

#twocol table td,#twocol table th,#leftcol td,#leftcol th {
padding: 2px 5px;
vertical-align:top
}

#twocol table th,#leftcol th {
color:#0066CC;
font-weight:bold
}


/*********************************************************************************************************

04.4 - FORM

*********************************************************************************************************/
.spacer {
clear:both;
height:1px
}

/* ----------- My Form ----------- */
.myform {
padding:14px;
width:400px
}

/* ----------- stylized ----------- */
#contactform h1 {
font-size:14px;
font-weight:700;
margin-bottom:8px
}

#contactform p {
border-bottom:solid 1px #ccc;
color:#666;
font-size:11px;
margin-bottom:20px;
padding-bottom:10px
}

#contactform label {
display:block;
float:left;
font-weight:700;
text-align:right;
width:140px
}

#contactform .small {
color:#666;
display:block;
font-size:11px;
font-weight:400;
text-align:right;
width:140px
}

#contactform input {
border:solid 1px #aacfe4;
float:left;
font-size:12px;
margin:2px 0 20px 10px;
padding:4px 2px;
width:200px
}

#contactform textarea {
border:solid 1px #aacfe4;
float:left;
font-size:12px;
height:150px;
margin:2px 0 20px 10px;
overflow:scroll;
padding:4px 2px;
width:200px
}

#contactform button {
background:#666 url(../img/contactbutton.png) no-repeat;
clear:both;
color:#FFF;
font-size:11px;
font-weight:700;
height:31px;
line-height:31px;
margin-left:150px;
text-align:center;
width:125px
}

/*********************************************************************************************************

05 - FOOTER

*********************************************************************************************************/
#footer li {
color:#aaa;
float:right;
font-size:10px;
margin:1em 0 0
}