* {
    box-sizing: border-box;
}
.floating-box {
    display: inline-block;
    width: 50px;
    height: 35px;
    margin: 10px;
    border: 3px solid #8AC007;  
}

.after-box {
    border: 3px solid red; 
}

.row:after {
    content: "";
    clear: both;
    display: block;
	text-align: bottom;
    border:1px solid black;
	vertical-align: bottom;
}
[class*="col-"] {
    float: left;
	vertical-align: bottom;
}
.col-1 {
	width: 8.33%;
	vertical-align: bottom;
}
.col-2 {
	width: 16.66%;
	vertical-align: bottom;
}
.col-3 {
	width: 25%;
	vertical-align: bottom;
}
.col-4 {
	width: 33.33%;
	vertical-align: bottom;
}
.col-5 {
	width: 41.66%;
	vertical-align: bottom;
}
.col-6 {
	width: 50%;
	vertical-align: bottom;
}
.col-7 {
	width: 58.33%;
	vertical-align: bottom;
}
.col-8 {
	vertical-align: bottom;
	width: 66.66%;
}
.col-9 {
	vertical-align: bottom;
	width: 75%;
}
.col-10 {
	width: 83.33%;
	vertical-align: bottom;
}
.col-11 {
	width: 91.66%;
	vertical-align: bottom;
}
.col-12 {
	width: 100%;
	vertical-align: bottom;
}
html {
    font-family: "Calibri", sans-serif;
}
body {font-size:130%;}
hr.up
{
    position: relative;
    bottom: 13px;
	height: 5px;
	background-color: #3272AB;
	color: #3272AB;
}
hr.notup
{
	height: 5px;
	background-color: #3272AB;
	color: #3272AB;
}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
h3 
{
	font-size:.75em;
	font-weight:bold;
	color:maroon;
	text-align:left;
}
p {font-size:1 em;}
ul
{
list-style:square url("sqpurple.gif");
}
table.b, td.b, th.b 
{
background-color:lightgray;
border:1px solid black;
}
.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}
a.one:link,a.one:visited
{
font-weight:bold;
color:#000000;
background-color:#FFFFFF;
text-align:left;
vertical-align:bottom;
text-decoration:none;
}
a.one:hover,a.one:active
{
	color:#3272AB;
	background-color:#FFFFFF;
}
a.two:link,a.two:visited
{
    display: inline-block;
	vertical-align: bottom;
    width: 110px;
    height: 25px;
	font-weight:bold;
	color:#3272AB;
	background-color:#FFFFFF;
	text-align:left;
	text-decoration:none;
}
a.two:hover,a.two:active
{
	color:lightblue;
	background-color:#3272AB;
}
a.three:link,a.three:visited
{
    display: inline-block;
	font-weight:bold;
	color:#3272AB;
	background-color:white;
    height: 25px;
	padding 5px;
	margin: 5px;
	text-align:left;
	text-decoration:none;
}
a.three:hover,a.three:active
{
color:lightblue;
background-color:#3272AB;
}
a.ilink:link,a.ilink:visited
{
display:block;
font-weight:bold;
color:lightblue;
background-color:#3272AB;
text-align:center;
padding:6px;
margin: 5px;
text-decoration:none;
}
a.ilink:hover,a.ilink:active
{
background-color:lightblue;
color:#3272AB;
}

/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {margin: 0 0 0 20px;}
ul.drop a { display:block; color: white; font-family: Calibri; font-size: 16px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; background: white; color: #3272AB;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1em; vertical-align: middle; zoom: 0;  }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: lightblue; }
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 295px; background: white; }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }

input#shiny {
padding: 4px 20px;
/*give the background a gradient*/
background:#ffae00; /*fallback for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:2px outset #dad9d8;
/*style the text*/
font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
font-size:1.1em;
letter-spacing:0.05em;
text-transform:uppercase;
color:#fff;
text-shadow: 0px 1px 10px #000;
/*add to small curve to the corners of the button*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*give the button a drop shadow*/
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
}
/****NOW STYLE THE BUTTON'S HOVER STATE***/
input#shiny:hover, input#shiny:focus {
border:2px solid #dad9d8;
}