*:not(h4){
    padding:0;
    margin:0;
}


#charandattackcontainer {
	display:inline-block;
	width:150px;
	vertical-align: top;
}

.selecttitle {
	width:150px;
	height:30px;
	background-color:black;
	color:white;
	font-size:18px;
	text-align:center;
}

.selecttitle p {
	margin:0;
	padding:3px 0;
}

#charcontainer {
	width:150px;
	height:200px;
	display:inline-block;
}

.char {
	width:130px;
	height:40px;
	text-align: center;
	background-color:#535353;
	color:white;
}

.char p {
	margin:0;
	padding:11px 0 11px 0;
	vertical-align:middle;
}

#attackcontainer {
	width:150px;
	height:500px;
	display:inline-block;
}

#main-content {
	display:inline-block;
	vertical-align: top;
}

.attack {
	width:130px;
	height:40px;
	text-align: center;
	background-color:#535353;
	color:white;
}

.attack p {
	margin:0;
	padding:11px 0 11px 0;
	vertical-align:middle;
}

.a-title {
	width:130px;
	height:20px;
	text-align: center;
	background-color:#333333;
	color:#b3b3b3;
}

.a-title p {
	margin:0;
	padding:1px 0 1px 0;
	vertical-align:middle;
}

#main-content {
	height:960px;
}

#titledetails {
	height:80px;
	display:block;
	background-color:#424242;
	line-height:0;
	position:relative;
}

#gameicon {
	height:45px;
	width:190px;
	background-image:url(assets/gameicon/me.png);
	display:inline-block;
	margin:0 20px;
	position:relative;
	top:20px;
}

#charicon {
	height:26px;
	width:26px;
	background:url(assets/stockicons/melee.png) 104px 0;
	display:inline-block;
	margin:0 20px;
	position:relative;
	top:8px;
}

#charname {
	font-size:30px;
	display:inline-block;
	margin:0 20px;
	position:relative;
	top:5px;
}

#attackname {
	font-size:30px;
	display:inline-block;
	margin:0 20px;
	position:relative;
	top:5px;
}

#vidcontrols {
	width:250px;
	height:50px;
  display:inline-block;
  vertical-align: top;
}

#keycontainer {
  width:800px;
  height:100px;
  background-color:#3c3c3c;
  display:inline-block;
  vertical-align: top;
}

.vcontrol {
	width:50px;
	height:50px;
	background-color:#303030;
	display:inline-block;
}

.play {background-image:url(assets/fdcontrols/play.png);} .pause {background-image:url(assets/fdcontrols/pause.png);} #fminus {background-image:url(assets/fdcontrols/fminus.png);} #fplus {background-image:url(assets/fdcontrols/fplus.png);} #speedminus {background-image:url(assets/fdcontrols/speedminus.png);} #speedplus {background-image:url(assets/fdcontrols/speedplus.png);} #loop {background-image:url(assets/fdcontrols/loop.png);}

.speeddisabled {
  width:50px;
  height:50px;
  background-color:rgba(0, 0, 0, 0.66);
  position:absolute;
  z-index:3;
}

#vidandsvgcontainer {
	display:block;
	width:122px;
	height:512px;
}
#vidcontainer {
	display:inline-block;
}
#svgcontainer {
	display:inline-block;

}

#svgbox-t {
  z-index:3;
}

.angle {
	position:absolute;
  z-index:2;
}

#detailcanvas {
  position:absolute;
  width:1244px;
  height:512px;
}

#framedisplay {
  width:60px;
  height:60px;
  border-radius: 10px;
  top:30px;
  left:30px;
  font-size:40px;
}

#speeddisplay {
  width:90px;
  height:30px;
  border-radius:7px;
  top:30px;
  left:100px;
  background-color:#373737;
}

#speeddisplay p {
  color:#9e9e9e;
  font-size:14px;
}

.nothitting {
  background-color:white;
}
.hitting {
  background-color:#f64545;
}

.hitting p {
  color:white;
}

#framedisplay p {
  font-size:40px;
  padding:5px;
}

#detailcanvas div {
  position:absolute;
  color:black;
  border-radius:5px;
  font-size:25px;
  font-weight:bold;
  text-align:center;
}

#detailcanvas div p {
  padding:5px;
}



#autocanceldisplay {
  bottom:20px;
  right:522px;
  height:40px;
  width:200px;
  background-color:#e7f547;
}

#iasadisplay {
  top:20px;
  right:522px;
  height:40px;
  width:200px;
  background-color:#39cb3e;
}

.displayoff {
  opacity:0.1;
}

.displayon {
  opacity:1;
}

.groundline {
  background-color:rgba(255, 255, 255, 0.32);
  width:622px;
  height:3px;
  position:absolute;
}

#groundlinef {
  bottom:95px;
  left:0px;
}

#groundlinet {
  bottom:240px;
  right:0px;
}

#centerline {
  background-color:rgba(255, 255, 255, 0.32);
  width:3px;
  height:392px;
  top:60px;
  position:absolute;
  right:622px;

}

.hitbox {
  stroke-width: 2px;
}

#extradetails {
	height:270px;
	font-size:16px;
}

#infobox {
	height:270px;
	width:850px;
	display:inline-block;
	vertical-align: top;
	background-color:black;
}
#attdetails {
	height:270px;
	width:130px;
	display:inline-block;
	vertical-align: top;
	background-color:#505050
}

#statstitle {
	width:130px;
	height:30px;
	background-color:#656565;
}

#statstitle p {
	padding:5px 0px;
	text-align:center;
}

#attdetails p {
	padding:5px 5px;
}

.idcontainer {
	height:270px;
	width:180px;
	display:inline-block;
	vertical-align: top;
	background-color:#2a2a2a;
  position:relative;
}

.infodisabled {
  height:270px;
  width:180px;
  position:absolute;
  z-index:5;
  background-color:rgba(0, 0, 0, 0.67);
}

.idinfobox {
	height:250px;
	width:180px;
	display:inline-block;
	background-color:#303030;
	margin:0px;
}

.idinfobox p {
	padding:3px 5px;
}

.idlabel {
	height:20px;
	width:50px;
	display:block;
	background-color:#4f4d4d;
	margin:0px;
}

.idlabel p {
	padding:2px 5px;
}

.anglesmall {
  position:absolute;
}

.h-standard {color:#ff4242;} .h-reflective {color:#29dd91} .h-absorbing {color:#4d9dfb} .h-grab {color:#ce45fe} .h-inert {color:#bababa}

.colourbox {
  width:15px;
  height:15px;
  margin:0px 3px;
  display:inline-block;
  border:3px solid black;
  position:relative;
}

.colourselectbox {
  width:200px;
  height:240px;
  position:absolute;
  bottom:20px;
  right:-97px;
  border:5px solid #383838;
  border-radius:3px;
  z-index:10;
}

.colourselect {
  width:40px;
  height:40px;
  display:inline-block;
  vertical-align: top;
}

.alwaysshow p {
  display:inline-block;
}

.alwaysshow {
  width:180px;
  height:20px;
  font-size:13px;
  background-color:#4f4d4d;
}

.minirealbutton {
  width:180px;
  height:20px;
  opacity:0;
  background-color:#ffffff;
  position:absolute;
}

.miniswitch {
  width:30px;
  height:20px;
  display:inline-block;
  float:right;
}

#id0strokecolour {background-color:#66ff66} #id0strokecolour2 {background-color:white} #id0stroketrans {background-color:none;background-image:url(assets/transparent.png)}

#id0fillcolour {background-color:#ff6666} #id0fillcolour2 {background-color:#939393} #id0filltrans {background-color:none;background-image:url(assets/transparent.png)}

#id1strokecolour {background-color:#66ffff} #id1strokecolour2 {background-color:white} #id1stroketrans {background-color:none;background-image:url(assets/transparent.png)}

#id1fillcolour {background-color:#ffff66} #id1fillcolour2 {background-color:#939393} #id1filltrans {background-color:none;background-image:url(assets/transparent.png)}

#id2strokecolour {background-color:#ff66ff} #id2strokecolour2 {background-color:white} #id2stroketrans {background-color:none;background-image:url(assets/transparent.png)}

#id2fillcolour {background-color:#6666ff} #id2fillcolour2 {background-color:#939393} #id2filltrans {background-color:none;background-image:url(assets/transparent.png)}

#id3strokecolour {background-color:#9966ff} #id3strokecolour2 {background-color:white} #id3stroketrans {background-color:none;background-image:url(assets/transparent.png)}

#id3fillcolour {background-color:#ff6633} #id3fillcolour2 {background-color:#939393} #id3filltrans {background-color:none;background-image:url(assets/transparent.png)}

.colourboxselected {
  border:3px solid white;
}

#switches {
	height:240px;
	width:250px;
	display:inline-block;
	vertical-align: top;
}

.switchtem div p {
	margin:0;
	padding:15px 0px;
}

.switchtem {
	width:250px;
	height:50px;
	display:inline-block;
	text-align:center;
}

.realbutton {
	width:250px;
	height:50px;
	opacity:0;
	background-color:#ffffff;
	position:absolute;
}

.s-button {
	width:200px;
	height:50px;
	display:inline-block;
	background-color:#676767;
}
.switch {
	width:50px;
	height:50px;
	display:inline-block;
}
.on {
	background-color:#3bd641;
}
.off {
	background-color:#ed4242;
}