/** style.css **/
/** overall Styles **/
html, body, div{ margin: 0; padding: 0; font-family: Tahoma,Verdana,Segoe,sans-serif; font-size: 10pt; letter-spacing: 1px;}

h1, h2, h3, h4, h5, h6, em{font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; margin: 0; padding: 0; font-style: italic;}
p, em{margin: 0; padding: 10px 0;}
.right {float: right;}
a {color: #5aa14e;}
.dragondice a {color: #ea2;}
.daemondice a {color: #951b1e;}

a:hover {color: #000;}


ul {margin: 0; padding: 10px 0 10px 20px;}
ol {margin: 0; padding: 10px 0 10px 25px;}
li {padding-bottom: 5px;}
h1, h2, h3, h4, h5, h6 {margin-bottom: 10px;}
h1 {font-size: 40pt;}
h2 {font-size: 32pt;}
h3 {font-size: 28pt;}
h4 {font-size: 24pt;}
h5 {font-size: 20pt;}
h6 {font-size: 17pt;}

hr {border: none; height: 5px; background-color: #5aa14e; margin: 10px 0 10px;}
.dragondice hr{background-color: #ea2;}
.daemondice hr{background-color: #951b1e;}
a img {border: none;}
/** Layout Styles **/
body{background: url("img/bg.jpg") center 0;}
#overwrap{ width: 100%; background: url("img/headerbar-green.jpg") repeat-x 0 0;}
.dragondice {background: url("img/headerbar-yellow.jpg") repeat-x 0 0 !important;}
.daemondice {background: url("img/headerbar-red.jpg") repeat-x 0 0 !important;}
.ie #overwrap {text-align: center;}
#wrapper{width: 1000px; margin: 0 auto;}
.ie #wrapper {text-align: left;}
#header{min-height: 220px; background: url("img/header-wide.jpg") no-repeat center 0; margin-bottom: 20px;}
.dragondice #header{background: url("img/header-wide-dragon.jpg") no-repeat center 0;}
.daemondice #header{background: url("img/header-wide-daemon.jpg") no-repeat center 0;}
.ie #header{ height: 220px; }
#menulink {display: none;}


#header img {display: block; float: left;}
#nav {width: 528px; float: left; margin-top: 71px; margin-right: 12px; margin-left: 7px;}
.ie #nav {margin-left: 10px;}
#nav ul {list-style-type: none; margin: 0; padding: 0;}
#nav .primary{ }
#nav .primary li{display: block; width: 97px; float: left; margin-right: 8px; margin-bottom: 14px;}
#nav .primary a {color: white; font-size: 12pt; display: block; text-align: center; background-color: #425f35; text-decoration: none; padding: 6px 0 7px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);}
.dragondice #nav .primary a{background-color: #f1b951;}
.daemondice #nav .primary a{background-color: #a24031;}
#nav .primary a:hover{text-shadow: none; background-color: #213d1e;}
.dragondice #nav .primary a:hover{background-color: #c28a26;}
.daemondice #nav .primary a:hover{background-color: #7d181a;}
#nav .secondary {display: table; width: 518px; margin-top: 5px;}
.ie #nav .secondary {width: 510px;}
.ie #nav .secondary {margin-top: 0px;}
#nav .secondary li{display: table-cell; }
#nav .secondary a { color: #000; font-size: 11pt; display: block; text-align: center; text-decoration: none; padding: 6px 13px 7px; border-left: 1px solid #000;}
.dragondice #nav .secondary a {padding: 6px 12px 7px;}
#nav .secondary a:hover {background-color: #2e5328; color: #fff;}
.dragondice #nav .secondary a:hover{background-color: #ea2;}
.daemondice #nav .secondary a:hover{background-color: #951b1e;}
#nav .last-edge {border-right: 1px solid #000;}

#nav2 {display: none;}

.ie #nav {width: 516px;}
.ie #nav .primary li {width: 95px;}

#navbg {display: none;}

#content{clear: both;}
#cantrip{margin-bottom: 20px;}
#footer{}
#footer .copyright{ line-height: 20px; margin-bottom: 40px;}

.copyright p {margin: 0;}
.copyright img{margin-top: 8px;}


.newsbar{width: 490px; float: left; margin-bottom: 30px;}
.newsleft {margin-right: 20px;}
.newsheader{color: white; background: url("img/boxheader.png") no-repeat 0 0; height: 30px; font-size: 16pt; padding: 2px 0 0 30px;}
.newscontent{border: 5px solid black; border-top-width: 0; padding: 15px; background-color: #fff;}

/** Specific Styles **/
.hidelinktext {text-indent: -5000px; color: rgba(0,0,0,0);}
.largebox{
		width: 320px; 
		height: 660px; 
		display: inline-block; 
		float: left; 
		margin-right: 20px; }

.medbox{
		width: 320px; 
		height: 320px; 
		display: inline-block; 
		float: left; 
		margin-bottom: 20px;
		}
.smallbox{
		width: 320px; 
		height: 150px; 
		display: inline-block; 
		float: left; 
		margin-bottom: 20px;
		}


.smallbox-footer{
		width: 320px; 
		height: 150px; 
		display: inline-block; 
		float: left; 
		margin-left: 20px;
		margin-bottom: 20px;
		}
		
.sfr-footer{margin-left: 0;}


#dragon-link{background: url("img/dragondice-bigbox.png") no-repeat 0 0;}
#daemon-link{background: url("img/daemondice-bigbox.png") no-repeat 0 0;}
#sfr-link{background: url("img/sfr-square.png") no-repeat 0 0;}
#store-link{background: url("img/store-box.png") no-repeat 0 0;}
#forum-link{background: url("img/forum-box.png") no-repeat 0 0;}

#dragon-link:hover{background: url("img/dragondice-bigbox-hover.png") no-repeat 0 0;}
#daemon-link:hover{background: url("img/daemondice-bigbox-hover.png") no-repeat 0 0;}
#sfr-link:hover{background: url("img/sfr-square-hover.png") no-repeat 0 0;}
#store-link:hover{background: url("img/store-box-hover.png") no-repeat 0 0;}
#forum-link:hover{background: url("img/forum-box-hover.png") no-repeat 0 0;}

#dragon-link-footer{background: url("img/dragondice-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}
#daemon-link-footer{background: url("img/daemondice-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}
#sfr-link-footer{background: url("img/sfr-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}

#dragon-link-footer:hover{background: url("img/dragondice-smallbox-hover.png") no-repeat 0 0;}
#daemon-link-footer:hover{background: url("img/daemondice-smallbox-hover.png") no-repeat 0 0;}
#sfr-link-footer:hover{background: url("img/sfr-smallbox-hover.png") no-repeat 0 0;}



/** page 2 content **/
#contentbox{ margin-bottom: 50px;}
#contentheader{}
#header-corner{height: 30px; width: 30px; background: url("img/content-top-corner.png") no-repeat 0 0; display: block; float: left;}
#header-edge{height: 29px; border-top: 1px solid #acacac; border-right: 1px solid #acacac; display: block; float: left; width: 969px; background-color: #fff;}
#contentmain{border-left: 1px solid #acacac; border-right: 1px solid #acacac; padding: 0 20px; width: 958px; clear: both; background-color: white; clear: both; display: inline-block;}
#contentfooter{}
#footer-edge{height: 29px; border-bottom: 1px solid #acacac; border-left: 1px solid #acacac; display: block; float: left; width: 969px; background-color: #fff;}
#footer-corner{height: 30px; width: 30px; background: url("img/content-bottom-corner.png") no-repeat 0 0; display: block; float: left;}

.contentbipanel {width: 458px; display: table-cell; vertical-align: top; padding-left: 20px; margin: 0;}
.bipanelleft {padding: 0 20px 0 0; border-right: 1px solid black;}
.contentbipanel img {padding: 10px 0;}


/** dcm styles **/
/** 500, 660, 320 **/
.speciesec {width: 225px; display: inline-block;}
.speciesec p {padding: 6px 0 2px 5px;}
select{ height:22px; border: 1px solid #999; width: 222px;}

.dicetablehalf table, .dicetablefull table{min-height: 240px; border-collapse: collapse; border-spacing: 0; width: 100%}

.dicetablehalf a, .dicetablefull a {padding: 5px 10px 4px; display: inline-block; margin: 5px; background-color: #ea2; color: #fff; text-decoration: none;}
.dicetablehalf a:hover, .dicetablefull a:hover {background-color: #d4971e;}
.dicetablehalf{width: 47.5%; padding: 0 1%; display: inline-block; vertical-align: top; text-align: center;}
.ie .dicetablehalf {width: 47%;}
.dicetablefull{width: 100%; text-align: center;}



/** id icon table **/
#idgrid { margin-top: 20px;}
#idgrid table {border-collapse: collapse;}
#idgrid table tr {}
#idgrid table tr th {border: 1px solid #000; border-bottom-width: 2px;}
#idgrid table tr th h3 {padding: 0; margin: 0;}
#idgrid table tr td {border: 1px solid #000; width: 22%; text-align: center; vertical-align: bottom; padding: 0;}
#idgrid table tr td:first-child {width: 12%; border-right-width: 2px; vertical-align: middle;}
#idgrid table tr td img {margin: 0; padding: 6px 0 3px; }
#idgrid table tr td p {padding: 0; margin: 3px 0 6px;}

/** Responsive Styles **/
@media screen and (max-width: 1000px) {
#overwrap{background: url("img/headerbar-green.jpg") repeat-x 0 -98px;}
.dragondice {background: url("img/headerbar-yellow.jpg") repeat-x 0 -98px !important;}
.daemondice {background: url("img/headerbar-red.jpg") repeat-x 0 -98px !important;}
#wrapper{width: 660px;}
#header{min-height: 110px; background: none;}
.dragondice #header{background: none;}
.daemondice #header{background: none;}
.ie #header{height: 110px;}
#nav {width: 498px; margin-top: 10px; margin-right: 0; display: block; margin-left: 20px;}

.ie #nav{width: 488px; margin-left: 30px;}

#sfr-link-footer{background: url("img/sfr-square.png") no-repeat 0 0; width: 320px; height: 320px;}
#sfr-link-footer:hover{background: url("img/sfr-square-hover.png") no-repeat 0 0;}

#nav .primary li{width: 91px; margin-left: 8px; margin-right: 0;}
#nav .secondary {display: table; width: 490px; margin-top: 10px; margin-left: 8px;}
#nav .sec-double {margin-bottom: 10px;}
.ie #nav .secondary {width: 480px;}
.ie #nav .primary li{width: 89px;}

.dragondice #nav .secondary li a{font-size: 10pt;}

#dice {display: none !important;}
#logo {width: 137px;}

.largebox{

		margin: 0 20px 20px 0;}
.largeright{margin: 0 0px 20px 0;}
.medbox{

		margin: 0px 20px 20px 0px;
		}
.smallbox{

		margin: 0px 0px 20px 0px;
		}
		

/** page 2 content **/
#header-edge{width: 629px;}
#contentmain{width: 618px;}
#footer-edge{ width: 629px;}

.contentbipanel {width: auto; display: block; padding: 0; margin: 0;}
.bipanelleft {border-right: none; border-bottom: 5px solid #5aa14e; padding-bottom: 10px; margin-bottom: 10px;}
.dragondice .bipanelleft{border-bottom: 5px solid #ea2;}
.daemondice .bipanelleft{border-bottom: 5px solid #951b1e;}

#cantrip img{width: 660px; }

.newsbar{width: 320px;}

/** dcm styles **/
.speciesec {width: 200px;}
select{ width: 195px;}


}
@media screen and (max-width: 660px) {
#overwrap{background: url("img/headerbar-green.jpg") repeat-x 0 -92px;}
.dragondice {background: url("img/headerbar-yellow.jpg") repeat-x 0 -92px !important;}
.daemondice {background: url("img/headerbar-red.jpg") repeat-x 0 -92px !important;}
#wrapper{width: 320px;}
#header{background: none;}

#menulink {display: block; padding: 15px; background-color: #425f35; float: right; position: relative; z-index: 999;}
#menulink img {-webkit-filter: drop-shadow(2px 3px 4px #333);
    	filter: drop-shadow(2px 3px 4px #333);}
#menulink:hover {background-color: #213d1e; cursor: pointer;}

.dragondice #menulink {background-color: #f1b951;}
.dragondice #menulink:hover {background-color: #c28a26;}

.daemondice #menulink {background-color: #a24031;}
.daemondice #menulink:hover {background-color: #7d181a;}

#nav {display: none;}

#nav2 {width: 310px; display: none; z-index: 1000; position: absolute; top: 58px; border: 5px solid #425f35; background-color: #fff;}
.dragondice #nav2 {border-color: #f1b951;}
.daemondice #nav2 {border-color: #a24031;}
#navbg {display: none; position: absolute; z-index: 998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);}


#nav2 ul {list-style-type: none; margin: 0; padding: 0;}
#nav2 .primary li{display: block; width: 310px; margin: 0; padding: 0;}
#nav2 .primary a {color: white; font-size: 12pt; display: block; text-align: left; background-color: #425f35; text-decoration: none; padding: 11px 0 12px 20px; margin: 0; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); border-bottom: 1px solid #213d1e;}
.dragondice #nav2 .primary a {background-color: #f1b951; border-bottom: 1px solid #a1721f;}
.daemondice #nav2 .primary a {background-color: #a24031; border-bottom: 1px solid #5b1213;}
#nav2 .primary a:hover{text-shadow: none; background-color: #213d1e;}
.dragondice #nav2 .primary a:hover{background-color: #c28a26; border-bottom: 1px solid #a1721f;}
.daemondice #nav2 .primary a:hover{background-color: #7d181a; border-bottom: 1px solid #5b1213;}

#nav2 .secondary {display: block; width: 310px; margin: 0px; clear: both;}
#nav2 .secondary li{display: block; margin: 0; padding: 0; }
#nav2 .secondary a { color: #000; font-size: 11pt; display: block; text-align: left; text-decoration: none; padding: 11px 0px 12px 20px; border-left: 0; border-bottom: 1px solid #213d1e;}
#nav2 .secondary a:hover {background-color: #2e5328; color: #fff;}
.dragondice #nav2 .secondary a:hover {background-color: #ac7a21;}
.daemondice #nav2 .secondary a:hover {background-color: #711618;}
#nav2 .last-edge {border-right: 0;}



#dragon-link{background: url("img/dragondice-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}
#daemon-link{background: url("img/daemondice-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}
#sfr-link{background: url("img/sfr-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}

#dragon-link:hover{background: url("img/dragondice-smallbox-hover.png") no-repeat 0 0;}
#daemon-link:hover{background: url("img/daemondice-smallbox-hover.png") no-repeat 0 0;}
#sfr-link:hover{background: url("img/sfr-smallbox-hover.png") no-repeat 0 0;}

#sfr-link-footer{background: url("img/sfr-smallbox.png") no-repeat 0 0; width: 320px; height: 150px;}
#sfr-link-footer:hover{background: url("img/sfr-smallbox-hover.png") no-repeat 0 0;}

.largebox{

		margin: 0 0 20px;}

.medbox{

		margin: 0 0 20px;
		}
.smallbox{

		margin: 0 0 20px;
		}
		
.smallbox-footer{ 
		margin-left: 0px;
		}
		
.sfr-footer{margin-left: 0;}		
		
/** page 2 content **/
#header-edge{width: 289px;}
#contentmain{width: 298px; padding: 0 10px;}
#footer-edge{ width: 289px;}				


.contentbipanel img {max-width: 290px;}
.ie .contentbipanel {width: 300px;}

#cantrip img{width: 320px; }

.newsbar{width: 320px;}

.copyright {font-size: 8pt;}
.copyright .right{float: none; margin-bottom: 10px; margin-top: 0px;}


/** dcm **/
.speciesec {width: 300px;}
select {width: 295px;}

.dicetablehalf{width: 100%; padding: 0; display: block; padding-bottom: 10px;}

#idgrid {letter-spacing: 0px;}

}

/* last part preload */
body:after{
    display: none;
    content: url("img/dragondice-bigbox-hover.png") url("img/daemondice-bigbox-hover.png") url("img/sfr-square-hover.png") url("img/store-box-hover.png") url("img/forum-box-hover.png");
}