/*            COMMON ELEMENTS             */
/******************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;font-family:inherit;outline:none}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

h1,h2,h3,h4,h5,h6{
 margin-bottom:0.5em;
 font-weight:bold;
 line-height:1.2em;
 color:#5a5a5a;
}

h1{ font-size:1.5em;  color: #9b0a01; font-weight: normal;}
h2{ font-size:1.2em;}
h3{ font-size:1.1em;} 
h4,h5,h6{ font-size:1em; color:#333;}

p,ul,ol{ 
	margin-bottom: 1em; 
	line-height:1.2em;
}

ul,ol{
	list-style:disc;
	padding-left:20px;
	line-height:1.5em;
} 
ol{ list-style:decimal; padding-left:25px;}
dl{ margin-bottom:1em;}
dt{ font-weight:bold;margin-bottom:0.5em;}
dd{
	padding: 0 0 0 1em;
	margin-bottom:0.5em;
}

strong{font-weight:bold; }
em{font-style:italic;}

img{vertical-align:middle}
kbd{
	font-weight:bold;
	font-style:italic;
	color:#333;
	padding:0px 2px;
	background:#f8f8f8;
	border:1px solid #ddd; 
	border-color:#ddd #333 #333 #ddd;
}

a,
a:visited{
	text-decoration: underline;
	color: #B32E1D;
}
a:hover,
a:focus{color:#000}
a img{ text-decoration:none}

blockquote{
	margin-bottom:0.5em;
	padding:0.5em 0 0 0.5em;
	display:block;
    color: #454;
}
ins {border-bottom: 1px solid green;text-decoration: none;color: green;}
del {color: red;text-decoration: line-through;}
cite {border-bottom: 1px dashed blue;}
acronym {border-bottom: 1px dotted #CCC;cursor: help;}
abbr, html\:abbr {border-bottom: 1px dashed #CCC;cursor: help;}
pre{
	background-color:#DEE7EC;
	border:1px solid #8CACBB;
	color:Black;
	font-family:Monaco,"Courier New",Courier,monospace;
	font-size:100%;
	overflow:auto;
	padding:1em;
}
q{font-style: italic;quotes: '\2018' '\2019'   }

.notice{
	background: #FFF6BF url(../img/icons/exclamation.gif) no-repeat 10px 50%;
	padding: 5px 20px 5px 35px;
	border:2px solid #FFD324;
	border-width:2px 0px;
	color:#514721;
	margin-bottom:1em;
}
.msgerror{
	background-color:#FBE3E4 ;
	background-image:url(../img/icons/exclamation.gif);
	border-color:#FBC2C4;
	color:#8A1F11;
}
.msginfo {
	background-color:#F8FAFC ;
	background-image:url(../img/icons/information.gif);
	border-color:#B5D4FE;
	color:#3E5890;
}
.success{
	background-color: #E6EFC2;
	background-image:url(../img/icons/accept.gif);
	border-color:#C6D880;
	color:#264409;
}
div.msginfo {
	margin-bottom:1em;
}
div.msginfo p{
	margin-bottom:0.5em;
}

p.cancel{
	
}
p.cancel a{
	background:#EFEFEF url(../img/icons/exclamation.gif) no-repeat center left;
	border:1px solid #CACACA;
	padding:5px 5px 5px 20px;
	text-decoration: none;
	color:#8A1F11
}

#redirection ul.redirection_actions,
#redirection p.timer{
	margin-bottom:0;
}

p.back{
	background: url(../img/icons/arrow_left.gif) no-repeat 0px 0.5em;
	padding : 0.5em 0 0 20px;
	border-top: 1px solid #dfdfdf;
}

table{
	border: 1px solid #cecece;
	width:  99%;
	margin: 0 auto 1em;
    background: #fff;
}
th{
	background-color:#EFEFEF;
	padding:5px;
	border:1px solid #cecece;
}
td{
	padding:5px;
	border:1px solid #cecece;
}
table tfoot td{background:#EFEFEF}
table.vertical th{width:150px; vertical-align:top;}
table th span,
table th em{
    font-size:0.833em;
    font-style: italic;
}
table thead th{ background: #EDEDED url(../img/subtitle_bg.gif) repeat-x scroll left bottom;}
tr.odd{ background: #f2f2f2;}
tr.even{ background: #fff;}

ul.buttons{
    margin:0 0 1em;
    padding:0;
    list-style:none;
    height:22px;
}
ul.buttons li{
    float:left;
    margin-right :5px;
}

ul.buttons a{
  height: 22px;
  display: block;
  text-indent: -99999px;
  background: no-repeat top left;
}
ul.buttons a:hover,
ul.buttons a:focus{
   background-position: 0 -22px;
}

/* Structure */
body{
    font-size: 62.5%;
    font-family: arial, "lucida grande" ,verdana,tahoma,sans-serif;
    background: #fff url(../img/body_bg.gif) repeat-x top left;
}

#global{
    width: 1020px;
    margin: 0 auto;
    font-size: 1.2em;
}

#header{
    background: url(../img/header_bg.jpg) repeat-x top left;
    height: 106px;
    padding: 0 20px;
    margin: 0 0 5px 0;
    position: relative;
}
    #header h1 {
        float: left;
        margin: 0;
        padding: 0;
    }
    #header h1 a{
        display: block;
        height: 104px;
        width: 440px;
        text-indent: -5000px;
    }

/* Top Menu*/
#topmenu{
    position: absolute;
    list-style: none;
    bottom: 0;
    right: 15px;
    margin: 0;
    padding: 0;
}
    #topmenu li{
        float: left;
        background: url(../img/topmenu-separation.png) no-repeat right -1px;
    }

    #topmenu li a{
        display: block;
        padding: 4px 8px;
        color: #fff;
        text-decoration: none;
        border: 1px solid transparent;
    }
    #topmenu li a:hover,
    #topmenu li a:focus{
        background-color: #B32E1D;
        border: 1px solid #9b0a01;
        border-width: 1px 1px 0;
    }
/* Login Bar*/
#loginbar {
    height: 30px;
    padding: 0 20px;
    margin: 0 0 10px 0;
}

    #loginbar form{
        width: 560px;
        padding: 0 ;
        float:right;
        margin: 3px 0 0;
    }
    #loginbar form input{
        padding: 3px 5px 3px;
        float: left;
        border: 0px;
        font-size: 12px;
        height: 15px;
    }
    #loginbar form p,
    #loginbar form div{
        padding: 0;
        margin: 0;
    }

    #loginbar form div{
        background: #fefefe url(../img/loginBarLabel_bg.gif) repeat-x bottom left;
        border: 1px solid #575757;
        float: left;
        margin-right: 10px;
    }

    #loginbar form div label{
        background: #fefefe url(../img/loginBarLabel_bg.gif) repeat-x bottom left;
        border-right: 1px solid #333;
        height: 21px;
        text-indent: -9999px;
        display: block;
        float: left;
        width: 20px;
    }
    
    #loginbar #loginBtn{
        border: 1px solid #575757;
        margin: 0;
        width: 50px;
        height: 23px;
        padding: 1px 5px 2px;
        color: #222;
        font-size: 0.916em;
        background: #fefefe url(../img/loginBarLabel_bg.gif) repeat-x bottom left;
        cursor: pointer;
    }

    #loginbar #passwordBox label {
        background: url(../img/labelPassword.jpg) no-repeat center left;
    }
     #loginbar #passwordBox input {
        width: 100px
    }
    #loginbar #emailBox label {
        background: url(../img/labelEmail.jpg) no-repeat center left;
    }
    #loginbar #emailBox input {
        width: 200px;
    }
    #loginbar #rememberMe{
        float:left;
        margin-right:5px;
        padding-top:4px;
    }
    #loginbar #rememberMe label {
        font-size: 9px;
        margin-right: 5px;
        vertical-align: text-bottom;
    }
    #loginbar #rememberMe input{
        margin:0;
        float: none;
        position: relative;
        padding:0;
        border:0;
        height:13px;
        width:13px
    }


#forgotPasswordLink{
    display: block;
    background: url(../img/icons/forgot.png) no-repeat center left;
    height: 22px;
    width: 16px;
    text-indent: -9999px;
    float: left;
    margin-left: 5px
}



#loginbar ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}
    #loginbar ul li{
        float: left;
        padding-top: 4px;
        margin-left: 5px;
    }

#loginbar #loggedAs{
   margin-right: 5px;
   padding-top: 6px;
   font-size: 0.916em
}

#loginbar ul li a{
    display: block;
    height:22px;
    text-indent: -9999px;
    width: 84px;
}

#loginbar ul li a:focus,
#loginbar ul li a:hover{
    background-position: 0 -22px;
}
    #loginbar #mypoolsBtn a{
       background-image: url(../img/mypoolsBtn.gif) ;
    }
    #loginbar #profileBtn a{
       background-image: url(../img/profileBtn.gif);
       width: 78px;
    }

    #loginbar #logoutBtn a{
       background-image: url(../img/logoutBtn.gif);
    }
#loginbar .empty{
	color:#cacaca;
}
 /*---------*/
#content{
	width:1000px;
	margin: 15px 2px 0.5em;
}

#footer{
	clear:both;
	padding:0.5em;
    text-align: center;
    margin-top: 1em;
}

#maincontent{
	padding: 10px 10px 0;
    border: 4px solid #bbb;
    background: #fff;
}


#create-pool a {
	background:#EFEFEF;
	border:1px solid #dfdfdf;
	padding:5px;
	text-decoration:none;	
	
}

/* Home Page */
#home{
        margin:20px auto 10px;
        overflow:hidden;
        padding-bottom:10px;
        width:885px;
}
#home div{ 
	background: url(../img/home.png) no-repeat top left;
	width: 570px;
	text-indent: -9999px;
	float:left;
	height: 150px;
	margin:0 auto;
}

p#bigButton{
	margin: 30px 0 0 40px;
	text-align:center;
	float:left;
}
#bigButton a{
	background: url(../img/createPoolBtnHome.png) no-repeat 0 0;
	width: 262px;
	height: 74px;
	margin:0 auto;
	display: block; 
	text-indent:-9999px
}
 #bigButton a:hover{
 	background-position: 0 -74px
 }

 #moreOlymp{
     font-size: 14px;
}
 #moreOlymp p {
font-family: Tahoma, Geneva, sans-serif;
 }

#tour{
	clear: both;
}
#tour h1{
    	font-family: Tahoma, Geneva, sans-serif;
}

#faq strong {
color:#9B0A01;
}

p.disclam{
   margin-top: 2em;
   font-size: 10px;
   text-align: center;
   color: #999;
}
#ownerChallenge a{
    background: #FFFF99 url(../img/icons/star.png) no-repeat 10px center;
    border:3px solid #FFCC00;
    color:#333333;
    display:block;
    font-size:16px;
    line-height:30px;
    margin:1em auto 1.5em;
    padding: 5px 5px 3px 34px;
    text-align:center;
    text-decoration:none;
    width:750px;
}
#ownerChallenge a:hover{
    border-color: #FA0;
    color: #333
}

#poweredBy{
    margin: 1.5em auto 1em;
    font-size: 0.94em;
    color: #aaa;
    width: 500px;
    text-align: center;
}
/* Pages */
div.page {
    padding: 10px 10px 0;
    border: 4px solid #bbb;
    background: #fff;
}

/*Promo*/
#promo{
	line-height:1.67em;
	font-size: 14px;
}
#part1 h1,
#part2 h1{
	background: url(../img/promo/title.png) no-repeat top left;
	width: 675px;
	height: 55px;
	margin: 0.5em auto ;
	text-indent: -9999px
}
#promo ul{
    margin:0 auto;
    width:700px;
}
#part1 p{
	
}
#nhlLogo{
	background: url(../img/promo/nhl_logo.png) no-repeat top left;
	width: 256px;
	height: 83px;
	margin: 0em auto ;
	text-indent: -9999px;
}

#part2 h1{
	background-image: url(../img/promo/howto.png);
	width: 714px;
	height: 35px;
}
#promo p{
	text-align: center;
}
#promo strong{
	color: #B32E1D
}
#promo #bigButton{
	margin:1em auto;
	float: none
}
#part2 .strong{
	font-weight: bold;
	color: #333;
}

/* Profile*/
#profile h1{
    background:transparent url(../img/icons/icon_user.gif) no-repeat scroll left center;
    padding-left:20px;
}

#editProfile{
    background-image:url(../img/editprofileBtn.gif);
    width:62px;
}
#editPassword{
    background-image:url(../img/editpasswordBtn.gif);
    width:79px;
}

div.information{
    padding:5px;
}

/* Help Page*/
#maincontent.help{
	float: left;
	width: 972px;
}
#helpNavigation{
    width: 200px;
    float: left;
}
    #helpNavigation ul{
        margin: 0 0 0.2em;
    }
    #helpNavigation ul li{
    }
    #helpNavigation ul li a {
        display: block;
        padding:2px;
    }
#helpNavigation ul li ul li ul {
    list-style: none;
    padding-left:0.5em;
    display:none;
}
    #helpNavigation ul li ul li ul li a{
        color: #444;
        text-decoration: none;
    }
    #helpNavigation ul li ul li ul li a:hover{
        color:#000;
    }
#helpContent {
    margin-left: 220px;

}
/* Help Popup Styles */
#helpContainer{
     background: #ededed url(../img/help-bg.jpg) no-repeat bottom right;
     padding: 0.5em 5px 0px;
     border: 1px solid #dadada;
     margin-bottom: 0.5em;
     min-height: 65px
}
    #helpContainer.popup{
        display: none;
    }

#tutorial {
    position:relative;
    color: #333;
    background: #FFF9D7;
    border: 2px solid #FFE222;
    padding: 5px 5px 0;
    margin: 0 0 1em;
}
#tutorial h2{
    margin-bottom:1em;
}

#tutorial p.close{
    margin-bottom:0;
    position:absolute;
    top:5px;
    right: 5px;
}

/* Create */
#newPool {
}
#newPool h1{
    background: url(../img/icons/add.gif) no-repeat left center;
    padding-left: 20px;
}
#newPool form{
	width: 850px;
	margin:0 auto;
}

#termsBox{
	width:350px;
	height:80px;
	border:1px solid #BBB;
	overflow: auto;
}

#createOlympics{
    background: url(../img/olympics/vancouver-olympic-winter-games-2010-logo.gif) no-repeat right top;
    height: 200px;
}

#submitCreateForm input{
    background: url(../img/createPoolBtnHome.png) no-repeat 0 0;
    width: 262px;
    height: 74px;
    margin:0 auto 1em;
    display: block;
    text-indent: -9999px;
    cursor: pointer;
    border: 0 ;
    outline: none;
    font-size:0;
    line-height: 0
}
#submitCreateForm input:hover{
    background-position: 0 -74px
}

/* Invitation */
#invitation #alreadyMember{
    border:1px solid #ccc;
    padding: 10px;
    float:right;
    background: #f0f0f0;
    margin:0 250px 1em 0
}
#invitation #alreadyMember form .submit{margin-bottom:0 }


#facebookJoin a,
#facebookJoin a:active{
    color: #335190;
    margin:1em 0;
    border:1px solid #D4DAE8;
    border-width: 1px 0px;
    background: #ECEFF6;
    padding:5px 10px ;
    display: block;
    text-decoration:none;
    font-size: 14px;
    clear: both;
}
#facebookJoin a:hover,
#facebookJoin a:focus{
    color: #213C78;
    border-color: #213C78;
}
#facebookJoin a img{vertical-align:middle}