/* VPASEC website vpasecstyle.css file */
 
/* a simple reset group */
body {	margin: 0;	padding: 0;	border: 0;}
#container {	margin: 0;	padding: 0;	border: 0;}
#masthead {	margin: 0;	padding: 0;	border: 0;}
#footer {	margin: 0;	padding: 0;	border: 0;}
.float_right{	float:right;}

/* links except those in menus*/
a:link {color:#000080;}
a:visited {color:#993300;} 
a:hover {color:white; 	background:#00ced1;} 
a:active {color:#666633;} 

h1{	text-align:center;}

.rt-border{
	border-right:2px black solid;
}

/* 12 col display styles */
* {
    box-sizing: border-box;
}   

/*Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12 */
/*For desktops and tablets each column is 1/12 th of the page width*/

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    font-size: 18px;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
body { margin:0 auto; font-size: 18px;}
    .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%;} 
}

@media only screen and (min-width: 600px) {
    /* For tablets: */    
    body { margin:0 auto;
   		font-size: 18px;}

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

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

.row::after {
    content: "";
    clear: both;
    display: table;
    background-color: #add8e6;
}

img {
    max-width: 100%;
    height: auto;
}

body {
	color: black;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	background-color:#4d94ff;/*#aabba9;/*#aabb7a;/*#c0c0c0; /*#d3d9d6;*/
	}

#masthead {
	text-align: center;
	background-color: #add8e6;
}


#footer {
	text-align: center;
	background-color: #6495ed;/*corn flower blue*/
	color:#ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
	clear:both;
}
#footer a{
	color:black;
}
/* font colors and styles*/
.center{text-align:center;}
.red{color:red;}
.blue{color:blue;}
.yellow{
	color:#ffff66;
}
.bold {font-weight: bold;}
.italic {font-style: italic;}

/* .photo, .button, and .info are used together in all media display pages */
.photo{
	width:250px;
	height:150px;
}

table{
	border-collapse:collapse;
}
table #media{
	border:2px black solid;
	border-collapse:collapse;
	font-size:large;
}	
td{
	border:2px black solid;
}
/* end of styles used in media tables */

.photoleft{
	float:left;
	border:5px black solid;
	position:relative;
	margin:5px;
}
.photoright{
	float:right;
	border:5px black solid;
	position:relative;
	margin:5px;
}
.photocaption{
	padding-left:10px;
	padding-right:10px;
}

/* color background divs for page chunks */
.block_blue{
	padding: 10px 20px 10px 20px;
	background-color:blue;
	border:3px aqua solid;
	color:white;
}
.block_blue a{	
	color:aqua;
	text-decoration: underline;
}
.block_blue a:hover{
	color:red;
	text-decoration: underline;
}

.block_lt-gr{
	background-color:#ccff00;
	border:3px black solid;
	color:black;padding: 10px 20px 10px 20px;
}
.block_green{	
	background-color:green;
	border:3px black solid;
	color:white;padding: 10px 20px 10px 20px;
}
.block_aqua{
	background-color:aqua;
	border:3px black solid;
	color:black;padding: 10px 20px 10px 20px;
}
.block_orange{
	background-color:orange;
	border:3px black solid;
	color:black;
	padding: 10px 20px 10px 20px;
}
.block_yellow{
	background-color:yellow;
	border:3px black solid;
	color:black;
	padding: 10px 20px 10px 20px;
}
.block_red{
	background-color:red;
	border:3px black solid;
	color:white;
	padding: 10px 20px 10px 20px;
}
.block_white{
	background-color:white;
	border:3px black solid;
	color:blue;
	padding: 10px 20px 10px 20px;
}