@charset "utf-8";
/* CSS Document */


body {font-family:Helvetica, Arial, sans-serif; font-size:14px; background-color: #ccc; margin: 0; user-select: text;}
.wrapper {width:97%; min-width: 1280px; z-index:1; background-color:#ddd; box-shadow: 6px 6px 8px 8px #111; border: 1px solid #333; padding:0px 8px; margin-left: 12px; margin-top: 80px;}
a.anchor {display: block; top:-82px; position: relative;}
.main {}
.logo {float:left; margin:0 20px 0 10px; z-index:352;}
.notice {float:right; width: 20%;}
h1 {font-size:1.5em; margin-bottom: 10px;}
h2 {font-size: 1.2em; border-bottom: 1px solid #000; padding: 12px 6px; background-color: #111; margin: 0; color:#fff; border-radius: 0 10px 0 0;}
h3 {font-size:1.1em; color:#DDD; border-bottom:1px solid #111; padding: 6px; background-color:#333; margin: 0 10px 5px 0;}
p {font-size:1em; margin-bottom: 10px;}
input[type=text] {font-family:Helvetica, Arial, sans-serif; font-size:1em;}
input[type=number] {font-family:Helvetica, Arial, sans-serif; font-size:1em;}
select {font-size:1em; padding:4px}
a:link {color:#CCC; font-weight:bold; text-decoration:none;}
a:visited {color:#CCC;}
a:hover {text-decoration: underline;}
a:active {}
.doorL {width:0px; height:100%; position: fixed; z-index:0; top:0; left:0; transition: linear 0.5s;}
.doorL.closed {width:49.9%; border-left: 2px solid #222; border-top:2px solid #999; border-right: 6px solid #111; border-bottom: 2px solid #222; transition: linear 0.25s; z-index:500; margin-right: 1px;}
.doorR {width:0px; height:100%; position: fixed; z-index:0; top:0; left:100%; transition: linear 0.5s;}
.doorR.closed {width:50%; left:50.1%; border-left: 2px solid #ccc; transition: linear 0.25s; z-index:500; border-right:2px solid #333; border-top:2px solid #999; border-bottom:2px solid #333;}
.opening {font-size: 1.3em; display: block; width:120px; height: 18px; background-color: #888; top: 60px; left:48%; position: fixed; box-shadow: 1px 1px 2px 2px #333; z-index: 353; transition: linear 0.35s; text-align: center; padding: 8px; border-radius: 0 0 8px 8px; border-top:1px solid #111;}
.opening.show {padding: 0px; font-size: 1.1em; display: block; z-index: 600; position: fixed; width:88%; height: 86%; top: 5%; left:7%; background-color: #d1d1d1; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #333; border-bottom: 1px solid #333; box-shadow: 8px 8px 5px 5px #111; border-radius: 5px; transition: linear 0.35s; overflow-y: scroll; overflow-x: hidden; user-select: text;}
.opening a:link {color:#111;}
.opening a:visited {color:#111;}
.opening a:hover {color: #cc0000; text-decoration: none;}
.opening a:active {}
/*.previewer {border: none; background: #222; float:left; width:900px; height:190px; overflow: hidden !important;}*/
.refresh a:link {color:#ccc; font-size:.85em;}
.refresh a:visited {}
.refresh a:hover {color:#fff;}
.refresh a:active {}
.angle-0 {float:left;}
.angle-30 {transform: rotate(-30deg); float:left;}
.angle-60 {transform: rotate(-60deg); float:left;}
.angle-90 {transform: rotate(-90deg); float:left;}
.angle-120 {transform: rotate(-120deg); float:left;}
.angle-150 {transform: rotate(-150deg); float:left;}
.angle-180 {transform: rotate(-180deg); float:left;}
.fontHelper {padding:2px 5px; border: 1px solid #ccc; border-radius: 4px; height: 170px; overflow-y: scroll;}
#copyright {text-align: center; padding: 0px; font-size: 1.0em; display: block; z-index: 605; position: fixed; width:88%; height: 86%; top: 5%; left:7%; background-color:#d1d1d1; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #333; border-bottom: 1px solid #333; box-shadow: 8px 8px 5px 5px #111; border-radius: 5px; transition: linear 0.35s; overflow-y: scroll !important; overflow-x: hidden;}
.copyscroll { width: 85%; height: 400px; padding: 5px; margin-left: 7%; overflow-y: scroll !important; overflow-x: hidden; background-color: #ffffff;}
#copyright a:link {color:#111;}
#copyright a:visited {color:#111;}
#copyright a:hover {color: #fff; text-decoration: none;}
#copyright a:active {}
#colorList {}
.sectionTop {border-top: 1px solid #000; border-left: 1px solid #000; border-radius: 5px 5px 0 0; background-color: #851717; color: #ffffff; border-bottom: 2px solid #000; height:50px; font-size: 1.4em; margin-bottom: 10px; text-align: center; font-weight: bold;}
.effectName {color:#CC000C;}
.combos {text-align: center; font-size:1.1em; clear:left;}
.total {text-decoration: underline; font-size: 1.3em;}
.introTop {border-top: 1px solid #000; border-left: 1px solid #000; border-radius: 5px 5px 0 0; background-color: #444; color: #ffffff; padding: 20px 0px; border-bottom: 2px solid #000; height:50px; font-size: 2em; margin-bottom: 10px;}
.scrollHold {float:right; position:fixed; top:0%; right:0%; z-index:99999; width:5px; height:5px;} /* Used to prevent scrolling during Tab events */
.videosection{border:1px solid #111; border-radius: 5px; padding: 10px; margin:5px; float: left; width:38%; height: 450px; background-color:#ddd; overflow-y: scroll !important;}
.description{border: 1px solid #111; border-radius: 5px; padding: 10px; margin:5px; float: right; width:55%; background-color:#ddd}
.get{border: 1px solid #111; border-radius: 5px; padding: 10px; margin:5px; float: right; width:55%; height: 60px; text-align: center; background-color:#ccc}
.links a:link {color:#cc0000;}
.links a:visited {color: #cc0000;}
.links a:hover {text-decoration: underline;}
.links a:active {text-decoration: underline;}
.topTitle {text-align: center; width: 90%;}
.topLink {width: 90px; height: 50px; position: fixed; top:88%; right:1%; background-color:#851717; border: 1px solid #333; text-align: center; padding: 10px; border-radius: 5px;}
.topBar {width:100%; height:60px; position: fixed; top:0; background-color:#851717; border-bottom:2px solid #111; color:#fff; text-align:center; padding:8px; z-index: 3;}
.topLeft {text-align: left; float:left; width:35%;}
.topMiddle {text-align: center; float: left; width:40%;}
.bottomBar {width:100%; background-color:#222; border-top:2px solid #111; position:fixed; z-index:250; top:93%; left: 0; height:80px;}
.info {width:10px; position: fixed; z-index: 300; height:30px; box-shadow: 5px 5px 5px 5px #111; top: 50px; left: 50px; background-color:#ddd; transition: linear 0.35s;}
.boxRight {width:60%; float:right; margin:10px; padding:8px;}
.info.load {width: 90%; left: 5%; height: 90%; transition: linear 0.35s;}
.info.show {width: 500px; transition: linear 0.35s; padding-left:5px;}
.menu {font-size: 2em; color: #111; position: fixed; transition: linear 0.35s; z-index: 200; width:30px; border: none; box-shadow: none; background: none; top:20px; left:97%; }
.menu.show {font-size:1em; background-color: #444; width: 20%; height: 450px; left:79%; box-shadow: 5px 5px 8px 8px #111; border: 1px solid #444; transition: linear 0.35s;}
.menu a:link {color: #111;}
.menu a:visited {color: #111;}
.menu a:hover {color: #eee;}
.menu a:active {color: #eee;}
.share a:link {color: #eee;}
.share a:visited {color: #eee;}
.share a:hover {color: #CC0000;}
.share a:active {color: #CC0000;}
/*div {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;}
	div a {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important;}*/
.maskLayer {opacity: 0.0; position: fixed; z-index: -1; transition: linear 0.35s; width: 100%; height: 100%; background-color: #fff;}
.maskLayer.show {opacity: 0.25; transition: linear 0.35s; z-index: 351; top:0; left: 0; display: block;}
#EnhanceTop {background-color:#444; color: #ffffff; padding: 10px; box-shadow: 5px 0 8px 8px #111; border-bottom: 1px solid #000; height:400px;}
.enhanceBackground {}
.styleInfo {width: 300px; float:right; margin:5px 10px; border: 1px solid #999; border-radius: 5px; padding: 5px; background-color:#ccc;}
.button {float: left; padding: 5px; width: 100%;}
.button ul {margin:0px; padding:0px; list-style-type:none;}
.button li {margin:0px; padding:0px; list-style-type:none;}
.button ul li a:link {margin-left:5px; float: left; background-color:#999; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; text-align: center; color: #111; font-weight: bold; padding: 12px; margin: 0px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.button ul li a:visited {text-decoration: none; color: #111; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; }
.button ul li a:hover {text-decoration: none; color: #111; background-color:#ccc; border-left: 5px solid #666; border-top: 5px solid #666; border-right: 3px solid #bbb; border-bottom: 3px solid #bbb;}	
.button ul li a:active {text-decoration: none; color: #111;}	
.button2 {float: left; padding: 5px; width: 100%;}
.button2 ul {margin:0px; padding:0px; list-style-type:none;}
.button2 li {margin:0px; padding:0px; list-style-type:none;}
.button2 ul li a:link {float: left; background-color:#851717; border-left: 3px solid #e35656; border-top: 3px solid #e35656; border-right: 5px solid #8a0404; border-bottom: 5px solid #8a0404; text-align: center; color: #eee; font-weight: bold; padding: 12px; margin: 0px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.button2 ul li a:visited {text-decoration: none; color: #eee; border-left: 3px solid #e35656; border-top: 3px solid #e35656; border-right: 5px solid #8a0404; border-bottom: 5px solid #8a0404; }
.button2 ul li a:hover {text-decoration: none; color: #eee; background-color:#c73434; border-left: 5px solid #8a0404; border-top: 5px solid #8a0404; border-right: 3px solid #e35656; border-bottom: 3px solid #e35656; }	
.button2 ul li a:active {text-decoration: none; color: #eee;}	
.button3 {margin-left: 10px; width: 100%;}
.button3 ul {list-style-type:none;}
.button3 li {margin-top:50px; padding:0px; list-style-type:none;}
.button3 a:link {float:left; clear:left; width: 200px; height: 22px; background-color:#999; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; text-align: center; color: #111; font-weight: bold; padding: 12px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.button3 a:visited {text-decoration: none; color: #111; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; }
.button3 a:hover {text-decoration: none; color: #111; background-color:#ccc; border-left: 5px solid #666; border-top: 5px solid #666; border-right: 3px solid #bbb; border-bottom: 3px solid #bbb;}	
.button3 a:active {text-decoration: none; color: #111;}
.button4 {margin-left: 10px; width: 100%;}
.button4 ul {list-style-type:none;}
.button4 li {margin-top:50px; padding:0px; list-style-type:none;}
.button4 a:link {float:left; clear:left; width:25%; padding: 12px; background-color:#999; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; text-align: left; color: #111; font-weight: bold; padding: 12px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.button4 a:visited {text-decoration: none; color: #111; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; }
.button4 a:hover {text-decoration: none; color: #111; background-color:#ccc; border-left: 5px solid #666; border-top: 5px solid #666; border-right: 3px solid #bbb; border-bottom: 3px solid #bbb;}	
.button4 a:active {text-decoration: none; color: #111;}
.button5{padding: 5px; width: 100%;}
.button5 ul {margin:0px; padding:0px; list-style-type:none;}
.button5 li {margin:0px; padding:0px; list-style-type:none;}
.button5 ul li a:link {width:85%; float: left; clear:left; background-color:#999; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; text-align: center; color: #111; font-weight: bold; padding: 12px; margin: 0px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.button5 ul li a:visited {text-decoration: none; color: #111; border-left: 3px solid #bbb; border-top: 3px solid #bbb; border-right: 5px solid #666; border-bottom: 5px solid #666; }
.button5 ul li a:hover {text-decoration: none; color: #111; background-color:#ccc; border-left: 5px solid #666; border-top: 5px solid #666; border-right: 3px solid #bbb; border-bottom: 3px solid #bbb;}	
.button5 ul li a:active {text-decoration: none; color: #111;}
.controlNotes {background-color: #cc0000; color: #fff; clear:both; padding:3px 10px; border-bottom: 1px solid #000; height:36px; overflow-y: scroll;}
.argColors {float: left; margin:5px 8px 5px 0; padding: 3px; height:35px; text-align: center;}
.colorButton {width: 80px; height: 27px; box-sizing: border-box; border-width: 1px; border-style: solid; border-image: initial; padding: 1px 2px; margin: 2px 2px 4px 2px; cursor: pointer;}
.colorsScreen {position: fixed; width:420px; background-color:#555; height: 320px; overflow-y: hidden; overflow-x: hidden; border: 2px solid #000000; z-index: 500; box-shadow: 5px 5px 5px #333; padding: 0; border-radius: 20px 0 20px 0; }
.colorsScreen.load {position: fixed; left: 100%; opacity: 0.0; width: 0;}
.colorsScreen.load.show {opacity: 1.0; overflow-y: scroll;}
.colorModScreen {position: fixed; width:420px; background-color:#555; height: 320px; overflow-y: scroll; overflow-x: hidden; border: 2px solid #000000; z-index: 501; box-shadow: 5px 5px 5px #333; padding: 0; border-radius: 20px 0 20px 0; }
.colorModScreen.load {left: 100%; opacity: 0.0; width: 0;}
.colorModScreen.load.show {opacity: 1.0; overflow-y: scroll;}
.enhanceScreen {position: fixed; width:75%; background-color:#999; height: 90%; overflow-y: hidden; overflow-x: hidden; border: 2px solid #000000; transition: linear 0.35s; top: 3%; left:15%; z-index: 101; box-shadow: 5px 5px 5px #333; padding: 0; border-radius: 20px 0 20px 0; }
.enhanceScreen.load {position: fixed; left: 100%; opacity: 0.0; width: 0;}
.enhanceScreen.load.show {opacity: 1.0; transition: linear 0.35s; left: 3%; width: 94%; height: 920px; top: 2px; position: fixed; z-index:354; overflow-y: scroll;}
.optionsScreen {height: 350px; overflow-y: scroll; margin: 0 10px 10px 10px; width: 99%; transition: linear 0.35s;}
.optionsScreen h1 {font-size:1.5em; margin: 10px; border-bottom: 1px solid #000; padding: 12px 6px; background-color:#888; background-color: #111; color:#fff;}
.optionsScreen.split {width:60%; transition: linear 0.35s;}
.close {cursor: pointer !important; background-image:url("close.png"); background-repeat: no-repeat; float:right; width:40px; height:40px; margin:5px; overflow-y: hidden !important;}
.enhanceButtons {border-top:1px solid #000; padding: 10px; height: 80px; width: 100%; background-color:#444; box-shadow: -10px 0 8px 8px #111;}
.help {width:0; height:0; float: right; opacity: 0.0; transition: linear 0.35s; margin-top: 15px; color:#111;}
.help.show { transition: linear 0.35s; opacity:1.0;	width: 35%; height: 320px; overflow-y: scroll; background-color:#ccc; padding: 10px; box-shadow: 5px 0 8px 8px #111; float: right; margin-right: 20px; border: 1px solid #333; border-radius: 10px 0 10px 0;
}
.preview-opt {box-shadow: 0 0 16px 4px #fc6f6f;}
.basestyle {width: 140px; padding:5px; overflow-x: scroll;}
.basestyle.preview {box-shadow: 0 0 16px 4px #fc6f6f;}
.basecolor {float:left; padding: 5px;}
.basePreview {float: left; margin-left: 20px; width: 500px; height: 100px; padding: 0;}
.clearFloat {clear: both; margin: 2px 0;}
.option {display: none;}
.option.show {display: block;}
.listing {border: 1px solid #111; background-color:#999; border-radius: 0 10px 0 10px; margin: 5px; clear:both !important;}

.donate {float:left; margin-left:5px; width:150px; padding:5px;}
.donate ul {margin:0px; padding:0px; list-style-type:none;}
.donate li {margin:0px; padding:0px; list-style-type:none;}
.donate ul li a:link {float: left; background-color:#105422; border-left: 3px solid #43BA63; border-top: 3px solid #43BA63; border-right: 5px solid #074517; border-bottom: 5px solid #074517; text-align: center; color: #eee; font-weight: bold; padding: 12px; margin: 0px 0px 0px 5px; text-decoration: none; box-shadow: 3px 3px 4px 4px #111;}
.donate ul li a:visited {text-decoration: none; color: #eee; border-left: 3px solid #2b2; border-top: 3px solid #2b2; border-right: 5px solid #5a5; border-bottom: 5px solid #5a5; }
.donate ul li a:hover {text-decoration: none; color: #eee; background-color:#1b8c39; border-rightt: 3px solid #43BA63; border-bottom: 3px solid #43BA63; border-left: 5px solid #074517; border-top: 5px solid #074517;}	
.donate ul li a:active {text-decoration: none; color: #eee;}
.controls {width:150px; float: left; margin: 2px 10px 5px 0px;}
.copyrightF {font-size:.9em; color:#fff; margin-top:8px;}
.slidename {text-align:center; font-size:1.2em !important;}
.slidecontainer {width:100%; text-align: center;}
.slider {-webkit-appearance: none; appearance: none; width:100%; height: 5px; background: #ffffff; outline:none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;}
.slider:hover {opacity: 1;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width:12px; height: 12px; background: red; cursor: pointer; border-radius: 3px;}
.slider::-moz-range-thumb {width: 15px; height:15px; background: #cc0000; cursor: pointer; border-radius: 3px;}

.patreon-patron-button-wrapper {clear:both; width:600px; margin: auto; background-color: #ccc; color: #111; padding:20px; text-align: center; border: 1px solid #000;}
.patreon-patron-button-wrapper a {color:#000000;}


@media only screen and (max-width: 2700px) and (min-width: 2500px) {
	.optionsScreen {height:400px !important;}
	.enhanceScreen.load.show {height: 95%!important; width:92% !important; top:1% !important; left:3% !important; overflow-y: scroll!important; overflow-x: none !important;}
}

@media only screen and (max-width: 1900px) and (min-width: 1369px) {
	.opening.show {width: 100%; top:0%; left: 0%; height: 100%;}
	#copyright {width: 100%; top:0%; left: 0%; height: 100%;}
	.doorL {display: none;}
	.doorR {display: none;}
	.optionsScreen {height:335px !important;}
	.enhanceScreen.load.show {height: 95%!important; width:92% !important; top:1% !important; left:3% !important; overflow-y: scroll!important; overflow-x: none !important;}
}

@media only screen and (max-width: 1368px) and (min-width: 1000px) {
	#blade-rotate {display: none;}
	.opening.show {width: 100%; top:0%; left: 0%; height: 100%;}
	#copyright {width: 100%; top:0%; left: 0%; height: 100%;}
	.doorL {display: none;}
	.doorR {display: none;}
	.optionsScreen {height:300px !important;}
	.enhanceScreen.load.show {height: 95%!important; width:92% !important; top:1% !important; left:3% !important; overflow-y: scroll!important; overflow-x: none !important;}
}

@media only screen and (max-width: 999px) {
	#blade-rotate {display: none;}
	.enhanceScreen.load.show {width: 100%; top:0%; left: 0%; height: 100%; !important}
	.optionsScreen {height:300px !important;}
	
}


@media only screen and (max-width: 600px) {
	.wrapper {background:#555;}	
	.h2 {background:#111111;}
	.doorL {background:#444;}
	.doorR {background:#444;}
	.opening {background:#888;}
	.opening.show {background: #888;}
	#copyright {background: #555;}
	.sectionTop {background:#851717;}
	.introTop {background: #000;}
	.videosection {background: #999;}
	.description {background: #999;}
	.get {background: #999;}
	.topLink {background: #c73434;}
	.TopBar {background: #851717;}
	.info {background: #ddd;}
	#EnhanceTop {background: #000;}
	#blade-rotate {display: none;}
	.styleInfo {background: #ccc;}
	.button ul li a:link {background: #999;}
	.button ul li a:hover {background: #ccc;}
	.button2 ul li a:link {background: #851717;}
	.button2 ul li a:hover {background: #c73434;}
	.button3 ul li a:link {background: #999;}
	.button3 ul li a:hover {background: #ccc;}
	.button4 ul li a:link {background: #999;}
	.button4 ul li a:hover {background: #ccc;}
	.enhanceScreen {background: #ccc;}
	.enhanceButtons {background: #444;}
	.optionsScreen {height: 300px;}
	.help.show {background: #fff;}
	.listing {background: #999;}
	.donate ul li a:link {background: #105422;}
	.donate ul li a:hover {background: #1B8C39;}
	
}