/*
---------------------------------------------------------
CPOA Toronto stylesheet. Author Francis Penny - Bear Alley Design -----------------------------------------------------------
*/ 
html, body{ 
margin:0; 
padding:0; 
text-align:center;
} 

body {
background: #fff url(../images/page_bg.jpg) repeat-x fixed left top;
}

/*global typography. resets some defaults so they can be established deeper into the stylesheet*/

body {
font-size: 76.1%;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #333333;
}

h1,h2,h3,h4 {
margin: 0;
padding: 0;
}

h1 {
font-size: 2.0em;
font-weight: normal;
}

img {
border: 0;
}

ol, ul, li {/*
list-style: none;*/
font-size: 1.0em;
line-height: 1.8em;
margin-top: 0.2em;
margin-bottom: 0.1em; 
}

li > p {
margin-top: 0.2em;
}

acronym {
border-bottom: 1px #000000 dashed;
cursor: help;}

/*
---------------------------------
end global typography
-----------------------------------
*/

/*
--------------------
link styles
--------------------
*/

#leftcol a:link, #leftcol a:visited, #maincol a:link, #maincol a:visited, #rightcol a:link, #rightcol a:visited  {
color:#467aa7;
font-weight:bold;
text-decoration:none;
border-bottom: 1px #2a5a8a dashed;
}

#wrapper #leftcol .logo-sidecol a, #wrapper #rightcol .logo-sidecol a {
border: 0;
}

#leftcol a:hover, #maincol a:hover, #rightcol a:hover {
color:#2a5a8a;
text-decoration:underline;
border: 0;
}

#topbar a:link, #topbar a:visited {
color: #fff;
text-decoration: none;
}

#topbar a:hover {
color: #f4f4f4;
text-decoration: underline;}

a:link.more-large, a:visited.more-large, a:link.more-small, a:visited.more-small {
color: #467aa7;
text-decoration: none;
border-bottom: 1px #467aa7 dashed;}

a:hover.more-large, a:hover.more-small  {
color:#2a5a8a;
font-weight: bold;
border-bottom: 1px #000000 solid;
}


/*
------------------------
end link styles
---------------------
*/

/*------------------------------------------
layout....includes text styles
-------------------------------------------
*/

#pagewidth{ 
width:776px; 
text-align:left;  
margin-left:auto; 
margin-right:auto;
background-color: #fff;
border: 2px #000 solid;
}


#pagewidth-inside {
margin: 2px auto;
padding: 0;
width: 772px;
}

#topbar {
position: relative;
width: 772px;
margin: 0;
padding: 0;
background-color: #24618E;
border-bottom: 1px #073C64 solid;
}

#topbar p {
font-size: 1em;
text-align: right;
color: #fff;
font-weight: bold;
font-variant: small-caps;
letter-spacing: .2em;
margin: 0;
padding: .3em;
}

#header{
position:relative; 
height:80px;
width: 772px;
margin: 0;
padding: 0 0;
background: transparent url(../images/cpoa_header_bg.jpg) repeat-x right top;
border-bottom: 1px #073C64 solid;} 

#branding {
position: relative;
float: left;
width: 357px;
height: 80px;
padding: 0 5px;
}

#branding h1 {
color: #fff;
font-size: 1.6em;
padding: .45em;
}

#branding p {
color: #fff;
font-size: .9em;
text-align: right;
margin:0;
padding: 0;
}

#top-photo {
float: right;
width: 405px;
height: 80px;
background: url(../images/cpoa_collage.jpg) no-repeat;
}

/*- Menu Tabs--------------------------- */

#tabs {
position: relative;
float:left;
width:772px;
background:#F4F4F4;
font-size: .9em;
line-height:normal;
border-bottom:1px solid #24618E;
}

#tabs ul {
width: 752px;
margin:0;
padding:10px 0 0 10px;
list-style:none;
}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
float:left;
background:url(../images/tabs/tableft.gif) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;

}
#tabs a span {
float:left;
display:block;
background:url(../images/tabs/tabright.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */

#tabs a:hover span {
color:#FFF;
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}

#tabs #current a span {
background-position:100% -42px;
color:#FFF;
}

#leftcol{
width:180px; 
float:left; 
position:relative; 
}

.newsleft {
position: relative;
width: 162px;
margin: 30px 6px 20px 6px;
padding-bottom: 5px;
border: 1px #D5D6D5 solid;
}

.newsright {
position: relative;
width: 162px;
margin: 30px 6px 20px 6px;
padding-bottom: 5px;
border: 1px #D5D6D5 solid;
}

.newsleft h4, .newsright h4 {
font-size: 1em;
color: #f4f4f4;
line-height: 1.3em;
text-align: center;
letter-spacing: .3em;
margin: 0;
padding: 5px 3px;
overflow: hidden;
background:  #9B2422}

.newsleft p, .newsright p {
color: #000000;
padding: 0;
font-size: .9em;
line-height: 1.3em;
}

/*
---------------------------------------
styles for quick start links
----------------------------------------
*/


.quicklinks {
position: relative;
border: 0;
}

#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 162px;
}

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#navlist li.toplink {
border-top: 0;
padding-top: 0;
}

#navlist li a:link, #navlist li a:visited {
color: #467aa7;
font-size: .9em;
font-weight: normal;
text-decoration: none;
border: 0; }

#navlist li a:hover {
color: #2a5a8a;
font-weight: bold;
}

#navlist li a.youarehere {
color: #9B2422;
font-weight: bold;
border: 0;
text-decoration: none;
}

/*
------------------------------
end quick start links
--------------------------------
*/

#newsleft p.star, #newsright p.star {
margin: 4px 5px 10px 5px;
font-size: .9em;
line-height: 1.6em;
background: url(../images/paragraph_arrow.gif) no-repeat 0 .45em;
text-indent: 18px;
}

#newsleft p.readmore {
text-align: right;
background: url(../images/paragraph_arrow.gif) no-repeat -2000em;}

#newsleft p.attribution, #newsright p.attribution {
font-style: italic;
}

.threecol #wrapper {
background-color: #fff
}

#twocols{
width: 592px;
float:right; 
position:relative; 
}

#rightcol{
width:180px; 
float:right; 
position:relative; 
}

#maincol{ 
float: left; 
display:inline; 
position: relative; 
width:412px; 
padding-bottom: 1em;
}

/*some typography below  here*/

p {
font-size: 1em;
line-height: 1.6em;
word-spacing: .1em;
margin: 1.2em .6em 1.2em .6em;
letter-spacing: .05em;}

p.readmore {
text-align: right;
}

h2 {
font-size: 1.7em;
margin: 20px 10px 0px 10px;
color: #073C64;
font-weight: bolder;
border-bottom: 1px #24618E solid;
letter-spacing: .2em;
font-variant: small-caps;}

h3 {
font-size: 1.3em;
margin: 20px 10px 0px 10px;
color: #073C64;
font-weight: bold;
border-bottom: 1px #24618E solid;
letter-spacing: .2em;
font-variant: small-caps;
}

h3.gallery {
margin-bottom: 1em;
}

h4 {
font-size: 1.1em;
margin: 20px 10px 0px 10px;
color: #073C64;
font-weight: bold;
border-bottom: 1px #24618E solid;
letter-spacing: .2em;
font-variant: small-caps;
}

.twocolumn #maincol ul li, .twocolumn #maincol ol li {
margin-right: 30px;
}

.twocolumn #maincol ul li {
list-style-type: square;
}

/*
--------------------------
twocolumn layout styles
--------------------------
*/

.twocolumn #leftcol {
width:180px; 
float:left; 
position:relative; 
}

.twocolumn #maincol {background-color: #FFFFFF;  
float: right; 
display:inline; 
position: relative; 
width:580px; 
}

.map {
margin: 20px auto 0 auto;
}

/* end twocolumn styles */

#footer{
clear:both;
background: #fff;
border-top: 1px #24618E solid; 
} 

#footer {
font-size: .8em;
line-height: 1.6em;
text-align: center;
color: #000;
padding: .5em 0 .5em 0;
}

#footer a:link, #footer a:visited {
color: #467aa7;
}

#footer a:hover {
color: #24618E;
font-weight: bold;
}


/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  



/*form styles*/

form {
margin: 10px;}

button {}

input {
background-color:#ffffff;}

select {
background-color:#ffffff;
}

option {background-color:#ffffff;}

textarea {background-color:#ffffff;}

label {color: #063C65;
font-size: 1em;
line-height: 1.5em;
width: 12em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}

label.sideform {
font-size: .9em;
line-height: 1.2em;
width: 4em;
text-align: left;
display: block;
padding-bottom: 3px;
}

fieldset {margin-bottom: 10px;}

legend {color: #9B2422;
font-weight: bold;
}

#submit, #reset {
background-color: #ccc;
width: 4em;
}

#txtcountry, #txtotherteams, #txtbesttimetocall {
margin-bottom: 5px;
}

form p.required {
color: #9B2422;
font-size: .9em;
margin-top: 0;
}

/*photo styles*/

#sidephoto-threecol {
width: 162px;
margin: 30px 8px;
padding-bottom: 5px;
background: #f4f4f4;
border: 1px #D5D6D5 solid;
}

p.caption {
margin: 3px 5px 3px 5px;
font-size: .9em;
line-height: 1.5em;
text-align: left;
color: #000000;
}

.imageright {
float: right;
border: 0;
margin: 0 0 .8em 1em;
}

.imageleft {
float: left;
border: 0;
margin: 0 1em .8em 0;
}

.logo-sidecol {
width: 162px;
margin: 30px 8px;
padding-bottom: 5px;
text-align: center;
}

/*
------------------------
end photo styles
-------------------------
*/

/*miscellaneous classes*/

.first {
margin-top: 60px;
}

p.attribution {
font-size: .9em;
font-style: italic;
}

p.note {
font-size: .9em;
background-color: #f4f4f4;
padding: 5px 10px;
}

p.star {
background: url(../images/paragraph_arrow.gif) no-repeat 0 .3em;
text-indent: 18px;}

.more-large, .more-small {
text-align: right;
}

p.question {
font-weight: bold;
}

p.highlight {
text-align: center;
font-weight: bold;
background-color: #f4f4f4;
padding: 5px 8px;
}

/*----------------------------------
styles for photo gallery
------------------------------------*/

#gallerywrap {
padding-bottom: 1em;
}

div.thumb {
margin: 3px;
border: 1px solid #A0ACC0;
height: auto;
float: left;
text-align: center;
}
	
.thumb img{
display: inline;
margin: 5px;
border: 1px solid #A0ACC0;
}

.thumb a:hover img {
border: 1px solid black;
}

.photocattitle {
text-align: center; font-weight: bold;
} 

.phototitle {
text-align: center;
font-weight: normal;
width: 120px;
margin: 0 3px 3px 3px;
}

/*featurebox styles*/

#xsnazzy {background: transparent;
margin:1em 0;
width: 100%;
}

.twocolumn #xsnazzy {
width: 560px;
margin: 1em 10px;
}

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px;
letter-spacing:1px;}

#xsnazzy h1 {font-size: 1.3em;
font-weight: bold;
color: #9B2422;
padding-bottom: .25em;
margin-bottom: .75em;
border-bottom: 1px #9b2422 solid;
}

#xsnazzy h2 {font-size: 1.3em;
color: #333;
border:0;}

#xsnazzy p {font-size: .95em;
line-height: 1.3em;
padding-bottom:0.5em;}

#xsnazzy p.attribution {
font-size: .9em;
line-height: 1.3em;
padding-bottom:0.5em;
}

#xsnazzy p a  {
font-size: .95em;
}

#xsnazzy h2 {padding-top:0.5em;}

.xtop, .xbottom {display:block;
background:transparent;
font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block;
overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

/*Colors for top and bottom corners */

.xb2, .xb3, .xb4 {background: #f4f4f4;
border-left: 1px #D5D6D5 solid;
border-right: 1px #D5D6D5 solid;
}

/* below is style for the top and bottom border*/
.xb1 {margin:0 5px;
background: #D5D6D5}

.xb2 {margin:0 3px;
border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px;
margin:0 1px;}

/*Colors for box content area and top and bottom borders*/

.xboxcontent {display:block;
background: #f4f4f4;
border:0 solid #D5D6D5;
border-width:0 1px;
}