/*-----------------------------------------------------------------------*/
/* ACBL CSS Document                                                     */
/*-----------------------------------------------------------------------*/
/* PageID:css/style.css                                                  */
/* Last Revision:04/16/2004                                             */
/* Copyright  American Contract Bridge League 2004, All Rights Reserved */
/*-----------------------------------------------------------------------*/
/*----------------------||| GLOBAL [Main Tags] |||-----------------------*/
body{background:#fff; margin:0; padding:0; font-family:helvetica, arial, sans-serif}
img{border:0} /*get rid of link borders*/
p{margin:0; padding:5px 0 20px 0; font-size:0.75em; line-height: 1.5em; color:#666}
a:link, a:visited{font-weight:normal; margin:5px 0 0 0; border:none; color:#600; text-decoration:none}
a:hover, a:active{color:#F33; border:0; text-decoration:underline}
h1{font-size:1.3em; font-weight:normal; color:#000; margin:0; padding:0 0 10px 0}	
h2{font-size:.85em; font-weight:bold; color:#039; margin:0; padding:0}
h3{font-size:.75em; font-weight:bold; color:#333; margin:0; padding:0}
h4{font-size:.95em; font-weight:bold; color:#666; margin:0; padding:0}
td{vertical-align:top}
td.middle{vertical-align:middle}
td.top{vertical-align:top}
p.graybox{display:block; margin:20px 0 0 0; padding:20px; background:#e6e6e6 url(../images/graybg.gif); /*not web-safe*/}
ul{margin:0 0 20px 0; padding-left:10px}
ul ul{margin:5px 25px 10px 25px}
li{margin-left:10px; font-size:0.75em; color:#666} 
li li{font-size:1em}
blockquote{font-size:0.75em; font-style:italic; color:#666; margin:0; padding:5px 30px 15px 30px}

/*---------------------||| GLOBAL [#ID / .CLASS] |||---------------------*/
#container{
	margin:0;
	width:760px;
	height:100%;
	padding:0;
	text-align:left;
	position:absolute;
	top:0px;
	left:0px;
}/* holds everything */
#leftside{
	background:#99c;
	width:134px;
	position:absolute;
	top:0px;
	left:0px;
	z-index: 9;
} /* left side:logo and left nav area*/
#rightside{width:600px; position:absolute; top:0px; left:134px} /*right side:header, main nav (w/ dropdowns) and content */

#resources{background:#f5f0da url(../images/beigebg.gif)}  /* for non-websafe bg color */
#resources ul{padding:0; margin:0; list-style-type:none}
#resources li{padding:0; margin:0; font-size:.70em; line-height:1em}
#resources li a:link, #resources li a:visited{color:#336; margin:0; padding:3px; padding-left:12px; padding-right:8px; display:block}
#resources li a:hover, #resources li a:active{color:#336; margin:0; padding:3px; padding-left:12px; padding-right:8px; display:block; background:#F7E0B1 /*non-websafe*/}
#search{margin:0; padding-bottom:12px; background:#f5f0da url(../images/beigebg.gif)}  /* for non-websafe bg color */
#search td{margin:0; padding:0px; font-size:10px}
#search input{margin:0 0 10px 0}
#search td a:link, #search td a:visited{color:#336}
#search td a:hover, #search td a:active{color:#039}
.inputfield{line-height:12px; font-size:10px; border:1px solid #999999} /*search field*/
.navinfo{margin:0; padding:10px 0 30px 10px; font-size:12px} /*contact info, privacy policy, etc.*/
.navinfo p{padding-bottom:5px; padding-top:10px}
.navinfo a:link, .navinfo a:visited{color:#336}
.navinfo a:hover, .navinfo a:active{color:#039}
#navtitles{position:absolute; top:72px; left:134px; width:627px; z-index: 2;}

#content{padding:48px 20px 40px 20px; margin:0; width:580px}
#homejoin p, #homelearn p, #homeplay p{padding-bottom:10px; line-height: 1.1em;}
#contenthome p {padding-bottom:10px; line-height: 1.5em}
/* 2 Column Pages (refer to index.html, learn/index.html and join/index.html) */
#contentleft{margin:0; padding:0; width:380px}
#contentright{position:absolute; top:155px; left:420px; padding:0; width:195px}
#contentright-h{position:absolute; top:20px; left:420px; padding:0; width:195px}
#contentright td{border-style:solid; border-width:2px}
#contentright div, #contentright td div{padding:10px} 
#contentright h3{margin:0; color:#fff; padding:10px; display:block}
#contentright h4{font-size:.75em}
#contentright p.small{font-size:.70em; padding:0; margin:0}

#contentright.juniors{position:absolute; top:120px; left:420px; padding:0; width:191px}
#contentright.play{position:absolute; top:151px; left:421px; padding:0; width:191px}


/*  Descriptive Chart (refer to play/index.html)  */
.desc table{margin:0 0 25px 0; padding:0; width:585px; border-bottom-width:2px; border-bottom-style:solid; border-top-width:2px; border-top-style:solid}
.desc table td{margin:0; padding:5px 20px 0 0}
.desc table td p{margin:0; padding:10px 0 10px 0}
.desc table h2{width:110px; padding:10px 0 0 0; margin:0}

/* Color Choices - use these classes to color accordingly to the respective section (L, P, J) */
.learnborder{border-color:#633}
.learnbg{background-color:#633}
.learn{color:#633}
.playborder{border-color:#363}
.playbg{background-color:#363}
.play{color:#363}
.globalborder{border-color:#039}
.globalbg{background-color:#039}
.gray{color:#666} /* for 2 column gray callout  h3 */

/*---------------------||| INDEX PAGE CUSTOMIZATIONS |||-----------------------*/
#contenthome{padding:20px 20px 40px 20px; margin:0; position:absolute; top:315px; left:0px; width:100%}
#homelearn, #homeplay, #homejoin{border:0; margin:0; padding:0; height:243px; width:209px}
#homelearn{position:absolute; top:72px; left:0px; background-image:url(../images/spade_01.gif)}
#homejoin{position:absolute; top:72px; left:418px; background-image:url(../images/spade_03.gif)}
#homeplay{position:absolute; top:72px; left:209px; background-image:url(../images/spade_02.gif)}
#homelearn span, #homeplay span, #homejoin span{margin-left:20px; padding:0; border:0}
#homelearn span a, #homeplay span a, #homejoin span a{color:#666; line-height:1.5em}
#homelearn span a:hover{color:#633}
#homeplay span a:hover{color:#363}
#homejoin span a:hover{color:#039}
.homeright{position:absolute; top:-20px}
h1.news{font-size:1em; color:#666; font-weight:bold}
p.home{padding-left:20px; margin-top:2px; font-size:1em; color:#666}
.hometitle{margin:15px 0 0 20px; padding:0}

/*--------------------||| FORM CUSTOMIZATIONS ||| ---------------------*/
.form{margin:0; border:1px solid #ececec; width:auto; padding:0 0 20px 0; font-size:.70em; text-align:center} 
.form_mp{margin:0; border:1px solid #ececec; width:510px; padding:0 0 20px 0; font-size:.70em; text-align:center}
div.info{margin:0; border:1px solid #ececec; background:#e6e6e6 url(../images/graybg.gif); font-size:.80em; padding:8px 0; width:auto; text-align:left}
div.info span{padding:0 20px; text-align:left} 
.field{width:240px; margin:0 20px 0 0}
form{margin:0; padding:0}
.form span.radio{width:60px}
.form .subtle{color:#666; display:block; margin:3px 0 0 0; padding:0}
p.dynamic{font-size:1em; margin:15px; text-align:left}
div.row{clear:both; padding:10px 0 0 0; width:490px; margin:auto}
div.row span.label{float:left; width:190px; text-align:right}
div.row span.form2{float:right; width:300px; text-align:left}

div.row_mp{clear:both; padding:10px 0 0 0; width:510px; margin:auto}
div.row_mp span.label{float:left; width:190px; text-align:right}
div.row_mp span.form2{float:right; width:310px; text-align:left}
 
table.header{width:760px; padding:0 0 2px 0; margin:0px; color:#999; display:block}
table.header td.headerleft{text-align:left; width:100%}
table.header td.headerright{text-align:right; font-size:.80em; width:200px;}
table.header td.headerright span{width:200px; display:inherit}
table.header td{width:auto; vertical-align:bottom; padding:0; margin:0}

table.footer{width:100%; padding:5px 0 2px 0; margin:0px; color:#999; display:block}
table.footer td.footerleft{text-align:left; font-size:.80em; width:100%}
table.footer td.footerright{text-align:right; width:200px}
table.footer td.footerright span{width:200px; display:inherit}
table.footer td{width:auto; vertical-align:top; padding:0; margin:0}

/*--------------------||| POP-UP WINDOWS CUSTOMIZATIONS ||| ---------------------*/
#popcontainer{position:absolute; top:0; left:0; width:540px; height:486px; background:#fff}
#popcontent{padding:0; margin:0; width:540px; height:337px; position: absolute; top:98px; left:0; overflow:auto}
#popcontent table{margin:0 0 0 20px; padding:0}
h1.hof{color:#039; font-size:1.1em; font-weight:bold; padding:0; margin:0 0 0 20px}
h2.hof{color:#666; font-size:.80em; font-weight:bold; padding:0; margin:0 0 10px 20px}
#popcontent td{padding:0 20px 20px 0; margin:0}
#popcontent td p{padding:0 20px 20px 0; margin: 0;}
#popcontent td img{padding-right:15px}
#popfooter{background: url(../images/hall_of_fame_footer.gif); position:absolute; top:435px; left:0; width:540px; height:51px}
#popfooter a:link, #popfooter a:visited{position:absolute; bottom:7px; left:15px; color:#fff; font-weight:bold; font-size:.66em; text-decoration:none}
#popfooter a:hover, #popfooter a:active{position:absolute; bottom:7px; left:15px; color:#fff; font-weight:bold; font-size:.66em; text-decoration:underline}

/*--------------------||| NO NAV CUSTOMIZATIONS ||| ---------------------*/
#header_nonav {position: absolute; top:0; padding:0; width:761px}
#container.nonav {position:absolute; top:104px; left:0; width:760px}
div#content.nonav1{padding:0px 20px 40px 20px; margin:0; 
width:760px;
voice-family: "\"}\""; 
voice-family:inherit;
width:720px;
}
html>body #content.nonav1 {
  width:720px;
} 
div#content.nonav2{padding:0px 20px 40px 20px; margin:0;}
#content.nonav1 h1, #content.nonav2 h1{padding:0; margin:0}
#content.nonav1 h2, #content.nonav2 h2{padding:10px 0 0 0}
#content.nonav1 p, #content.nonav2 p{padding:0 0 25px 0;}
#content.nonav2 #contentleft{margin:0; padding:0; width:514px; position:absolute; top:0px;}
#content.nonav2 #contentright{position:absolute; top:0px; left:554px; padding:0; width:191px}
#content.nonav2 #contentright td{border:0; width:191px}
#content.nonav2 #contentright h3{margin:0; color:#fff; padding:10px 11px 10px 10px; display:block; font-weight:normal; font-size:.70em;} 
#content.nonav2 #contentright h3 a{color:#fff}
#content.nonav2 #contentright h3 a:hover{text-decoration:underline}

/*--------------------||| SHOP CUSTOMIZATIONS ||| ---------------------*/
#contentshop{padding:20px 20px 40px 20px; margin:0; position:absolute; top:340px; left:0px; width:100%}
#shopnew, #shopfeatured, #shopsales{border-bottom:1px solid #666; margin:0; padding:0; height:273px; width:209px;}
#shopnew{position:absolute; top:72px; left:0px; border-right:1px solid #666;}
#shopfeatured{position:absolute; top:72px; left:209px; border-right:1px solid #666;}
#shopsales{position:absolute; top:72px; left:418px;}
.homeright{position:absolute; top:-20px}
h1.shop{font-size:1em; font-weight:bold; padding:0; margin:0}
p.shop{padding:10px 20px 0 20px; margin-top:0; margin-bottom:0; font-size:.75em; color:#666}
.shoptitle{margin:10px 0 0 20px; padding:0}
#s-content{padding:20px 20px 40px 20px; margin:0;}
/*  Descriptive Chart (refer to play/index.html)  */
.shoptable table{margin:0 0 25px 0; padding:0; width:585px}
.shoptable table td{margin:0; padding:5px 20px 0 0}
.shoptable h4{margin-bottom:3px}
.shoptable p{margin:0; padding:0}
.shoptable img{margin:0 10px 20px 0; padding:0}
p.price, table.add td p{margin:0; padding:0; font-size:.90em; font-weight:bold}
p.price span{color:#039}
table.add{margin:10px 0 40px 0; padding:0 2px 0 0; height:20px; width:200px}
table.add td{margin:0; padding:0 2px; vertical-align:middle}
table.add input{padding:0; margin:0}

/*-------------||| ZEBRA TABLE (striped tabular data) ||| ---------------*/
#chart {border:1px solid #e6e6e6; width:760px; margin:0; padding:10px; border:1px solid #ececec; margin-top:2px}
#chart tbody td{margin:0; padding:2px 2px; font-size:0.70em; line-height: 1.5em; color:#333}
#chart tbody tr.even td{background:#e6e6e6 url(../images/graybg.gif); padding:3px; margin:0; text-align:left; border:0; color:#666;}
#chart tbody tr.odd td{background-color:#fff; padding:3px; margin:0; text-align:left; border:0; color:#666;}
#chart tbody td.charthead{font-weight:bold; color:#666; border:0; margin:0; padding:3px}

#emailchart {border:1px solid #e6e6e6; width:450px; margin:0; padding:10px; border:1px solid #ececec; margin-top:2px}
#chart tbody td{margin:0; padding:2px 2px; font-size:10px; line-height: 1.5em; color:#333}
#chart tbody tr.even td{background:#e6e6e6 url(../images/graybg.gif); padding:3px; margin:0; text-align:left; border:0; color:#666;}
#chart tbody tr.odd td{background-color:#fff; padding:3px; margin:0; text-align:left; border:0; color:#666;}
#chart tbody td.charthead{font-weight:bold; color:#666; border:0; margin:0; padding:3px}	

/*-----------------------------------------------------------------------*/
/* Copyright  American Contract Bridge League 2004, All Rights Reserved */
/*-----------------------------------------------------------------------*/
#panel {
	font-size: .7em;
	color: #333333;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0A4F9C;
	border-right-color: #0A4F9C;
	border-bottom-color: #0A4F9C;
	border-left-color: #0A4F9C;
	background-image: url(../admin/main-bg2.gif);
	margin: 0px;
	padding: 0px;
}
#panel td {
	width: 85px;
	background-image: url(../admin/sub-vr.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	text-align: center;
	vertical-align: middle;
}
#panelsubhead {
	background-color: #CCCCCC;
	border: 1px solid #999999;
	width: 640px;
	font-weight: bold;
	color: #FFFFFF;
	font-size: .8em;
	text-align: left;
}
#panelsub {
	color: #333333;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	width: 640px;
	font-size: .7em;
	padding: 0px;
	margin: 0px;
	text-align: left;
}
.btn {
	font-size: 10px;
	font-weight: bold;
	color: #333333;
	background-color: #CCCCCC;
	border: 1px solid #999999;
}
#panelsub td field {
	
}
#panelsub td.label {
	width:200px;
	text-align:right;
}