body
{
	margin:auto;
	padding:0;
	background:#eee;
	color: black;
	font: 16px arial,helvetica,clean,sans-serif;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	line-height:1.5;
}

div.page
{
	min-width:340px;
	max-width:1400px;
	margin:auto;
}

div.page.white { background:white; }

div.corefull
{
	padding:5px 10px 5px 10px;
}

div.coreflex
{
	padding:5px 10px 5px 10px;
	display:flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

div.coreside
{
	flex: 3 0 310px;
}

div.sideright
{
	flex: 1 0 230px;
	max-width:320px;
	margin:0 5px 10px;
}

a
{
        text-decoration:none;
	border:none;
}

.headerback
{
	min-width:340px;
	background:linear-gradient(to right, #02A, #017);
}

.header
{
	display:flex;
	flex-flow: row nowrap;
	font-size:18px;
	white-space:nowrap;
	height:52px;
	background:transparent;
}

.header a
{
        text-decoration:none;
        color:#ACE;
        padding:0px 10px 0px 10px;
	margin:3px 5px 0 5px;
	display:flex;
	align-items:center;
	text-align:center;
}

.header a:hover
{
	color:white;
	background:#04C;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}

.header a.logo { display:flex;font-size:30px; color:#FFF;margin-right:20px;margin-left:5px; }
.header a.logo img { margin-right:7px }
.header a.logo:hover { background:#02A;color:#FF8; }

.header a.current
{
	background:white;
	color:black;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}

.header a.current.sub { background:#04C; color:white }

.header #menuicon { display:none; }

.bars
{
	display:block;
}

.headerback2
{
	background:linear-gradient(to right, #04C, #02A);
}

.header2
{
	display:none;
	flex-flow: row nowrap;
       	background:#04C;
        font-size:16px;
        white-space:nowrap;
	margin:0px 5px 0 5px;
        padding:0 0 0 5px;
        height:40px;
	background:transparent;
}

.header2 a
{
        text-decoration:none;
        color:#CEF;
        padding:7px 12px 7px 12px;
	display:flex;
	align-items:center;
}

.header2 a:hover
{
       	color:white;
        background:#06D;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.header2 a.current
{
        background:white;
        color:black;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
}

.header2 a.current.sub
{
        color:white;
        background:#26E;
}

.headerback3
{
	background:linear-gradient(to right, #26E, #04C);
}


.header3
{
	display:none;
	flex-flow: row nowrap;
	background:#26E;
	font-size:16px;
	white-space:nowrap;
	margin:0px 5px 0 5px;
	padding:0;
	background:transparent;
}

.header3 a
{
	text-decoration:none;
	color:white;
	padding:5px 10px 5px 10px;
}

.header3 a:hover
{
	color:white;
	background:#48F;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.header3 a.blue
{
	color:white;
	background:#23D;
	text-align:center;
	width:80px;
}

.header3 a.green
{
	background:#009040;
	color:white;
	text-align:center;
	width:80px;
}

.header3 a.blue:hover { background:#00F; }
.header3 a.green:hover { background:#0A0; }

.header3 a.current
{
	color:black;
	background:white;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.header3 a.current.blue { background:white }
.header3 a.current.green { background:white; }

.flexexpand
{
	display:flex;
	flex-grow:1
}

#menu
{
	position:absolute;
	top:42px;
	max-width:300px;
	height:calc(100% - 64px);
	background-color:#236;
	opacity:0.95;
	color:white;
	transition: transform 0.3s ease-in-out;
	box-shadow:3px 3px 3px #444;
	display:none;
	overflow:auto;
}

.menuhide
{
	transform:translate(-102%);
}

.menuview
{
	transform:none;
}

#menu a
{
        display:block;
        color:white;
	font-size: 18px;
        padding:7px;
	background-color: #347;
	margin-bottom:2px;
}

#menu a.dropdown:after
{
	content: "\25BC";
	font-size:80%;
	margin-left:10px;
	float:right;
	margin-top:4px;
}

#menu a.dropup:after
{
	content: "\25B2";
	font-size:80%;
	margin-left:10px;
	float:right;
	margin-top:4px;
}

.menuitem
{
	margin-left:40px;
	transition: all 0.3s ease-in-out;
	overflow:hidden;
}

.menucollapsed
{
	max-height:0;
}

.menuexpand
{
	max-height:600px;
}

.video
{
	width:960px;
	height:540px;
}

@media only screen and (max-width: 720px)
{
	.header > a.logo { margin-right:2px;margin-left:2px; }
	.header > a { display:none; }
	.header #menuicon { display:flex; }
	.bars { display:none; }
	#menu { display:block }
	.header a.logo { flex-grow:1; }
	.header.flexexpand { display:none }
}

@media only screen and (max-width: 499px)
{
	.video { width:304px; height:170px }
}

@media only screen and (min-width: 500px) and (max-width: 719px)
{
	.video { width:480px; height:270px }
}

@media only screen and (min-width: 720px) and (max-width: 800px)
{
	div.page { width:700px; }
	.video { width:640px; height:360px; }
}
@media only screen and (min-width: 801px) and (max-width: 1024px)
{
	div.page { width:780px; }
	.video { width:720px; height:405px; }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px)
{
	div.page { width:1000px }
}
@media only screen and (min-width: 1201px) and (max-width: 1400px)
{
	div.page { width:1180px }
}
@media only screen and (min-width: 1401px)
{
	div.page { width:1400px }
}

a.sidebutton, .buybutton
{
	display:block;
	color:white;
	background:#46C;
	font-size:20px;
	font-weight:normal;
	padding:10px 0px 10px 0px;
	margin:auto;
	margin-bottom:5px;
	width:100%;
	text-decoration:none;
	text-align:center;
	border-radius:5px;
	border:none;
}

a.sidebutton.green { background:#494; }


a.sidebutton:link, a.sidebutton:visited { color:white; text-decoration:none; }
a.sidebutton:active { color:red }
a.sidebutton:hover, .buybutton:hover {  background:#46F; }
a.sidebutton.green:hover {  background:#4B4; }
.buybutton { width:160px;margin-bottom:0;cursor:pointer; }
.buybutton.red { background:#b44; }
.buybutton.red:hover { background:#D44; }
.buybutton.orange { background:#FA4;color:black; }
.buybutton.orange:hover { background:#FB4; }

img.buttontext { height:24px;vertical-align:middle;float:left;margin-left:10px; }

textarea { resize:none }

h2
{
	margin-top:0;
}

img
{
	border:0;
	vertical-align:middle;
}

hr.pad
{
	height:5px;
	border-color:#018;
	background:linear-gradient(to right, white, #8BF, 20%, #8BF, 80%, #8BF, white);
	border:none;

	margin:30px 0 30px 0;
}

.indent
{
	margin:0 0 0 20px;
}

.biggerbold
{
	font-weight:bold;
	font-size:125%;
}

.caption
{
	text-align:center;
	margin:0 0 10px 0;
	padding:0;
	display:block;
	font-size:150%;
}

.screenshot
{
	margin:auto;
	text-align:center;
	display:block;
	width:auto;
	max-width:100%;
}

.rowodd
{
	background-color:#F0F8FF;
}

.roweven
{
	background-color:#E0F0FF;
}

.bluebox {
	border:solid 1px #0000C0;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#F0F8FF;
}

.blueboxround {
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#F0F8FF;
	box-shadow: 3px 3px 5px grey;
	border-radius: 10px;
}

.graybox {
	border:solid 1px #808080;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#F0F0F0;
}

.grayboxround {
	border:solid 1px #808080;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#F0F0F0;
	box-shadow: 3px 3px 3px grey;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}


.greenbox {
	border:solid 1px #00E000;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#F0FFF0;
}

.redbox {
	border:solid 1px #C00000;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#FFF0F0;
}

.yellowbox {
	border:solid 1px #C0C000;
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#FFFFF0;
}

.yellowboxround {
	margin-bottom:10px;
	padding-bottom:1px;
	background-color:#FFFFF0;
	box-shadow: 3px 3px 3px grey;
	border-radius: 10px;
}

.bluetitle {
	background:#90C0F0;
	padding:1px;
	margin-top:0px;
	margin-bottom:2px;
	border-bottom:solid 1px #0000C0;
	text-align:center;
}

.bluetable {
	text-align:center;
	background:#90C0E0;
}

.darkbluetitle {
	color:white;
	background:navy;
	font-size:larger;
	font-weight:bold;
	text-align:center;
}

.bluetitle H3 {
	margin:0;
	padding:0;
}

.graytitle {
	background:#D0D0D0;
	padding:1px;
	margin-top:0px;
	margin-bottom:2px;
	border-bottom:solid 1px #808080;
	text-align:center;
}

.graytitle H3 {
	margin:0;
	padding:0;
}

.yellowtitle {
	color:black;
	background:#C0C080;
	padding:1px;
	margin-top:0px;
	margin-bottom:2px;
	border-bottom:solid 1px #C0C000;
	text-align:center;
}

.yellowtitle H3 {
	margin:0;
	padding:0;
}

.greentitle {
	background-color:#E0FFE0;
	padding:1px;
	margin-top:0px;
	margin-bottom:2px;
	border-bottom:solid 1px #00E000;
	text-align:center;
}

.greentitle H3 {
	margin:0;
	padding:0;
}

.redtitle {
	color:white;
	background: #C00000;
	padding:1px;
	margin-top:0px;
	margin-bottom:2px;
	border-bottom:solid 1px #C00000;
	text-align:center;
}

.redtitle H3 {
	margin:0;
	padding:0;
}

.download
{
	display:block;
	font-size:24px;
	border-radius:10px;
	background-color:black;
	border: 3px solid gray;
	color:white;
	margin:auto;
	width:100%;
	max-width:400px;
	text-decoration:none;
	text-align:center;
	padding: 10px 0 10px 0;
	height:85px;
	line-height:normal;
}

.download > img
{
	margin: 10px;
	float:left;
}

.download > span
{
	color:#CCC;
	font-size:14px;
}