/*
 * styles for the public interface
 */



/*
 * set the default font for all pages
 */

html {
}
body {
	font-family: Ariel, sans-serif;
}
i {
	font-family: Times, Times New Roman, serif;
	font-style: italic;
}



/*
 * the header of all the pages in the public interface
 */

#puHeader {
	margin-bottom: 0px;
	background-color: #9ec7ea;
}



/*
 * the real body of the page - minus header and footer; set text size (black
 * text) and margins; links are light blue - red when hovering
 */

#puBody {
	font-size: 1.3em;
	padding-top: 25px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
}
#puBody a {
	font-weight: bold;
	font-style: italic;
	color: #404090;
	text-decoration: none;
	border-bottom: 0px;
}
#puBody a:hover, #puBody a:active {
	color: red;
	border-bottom: 1px solid red;
}

/* we present images in a page in a table - to get a text under each */

#puBody .imageTable {
	margin: 0px 15px 0px 15px;
	font-size: 0.9em;
	text-align: center;
}
#puBody .imageTable img {
	margin-left: 10px;
	margin-right: 10px;
	border: 1px solid #808080;

}

/* error texts */

#puBody .error {
	font-weight: bold;
	color: red;
}



/*
 * the style for the footer on all pages in the public interface; use small,
 * centered white text - links are white too, but presented in a slightly larger
 * font
 */

#footer {
	padding-top: 25px;
	padding-bottom: 7px;
	font-size: 0.8em;
	text-align: center;
}
#footer a {
	font-size: 1.05em;
	font-weight: bold;
	color: black;
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	color: red;
}



/*
 * styles for the menu to the left
 */

/* a separator line to the right */

.menu {
}

/* group headings and standout text */

.menu span {
	display: block;
	margin-bottom: 5px;
	font: italic bold 1.1em Ariel, sans-serif;
	text-align: center;
}
.menu strong {
	color: red;
}

/* each part of the menu is put in a table; every row has a small TH-part to the
   the left, where the red arrow is show; the TD part is the (clickable) menu
   text */

.menu table {
	border-collapse:collapse;
	table-layout: fixed;
	padding: 0px;
	margin: 0px 10px 0px 0px;
}
.menu tr {
	margin: 0px;
	padding: 0px;
}
.menu th {
	width: 25px;
	text-align: right;
	vertical-align: middle;
}
.menu td {
	padding: 0px;
}

/* the items are ordinary links - of a fixed size, so that the whole area is
   clickable, not just the text; use different padding to center items with one
   one or two lines; when hovering over an item, replace one pixel of the margin
   with a red border */

.menu a {
	margin: 2px 1px 2px 1px;
	display: block;
	width: 150px;
	text-align: center;
	color: black;
	vertical-align: middle;
	text-decoration: none;
	font: normal bold 1.3em Ariel, sans-serif;
}
.menu a.oneLine {
	padding-top: 10px;
	height: 30px;
}
.menu a.twoLines {
	padding-top: 0px;
	height: 40px;
}
.menu a.image {
	margin-left: 15px;
	padding-top: 0px;
	height: 45px;
}
.menu a:hover, .menu a:active {
	margin: 1px 0px 1px 0px;
	border: 1px solid red;
}

/* yellow menu items */

.menu span.colorY {
	color: #e0e000;
}
.menu td.lastLineY {
	border-top: 3px solid #e0e000;
	border-bottom: 3px solid #e0e000;
}
.menu td.otherLinesY {
	border-top: 3px solid #e0e000;
}

/* green menu items */

.menu span.colorG {
	color: #008000;
}
.menu td.lastLineG {
	border-top: 3px solid #008000;
	border-bottom: 3px solid #008000;
}
.menu td.otherLinesG {
	border-top: 3px solid #008000;
}

/* red menu items */

.menu span.colorR {
	color: #e00000;
}
.menu td.lastLineR {
	border-top: 3px solid #e00000;
	border-bottom: 3px solid #e00000;
}
.menu td.otherLinesR {
	border-top: 3px solid #e00000;
}

/* blue menu items */

.menu span.colorB {
	color: #0000e0;
}
.menu td.lastLineB {
	border-top: 3px solid #0000e0;
	border-bottom: 3px solid #0000e0;
}
.menu td.otherLinesB {
	border-top: 3px solid #0000e0;
}

/* black menu items */

.menu td.lastLineL {
	border-top: 3px solid #000000;
	border-bottom: 3px solid #000000;
}
.menu td.otherLinesL {
	border-top: 3px solid #000000;
}



/*
 * the right column presents some news; use a smaller font - white text with
 * red-when-hovering
 */

#news {
	font-size: 0.8em;
	border-left: 1px solid #606060;
	padding-left: 15px;
}
#news h1 {
	font: normal bold 1.4em Georgia, serif;
	color: black;
	margin-top: 0px;
	margin-bottom: 10px;
}
#news h2 {
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	color: black;
	margin-bottom: 2px;
}
#news a {
	font-weight: bold;
	font-style: normal;
	color: black;
	text-decoration: none;
}
#news a:hover, #news a:active {
	color: red;
	text-decoration: none;
	border-bottom: 0px;
}
#news strong {
	color: red;
	font-weight: bold;
}



/*
 * footer on the start page, with information about the werewolves
 */

#werewolfFooter {
	width: 65%;
	margin: auto;
	margin-top: 10px;
	text-align: center;
	font-size: 0.7em;
	padding: 5px;
	border: 1px solid #c0c0c0;
}



/*
 * list of games - in the public pages and in the pages for logged in customers
 */

.listGame {
	padding-top: 7px;
	padding-bottom: 7px;
	border-bottom: 1px solid black;
	font-size: 0.7em;
}
#puBody .listGameImage a, #puBody .listGameImage a:hover,
#puBody .listGameImage a:active {
	border: 0px;
}

.listGameAbout {
	padding-right: 5px;
}
.listGameAbout strong {
	font: normal bold 1.4em Georgia, serif;
	display: block;
}

.listGameInfo th {
	text-align: right;
	padding-right: 5px;
}
.listGameInfo td {
}
.listGameInfo strong {
	font-weight: bold;
}



/*
 * list of available game rules
 */

.listRules {
	margin-top: 10px;
	margin-bottom: 20px;
}

.listRules th {
	text-decoration: underline;
	padding-bottom: 10px;
}



/*
 * different small forms to enter username and/or password
 */

#formLogin {
	margin-top: 20px;
}
#formLogin table {
	margin: auto;
	border: none;
}
#formLogin th {
	vertical-align: bottom;
	padding-top: 1px;
	padding-bottom: 3px;
	font-weight: bold;
	font-size: 1.0em;
	padding-right: 10px;
	text-align: right;
}
#formLogin td {
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1.0em;
}



/*
 * forms to enter search criteria when searching for stores
 */

#formFindList {
	margin-top: 20px;
	margin-bottom: 10px;
}
#formFindList table {
	margin: auto;
	border: none;
}
#formFindList th {
	padding-bottom: 10px;
	font-size: 1.0em;
	text-decoration: underline;
}
#formFindList td {
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1.0em;
	font-weight: 600;
}



/*
 * table with contact information for us
 */

#contactTable {
	margin-top: 5px;
	margin-bottom: 30px;
}
#contactTable th {
	vertical-align: top;
	padding-top: 2px;
	font-size: 1.0em;
	padding-right: 10px;
	text-align: right;
}
#contactTable td {
	padding-top: 2px;
	padding-bottom: 8px;
	font-size: 1.0em;
	font-weight: bold;
}



/*
 * table with the most important customer field - as information when the
 * customer has logged in
 */

#customerInfo {
	display: block;
	width: 70%;
	margin: auto;
	margin-top: 20px;
	border: 1px solid #c0c0c0;
	padding: 10px;
	text-align: center;
}
#customerInfo strong {
	display: block;
	text-align: center;
	text-decoration: underline;
	color: black;
	margin-bottom: 15px;
}
#customerInfo th {
	vertical-align: top;
	text-align: right;
	padding: 5px 3px 0px 0px;
	font-weight: normal;
}
#customerInfo td {
	vertical-align: top;
	text-align: left;
	padding: 5px 0px 0px 0px;
	font-weight: bold;
}



/*
 * confirmation/reciept when a user has saved an order
 */

#orderSaved {
	display: block;
	width: 80%;
	margin: auto;
	margin-top: 20px;
	border: 1px solid #c0c0c0;
	padding: 10px;
	text-align: center;
}
#orderSaved th {
	text-decoration: underline;
	padding: 0px 2px 10px 2px;
}
#orderSaved td {
	padding: 2px 2px 2px 2px;
}
#orderSaved strong {
	font-weight: bold;
	color: #208020;
}



/*
 * format of the plug for the Werewolf homepage
 */

#werewolfPlug {
	text-align: center;
}
#werewolfPlug a {
	display: block;
	margin: auto;
	background-color: black;
	width: 500px;
	height: 90px;
	padding: 15px;
	border: 3px solid #20a020;
	font: normal normal 14px Ariel, sans-serif;
	line-height: 14px;
	text-decoration: none;
}
#werewolfPlug a:hover, #werewolfPlug a:active {
	border: 3px solid red;
}
#werewolfPlug img {
	outline-width: 0px;
	border: 0px;
}
#werewolfPlug strong {
	display: block;
	text-align: center;
	margin-top: 10px;
	color: white;
	font-weight: bold;
}



/*
 * question mark when the user wants more information about a field
 */

.questionMark a {
}

.questionMark img {
	vertical-align: middle;
}

.questionMark a:hover, .questionMark a:active {
	border: 0px;
}












/*
 * list of results
 */

/* !!!! */

.listResults {
	margin-top: 10px;
	margin-bottom: 20px;
}

.listResults th {
	text-decoration: underline;
	padding-bottom: 3px;
}

.listResultsNew td {
	padding-top: 6px;
}

.listResultsSame td {
	padding-top: 0px;
}





.listPlayers {
	margin-top: 10px;
	margin-bottom: 20px;
}

.listPlayers th {
	text-decoration: underline;
	padding-bottom: 10px;
}

.listPlayers td {
	padding-bottom: 7px;
}

.listPlayersYes {
	color: green;
}
.listPlayersNo {
	color: red;
}



.bulletList {
	padding-left: 15px;
}

.bulletList li {
	list-style-type: disc;
	padding-left: 10px;
	padding-bottom: 7px;
}

.bulletList b {
	font-weight: bold;
	color: #004000;
}