﻿.Wrapper {
 
}

.GenericContent
{
	font-size: .80em;
}
 
 

.BillboardSpacer
{
    clear: both;
    height: 10px;
    width: 900px;
}

.BillboardCWrapper
{
    position: relative;
    float: left;
    left: 50%;
    margin-left: -494px;
    margin-top: 0px;
    background-color: Transparent;    
}


 
 
 

/*
<!-- header image -->
<div class="ToolHeaderImageBox"><img class="ToolHeaderImage" src=""/></div>
<!-- header text -->
<div class="ToolHeaderTextBox">
	<!-- header left side text area -->
	<div class="ToolHeaderTextLeft">
		<div class="ToolHeaderTextHeadline">Headline<img class="ToolHeaderIcon" src="/dnd/images/4new/dndi_large.png"/></div>
		<div class="ToolHeaderTextBody">text goes here text goes here text goes here text goes here text goes here text goes here </div>
		<div class="ToolHeaderTextLink"><a class="ToolHeaderLink" href="#">Link</a></div>
		<div class="ToolHeaderTextButton">Button</div>
	</div>
	<!-- header left side text area -->
	<div class="ToolHeaderTextRight">
		<div class="ToolHeaderTextBodyRight">text goes here text goes here text goes here text goes here text goes here text goes here 
			<div class="ToolHeaderTextButton">Button</div>
		</div>
		<div class="ToolHeaderTextLine"><!-- line --></div>
		<div class="ToolHeaderTextBodyRight">text goes here text goes here text goes here text goes here text goes here text goes here
			<div class="ToolHeaderTextButton">Button</div>
		</div>
		<div class="ToolHeaderTextButton">Button</div>
	</div>
</div>
*/

/*
<div class="ToolContentHeadline"></div>
<div class="ToolContentLine"><!-- line --></div>
<div class="ToolContentRow"></div>
*/


.ToolHorizontalWrapper  
{
	position: relative;
	float: left;
	margin: 0px auto;
	margin-bottom: 7px;
	margin-left: -3px;
	width: 687px;

}  



.ToolHeaderImageBox
{
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
}

.ToolHeaderImage
{
	border: 0px;
}

.ToolTextImage
{
	border: 0px;
}

.ToolHeaderIcon
{
	margin-left: 5px;
	border: 0px;
}

.ToolHeaderTextBox
{
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 5px;
}

.ToolHeaderTextLeft
{
	position: relative;
	float: left;
	width: 360px;
	margin-top: 10px;
}


.ToolHeaderTextRight
{
	background-color: #dddddd;
	position: relative;
	float: right;
	width: 300px;
	margin-top: 10px;
}


.ToolHeaderTextHeadline
{
	width: 100%;
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.5em;
	color: #990000; 
}

.ToolHeaderTextBody
{
	font-family:'arial',helvetica,sans-serif; 
	font-size: .90em;
	color: #000000; 
}

.ToolHeaderTextBodyRight
{
	font-family:'arial',helvetica,sans-serif; 
	font-size: .90em;
	color: #000000; 
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

.ToolHeaderTextLink
{
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-weight: bold;
}


.ToolHeaderLink
{
	color: #000000;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .90em;	
	text-decoration: none;
}

a.ToolHeaderLink:hover
{
	text-decoration: underline;
}


.ToolHeaderTextButton
{
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.ToolHeaderTextLine
{
	border-top: 1px solid black;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100% -10;
}

.ToolContentHeadline
{
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.5em;
	color: #990000; 
}

.ToolContentLine
{
}

.ToolContentRow
{
}

.HorizontalSpotlightText
{
	font-size: 1.1em;
}

/*

<!-- tool horizontal -->
<div class="ToolHorizontalbox">
<div class="ToolHorizontalimage">
<a title="xxx" href="/global/images/dnd_4new_tool_characterbuilder_pic3_en.jpg" rel="gb_imageset[ddi_x]">
<img class="toolimg" src="/dnd/images/4new/SubImages3.jpg" border="0"/>
</a>
</div>
<div class="ToolHorizontalbody">
   <div class="ToolHorizontalheadline">Headline</div>
   <div class="ModuleContent ModuleBoxLine1"><br/></div>
   <div class="ToolHorizontaltext">Text</div>
   <div class="ToolHorizontallink"><a href="#" class="Toollink3">Link</a></div>
</div>
</div>
<!-- end tool horizontal -->


*/





.ToolHorizontalintro
{
	position: relative;
	margin-top: 10px;	
	width: 677px;	
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.2em;
	color: #000000; 
}


.ToolHorizontalbox
{
	position: relative;
	float: left;
	margin-top: 10px;	
	width: 677px;
	height: 148px;
}

.ToolHorizontalimage
{
	position: relative;
	float: left;
	width: 223px;
	height: 148px;
	overflow: hidden;
	background-color: Black;
}

.toolimg
{
	width: 223px;
	height: 148px;
}

.ToolHorizontalbody
{
	position: relative;
	float: left;
	margin-left: 7px;
	float: left;
	width: 444px;	
	height: 148px;
}


.ToolHorizontalheadline
{
	position: relative;
	float: left;
	width: 444px;	
	height: 22px;
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.2em;
	color: #990000; 
}

.ToolHorizontaltext
{
	position: relative;
	float: left;
	width: 444px;
	height: 124px;
	font-family:'arial',helvetica,sans-serif; 
	font-size: 1.0em;
	color: #000000; 
	overflow: hidden;
}

.ToolHorizontallink
{
	position: relative;
	float: left;
	width: 444px;	
	height: 17px;
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.0em;
	color: #000000; 
	text-align: right;
}

.Toollink3
{
	text-decoration: none;
	color: #000000; 
}

a.Toollink3:hover
{
	text-decoration: underline;
}



.ArchiveIndexBody
{
	position: relative;
	margin: 0px auto;
	padding: 0px;
	width: 240px;
	height: 85px;
	overflow: hidden;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .85em;
	color: #000000; 	
    text-decoration:none;	
}


.ArchiveIndexHeadline
{
	position: relative;
	margin: 0px auto;
	width: 240px;
	height: 17px;
	overflow: hidden;
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.0em;
	color: #000000; 	
    text-decoration:none;
}


 
.ToolsScreenshotsRow
{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;	
}

.ToolsScreenshotsImageBox
{
	position: relative;
	float: left;
	width: 97px;
	margin-left: 10px;
}

.ToolsScreenshotsImage
{
	width: 97px;
	border: 0px;
}

.ToolsScreenshotsSpacer
{
	position: relative;
	float: left;
	width: 223px;
	margin-left: 10px;
	color: #FFF;
}


/* =============================================== */
/* Archive Sub-category Module */
/* =============================================== */

.ArchiveIndexWrapper 
{
	position: relative;
	float: left;
	margin: 0px auto;
	margin-left: 5px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 0px;
	width: 328px;
	height: 100px;
}

.ArchiveIndexImage 
{
	position: relative;
	float: left;
	margin: 0px auto;
	padding: 0px;
	width: 63px;
	height: 63px;
	background-color: Black;
}

.IndexImage 
{
	width: 63px;
	height: 63px;
}

.ArchiveIndexText 
{
	position: relative;
	float: left;
	margin: 0px auto;
	padding: 0px;	
	margin-left: 5px;
	width: 245px;
	height: 100px;
}

.ArchiveIndexHeadline
{
	position: relative;
	margin: 0px auto;
	width: 240px;
	height: 17px;
	overflow: hidden;
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: .85em;
	color: #000000; 	
    text-decoration:none;
}

.ArchiveIndexBody
{
	position: relative;
	margin: 0px auto;
	padding: 0px;
	width: 240px;
	height: 85px;
	overflow: hidden;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .80em;
	color: #000000; 	
    text-decoration:none;	
}

.IndexLink 
{
	color: #000000;
    text-decoration:none;
}

a.IndexLink:hover {
    text-decoration:underline;
}

.ToolBillboardBackground
{
    height: 449px;
    width: 687px;
    float: left;
    overflow: hidden;
}

.ToolBoxSpacer
{
    width: 687px;
    float: left;
    height: 5px;
    background-color: black;
}


/* toc support */

.tocbanner 
{
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
}

.tocheadline 
{
	position: relative;
	float: left;
	width: 220px;
	height: 24px;
	margin: 0px auto;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;	
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.3em;
	color: #990000; 
 
}

.tocdownload 
{
	position: relative;
	float: left;
	width: 350px;
	height: 22px;
	margin: 0px auto;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: right;
	line-height: 23px;
	font-size: .90em;
	font-weight: bold;
 
}

.tocbutton 
{
	position: relative;
	float: left;
	width: 92px;
	height: 22px;
	margin: 0px auto;
	margin-top: 5px;
	margin-bottom: 5px;
 
/*	z-index:100; */
}

.tocupsell 
{
	position: relative;
	float: left;
	width: 300px;
	height: 22px;
	margin: 0px auto;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: right;
	line-height: 23px;
	font-size: .90em;
	font-weight: bold;
 
}

.tocsubscribe 
{
	position: relative;
	float: left;
	width: 140px;
	height: 22px;
	margin: 0px auto;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
 
/*	z-index:100; */
}


.tocdownloadlink 
{
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.0em;
	color: #000000; 
	text-decoration: none;
}

a.tocdownloadlink:hover 
{
	text-decoration: underline;
}

.tocmainimage 
{
	width: 577px;
	height: 439px;
}
 


.tocrow 
{
	position: relative;
	float: left;
	width: 100%;
	margin: 0px auto;
	margin-top: 7px;
	margin-bottom: 7px;
 
}

.tocleft 
{
	position: relative;
	float: left;
	width: 315px;
	margin-left: 5px;
}

.tocright 
{
	position: relative;
	float: right;
	width: 315px;
	margin-right: 5px;
}

.tocsubhead
{
	position: relative;
	float: left;


	width: 100%;
	margin-top: 10px;
	margin-bottom: 3px;
 
	font-family:'arial',helvetica,sans-serif; 
	font-weight: bold;
	font-size: 1.5em;
	color: #990000; 
}

 

.tocline
{
    position: relative;
	float: left;
	margin: 0px auto;
	height: 1px;
    width: 100%;	
	border-bottom: 1px solid #ededed;
	background-color: #cccccc;
	overflow: hidden;
}

.tocissue 
{
	position: relative;
	float: left;
	width: 220px;
	margin-left: 3px;
	margin-right: 2px;
}

.tocissueimagebox 
{
	position: relative;
	text-align: center;
}

.tocissueimage 
{
	width: 134px;
	height: 102px;
	border: 0px;
}

.tocissuetexthead 
{
	position: relative;
	margin-top: 5px;
	margin-left: 10px;
	width: 190px;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .95em;

}

.tocissuetextbox 
{
	position: relative;
	margin-top: 5px;
	margin-left: 10px;
	width: 190px;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .75em;
}


.tochead 
{
	position: relative;
	font-weight: bold;	
	font-family:'arial',helvetica,sans-serif; 
	font-size: .95em;
}

.tochead a
{
	color: #000000;
	text-decoration: none; 
}

.tochead a:hover
{
	text-decoration: underline; 
}


.tocby 
{
	position: relative;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .80em;
	color: #888888; 
	font-style: italic;
}

.toctxt 
{
	position: relative;
	font-family:'arial',helvetica,sans-serif; 
	font-size: .80em;
	color: #000000; 	
}

.toclink 
{
	color: #000000; 
	text-decoration: none;
}



a.toclink:hover 
{
	text-decoration: underline;
}

.toccomp 
{
	position: relative;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
	width: 662px;
	
	font-family:'arial',helvetica,sans-serif; 
	font-size: .80em;
	font-weight: bold;
}

