/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~                                               ~
~  Flag Dude                                    ~
~  Stylesheet For Use With SCREEN               ~
~                                               ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ----------------------------------------------
|                                               |
|  HTML Tag Overrides - Global                  |
|                                               |
-----------------------------------------------*/

body {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 17px;
	margin: 0px;
	padding: 0px;
}

a:link {
	color: #00F;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

a:visited {
	color: #00F;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

a:hover {
	color: #00F;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

a:active {
	color: #00F;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

img { 
	border: 0px;
}

img.about { 
	border: 1px solid #eee;
}

img.photo { 
	border: 1px solid #eee;
}

img.preview { 
	border: 1px solid #eee;
}

img.rules { 
	border: 2px solid #00F;
}

img.thumbnail { 
	border: 1px solid #eee;
}

img.tile { 
	border: 1px solid #eee;
}

/* ----------------------------------------------
|                                               |
|  Header Section Controls                      |
|                                               |
-----------------------------------------------*/

#header {
	background-color: #fcf465;
	background-image:  url("/images/header_bg.gif");
	background-repeat: no-repeat;
	background-position: center;
	height: 90px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	text-align: left;
}


/* ----------------------------------------------
|                                               |
|  Content Section Controls                     |
|                                               |
-----------------------------------------------*/

#content {
	background-color: #FFF;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	margin: 0px auto 0px auto;
	padding: 15px 10px 5px 10px;
	text-align: left;
	width: 1400px;	
}

#content fieldset {	
	color: #333;
	border-top: 1px solid #F00;
	border-right: 0px;
	border-bottom: 0px;
	border-left: 0px;
	margin: 0px 15px 15px 15px;
}

#content legend {
	color: #00F;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0px 0px 4px 5px;
	padding: 0px 2px 0px 2px;
}

/* ----------------------------------------------
|                                               |
|  Content Form                                 |
|                                               |
-----------------------------------------------*/

#content form {	
	margin: 0px 0px 0px 0px;
}

#content input {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

#content select {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

#content textarea {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

/* ----------------------------------------------
|                                               |
|  Content Element                              |
|                                               |
-----------------------------------------------*/

#content div.element {
	clear: both;
	margin: 0px 0px 5px 0px;
}

#content div.element div.label {	
	font-weight: bold;
	padding: 0px 10px 0px 0px;
}

#content div.element div.label span.help_title {	
	font-weight: bold;
	margin: 0px 5px 0px 5px;
}

#content div.element div.label span.help_value {	
	margin: 0px 5px 0px 5px;
	text-decoration: underline;
}

#content div.element div.data {	
	margin: 0px 0px 0px 0px;
	vertical-align: top;
}

#content div.element div.data input {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

#content div.element div.data select {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

#content div.element div.data input.go {
	background-color: #F00; 
	border: 1px solid #ddd;
	color: #fff; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin: 0px 7px 1px 0px;
	padding: 2px 3px 2px 3px;
	overflow: visible;
}

#content div.element div.data textarea {	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
}

/* ----------------------------------------------
|                                               |
|  Content Header Controls                      |
|                                               |
-----------------------------------------------*/

#content h1 {	
	color: #00F;
	font-size: 1.4em;
	margin: 0px 0px 4px 0px;
	padding: 2px 3px 2px 5px;
}

#content h2 {	
	color: #00F;
	font-size: 1.2em;
	margin: 0px 0px 4px 0px;
	padding: 2px 3px 2px 0px;
}

#content h3 {	
	color: #00F;
	font-size: 0.9em;
	margin: 0px 0px 4px 0px;
	padding: 2px 3px 2px 0px;
}

/* ----------------------------------------------
|                                               |
|  Content Paragraph Controls                   |
|                                               |
-----------------------------------------------*/

#content p {	
	color: #333;
	font-size: 1em;
	margin: 0px 0px 4px 0px;
	padding: 0px 3px 2px 0px;
}

/* ----------------------------------------------
|                                               |
|  Content Table - Columns                      |
|                                               |
-----------------------------------------------*/

#content table.columns {
	border-collapse: collapse;
	color: #333;
	margin: 0px 0px 5px 0px;
	width: 100%;
}

#content table.columns td {
	padding: 0px 0px 0px 0px;
	text-align: left;
	vertical-align: top;
}

#content table.columns td.twentyfive {
	width: 25%;
}

#content table.columns td.splash {
	width: 33%;
	font-size: 16px;
	text-align: center;
}

#content table.columns td.fifty {
	width: 50%;
}

#content table.columns td.fifty ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

#content table.columns td.fifty ul li {
	margin-bottom: 3px;
}

#content table.columns td.seventyfive {
	width: 75%;
}

#content table.columns td.hundred {
	width: 100%;
}

/* ----------------------------------------------
|                                               |
|  Content Table - Data                         |
|                                               |
-----------------------------------------------*/

#content table.data {
	border: 1px solid #ccc;
	border-collapse: collapse;	
	color: #333;
	margin: 0px 15px 15px 15px;
	width: 95%;
}

#content table.data caption {
	color: #00F;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0px 0px 3px 5px;
	text-align: left;
}

#content table.data tr {
	height: 25px;
}

#content table.data tr.altrow1 {	
	background-color: #fff;
}

#content table.data tr.altrow2 {	
	background-color: #eee;
}

#content table.data th {	
	background-color: #ddd;
	padding: 0px 0px 0px 7px;
	text-align: left;
}

#content table.data td {	
	padding: 0px 0px 0px 7px;
	text-align: left;
}

/* ----------------------------------------------
|                                               |
|  Content Div - Columns                        |
|                                               |
-----------------------------------------------*/

#content div.columns {
	color: #333;
	float: left;
	margin: 0px 10px 15px 5px;
	text-align: center;
}

#content br.clear {
	clear: both;
}

/* ----------------------------------------------
|                                               |
|  Content Buttons                              |
|                                               |
-----------------------------------------------*/

#content .buttons {
	padding: 2px 0px 10px 10px;
}

#content .buttons input {
	background-color: #F00; 
	border: 1px solid #ddd;
	color: #fff; 
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin: 5px 7px 5px 0px;
	padding: 3px 5px 3px 5px;
	overflow: visible;
}

/* ----------------------------------------------
|                                               |
|  Content Error Message                        |
|                                               |
-----------------------------------------------*/

#content #errormessage {
	background-color: #eee;
	background-image:  url("/images/icon_error.gif");
	background-position: 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #c00;
	color: #c00;
	font-size: 0.9em;
	margin: 4px 5px 10px 5px;
	padding: 5px 5px 5px 5px;
}

#content #errormessage p {
	color: #c00;
	font-weight: bold;
	margin: 0px 0px 0px 20px;
}

#content #errormessage ul {
	list-style-type: square;
	margin: 3px 0px 0px 25px;
}

#content #errormessage ul li {
	color: #c00;
	margin: 0px 0px 2px 0px;
}

/* ----------------------------------------------
|                                               |
|  Content Info Message                         |
|                                               |
-----------------------------------------------*/

#content #infomessage {
	background-color: #eee;
	background-image:  url("/images/icon_info.gif");
	background-position: 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #039;
	color: #039;
	font-size: 0.9em;
	margin: 4px 5px 10px 5px;
	padding: 5px 5px 5px 5px;
}

#content #infomessage p {
	color: #039;
	font-weight: bold;
	margin: 0px 0px 0px 20px;
}

#content #infomessage ul {
	list-style-type: square;
	margin: 3px 0px 0px 25px;
}

#content #infomessage ul li {
	color: #039;
	margin: 0px 0px 2px 0px;
}

/* ----------------------------------------------
|                                               |
|  Footernav Section Controls                   |
|                                               |
-----------------------------------------------*/

#footernav {
	border-top: 1px solid #F00;
	font-size: 0.9em;
	height: 27px;
	margin: 0px auto 0px auto;
	padding: 0px;
	text-align: center;	
}

#footernav ul {
	list-style-type: none;
	margin: 0px;
	padding: 6px 0px 6px 4px;
}

#footernav li {
	color: #F00;
	display: inline;
	padding: 4px 2px 4px 2px;
}

#footernav li a {
	color: #00F;
	font-weight: bold;
	padding: 3px 2px 3px 2px;
	text-decoration: none;
}

#footernav li a:hover {
	text-decoration: underline;
}

/* ----------------------------------------------
|                                               |
|  Shown/Hidden Section                         |
|                                               |
-----------------------------------------------*/

.shown {
	color: #999;	
}

.hidden {
	color: #f00;	
}

/* ----------------------------------------------
|                                               |
|  DROP DOWN MENU                               |
|                                               |
-----------------------------------------------*/

.megamenu{
	background-color: #fff;
	border: 1px solid #000;
	display: none;
	left: 0;
	padding: 10px;
	position: absolute;
	top: 0;	
	z-index: 100;
}

.megamenu .column {
	float: left;
	margin-right: 5px;
	width: 210px;
}

.megamenu .column ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;	
}

.megamenu .column ul li {
	padding: 3px;
}

.megamenu .column ul li a {
	display: block;	
	font-weight: bold;
	padding: 2px 3px 2px 3px;
	text-decoration: none;
}

.megamenu .column ul li a:hover {
	background-color: #F00;
	color: #fff;
}

/* ----------------------------------------------
|                                               |
| Sort                                          |
|                                               |
-----------------------------------------------*/

#sortable-list {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
}

#sortable-list li {
	background-color: #fff;
	border: 1px solid #999;
	color: #000;
	cursor: move;
	list-style: none;
	margin: 10px 0;
	padding: 4px 8px;
	width: 650px;
}

#message-box {
	background-color: #F00;
	color: #fff;
	font-weight: bold;
	padding: 4px 8px;
	margin: 0 0 14px 0;
	width: 650px;
}


#globalnav {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	overflow: hidden;
	background-color: #00F;
	width: 100%;
}

/* Navbar container */
.navbar {
	margin: 0px auto 0px auto;
	text-align: center;
	display: table;
}

/* Links inside the navbar */
.navbar a {
	float: left;
	font-size: 16px;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* The dropdown container */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
	font-size: 16px;
	border: none;
	outline: none;
	color: #fff;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit; /* Important for vertical align on mobile phones */
	margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: #C00;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #C00;
	color: #fff;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	float: none;
	color: #fff;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #00F;
	color: #FFF;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}




















/* Next & previous buttons */
.prev, .next {
	background-color: #00F;
	color: #fff;
	font-size: 1.2em;
	margin: 20px 0px 0px 0px;
	width: 90px;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #FFF;
  padding: 2px 16px;
  color: #000;
}

/* Six columns side by side */
.column {
  float: left;
  width: 200px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}