* {
    box-sizing:border-box;
}


.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

[class*="col-"] {
    float:left;
    padding:5px;
}

.row::after {
    content: "";
    clear:both;
    display:table;
}

.pt-1 { padding-top: 10px; }
.pt-2 { padding-top: 20px; }
.pt-3 { padding-top: 30px; }
.pt-4 { padding-top: 40px; }
.pt-5 { padding-top: 50px; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }




body {
	padding: 0px;
	margin: 0px;
}

div#content {
	padding: 5px;
}

div#copyright {
	padding: 3px;
}

div.header {
	font-family: arial narrow;
	box-shadow: 0px 3px 5px #808080;
	background-color: white;
}

div.content {
	margin: auto;
	margin-top: 7px;
	min-height: 400px;
	font-family: arial;
}

div.copyright {
	margin: auto;
	font-size: 10px;
	font-family: tahoma;
	text-align: center;
	background-color: #f3f9ff;
	box-shadow: 0px -3px 5px #808080;
	min-height: 20px;
	position: fixed;
	bottom: 0px;
}

div#links {
	text-align: center;
	padding: 3px;
	background-color: white;
}
div#links > button {
	border: 1px solid #a0b0a0;
	background-color: white;
	cursor: pointer;
	box-shadow: 0px 0px 5px #f3f9ff;
	width:10%;
	min-width:110px;
	height:25px;
}

div#header {
	background-repeat: no-repeat;
	background-color: white;
}

.h3 {
    font-size: 130%;
}
.text-center {
    text-align:center;
}

/* Home */

.home_button {
    width: 100%;
    height: 100px;
    text-align:center;
    border: 1px solid black;
    box-shadow: 3px 3px 10px #000040;
    font-size:150%;
    border-radius:10px
}
.home_button:hover {
    box-shadow: 1px 1px 10px #004040;
    cursor:pointer;
}

/* Events */
div.left_image {
    margin-right:20px;
    float:left;
    width:30%;
}
div.left_image > img {
    width:96%;
}

div.right_image {
    margin-left:20px;
    float:right;
    width:30%;
}
div.right_image > img {
    width:96%;
}

/* Videos */
button.vid_cat {
    margin:5px;
    min-width:200px;
    min-height:120px;
    font-size:20px;
    cursor:pointer;
}
button.vid_cat_small {
    margin:5px;
    min-width:200px;
    min-height:30px;
    font-size:20px;
    cursor:pointer;
}

table.video_list {
    margin:auto;
}

table.video_list td {
    text-align:center;
}
td.video_title {
    padding:10px;
    font-weight:bold;
    background-color:#f0f0f0;
    border-radius:10px 10px 0px 0px;
    text-align:center;
}
td.video_desc {
    vertical-align:top;
    padding:20px;
    background-color:#f0f0f0;
    border-radius:0px 0px 10px 10px;
}

td.video_spacer {
    height:30px;
    min-height:30px;
}

/* Downloads */

table.downloads {
    width:100%;
    max-width:900px;
}

table.downloads tr > td:nth-child(1) > img {
    width:100%;
    max-width:400px;
}
table.downloads tr > td:nth-child(1) {
    width:50%;
}
table.downloads tr > td {
    vertical-align:top;
}


@media only screen and (max-width: 1000px) {
	div.content {
		font-size: 16px;
		width: 96%;
		padding: 5px;
		box-shadow: none;
	}

	div.copyright {
		width: 100%;
		padding: 0px;
	}
	
	iframe.videoplayer {
        width:560px;
        height:315px;
    }
    table.video_list {
        max-width:560px;
    }
}

@media only screen and (max-width: 800px) {
	div.content {
		font-size: 14px;
	}
	
	iframe.videoplayer {
        width:280px;
        height:158px;
        margin:0px;
    }
    table.video_list {
        max-width:280px;
    }
}

@media only screen and (min-width: 1000px) {
	div.header {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 130px;
		width: 100%;
	}

	div.content {
		margin-top: 150px;
		font-size: 18px;
		padding: 20px;
		max-width:1000px;
	}

	div.copyright {
		width: 100%;
	}
	
	iframe.videoplayer {
	    width:560px;
	    height:315px;
	}
	table.video_list {
        max-width:560px;
    }
}