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


body {font-family:Helvetica, Arial, sans-serif; font-size:14px; background: radial-gradient(#ccc, #222); margin: 0; user-select: text;}
.wrapper {width:97%; min-width: 1280px; z-index:1; background:linear-gradient(#ddd,#555); 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: linear-gradient(#555, #111); 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; background: linear-gradient(to bottom left, #ccc, #444); 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; background: linear-gradient(to bottom left, #ccc, #444); margin-right: 1px;}
.doorR {width:0px; height:100%; position: fixed; z-index:0; top:0; left:100%; background: linear-gradient(to bottom right, #ccc, #444); transition: linear 0.5s;}
.doorR.closed {width:50%; left:50.1%; border-left: 2px solid #ccc; transition: linear 0.25s; z-index:500; background: linear-gradient(to bottom right, #ccc, #444); 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: linear-gradient(#ddd, #888); top: 72px; 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: linear-gradient(#d1d1d1, #555); 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;}
#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: linear-gradient(#d1d1d1, #555); 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: 40%; padding: 5px; margin-left: 7%; overflow-y: scroll !important; overflow-x: hidden;}
#copyright a:link {color:#111;}
#copyright a:visited {color:#111;}
#copyright a:hover {color: #fff; text-decoration: none;}
#copyright a:active {}
.sectionTop {border-top: 1px solid #000; border-left: 1px solid #000; border-radius: 5px 5px 0 0; background: linear-gradient(#851717, #c73434); 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; }
.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: linear-gradient(#000, #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-image:linear-gradient(#ddd, #999); overflow-y: scroll !important;}
.description{border: 1px solid #111; border-radius: 5px; padding: 10px; margin:5px; float: right; width:55%; background-image:linear-gradient(#ddd, #999)}
.get{border: 1px solid #111; border-radius: 5px; padding: 10px; margin:5px; float: right; width:55%; height: 60px; text-align: center; background-image:linear-gradient(#ccc, #999)}
.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:linear-gradient(#851717, #c73434); border: 1px solid #333; text-align: center; padding: 10px; border-radius: 5px;}
.topBar {width:100%; height:60px; position: fixed; top:0; background:linear-gradient(#c73434, #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:linear-gradient(#222, #777); 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:linear-gradient(#ddd, #666); 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: linear-gradient(#444, #999); 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: linear-gradient(#000, #444); color: #ffffff; padding: 10px; box-shadow: 5px 0 8px 8px #111; border-bottom: 1px solid #000;}
.enhanceBackground {}
.styleInfo {width: 300px; float:right; margin:5px 10px; border: 1px solid #999; border-radius: 5px; padding: 5px; background: linear-gradient(#ccc, #fff);}
.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: linear-gradient(#999, #ccc); 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: linear-gradient(#ccc, #999); 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: linear-gradient(#851717, #c73434); 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: linear-gradient(#c73434, #851717); 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: linear-gradient(#999, #ccc); 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: linear-gradient(#ccc, #999); 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: linear-gradient(#999, #ccc); 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: linear-gradient(#ccc, #999); 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: linear-gradient(#999, #ccc); 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: linear-gradient(#ccc, #999); 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;}
.enhanceScreen {position: fixed; width:75%; background: linear-gradient(#555555, #ccc); 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: 440px; overflow-y: scroll; margin: 0 10px 10px 10px; width: 99%; transition: linear 0.35s;}
.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: 55px; width: 100%; background: linear-gradient(#444, #000); 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: 450px; overflow-y: scroll; background: linear-gradient(#ccc, #fff); 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;}
.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: linear-gradient(#999, #ccc); 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: linear-gradient(#105422, #1B8C39); 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: linear-gradient(#1B8C39, #105422); 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:.8em; 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;}

@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: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: 1368px) and (min-width: 1000px) {
	.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:360px !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) {
	.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;}
	.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;}
	
}