@charset "UTF-8";
html{
	-webkit-text-size-adjust:100%;
	min-width: 768px;
}
body {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	background-color:#ECECFF;
	min-width: 768px;    
	/*background-image:url(images/1024bckgrnd20.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment:scroll;*/
}
p,h1,h2,h3,ul,ol,dl,img,hr,td,tr,line-height,div {
	margin: 0px;
	padding: 0px;
	border: none;
}
a:focus {
	outline: 0;
}
#container {
	width: 100%;
	min-width: 772px;
	margin: 0em auto;
	position: relative;
}
#maincontent{
	width: 100%;
	min-width: 768px;
	height: 100%;
	margin: 0em auto;
	overflow:auto;
	}
h1{
	font-family: "runda","open-sans",sans-serif;
	font-size:3.2em;
	color: #9A20B0;
	font-weight:700;
	line-height:100%;
	padding: .3em 0 .6em 0;
	}
h2 {
	font-family: "runda","open-sans",sans-serif;
	color: #9a20b0;
	font-size: 1.4em;
	font-weight: 700;
	line-height:120%;
	clear:left;
	padding: .3em 0em .5em 0em;
}
#dragondscrpt{
	width: 100%;
	float: left;
	clear:left;
	}
#dragonportrait{
	float:left;
	width: 8.5em;
	}
#dragontext{
	float:left;
	width: 58%;
	padding: 0em 0em .5em .6em;
		}
.dragoname{
	font-family: "open-sans",sans-serif;
	color: #9a20b0;
	font-weight: 700;
	font-size: 1em;
	line-height:132%;
	float: left;
	clear:left;
	}
.weapon{
	font-family: "open-sans",sans-serif;
	font-size: 1em;
	line-height:132%;
	color: #9a20b0;
	font-weight: 700;
	padding: 0px 0px 3px 0px;
	}
.abilities{
	font-family: "runda","open-sans",sans-serif;
	font-size: 1.2em;
	line-height:120%;
	color: #9a20b0;
	font-weight: 700;
	}
.inlineimg{
	float:left; 
	clear:left;
	padding: 1.2em .5em 1.75em 0px;
	}
.bodycopy{
	font-family: "open-sans",sans-serif;
	font-size:1.5em;
	color: #440D59;
	font-weight:500;
	line-height:132%;
	}
.scrollable{
	width:100%;
	padding-top: .5em;
	clear:both;
		}
.scrolltext{
	font-family: "open-sans",sans-serif;
	font-size:1.5em;
	color: #440D59;
	font-weight:500;
	line-height:200%;
	text-align: center;
	}
.bodycopy p{
	padding: 0 0 .75em 0;
	}
.bodycopy p a:link, .bodycopy p a:visited {
	color:  #9A20AA;
	font-family: "open-sans",sans-serif;
	text-decoration: none;	
}
.bodycopy p a:hover, .bodycopy p a:active {
	color: #BA40CA;
	outline: 0;	
}
.leftside{
	float: left;
	text-align: left;
	width: 48.25%;
	height: 67%;
	padding: 0px .4em 0px 0em;
	overflow: auto;
	}
.pbodycopy{
	font-family: "open-sans",sans-serif;
	font-size:1.5em;
	color: #440D59;
	font-weight:500;
	line-height:132%;
	}
.pbodycopy p{
	padding: 0 0 .75em 0;
	}
.pleftside{
	text-align: left;
	width: 100%;
	height:75%;
	padding: 0px 0em 0px 0px;
	overflow: auto;
	}
.rightside{
	text-align: left;
	float: right;
	width: 48.25%;
	height: 67%;
	padding: 0px .4em 0px 0em;
	overflow: auto;
	}
	
/*IL logo and back-to-top button for all cases except phones*/
	
#logonav{
	width: 15em;
	height: 5.6em;
	position: fixed;
	top: 1.7em;
	left: 87%;
	}

.logo{
	display:block;
	padding: 0px 2.1em 0px 0em;
	}
	
/*content styles for landscape and desktop*/

#titlebckgrnd{
	background-image:url(images/Titlescreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#titlepage{
	width: 90.234375%;
	height: 76.8em;
	max-width: 1024px;
	min-width: 768px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid transparent;
	}
#toc{
	width: 100%;
	height: 24em;
	min-width: 921px;
	margin-top: 44em;
	margin-left: auto;
	margin-right: auto;
	}
#overviewbckgrnd{
	background-image:url(images/Overviewscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#overview{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#interfacebckgrnd{
	background-image:url(images/Interfacescreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#theinterface{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#dragonsbckgrnd{
	background-image:url(images/Dragonscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#thedragons{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#maneuversbckgrnd{
	background-image:url(images/Maneuverscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#maneuvers{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#breathweaponsbckgrnd{
	background-image:url(images/BreathWeaponscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#breathweapons{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#meleecombatbckgrnd{
	background-image:url(images/MeleeCombatscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#meleecombat{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#dragonstorebckgrnd{
	background-image:url(images/DragonStorescreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#dragonstore{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#treasurestorebckgrnd{
	background-image:url(images/TreasureStorescreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#treasurestore{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#otherpanelsbckgrnd{
	background-image:url(images/OtherPanelscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#otherpanels{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#specialabilitiesbckgrnd{
	background-image:url(images/SpecialAbilitiescreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#specialabilities{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#findopponentbckgrnd{
	background-image:url(images/FindOpponentscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#findopponent{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
#shareresultsbckgrnd{
	background-image:url(images/ShareResultscreen.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#shareresults{
	width: 66.796875%;
	height: 76.8em;
	max-width: 1024px;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid transparent;*/
	}
			
/*@media only screen and (min-width:600px) and (max-width:1280px) and (orientation:portrait){*/
@media only screen and (max-width:1280px) and (orientation:portrait){
img{
	max-width:100%;
	}
#main content{
	width: 100%;
	height: 100%;
	margin: 0em auto;
	overflow: auto;
	}
#titlepage{
	width: 90.234375%;
	height: 102.4em;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid transparent;
	}
#logonav{
	width: 15em;
	height: 5.6em;
	position: fixed;
	top: 1.7em;
	left: 83%;
	}
#toc{
	width: 100%;
	height: 24em;
	min-width:655px;
	margin-top: 57.3em;
	margin-left: auto;
	margin-right: auto;
	}
.leftmost{
	float: left;
	text-align: left;
	width: 25%;
	min-width: 163px;
	padding: 0px 0em 0px .75em;
	}
.leftcenter{
	float: left;
	text-align: left;
	width: 25%;
	min-width: 163px;
	padding: 0px 1.25em 0px 0em;
	}
.rightcenter{
	float: left;
	text-align: left;
	width: 21%;
	min-width: 137px;
	padding: 0px 0px 0px 0px;
	}
.rightmost{
	text-align: left;
	float: left;
	width: 24.5%;
	min-width: 163px;
	padding: 0px 0em 0px 0em;
	}
.navcopy{
	font-family: "open-sans",sans-serif;
	font-size: 1.5em;
	font-weight:500;
	color: #500D63;
	line-height: 100%;
	}
#overviewbckgrnd{
	background-image:url(images/Overviewscreen.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}
#overview{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#interfacebckgrnd{
	background-image:url(images/Interfacescreen.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
#theinterface{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#dragonsbckgrnd{
	background-image:url(images/Dragonscreen.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}
#thedragons{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#maneuversbckgrnd{
	background-image:url(images/Maneuverscreenlong.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
#maneuvers{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#breathweaponsbckgrnd{
	background-image:url(images/BreathWeaponscreenlong.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#breathweapons{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#meleecombatbckgrnd{
	background-image:url(images/MeleeCombatscreenlong.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#meleecombat{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#dragonstorebckgrnd{
	background-image:url(images/DragonStorescreenlong.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}
#dragonstore{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#treasurestorebckgrnd{
	background-image:url(images/TreasureStorescreenlong.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
#treasurestore{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#otherpanelsbckgrnd{
	background-image:url(images/OtherPanelscreenlong.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}
#otherpanels{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#specialabilitiesbckgrnd{
	background-image:url(images/SpecialAbilitiescreenlong.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
#specialabilities{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#findopponentbckgrnd{
	background-image:url(images/FindOpponentscreenlong.png);
	background-repeat: no-repeat;
	background-position: center top;
	}
#findopponent{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
#shareresultsbckgrnd{
	background-image:url(images/ShareResultscreen.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	}
#shareresults{
	width: 89%;
	height: 102.4em;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	}
.leftside{
	float: left;
	text-align: left;
	width: 48.25%;
	height: 74%;
	padding: 0px .4em 0px 0px;
	overflow: auto;
	}
.rightside{
	text-align: left;
	float: right;
	width: 48.25%;
	height: 74%;
	padding: 0px .4em 0px 0em;
	overflow: auto;
	}
	} /*tablets*/
	
/*@media only screen and (min-width:600px) and (max-width:1280px) and (orientation:landscape){*/
@media only screen and (max-width:1280px) and (orientation:landscape){
img{
	max-width:100%;
	}
.leftmost{
	float: left;
	text-align: left;
	width: 24%;
	min-width:221px;
	padding: 0px .25em 0px .75em;
	}
.leftcenter{
	float: left;
	text-align: left;
	width: 25%;
	min-width:230px;
	padding: 0px .75em 0px 0px;
	}
.rightcenter{
	float: left;
	text-align: left;
	width: 21%;
	min-width:193px;
	padding: 0px 0em 0px 0px;
	}
.rightmost{
	text-align: left;
	float: right;
	width: 25%;
	min-width:230px;
	padding: 0px 0em 0px 0em;
	}
.navcopy{
	font-family: "open-sans",sans-serif;
	font-size: 2em;
	font-weight:500;
	color: #500D63;
	line-height: 100%;
	}
} /*tablets*/

@media only screen and (min-width:1281px){
h1{
	font-family: "runda","open-sans",sans-serif;
	font-size:3.2em;
	color: #9A20B0;
	font-weight:500;
	line-height:100%;
	padding: .3em 0 .6em 0;
	}
h2 {
	font-family: "runda","open-sans",sans-serif;
	color: #9a20b0;
	font-size: 1.4em;
	font-weight: 500;
	line-height:120%;
	clear:left;
	padding: .3em 0em .5em 0em;
}
.abilities{
	font-family: "runda","open-sans",sans-serif;
	font-size: 1.2em;
	line-height:120%;
	color: #9a20b0;
	font-weight: 500;
	}
.leftmost{
	float: left;
	text-align: left;
	width: 24%;
	min-width:221px;
	padding: 0px .25em 0px .75em;
	}
.leftcenter{
	float: left;
	text-align: left;
	width: 25%;
	min-width:230px;
	padding: 0px .75em 0px 0px;
	}
.rightcenter{
	float: left;
	text-align: left;
	width: 21%;
	min-width:193px;
	padding: 0px 0em 0px 0px;
	}
.rightmost{
	text-align: left;
	float: right;
	width: 25%;
	min-width:230px;
	padding: 0px 0em 0px 0em;
	}
.navcopy{
	font-family: "open-sans",sans-serif;
	font-size: 2em;
	font-weight:500;
	color: #500D63;
	line-height: 100%;
	}
} /*desktops*/
	
/*toc and footer for all cases except phones*/
	
nav ul{
	list-style: none;
	text-decoration: none;
	}
nav ul li{
	padding-bottom: 1.6em;
	}
nav ul li a:link, nav ul li a:visited {
	display:block;
	color:  #500D63;
	font-family: "open-sans",sans-serif;
	text-decoration:none;	
}
nav ul li a:hover, nav ul li a:active {
	color: #9A20AA;
	outline: 0;	
}

#charts{
	width: 100%;
	height: 4.5em;
	background-color: #97A2C6;
	opacity: 0.825;
	position: fixed;
	left:0em;
	bottom: 0;
	}
.footercopy{
	font-family: "open-sans",sans-serif;
	font-size: 1.8em;
	font-weight:300;
	color: #FCFBFF;
	line-height: 100%;
	width: 32.8%;
	text-align:center;
	padding-top: .85em;
	}
footer ul{
	list-style: none;
	text-decoration: none;
	}
footer ul li{
	float: left;
	}
footer ul li a:link, footer ul li a:visited {
	display:block;
	color:  #FCFBFF;
	font-family: "open-sans",sans-serif;
	text-decoration:none;	
}
footer ul li a:hover, footer ul li a:active {
	color:  #FFE300;
	outline: 0;	
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 3px;
}
::-webkit-scrollbar:horizontal {
    height: 3px;
}
::-webkit-overflow-scrolling: {
    touch;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    /*border: 1px solid #ECECFF; /* should match background, can't be transparent */
    background-color: rgba(148, 159, 188, .5);
}
::-webkit-scrollbar-track { 
    background-color: #DCDCEF; 
    border-radius: 4px; 
}