/* CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial */

/* the appropriate background class will be applied based on class attached to the body */
body, body.home, body.news1, body.game, body.gametown{
margin: 0px;
padding: 0px;
border: 0px;
background-color: #D8D0B8;
background-image:url(../images/backborder.gif);
background-repeat: repeat-y;
background-position: center top;
min-width: 1000px;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
}

/* default links, color goes to the specific */
a:link{
text-decoration: none;
color:#336699;
}

a:hover{
text-decoration: none;
color: #6699CC;
}

a:visited{
text-decoration: none;
color:#003366;
}

#links {
margin: 0;
padding: 0;
border: 0;
}

/* others */
h2 {
margin: 0 10px 0 10px;
padding: 2px;
font-size: 80%;
color:#4f6099;
background-color:#FFF;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
text-transform: uppercase;
display: inline;
font-size: 80%;
margin: 10px 5px 0 5px;
padding: 2px;
}

.default h3 {
background: #e8e8e8;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */
.box {
margin: 10px 0px 5px 0px;
padding: 5px 0 5px 0;
background-image: url(../images/diags.gif);
text-align: center; 
}

.rssSide{
margin: 10px 5px 5px 5px;
padding: 2px 2px 2px 2px;
text-align: left;
color: #000;
background-color: #FFF;
font-size: 11px;
}

#listdata
{
font-size: 10px;
color: #990000;
background-color: #D8D0B8;
width: 14em;
}

.rssSide p{
margin: 10px 5px 5px 5px;
padding: 2px 2px 2px 2px;
text-align: left;
color: #000;
background-color: #FFF;
font-size: 11px;
}

.rssSide li{
list-style-image: url(../images/garrow.png);
list-style-position: outside;
margin-left: 18px;
font-size: 11px;
line-height: 15px;
color: #000;
}

.rssSide a:link{
text-decoration: none;
color: #336699;
}

.rssSide a:visited{
text-decoration: none;
color: #003366;
}

.rssSide a:hover{
text-decoration: none;
color: #FF6600;
}


/* Styling of the boxes if there is no JavaScript support */

.gamegarden {
margin: 10px 10px 5px 10px;
padding: 2px;
background-color: #b7d987;
line-height: 100%;
text-align: left;
vertical-align: top;
width: 560px;
}

.gamegarden a:link{
color: #cc0000;
font-size: 12px;
font-weight: bold;
}

.gamegarden a:hover{
color: #ff0000;
font-size: 12px;
font-weight: bold;
}

.gamegarden a:visited{
color: #660000;
font-size: 12px;
font-weight: bold;
}

.gamegarden p{
color: #3a3a3a;
font-size: 80%;
padding: 4px;
}

.gamegarden img{
float: left;
clear: both;
}

.gardenphoto img{
border: 1px solid navy;
padding: 0px;
}

.gardenphoto:hover img{
border: 1px solid #FFF;
}

.gardenphoto:hover{
color: red; /* Dummy definition to overcome IE bug */
}

/* paragraph styles for any main boxes */
.cb p {
margin: 0;
padding: 0px;
font-size: 10px;
}

/* Rules for the top corners and border */
.bt {
	background:url(../images/box.png) no-repeat 100% 0 !important;
	background:url(../images/box.gif) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:27px;
	}
.bt div {
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(../images/box.png) no-repeat 0 0 !important;
	background:url(../images/box.gif) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(../images/box.png) no-repeat 100% 100% !important;
	background:url(../images/box.gif) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(../images/box.png) no-repeat 0 100% !important;
	background:url(../images/box.gif) no-repeat 0 100%;
	}

/* Insert the left border */
.i1 {
	padding: 0 0 0 12px;
	background:url(../images/borders.png) repeat-y 0 0 !important;
	background:url(../images/borders.gif) repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding: 0 12px 0 0;
	background:url(../images/borders.png) repeat-y 100% 0 !important;
	background:url(../images/borders.gif) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#FFF;
border: 1px solid #FFF;
	border-width:1px 0;
	padding:0 5px;
	}
/* CSS for the box ends here */

/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */
img {
float: left;
padding-right: 5px;
padding-top: 5px;
border: 0px;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */
.default img {
border: 0;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
display: block;
float: none;
margin-top: 4px;
border: 3px solid #C5BDBD;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
margin: 20px 40px 0 0;
background: url(shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
 
.img-wrapper img {
float:none;
margin:0;
background:#fff;
padding:4px;
border:1px solid #C5BDBD;
position:relative;
left:-5px;
top:-5px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */
.spacer {
clear: both;
}

body.home .mainNav a#home, body.news1 .mainNav a#news, body.store .mainNav a#store, body.game .mainNav a#game, body.gametown .mainNav a#gametown
{ 
color:#fff;
text-decoration: none;
}

/* form styling - not much though kids */

form {
margin: 0;
padding: 0;
font-size: 80%;
}

legend {
text-transform: uppercase;
font-size: 110%;
font-weight: bold;
margin: 10px 0 2px 0px;
padding: 2px;
background: #D72E2E;
color: #FFF;
}

.default legend {
display: none;
}

label {
display: none;
}

.default label {
display: block;
font-weight: bold;
}

input{
margin-top:0;
padding: 2px;
border-right: 1px solid #c9bd9a;
border-bottom: 1px solid #c9bd9a;
border-left: 1px solid #8e8773;
border-top: 1px solid #8e8773;
background-color:#e9e3d1;
color: #333;
font-size:10px;
}

textarea {
margin-top:0;
padding: 2px;
border: 1px solid #a69c7f;
background-color: #e9e3d1;
color: #333;
}

.default input {
display: block;
}

input.submit {
border: 0;
margin-bottom: -6px;
padding: 2px;
background: transparent;
font-size: 60%;
}

/************************************************************
* tabpages style
************************************************************/
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 10px;
margin-bottom: 0;
font-size: 11px;
font-weight: bold;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
text-decoration: none;
font-size: 90%; 
font-weight: bold;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 3px;
margin-right: 1px;
border: 1px solid #778;
color: #2d2d2d;
background: white url(../images/shade.jpg) repeat-x;
}

.shadetabs li a:visited{
color: #2d0000;
text-decoration: none;
}

.shadetabs li a:hover{
color: #2d2b2b;
text-decoration: none;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(../images/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid #666666;
margin-right: 0px;
margin-bottom: 1em;
padding-top: 10px;
padding-down: 10px;
padding-left: 5px;
padding-right: 5px;
background: #fff;
text-align: left;
font-size: 12px;
width: 570px;
}

.tabcontentstyle hr{
height: 1px;
width: 98%;
text-align: center;
border-bottom:1px;
} 

.tabcontent{
display:none;
text-align: left;
}

.tabcontent img {
float: left;
padding-right: 5px;
border: 0px;
clear: both;
}

.tabcontent h3{
font-size: 105%;
font-weight: bold;
}

.tabcontent p{
padding: 5px;
color:#666666;
line-height: 15px;
}

.tabcontent a
{
text-decoration: none;
color: #336699;
font-size: 12px;
}


.tabcontentstylefull { /*style of tab content oontainer*/
border: 1px solid #666666;
font-size: 12px;
color: #666666;
background-color: #fff;
text-align: left;
line-height: 16px;
padding-top: 10px;
padding-down: 10px;
padding-left: 5px;
padding-right: 5px;
width: 570px;
}

.tabcontentstylefull p{ /*style of tab content oontainer*/
color: #000;
}

.tabcontentstylefull hr{
color:#CCCCCC;
background-color:#CCCCCC;
border: 0px;
height:1px;
}

.tabcontentstylefull a
{
text-decoration: none;
color: #336699;
font-weight: bold;
}

.tabcontentstylefull a:visited
{
text-decoration: none;
color: #336699;
font-weight: bold;
}

.tabcontentstylefull a:hover
{
font-weight: bold;
color: #666666;
text-decoration: none;
}
.tabcontentstylefull img
{
margin-top: 8px;
margin-left: 6px;
margin-right: 8px;
margin-bottom: 4px;
}

@media print {
	.tabcontent {
	display:block!important;
	}
}

.cleardivider{
clear: both;
}

/* I need some new style clean up */
#wrapper {
width: 1000px;
margin: 0 auto;
padding: 0px;
text-align: left;
}

/* logo */
/* mainNav */
/* login */
/* basic headers here, diffrent background goes to inidvidual css */
#logo {
width: 800px;
height: 120px;
margin: 0;
padding: 0;
font-size: 150%;
}

/* basic navigation style comes here */
.mainNav
{
text-align: left;
width: 800px;
height: 30px;
margin: 0;
padding: 0;
font-size:14px;
font-weight: bold;
}

.mainNav li{
margin: 0px;
padding: 0px;
}

.mainNav a{
line-height: 20px;
list-style: none;
height: 20px;
text-decoration: none;
font-size: 11px;
padding: 0.1em 0.75em 0.1em 0.75em;
margin: 0px;
border: 0px 0px 1px 1px;
}

#login
{
width: 800px;
height: 30px;
line-height: 30px;
text-indent: 22px;
margin: 0;
padding: 0;
font-size: 11px;
}

#loginfont
{
font-size: 11px;
text-align: right;
vertical-align:top;
text-indent: 6px;
font-weight: bold;
}

#top_right
{
width: 200px;
height: 180px;
}

/* Middle part */
#content, #longcontent
{
width: 600px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
margin: 0px;
vertical-align:top;
}

#newslink li
{
display: inline;
}

#newslink a
{
font-size:12px;
color: #663366;
text-decoration: underline;
padding: 8px;
}

#newslink a:hover
{
font-size:12px;
color:#FFFFCC;
text-decoration: underline;
}

#newslink a:visited
{
font-size:12px;
color:#FFFF99;
text-decoration: underline;
}


#gametitle{
padding-top: 2px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
height: 65px;
}

.gametitle hr{
color:#CCCCCC;
background-color:#CCCCCC;
border: 0px;
height:1px;
}

#gametitle p{
color: #FF0000;
font-size:12px;
text-align: center;
font-weight: bold;
}

#gamecontent
{
padding-top: 10px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0px;
text-align: center;
height: 400px;
vertical-align: top;
}

/* content */
#content_left
{
width: 200px;
padding-top: 15px;
padding-left: 5px;
padding-right: 2px;
padding-bottom: 15px;
margin: 0px;
}

#content_right
{
width: 200px;
padding-top: 15px;
padding-left: 0px;
padding-right: 5px;
padding-bottom: 15px;
margin: 0px;
}

/* the footer */
#footer{
clear:both;
width: 1000px;
height: 50px;
background: #7992eb url(../images/bottom.png) repeat-x;
text-align: center;
font-size: 10px;
padding: 10px;
}

#footer a:link, #footer a:visited {
color: #990000;
}

#footer a:hover {
color: #FFFF99;
background: transparent;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #E8BEBE; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid #E8BEBE; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FFECEC;
}