/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dd,dt,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

ul.list {
	margin-left:40px;
	margin-right:30px;
	margin-bottom:20px
}
ol.numbered{
	margin-left:40px;
	margin-right:30px;
	margin-bottom:20px
}
.ow-img-container {
	display:inline-block;
}

.nextpage {
	border:none;
	vertical-align:middle;
}

.nextpage-txt {
	text-align:ceter;
	font-weight:bold;
	font-size:1.5em
}
.realmtext {
	font-size:.7em;
}
.tipnote {
	color:#FF00FF;
}

.ad-under-image {
	width:85%;
	margin:0 auto;
	border: 1px solid #002D0B;
}
.highlight {
	background-color:#484700;
}

.guide-container {
	display:inline-block;
	margin:0 0 10px 0;
}
.steps {
	width:50%;
	display: table-cell;
	vertical-align: middle;
}
.steps-container {
	margin:0 0 8px;
	display:inline-block
}
.image-container {
	padding-left:20px;
	padding-top:20px;
	vertical-align:middle;
	margin:auto 0 auto;
}
.image-steps {
	text-align: middle;
	margin:0 0 8px;
	display:inline-block;
}
.lvl-zone {
	font-weight:bold;
	color:#130301;
}

.bottom-menu-container {
	display:inline-block;
	width:100%;
	margin:0 auto 10px 20%;
}
.left-side-menu {
	width:50%;
	display: table-cell;
	vertical-align: middle;
}
.steps-left-menu {
	padding-right:10px;
}
.left-menu-container {
	margin:0 0 8px;
	display:inline-block
}
.menu-container-right {
	vertical-align: text-top;
	padding-left:20px;
	padding-top:20px
}
.menu-steps2 {
	margin:0 0 20px;
	display:inline-block;
	text-align:left
}
.leveling-menu {
	font-size:10.0pt;
	font-family:"Microsoft Sans Serif"
}

.effectback {
  display: inline-block;
  background: url('//www.joanasworld.com/images/hakkar.jpg') no-repeat;
    margin: 0 auto;
}
.effectfront {
  opacity: 0;
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  opacity: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.menutitle {color: #FFCF75; font-weight: bold;}

a:link {color:blue; text-decoration: none; }
a:active {color:blue; text-decoration: none; }
a:visited {color:blue; text-decoration: none; }
a:hover {color:red; text-decoration: underline; }

A.menu:link {color: #FEFEFE; text-decoration: none}
A.menu:visited {color: #FEFEFE; text-decoration: none}
A.menu:active {color: #FEFEFE; text-decoration: none}
A.menu:hover {color: #EC1818; text-decoration: underline}

.blizzguidecolor {
	color:red;
	font-weight:bold;
}
.joanacolor {
	color:blue;
	font-weight:bold;
}
.yellow-text {
	color: yellow;
}
.coming-soon {
	color: yellow;
	font-weight:bold;
}
.white {
	color: white;
	font-weight:bold;
}
.note-color {
	color: red;
	font-weight:bold;
}
.bottom-menu-title {
	color:#FFCF75;
	font-weight:bold;
}

.note-colorz {
	color:#FFCF75;
	font-weight:bold;
}
.note-color-slim {
	color:red;
}
img {
	max-width:100%
}
  
img, fieldset {
	border:none;
}

img.center {
	display: block;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	max-width: 100%;
}
img.right {
	float:right;
	margin:5px 0 9px 12px;
	max-width:60%;
}
img.right2 {
	float:right;
	margin:5px 0 9px 12px;
	max-width:60%;
}
.imgrightbox {
	float:right;
	margin:5px 25px 9px 12px;
}
img.rightstay {
	max-width:75%;
	float:right;
	margin:0 0 10px 10px;
}
img.leftstay {
	float:left;
	margin:4px 10px 10px;
}
img.bannerleft {
	margin:0 0 0 -13px;
}

.small-text {
	font-size:.79em;
}
p.center {
	text-align: center;
}
.center {
	text-align: center;
}

.boldhead {
	font-weight:bold;
	color:#130301;
}


a.member img {
border: 2px solid #B1B3FF;
}
a.member img:hover {
border: 2px solid #C0C0FF;
}
a img.noborder {
	border:none;
}
.right-image1 {
	display:flex;
}
.right-image2 {
	max-width:200px;
}
.right-image3 {
	float:right;
}


@media (max-width:512px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}
html *
{
   font-size: 1em;
   color: #000000;
   font-family: verdana !important;
    line-height:1.5
}
body {
	padding:0 1em;
	min-width:46em; /* for pre CSS3 browsers */
	font:normal 85%/150% verdana,arial,helvetica,sans-serif;
	background:url(http://www.blizzardguides.com/images/bg3.gif);
	color:#FFFFFF;
}

a,
#socialLinks i {
	-webkit-transition:color 0.3s, background 0.3s;
	transition:color 0.3s, background 0.3s;
}

#top {
	max-width:58em;
	margin:0 auto;
	background:url(//www.blizzardguides.com/images/bg3.gif) 0 0 no-repeat;
}

* html #top {
	/*
		legacy IE can't do max-width, so shove fixed width at it, OH WELL!
		The people stuck in the 1990's should be thankful I even bother.
	*/
	width:50em;
}


h3 {
	text-align:center;
	color:#130301;
	font-size: 1.5em;
	font-weight:bold;
	margin-bottom:.7em;
}
h4 {
	vertical-align: baseline;
	display:inline;
	color: #130301;
	font-size: 1em;
}

h5 {
	margin: 20px auto 20px auto 0;
	color:#130301;
	font-size: 1.2em;
}

#socialLinks {
	float:right;
	text-align:center;
	margin-top:4px
}

#socialLinks ul {
	list-style:none;
}

#socialLinks li {
	display:inline;
	vertical-align:top:
}

#socialLinks a {
	display:inline-block;
	margin-left:.3em;
	text-align:center;
	text-decoration:none;
}

.socialbutton {
	border:none;
}
 
.socialbutton:hover {
	border:none;
	-webkit-filter: brightness(125%);
}

#contentWrapper {
	background:white;
	float:right;
	width:100%;
	clear:both;
}
/* #homepage menu*/
.news-date {
	text-align: center;
	font-size:1.2em;
	color:#130301;
	font-weight: bold;
	margin: .60em 0 .48em 0;
}

.newsitem {
	overflow:auto;
	margin-bottom:11px;
}
.image-item {
    float:left;
    width:100px;
}
.post {
    margin-left:114px;
}

.item-date {
	font-weight:bold;
	color:#130301;
	
}
.item-system {
	font-weight:bold;
	color:#FF0000;
	
}
.item-type {
	font-weight:bold;
	color:#FFCF75;
}

.membermenu {
	display:inline-block;
	clear:left;
	list-style:none;
	padding:1em 0;
	margin:0 auto 0 auto
}
.membermenu li {
	display:inline;
}
.membermenu a {
	display:inline-block;
	margin-right:0.2em;
	padding:0.5em 1em;
	text-decoration:none;
	background:#050;
	color:#9F8;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
	text-shadow:
		2px 0 4px #000,
		-2px 0 4px #000;
}
.membermenu2 {
	display:inline-block;
	clear:left;
	list-style:none;
	padding:1em 0;
	margin:0 auto 0 auto
}
.membermenu2 li {
	display:inline;
}
.membermenu2 a {
	display:inline-block;
	margin-right:0.2em;
	padding:0.5em 1em;
	text-decoration:none;
	background:#050;
	color:#D6D7FE;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
	text-shadow:
		2px 0 4px #000,
		-2px 0 4px #000;
}
.synergy {
	font-size:2em
}
.member-hero-ad {
	padding:10px;
	width:75%;
	border:1px solid #800000;
	margin:0 auto 15px auto
}
.membermenu a:active,
.membermenu a:focus,
.membermenu a:hover {
	background:#053805;
}
.membermenu2 a:active,
.membermenu2 a:focus,
.membermenu2 a:hover {
	background:#053805;
}
.membermenu a {
	padding:1em;
	margin-bottom:0.6em;
}

#content {
	margin-left:15em; /* #extras width plus any desired margin*/
	background:white;
	padding:2px 1.5em 0;
}
      
#content h1 {
	padding-bottom:1.25em;
	padding-top:1.15em;
	font:bold 125%/120% verdana,arial,helvetica,sans-serif;
	font-size:1.8em;
	color:#130301;
	text-align:center;
}

#content p {
	padding:2px 1.5em 0;
	padding-bottom:1.5em;
}

#indent {
	float:left;
	padding-left:13em;
}
      
#left-side {
	float:right;
	padding-top:1.5em;
	font-size:1.19em;
	width:13em;
	margin-right:-13em; /* same as width, makes 0 width in flow */
}

#left-side h6 {
	padding-bottom:0.4em;
	text-align:center;
	font:bold verdana,arial,helvetica,sans-serif;
	color:#FFCF75;
}

#left-side ul {
	list-style:none;
	padding-bottom:1em;
}

#left-side ul li:before {
	content:"> ";
	color:#280;
}

#footer {
	border-top:solid #004000 2px;
	clear:both;
	padding:1.5em;
	text-align:center;
	color:#CF8;
}
#footer-links {
	line-height: 160%;
	bottom: 0;
	padding:.9em;
	text-align:center;
	color:#130301;
}  
      

.videoFrame {
	position:relative;
	width:100%;
	margin-bottom:1.5em;
}

.videoFrame iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.vidframe2 {
	padding-bottom:56.25%;
}
      
#page-heading {
  margin-right: 250px;
}
#pagetype {
  float: left;
  min-width: 300px;
  color: #130301;
  font-weight: bold;
  font-size:1.21em;
	font-style: italic;
}
#sociallikes {
  float: right;
  width: 250px;
  margin-right: -250px;
  	vertical-align: top;
	text-align:right;
}
#sociallikes-bottom {
	text-align:center;
  	vertical-align: top;
}

#fb-box {
	margin:0 auto;
  	max-width: 485px;
}
#cleared {
  clear: both;
}
      
#author-date {
    margin-top: 0px;
  overflow: auto;
  width:100%;
     color: #130301;
     font-size:.7em;
   	 font-style: italic;
    border-top-color: #404040;
      border-top-style: dotted;
      border-top-width: 1px;
}



@media (min-width:49em) {
.member-updates {
	display: none;
}
}
@media (max-width:49em) {
  #indent { display: none; }   /* hide it elsewhere */
.member-updates {
	font-size:1.2em;
	text-decoration: underline
}
.ow-news-free {
	border-bottom:1px solid #800000;
	border-right:none;
	padding-right:0px;
	padding-bottom:40px
}

}
@media (max-width:32em) {
	#sociallikes {
		float: left;
		width: 310px;
		margin-right: 0px;
		text-align:left;
}
}
@media (max-width:27em) {
img.right2 {
	display:block;
	float:none;
	margin-left: auto;
    margin-right: auto;
	margin:0 0 9 0;
	max-width:100%;
}
}
@media (max-width:44em) {
	body {
		min-width:256px;
	}


	#content,
	#left-side {
		text-align:left;
	}

img.right {
	display:block;
	float:none;
	margin-left: auto;
    margin-right: auto;
	margin:0 0 9 0;
	max-width:100%;
}
.image-again {
	display:none;
}
.imgrightbox {
	display:block;
	float:none;
	margin-left: auto;
    margin-right: auto;
	display: table;
	margin: 0 auto;
}
.steps {
	display:block;
	width:100%;
}
.image-container {
	padding-left:0px;
}
.steps-left {
	border-right:none;
	padding-right:0px;
}
.bottom-menu-container {
	margin:0 auto 10px 25%;

}
} /* max-width:40em */



@media (max-width:65em) {
	body {
		padding:0;
	}
#left-side { display: none; }   /* hide it elsewhere */
	#content,
	#left-side {
		float:none;
		width:auto;
		margin:0;
		padding:0.5em;
	}
	#content {
		-webkit-border-radius:0;
		border-radius:0;
		-webkit-box-shadow:none;
		box-shadow:none;
	}
	#footer {
	border-top:solid #004000 2px;
	}
}
@media (min-width:65em) {
.show-shrunk {
	display: none !important;	}
}



@media (max-width:34em) {
.bottom-menu-container {
	width: 100%;
	margin:0 auto;
}
}


@media (max-width:28em) {
.left-side-menu {
	display:block;
	width:100%;
	float:none; 
}
.menu-container-right {
	padding-left:0px;
}
.steps-left-menu {
	padding-right:0px;
}

li.twitching {
	display: inline !important;
}
}

@media screen and (min-width: 34em) {
	li.twitching {
	display: none !important;
}
}

@media (max-width:34em) {
	li.twitching {
	display: inline;
}
.twitching2 {
	display:none
}
#socialLinks {
	float:middle;
	text-align:center;
	padding:0em 0;
	margin-bottom:-23px
}
}


@media
	(-webkit-min-device-pixel-ratio:2) and (min-width:1600px), 
	(min-resolution:172dpi) and (min-width:1600px)
{
	html { font-size:200%; }
} /* kindle fire HDX and retina */