﻿/********************************************************************
* Style group: (main layout)                                        *
* Description: Defines the general layout of the master page.       *
*********************************************************************/
#masterHeader
{
	background-image:url(Images/header.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	height: 132px;
	width: auto;
	margin:0px;
}


#mainMenu
{
	display:block;
	width:100%;
	position:absolute;
	top: 132px;
	background-image:url(images/MainMenuBG.jpg);
	background-repeat:repeat-x;
	height:66px;
}

#mainMenu a{
	color:White;
	text-decoration:none;
}

#mainMenu a:hover{text-decoration:underline;}

#mainMenu ul
{
	position:absolute;
	margin:0 0 0 -40px;
}

#mainMenu li
{
	border-color: #666666 #333333 #333333 #666666;
	float: left;
	height: 24px;
	padding: 3px;
	border-style: solid;
	border-width: 1px;
	font-weight: bold;
	padding-top:10px;
}

#mainMenu li.selected
{
	background-image:url(images/MainMenuSelBG.jpg);
	background-repeat:repeat-x;
	border-bottom:none;
	border-style: solid;
	border-width: 1px;
	border-top-color: #FF9900;
	border-right-color: #CC6600;
	border-bottom-color: #CC6600;
	border-left-color: #E88B00;
}

#mainMenu .subMenu
{
	border: 1px solid #FF9900;
	position: absolute;
	top: 39px;
	display: block;
	width: 100%;
	background-image: url(images/MainMenuSubBG.jpg);
	background-repeat: repeat-x;
	height: 27px;
}

#mainMenu .subMenu li
{
	border:none;
	margin:0 8px;
	padding-top:7px;
	float:left;
	font-weight:normal;
	font-size:.9em;
}

#content
{
	margin: 0px auto 50px auto;
	width:600px;
}

#contentArea, #mainMenuArea
{
	position:absolute;
	top:100px;
	width:1000px;
	left:50%;
	margin-left:-500px;
	padding:0px;
}

#contentArea
{
	padding-top:132px;
}

#mainMenuArea
{
	top:0;
	z-index:1;
}

#searchBox
{
	display:block;
	Margin: 2px;
	z-index:10;
	
}

#left
{
	display:block;
	top:132px;
	position:absolute;
	left:0px;
	width:175px;
}

#right
{
	top:132px;
	position:absolute;
	left:100%;
	margin-left:-175px;
	width:175px;
}
/* Mac IE5 hack */

/*\*//*/
#right 
{
	margin-right: =15px;
	right: 15px;
}
/**/

/* End Mac IE5 hack */

/* Hide from Mac IE5 \*/

* html #container
{
	height: 1%;
	overflow:visible;
}

/* End hide from Mac IE5 */

ul.menu li
{
	float: left;
	border-right: solid 1px #666;
	padding: 0 5px;
	margin:0 auto;
	
}
ul.menu li.last
{
	border-right: none;
}

/********************************************************************
* Style group: (standard elements)                                  *
* Description: Defines the general appearance of the website        *
*********************************************************************/

body
{
	background-color: black;
	margin: 0px;
	color: white;
	font-family: Sans-Serif;
	font-size: small;
	height: 100%;
	width: 100%;
	background-image:url(Images/site-background.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

a:link
{
	color: #CC9900;
}	

a:visited, a:active
{
	color: #996633;
}	
		
a:hover
{
	text-decoration: none;
	color:#996633;
}

hr
{
	clear: both;
}

div.hr
{
	display:block;
	width:100%;
	background-image:url(images/hr-chain.png);
	background-position:center top;
	background-repeat:no-repeat;
	height:20px;
	border:none;
}

ul 
{
	list-style-type: none;
	margin-left: -40px;
	padding-left: 40px;
}

li
{
	margin-left:0px;
}

ol li
{
	 list-style-type:decimal;
}

input[type="text"], input[type="password"]
{
	background: url(images/background-box.png) repeat;
	border: solid 1px #996633;
	color: White;
}

input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus
{
	background-image:none;
	background-color: #FFFFFF;
	color:Black;
}

p { font-size: small; }

br { clear: both; }

h1
{
	font-size: 13pt;
	clear:both;
}

h2
{
	font-size: 12pt;
}

h3
{
	font-size: 10pt;
}

#masterHeader hr, #masterFooter hr
{
	display: none;
}

.inputForm, .box, .deckBox, .dataForm, .errorBox, .forumBox, .article
{
	border: solid 1px #996633;
	background-image: url(images/background-box.png);
	background-repeat:repeat;
}

.dataTable
{
	border: solid 1px #996633;
}

.footer
{
	
	clear:both;
}

.acHeader, .acHeaderSelected
{
	margin:5px;
	padding:5px;
	font-size:1.2em;
}

.acHeader
{
	background-image: url(images/expand_blue.jpg);
	background-position:98%;
	background-repeat:no-repeat;
	background-color:#CC9900;
	color:Black;
}

.acHeaderSelected
{
	background-image: url(images/collapse_blue.jpg);
	background-position:98%;
	background-repeat:no-repeat;
	background-color:#996633;
	color:White;
}

.acContent
{
	overflow:visible;
}

.message
{
	background-image: url(/images/buttons/message.gif);
}

.messageSmall
{
	background-image: url(/images/buttons/message_small.gif);
	background-repeat:no-repeat;
}

.message, .messageSmall
{
    display: block;
    width: 770px;
    height: 57px;
    padding: 5px;
    margin: 10px auto;
}
.message h1
{
    margin: 0;
    font-size: 1.25em;
    color: #000;
}
.message p
{
    padding: 0;
    margin: 3px;
    color: #000;
}
.message p a
{
    color: #333;
}
.checkoutForm
{
    background-image: url(/images/buttons/bg.jpg);
    width: 800px;
    padding: 10px;
}
.checkoutForm label
{
    color: Black;
}
.checkoutForm a:link
{
    color: #3948A8;
    font-size: .9em;
    font-weight: bold;
}
.checkoutForm a:hover
{
    color: #0000FF;
}
.checkoutForm table
{
    background-color: White;
    border: solid 1px black;
    color: Black;
}
.checkoutForm td
{
    padding: 3px;
}
.checkoutForm table thead th, .checkoutForm table tfoot th
{
    text-align: left;
    font-size: .9em;
    font-weight: bold;
    font-family: Segoe UI, Sans-Serif;
    color: #333333;
    padding: 3px;
}
.checkoutForm table thead th
{
    border-bottom: dotted 1px #333333;
}
.checkoutForm table tfoot th
{
    border-top: dotted 1px #333333;
}
.checkoutForm input[type="text"], .checkoutForm select, .checkoutForm input[type="password"]
{
    background-image: none;
    background-color: White;
    border: solid 1px #999999;
    margin: 3px;
    color: Black;
}
.checkoutForm input[type="text"]:focus
{
    background-image: none;
    background-color: white;
    border: solid 1px black;
}
.checkoutForm a.toolTip, .checkoutForm a.toolTip:hover
{
    color: Black;
    border-bottom: dashed 1px black;
}
.checkoutForm table .selectedItem
{
    background-color: #D4D9FC;
    font-weight: bold;
}

/********************************************************************
* Style group: War Report                                           *
* Description: Defines the general style of the war card report     *
*********************************************************************/
.WarCard_Levels
{
	position:relative;
	display:block;
	background-image: url(images/WarCard_Level_BG.gif);
	background-repeat:no-repeat;
	width:600px;
	height:800px;
}

.WarCard_Levels_Level_Text
{
	font-weight:bold;
}

.WarCard_Levels_Level
{
	padding-left:110px;
	padding-right:30px;
	height:89px;
	
}

.WarCard_Levels_Desc
{
	padding: 20px 30px;
	font-size:1.1em;
	height:107px;
}

.WarCard_Levels_Locked
{
	background-image: url(images/locked.gif);
	background-repeat:no-repeat;
	background-position: 18px;
	color:Gray;
}
.WarCard_Levels_Unlocked
{
	background-image: url(images/unlocked.gif);
	background-repeat:no-repeat;
	background-position: 42px;
	color:White;
}

.warCard
{
	position:relative;
	display:block;
	background-image: url(images/WarReportHeader.gif);
	background-repeat:no-repeat;
	width:600px;
	height:245px;
}

.warCard_Text
{
	position:absolute;
	height:27px;
	left:13px;
	font-weight:bold;
	font-size:1.3em;
	width:133px;
	text-align:center;
}

.warCard_Bar
{
	height:27px;
	background-repeat:repeat-x;
}

.warCard_Lev_Text{top:51px;}
.warCard_Lev
{
	position:absolute;
	top:51px;
	height:27px;
	left:147px;
}

.warCard_XP_Text{top:108px;}
.warCard_XP
{
	position:absolute;
	top:108px;
	height:27px;
	left:147px;
}

.warCard_Cash_Text{top:168px;}
.warCard_Cash
{
	position:absolute;
	top:168px;
	height:27px;
	left:147px;
}


.warCard_XP_Bar
{
	position:absolute;
	background-image: url(images/XPBar.gif);
	left:11px;
}

.warCard_XP_LeftCap
{
	position:absolute;
	background-image: url(images/XPBarLeft.gif);
	width:11px;
}

.warCard_XP_RightCap
{
	position:absolute;
	background-image: url(images/XPBarRight.gif);
	width:11px;
	left:421px;
}


/*********************************************************************
* Style group: mailBox                                               *
*********************************************************************/

.mailBox tr.unread
{
	background-color: #773300;
}

.mailBox tr.read
{
	background: url(images/background-box.png) repeat;
}

/*********************************************************************
* Style group: inputForm                                             *
* Description: Used for forms that require input by the user such as *
'*             the login form.                                       *
*********************************************************************/

.inputForm
{
	border-width: 2px;
	padding: 5px;
}

.inputForm h2
{
	color: #996633;
	font-size: medium;
	font-weight: bold;
	margin-bottom: 5px;
}

.inputForm p
{
	font-size: small;
	margin-bottom:5px;
	
	padding-bottom:10px;
}

.inputForm label
{
	font-weight: bold;
	display:block;
	text-align: right;
}

.inputForm input, .inputForm textArea, .inputForm select
{
	margin: 5px;
}

.inputForm label span, .inputForm .small
{
	font-size: smaller;
	display: block;
	text-align: right;
}

.inputForm .footer
{
	font-size:small;
	margin-top:5px;
	padding-top:10px;
}

.inputForm .checkbox label, .inputForm .checkbox input[type="checkbox"], .inputForm .checkbox input[type="radio"], .inputForm label.checkbox
{
	display: inline; 
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
	margin: 2px 2px;
}


.inputForm fieldset 
{
	border-color: #999;
	padding: 5px;
	margin: 10px;
	display:block;
}

.inputForm fieldset legend
{
	padding: 2px 5px;
	font-weight: bold;
	color:White;	
}

.inputForm fieldset p
{
	border-style: none;
	margin: 5px;
}

.inputForm hr
{
	height: 1px;
	background: #999;
	color: #999;
}

/*********************************************************************
* Style group: article                                               *
* Description: Used for formatting articles in the article section.  *
*********************************************************************/
div.article
{
	padding: 5px;
	text-align:justify;
}

div.article h1
{
	font-size: 1.25em;
	border-bottom: none;
	margin-bottom:3px;
}

div.article .articleBody ul
{
	list-style-type:disc;
	margin:0px;
}

div.article .articleBody li
{
	margin:10px;
}

div.article span.author
{
	font-style:italic;
	display:block;
	margin-bottom:5px;
}

div.article span.category
{
	display:block;
	margin-bottom:10px;
}

div.article .articleBody
{
	
	color: white;
	padding: 10px;
	
}

div.article .articleBody p
{
	font-size:1.1em;
}

/*********************************************************************
* Style group: dataForm                                              *
* Description: Used for forms that display non-editable data         *
*********************************************************************/

.dataForm
{
	margin: 10px 0;
	padding: 5px;
	color: white;
}

.dataForm h2
{
	margin-top: 0;
	color: white;
	font-size: medium;
	font-weight: bold;
	margin-bottom: 5px;
	border-bottom: dashed 1px #996633;
}

.dataForm p
{
	font-size: small;
	margin-bottom:5px;
	padding-bottom:10px;
}

.dataForm label
{
	font-weight: bold;
	display:block;
	text-align: right;
}

.dataForm .footer
{
	font-size:small;
	margin-top:5px;
}

.dataForm hr
{
	height: 1px;
	background: #000099;
	color: white;
}

/********************************************************************
* Style group: toolTip                                              *
* Description: Used for displaying tooltips.                        *
*********************************************************************/

a.toolTip
{
	Color: White;
	border-bottom: dashed 1px white;
	z-index: 100;
}

a.toolTip span
{
	display:none;
}

a.toolTip:hover
{
	color: White;
	position: relative;
}

a.toolTip:hover span
{
	display: block;
	position:absolute;
    top:2em; 
    left:2em; 
    width:15em;
    border:solid 1px #000;
    background-color:#ffeecc;
	Color: Black;   
	text-align: left;
	padding: 5px;
	font-size: small;
	font-weight: normal;
}

a.dropDown
{
	Color: White;
	border: solid 1px #996633;
	z-index: 100;
	background-image:url(images/expand_blue.jpg);
	background-position:98%;
	background-repeat:no-repeat;
}


a.dropDown span
{
	display:none;
	z-index: 101;
}

a.dropDown:hover
{
	color: White;
	position: relative;
	background-image:url(images/collapse_blue.jpg);
	background-position:98%;
	background-repeat:no-repeat;
}

a.dropDown:hover span
{
	display: block;
	position:absolute;
    top:1.25em; 
    left:0em; 
    width:15em;
    border: solid 1px #996633;
	Color: white;   
	text-align: left;
	padding: 5px;
	font-size: small;
	font-weight: normal;
	background-color:Black;
	background-image:url(images/background-box.png);
	background-repeat:repeat;
	z-index: 101;
}

/********************************************************************
* Style group: deckBox                                              *
* Description: Used for displaying decks.                           *
*********************************************************************/
.deckBox
{
	margin: 10px;
	padding: 10px;
}

.deckBox h1
{
	color: White;
	padding: 5px;
	font-size: medium;
	margin-bottom: 20px;
	margin: -10px -10px 0 -10px;
	border-bottom:none;
}

.deckBox ul.links {float:right;margin:0;}
.deckBox ul.links li{float:left;font-size:.7em;text-align:center;font-weight:normal;display:block;margin:0 5px;}

.deckBox dl {display:block;float:left;font-size:.80em;width:300px;}
.deckBox dl dt{float:left;width:60px;font-weight:bold;}
.deckBox dl dd{margin:0;float:left;width:90px;}

.deckBox h2
{
	width: 230px;
	float:left;
	font-size: small;
	border-bottom: dashed 1px #666;
}

.deckBox h2 span
{
	float: right;
	text-align: right;
}

.deckBox div
{
	float: left;
	width: 250px;
	margin: 10px;
}

.deckBox ul.cards
{
	clear:both;
	margin-left: -20px;
}

.deckBox ul.cards li
{
	margin-left: 0px;
	font-size:.9em;
}

/********************************************************************
* Style group: errorBox                                             *
* Description: Used for displaying errors during data entry.        *
*********************************************************************/
.errorBox
{
	padding: 10px;
	border: solid 1px red;
	background-color: #FFC;
	background-image:none;
	color: Red;
	margin: 5px;
	display: block;
}

.errorBox li
{
	list-style-type: disc;
	margin: 5px 15px 5px 15px;
	font-size: small;	
}

.errorBox a{color: Black;text-decoration:underline;}
/********************************************************************
* Style group: successBox                                           *
* Description: Used for displaying success messages.                *
*********************************************************************/
.successBox
{
	padding: 10px;
	border: solid 1px blue;
	background-color:#99FF99;
	color: Black;
	margin: 5px;
	display: block;
}

.successBox li
{
	list-style-type: disc;
	margin: 5px 15px 5px 15px;
	font-size: small;	
}
	
/********************************************************************
* Style group: box                                                  *
* Description: Defines the style for a standard box.                *
*********************************************************************/
.box 
{
	margin: 10px;
	padding: 5px;
	overflow: hidden;
}

.box h2
{
	font-size:1.2em;
	margin-bottom:5px;
}

.box .title
{
	font-weight: bold;
	font-size: small;
	background-color: #663300;
	margin: -4px -4px 0px -4px;
	padding: 3px;
	border-bottom: solid 1px #000066;
	color: White;

	display:block;
}

.box span.title a{color:White;}

.box span.footer
{
	display:block;
	margin-top: 10px;
	padding: 5px;
}

.box table.dataTable
{
	border:none;
	margin: 0 -5px -5px -5px;
}

.box table.dataTable th.last
{
	border-right: none;
}

/********************************************************************
* Style group: forumBox                                             *
* Description: Defines the style for a fox in the forum.            *
*********************************************************************/

.forumBox 
{
	margin: 10px auto;
	overflow: hidden;
	max-width: 1000px;
}

.forumBox h2
{
	color: White;
	font-weight: normal;
	font-size: small;
	background:url(image/background-box.png) repeat;
	padding: 10px;
	border-bottom: solid 1px #996633;
	margin: -4px -4px 0px -4px;
}

.forumBox table
{
	max-width: 1000px;
	width:100%;
}

.forumBox .author
{
	color: White;
	background:url(image/background-box.png) repeat;
	border-right: solid 1px #996633;
	width: 150px;
	padding: 10px;
}

.forumBox .author a
{
	color: White;
}

.forumBox .body 
{
	min-width: 300px;
	padding: 10px;
	background:url(image/background-box.png) repeat;
}

.forumBox .footer ul.menu
{
	margin: 10px;
	float:right;
}

.forumBox .body .menu li
{
	display: block; 
	float: left;
}

.forumBox .signature
{
	display:block;
	margin-top: 20px;
	padding-top: 10px;
	border-top: solid 1px #996633;
}

.forumBox .footer
{
	background:url(image/background-box.png) repeat;
	border-top: solid 1px #996633;
	margin: 0 -4px 0px -4px;
}

.forumTable
{
	border: solid 1px #996633;
}

.forumTable th
{
	background-image: url(images/background-box.png);
	height:50px;
	color:White;
}

.forumTable td
{
	padding:10px;
}

.forumTable .mainForum
{
	background-image: url(images/background-box.png);
}

.forumTable .subForum
{
	background-image: url(images/background-box.png);
}


/********************************************************************
* Style group: AddressBook                                          *
* Description: Defines the style of various general elements        *
*********************************************************************/
.addressBook h3
{
	border-bottom: dashed 1px #666;
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

.addressBook h3 span
{
	float:right;
	font-size: x-small;
}

.addressBook li
{
	margin-top: 20px;
}


.popUp
{
	background-color:Black;
	border:solid 1px #996633;
	overflow:hidden;
	max-Height:500px;
	max-width:800px;
}

.popUp .header
{
	border-bottom:solid 1px #996633;
	height:50px;
	background-color:#663300;
}

.popUp .header h1
{
	font-weight:bold;
	font-size:1.5em;
	margin:0;
	padding:5px;
}

.popUp .header p
{
	float:left;
	font-size:1em;
	margin:0 5px 0;
	padding:0;
}

.popUp .footer
{
	border-top:solid 1px #996633;
	height:50px;
	top:100%;
}
.popUp .footer p
{
	float:left;
}

.popUp .content
{
	overflow-y:scroll;
	overflow-x:hidden;
	max-height:380px;
	display:block;
	padding:10px;
}
.modalBackground 
{
	background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
/********************************************************************
* Style group: (general classes)                                    *
* Description: Defines the style of various general elements        *
*********************************************************************/

.mtgImageSpoiler li
{
	display:block;
	float:left;
	width:250px;
	height:380px;
	margin: 10px;
	list-style-type:none;
	border: solid 1px #996633;
	background: url(images/background-box.png) repeat;
	padding:5px;
}

.mtgImageSpoiler img
{
	width:215px;
	height:300px;
	margin:10px auto;
}

.mtgImageSpoiler a
{
	margin:auto;
}

.mtgTextSpoiler .card
{
	border:solid 1px #996633;
	margin:15px;
}

.mtgTextSpoiler .card table
{
	margin:5px auto;
}

.mtgTextSpoiler .card td, .mtgTextSpoiler .card th
{
	background-image:url(images/background-box.png);
	background-repeat:repeat;	
	padding:5px;
	margin:3px;
}

.labelField{
     background-color: #242424;
     color: #FFFFFF;
     padding: 2px;
     padding-right: 10px;
     font-size: 12px;
     text-align: right;
}

.dataEntryField{
     background-color: #444444;
     padding: 2px;
     padding-left: 10px;
     padding-right: 10px;
}

.dataRow td, .altDataRow td
{
	padding: 7px 5px;
}

.dataRow, .altDataRow
{
	background: url(images/background-box.png) repeat;
}

.dataRow:hover, .altDataRow:hover
{
	background-color: #996633;
	color: White;
}

.dataRow:hover a, .altDataRow:hover a
{
	color: White;
}

table.dataTable input[type="text"]
{
	width: 50px;
}

table.dataTable th
{
	background: url(images/background-box.png) repeat;
	padding: 1px 10px 1px 10px;
	Color: White;
}

table.dataTable th a
{
	color: White;
}

table.dataTable th
{
	font-weight: bold;
	text-align: center;
	padding: 10px;
}


.Tiny
{
	font-size: smaller;
}


ul.galleryView *
{
	margin: 0;
}

ul.galleryView li
{
	list-style-type:none;
	float: left;
	margin: 5px;
}

ul.bulletList
{	
	margin-left: 0;
	list-style-type:disc;
}

.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}


.emptyStar
{
	background-image:url(images/emptyStar.png);
}

.filledStar
{
	background-image:url(images/filledStar.png);
}


