/* CSS Document */

body {
	background: url(../images/back.gif) repeat-x;
	margin: 0; padding: 0;
}

#siteWrap {
	width: 900px;
	margin: 0 auto;
	padding: 50px 10px 0 10px;
}

#contentWrap {
	width: 870px;
	margin: 0 auto;
	padding: 20px 0 0 0;
}

#contentWrap2 {
	width: 880px;
	margin: 0 auto;
	padding: 20px 0 0 0;
}

#aboutWrap {
	width: 860px;
	margin: 20px auto;
	padding: 10px;
	background: url(../images/back880.png) no-repeat top center;
}

#contentLeft {
	width: 560px;
	margin: 0 20px 0 0;
	padding: 10px;
	background: url(../images/mainLeftBack.png) no-repeat top;
	float: left;
}

#contentRight {
	background: url(../images/mainRightBack.png) no-repeat top;
	width: 230px;
	padding: 10px;
	float: left;
}

#newsRight {
	width: 210px;
	float: right; clear: right;
	padding: 0 0 0 10px;
	border-left: 1px solid #B9CBDA;
}

#newsRight ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#newsLeft {
	width: 330px;
	float: left; clear: left;
}

#boardgamesLeft {
	width: 880px;
	margin: 0;
	padding: 10px 5px;
	background: url(../images/back880.png) no-repeat top;
	float: left;
}

#boardgamesLeft a:link, #boardgamesLeft a:visited {
	color: #285B7F;
	text-decoration: none;
}

#boardgamesLeft a:hover, #boardgamesLeft a:active {
	color: #285B7F;
	text-decoration: underline;
}

#boardgamesLeft h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 0 5px 0;
	width: 560px;
	height: 80px;
	display: block;
	text-indent: -2000px;
	background: url(../hTagGraphics/BoardGamesv2.png) left top no-repeat;
}

#boardgamesLeft h2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 0 10px 0;
}

#boardgamesLeft p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 0 5px 0;
}

#jigsawLeft {
	width: 880px;
	margin: 0;
	padding: 10px 0 10px 0;
	background: url(../images/back880.png) no-repeat top;
	float: left;
}

#jigsawLeft a:link, #jigsawLeft a:visited {
	color: #285B7F;
	text-decoration: none;
}

#jigsawLeft a:hover, #jigsawLeft a:active {
	color: #285B7F;
	text-decoration: underline;
}

#jigsawLeft h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 10px 5px 10px;
	height: 80px;
	display: block;
	text-indent: -2000px;
	background: url(../hTagGraphics/jigsaws.png) left top no-repeat;
}

#jigsawLeft h3 {
	font: 23px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 10px 5px 10px;
}

#jigsawLeft h2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 10px 10px 10px;
	font-weight: bold;
}

#jigsawLeft p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 10px 5px 10px;
}

#otherLeft {
	width: 880px;
	margin: 0;
	padding: 10px 0 10px 0;
	background: url(../images/back880.png) no-repeat top;
	float: left;
}

#otherLeft a:link, #otherLeft a:visited {
	color: #285B7F;
	text-decoration: none;
}

#otherLeft a:hover, #otherLeft a:active {
	color: #285B7F;
	text-decoration: underline;
}

#otherLeft h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 10px 5px 10px;
	height: 80px;
	display: block;
	text-indent: -2000px;
	background: url(../hTagGraphics/otherProducts.png) left top no-repeat;
}

#otherLeft h3 {
	font: 23px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 10px 5px 10px;
}

#otherLeft h2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 10px 10px 10px;
	font-weight: bold;
}

#otherLeft p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 10px 5px 10px;
}

#licLeft {
	width: 880px;
	margin: 0;
	padding: 10px 0 10px 0;
	background: url(../images/back880.png) no-repeat top;
	float: left;
}

#licLeft a:link, #licLeft a:visited {
	color: #285B7F;
	text-decoration: none;
}

#licLeft a:hover, #licLeft a:active {
	color: #285B7F;
	text-decoration: underline;
}

#licLeft h1 {
	font: 25px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 10px 10px 5px 10px;
	font-weight: bold;
}

#licLeft h3 {
	font: 23px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 10px 5px 10px;
}

#licLeft h2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 10px 10px 10px;
	font-weight: bold;
}

#licLeft p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 10px 5px 10px;
}

.nextPrev {
	clear: both;
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 0 5px 0;
	text-align: center;
	font-weight: bold;
}

#familyItemsWrapper {
	width: 870px;
	margin: 0 auto;
}

#familyItemsWrapper h2 {
	font: 19px Arial, Helvetica, sans-serif;
	color: #285B7F;
	border-bottom: 1px solid #285B7F;
	clear: both;
	padding: 0 0 3px 0;
	margin: 0 0 3px 0;
}

.familyItem {
	width: 200px;
	height: 200px;
	padding: 5px;
	float: left;
}

.familyItemText {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
	margin: 5px 0 0 0;
}


/* Text styles */

#contentLeft h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 0 5px 0;
}

#contentLeft h2 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 0 10px 0;
}

#contentLeft h3 {
	font: 14px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 0 5px 0;
	background-color: #E1EDF2;
	font-weight: bold;
}

#contentLeft p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 0 5px 0;
}

#contentRight h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 0 5px 0;
}

#contentRight p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #285B7F;
	margin: 5px 0 5px 0;
}

#contentRight h3 {
	font: 14px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 0 5px 0;
	background-color: #E1EDF2;
	font-weight: bold;
}

#contentRight p.centered {
	font: 12px Arial, Helvetica, sans-serif;
	color: #006699;
	margin: 5px 0 5px 0;
	text-align: center;
}

#newsRight li {
	font: 18px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #006699;
	margin: 10px 0 10px 0;
}

#newsLeft h3 {
	font: 14px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 0 0 5px 0;
}

#aboutWrap h1 {
	font: 20px Arial, Helvetica, sans-serif;
	color: #17415F;
	border-bottom: 1px solid #B9CBDA;
	margin: 0 0 5px 0;
}

#aboutWrap p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #17415F;
	margin: 5px 0 0 0;
}

#teamWrap {
	width: 772px;
	margin: 0 auto;
	clear: both;
}

.teamMember {
	width: 173px;
	padding: 10px;
	float: left;
	text-align: center;
}


/* Tools */

.splitter {
	border-bottom: 1px solid #B9CBDA;
	margin: 5px 0 5px 0;
	clear: both;
}


/* Copyright stuff */

#copyright {
	clear: both;
	width: 600px;
	border-top: 1px solid #B9CBDA;
	padding: 5px 0 0 0;
	margin: 5px auto;
}

#copyright p {
	font: 10px Arial, Helvetica, sans-serif;
	color: #26B3FF;
	margin: 5px 0 0 0;
	text-align: center;
}

#copyright a:link, #copyright a:visited, #copyright a:hover, #copyright a:active {
	color: #26B3FF;
	text-decoration: none;
	border-bottom: #A4CDD9 dotted 1px;
}

/* Slider Styles */

#s3slider {
   width: 200px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin: 0 auto;
}

#s3sliderContent {
   width: 200px; /* important to be same as image width or wider */
   position: inherit; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
   left: -40px;
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   list-style: none;
   padding: 0; margin: 0;
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}