body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}
#container {
	clear: left;
	margin: 0px;
	background-color: black;
	width: 100%;
}
#top_contaner {
	height: auto;
	padding-right: 5%;
	padding-left: 5%;
}
#day_date {
	padding-top: 10px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
	font-size: small;
	color: #F0F0F0;
	background: #000000;
}
#header {
	margin-left: auto;
	margin-right: auto;
	background: #000000;
}
#header h1 {
	margin-left: auto;
	margin-right: auto;
	color: #336699;
	padding-bottom: 10px;
}
#header h2 {
	margin-left: 800px;
	color: #336699;
	padding-top: 0px;
	font-family: "Bradley Hand ITC";
	color: #FFFF66;
}
#sign_in_out2 {
	padding-top: 5px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
}
#sign_in_out {
	padding-top: 10px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
	background: #000000;
}
#sign_in_out ul {
	padding-top: 0px;
}
#sign_in_out ul li {
	list-style-type: none;
	display: inline;
}
#sign_in_out li a {
	display: block;
	float: right;
	padding: 3px 10px;
	color: #fff;
	text-decoration: none;
	font-size: xx-small;
	font-weight: bold;
	color: #FFFFFF;
	background: #333333;
	border-right: 5px solid#000;
}
#sign_in_out li a:hover {
	background: #808080;
}
#sign_in_out2 {
	padding-top: 5px;
	text-align: right;
	margin-left: auto;
	margin-right: auto;
	background: #000000;
}
#sign_in_out2 ul {
	padding-top: 0px;
}
#sign_in_out2 ul li {
	list-style-type: none;
	display: inline;
}
#sign_in_out2 li a {
	display: block;
	float: right;
	padding: 3px 10px;
	color: #fff;
	text-decoration: none;
	font-size: xx-small;
	font-weight: bold;
	color: #ffffff;
	background: #CC0000;
	border-right: 5px solid#000;
}
#sign_in_out2 li a:hover {
	background: #FFCC00;
	color: #000000;
}
#content_signin {
	text-align: center;
	font-size: large;
	background: #fff;
}
#checker_box {
	height: 20px;
	background-image: url('../images/CPD_Checkerboard_sm.png');
}
#blue_box {
	height: 5px;
	background-color: #336699;
}
.navigation {
	width: 100%;
}
#main_content {
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 100%;
}
#main_content p {
	color: #000;
	margin: 0 0 .5em .5em;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
#main_content h1 {
	color: #000;
	font-size: 180%;
	margin: 0 0 .5em;
}
#main_content h2 {
	color: #000;
	font-size: 160%;
	margin: 0 0 .5em;
}
#main_content h3 {
	color: #000;
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 .5em;
}
#main_content ol {
	list-style: square;
	list-style-position: inside;
}
#main_content li {
	list-style: disc;
	list-style-position: inside;
	padding-top: 10px;
}

#bottom_container {
	margin-left: 0px;
	width: 100%;
	background-color: #000000;
}
#empty_box2 {
	margin-left: 0px;
	width: 100%;
	background-color: #336699;
}

* {
    box-sizing: border-box;
}

form {
	text-align:center;
}


/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    height:100%;
    padding: 20px; 
    /*height: 500px;  Should be removed. Only for demonstration */
}

.column h2{ color:#000;
	
}
.center {
    margin: auto;
    width: 99%;
    border: 3px solid green;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {    
    content: "";
    display: table;
    clear: both;
}

#big_box2 {
	

	
}



/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 1000px) {
  .column {
    width: 50%;
    height:550px;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .column {
    width: 100%;
    height:auto;
  }
}