@font-face {
    font-family: 'Overspray';
    src: url(fonts/Overspray.ttf);
    font-weight:300;
}

html{
	background-color: transparent;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    font-family: 'Open Sans Condensed', sans-serif; 
	margin: 0 auto;
	width: 100%;
	clear: both;
	font-size: 1.1em;
    line-height: 1.4;
    background-image: url("/web/20161029155459oe_/http://www.cadetcommand.army.mil/res/img/usacc_background_fill.gif"); 
	background-position: center top;
	background-repeat: repeat;
	background-size: 100% auto;
	background-color: transparent;
	background-origin: padding-box;
	background-position: 0 0;
    text-align: center;
}

a {
	text-decoration: none;
	color: #455348; 

}

a:hover {
    color: #64564c;
    text-decoration: underline;
}

hr {
    border: 0;
    height: 0;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.amp {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1em;
}

.newsTitle {
    text-decoration: none;
    line-height: 1.2em;
    text-transform: capitalize;
}

.newsReadLink {
    float: right; 
	text-decoration: none;
	color: #64564c;
    font-weight: 700;
    font-size: 0.8em;
    line-height: 1.2em; 
    font-style: normal; 
    padding-bottom: 6px; 
    font-family: 'Special Elite', sans-serif;
    font-weight: 700;
}

.newsReadLink:hover {
	color: #455348;
}

#smug-feed a {
	background-color: #fff;
	border-radius: 0;
	padding: 0em;
}
#smug-feed img {
	border: 1px solid #333;
    padding: 0;
    margin-left: 0px; 
    margin-right: 7px;
}

.body {
	color: #000;
	font-family: 'Open Sans Condensed', sans-serif; 
	line-height: 1.4;
	text-align: left;
	background-color: #ccc;
}

.gradband {
        background-image: url("/web/20161029155459oe_/http://www.cadetcommand.army.mil/res/img/usacc_background.gif"); 
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: 100% auto;
		background-attachment: scroll;
		background-color: transparent;
		background-origin: padding-box;
		background-position: 0 0;
		width: 100%;
		height: 100%;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: -999;
	}

.mainheader {
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	max-width: 100% !important;
	min-width: 70% !important;
}

.mainheader img {
	width: 45px; 
	height: auto;
	margin: 1% 0;
	padding: 0 .33em;
    border: none; 
	max-width: 6.69em !important; /*100px*/
	min-width: 56px !important; /*70px*/ /*box-sizing 45px*/
}

.headerTitle {
	width: 50% !important;
	height: auto;
    text-wrap: none;
}

.headerTitle hr {
    width: 55%;
    text-align:left;
}

.headerTitle h1:before {
	content: "";
	height: .33em;
	display: block;
}

.headerTitle h1 {
	text-transform: uppercase;
	margin: 0;
	line-height: 1.3; 
    color: #fff;
}

.headerTitle h3 {
	color: #141517;
	text-transform: uppercase;
	margin: 0; 
    font-family: 'Open Sans Condensed', sans-serif; 
}

.headerTitle, .mainheader img.left, .mainheader a.left {
	float: left;
}

.maincontent {
	line-height: 1.3;
	width: 100%;
	float: left;
}

.squarelist {
    list-style-type: square;
    line-height: 2;
    color: #474747; 
    font-size: 1em;
}

.button {
    text-transform: capitalize;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
	line-height: 1.3; 
    color: #fff;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #64564c;
    border: 1px solid #3a322c;
    border-radius: 2px;
}

.button:visited{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
	line-height: 1.3; 
    color: #fff;
    cursor: pointer;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #64564c;
    border: 1px solid #3a322c;
    border-radius: 2px;
}

.button:hover {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
	line-height: 1.3; 
    color: #fff;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #837971;
    border: 1px solid #3a322c;
    border-radius: 2px;
}

.headerTitle, .mainheader img.left, .mainheader a.left {
	float: left;
}

.maincontent {
	line-height: 1.3;
	width: 100%;
	float: left;
}

.contentwrapper {
	width: 100%;
    min-height: 1900px;
}

.content {
	float: left;
	width: 64%;
    height: 100%;
}

.innercontent {
	float: left;
	width: 100%;
    
}

.content h2, h2 {
	margin: 1% 0;
    font-size: 1.4em;
    color: #455348;
    font-family: 'Special Elite', sans-serif;
}

.content h4, h4 {
    margin: 0; 
    font-size: 1em;
    color: #455348;
    font-family: 'Special Elite', sans-serif;
}

.news_selected {
    font-size: 1em;
    color: #63554b;
    font-family: 'Special Elite', sans-serif;
    cursor:pointer;
    text-decoration: underline;
    font-weight: 700;
}

.news_notselected {
    font-size: 1em;
    color: #727272;
    font-family: 'Special Elite', sans-serif;
    cursor:pointer;
}

h3 {
    margin: 0; 
    color: #64564c;
    font-weight: 700; 
    font-family: 'BenchNine', sans-serif;
}

article.pad {
	margin: 0%;
	margin-bottom: .35rem;
}

aside.pad {
    margin: 0%;
	margin-bottom: .35rem;
}

.topcontent {
	background-color: white;
	margin-top: 2px;
	padding: 2% 2% 2% 2%;
    background-image: url("/web/20161029155459oe_/http://www.cadetcommand.army.mil/res/img/home_module_background.gif");
    min-height: 1800px;
}

.topcontent content {
	overflow-x: hidden;
	display: inline;
}

.middlecontent {
	background-color: white;
	margin-top: 2px;
	padding: 2% 2% 2% 2%;
    background-image: url("/web/20161029155459oe_/http://www.cadetcommand.army.mil/res/img/home_module_background_2.gif");
}

.middlecontent p {
    line-height: 1.6;
}

.rightcontent {
	width: 35%;
	float: right; 
}

.bottomcontent {
	/* for later content */
}

.sidebar {
	width: 100%; /*box-sizing 94%;*/
	/*float: left;*/
	background-color: white;
	padding: .3em .6em; /* 2% 3% */
	margin: 0 0 .35rem 0;
    font-size: 1em;
    line-height: 1.6;
}

.top-sidebar {
	/* margin: 0.8% 0 1% 0%; */
    font-size: 1em;
    line-height: 1.6;
}

.middle-sidebar {
	margin-left: 0;
    font-size: 1em;
    line-height: 1.6;
}

.bottom-sidebar {
    margin-left: 3%;
    margin-bottom: 2%;
    font-size: 1em;
    line-height: 1.6;
}

.divline {
    color:#9f9f9f;
    font-size: 1.2em;
    font-weight: 300;
    font-family: 'Open Sans Condensed', sans-serif;
    padding-left: 18px;
    padding-right:18px;
    text-transform:lowercase;
}

.postinfo, .sidebarInfo {
	color: #666;
    font-size: 1em;
    line-height: 1.4;
    padding-bottom: 6px;
}

.mainfooter {
	width: 100%;
	float: left;
	height: 2.66em; /*40px;*/
	background-color: #474747;
}

.floatright {
	float: right;
}

article, aside {
	margin: 0; /*.2em;*/ /*3px;*/
}

aside.sidebar article h3 {
    font-size: 1.1em;
    line-height:1;
    color: #64564c;
    margin: 0;
    font-family: 'BenchNine', sans-serif;
    font-weight: 400;
    margin-bottom: 3px;
    margin-top: 3px;

}

.sidebar {
		width: 32%; /*box-sizing 26% */
		height: 17rem; /*added box-sizing */
		margin-left: 1%;
}

/* width of window >150px and <600px */
@media (min-width: 10em) and (max-width: 40em) {

	.mainheader img {
		width: 5%;
		height: auto;
	}

	.headerTitle {
		font-size: 90%;
	}

	.contentwrapper {
		width: inherit;
	}

	.content {
		width: 100%;
		float: left;
/* clearfix		margin-top: 2%;*/
	}

	.rightcontent {
		width: 100%;
		float: left;
/* clearfix		margin-top: 2%;*/
	}

	.postinfo, .sidebarInfo {
		display: none;
	}

	.topcontent {
		margin-top: .266em; /*4px;*/
	}

	.bottomcontent {
		margin-top: .266em; /*4px;*/
	}

	.top-sidebar, .middle-sidebar, .bottom-sidebar {
		padding: 2% 2%;
	}
}

@media only screen and (min-width: 40em) { /*600px*/

	.body {
		width: 95%;
	}

	.mainheader img {
		width: 7%;
		height: auto;
	}

}

/* width of window <600px */
@media (min-width: 40em) {

	.rss img {
		height: 32px;
		width: 32px;
		margin: .26rem;
	}
}

@media only screen and (max-width: 53.33em) { /*800px*/

	.maincontent {
		width: 100%;
		float: none;
	}

	.sidebar {
		float: left;
		clear: left;
	}

	.middle-sidebar {
		clear: right;
	}
}

@media only screen and (min-width: 53.33em) { /*800px*/

	.body {
		width: 90%;
	}

	.maincontent {
		line-height: 1.86em; /*28px; */
		width: 83.8%; /* 83% */
		/*float: none;*/
	}

	.innercontent {
		min-height: 67em;
	}

	.sidebar {
		float: right;
		width: 15.5%; /* box-sizing */
		margin-right: 0%;
		margin-left: 0%;
		margin-bottom: .6%;
		height: auto;
	}
}

@media only screen and (min-width: 60em) { /*900px*/

	.body {
		width: 85%;
	}

	.maincontent {
		width: 83.9%; /* 83% */
	}
}

/* width of window >150px and <600px */
@media only screen and (min-width: 10em) and (max-width: 40em) { /*150px 600px*/

	.mainheader img {
		height: auto;
	}

	.headerTitle {
		font-size: 2em;
	}
    #image_text p {
		font-size: 0.7em;
        line-height:1.3;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}

/* width of window > 800px */
@media only screen and (min-width: 53.33em) { /*800px*/

	.headerTitle h1:before {
		/* height: ; */
	}

	.headerTitle h1 {
		font-size: 1.6em;
	}

	.headerTitle h3 {
		font-size: medium;
	}
    #image_text p {
		font-size: 0.9em;
        line-height:1.6;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}

/* width of window > 1000px */
@media only screen and (min-width: 66.33em) { /*1000px*/

    .maincontent {
	width: 84.1%; /* 83% */
	}
	.sidebar {
		width: 15%;
	}
    #image_text p {
		font-size: 0.9em;
        line-height:1.6;
	}
    #contactList td {
        font-size:1em;
        padding:2px;
    }
}

/* width of window > 1100px */
@media only screen and (min-width: 73.33em) { /*1100px*/

        .maincontent {
		width: 84.3%; /* 83% */
	}
        #image_text p {
		font-size: 0.9em;
        line-height:1.6;
	}
        #contactList td {
        font-size:1em;
        padding:2px;
    }
}

@media only screen and (min-width: 81.66em) { /*1225px*/

    .body {
		max-width: 65.33em; /*980px*/
	}

	.headerTitle h1 {
		font-size: 2.133em; /*32px*/
	}

	.headerTitle h3 {
		font-size: 1.2em; /*18px*/
	}

	.maincontent {
		width: 84.3%; /* 84.5% */
	}
    #image_text p {
		font-size: 0.9em;
        line-height:1.6;
	}
    #contactList td {
        font-size:1em;
        padding:2px;
    }
}

@media only screen and (min-width: 1400px) { 
	.maincontent {
		width: 84%; /*883px*/
	}
    #image_text p {
		font-size: 0.9em;
        line-height:1.2;
	}
    #contactList td {
        font-size:1em;
        padding:2px;
    }
}

/* heading title styles, vw not supported by mobile :( */
/* width of window > Xpx */
@media only screen and (min-width: 1em) {
	.headerTitle h1 {
		font-size: .6rem;
	}
	.headerTitle h3 {
		font-size: .3rem;
	}
    #image_text p {
		font-size: 0.66em;
        line-height:1.2;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}
@media only screen and (min-width: 18.75em) { /*300px*/
	.headerTitle h1 {
		font-size: .7rem;
	}
	.headerTitle h3 {
		font-size: .4rem;
	}
    #image_text p {
		font-size: 0.66em;
        line-height:1.2;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}
@media only screen and (min-width: 21.875em) { /*350px*/
	.headerTitle h1 {
		font-size: .8rem;
	}
	.headerTitle h3 {
		font-size: .5rem;
	}
    #image_text p {
		font-size: 0.66em;
        line-height:1.2;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}
@media only screen and (min-width: 25em) { /*400px*/
	.headerTitle h1 {
		font-size: .9rem;
	}
	.headerTitle h3 {
		font-size: .6rem;
	}
    #image_text p {
		font-size: 0.66em;
        line-height:1.2;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}
@media only screen and (min-width: 28.125em) { /*450px*/
	.headerTitle h1 {
		font-size: 1rem;
	}
	.headerTitle h3 {
		font-size: .7rem;
	}
    #image_text p {
		font-size: 0.7em;
        line-height:1.5;
	}
    #contactList td {
        font-size:0.8em;
        padding:2px;
    }
}
@media only screen and (min-width: 31.25em) { /*500px*/
	.headerTitle h1 {
		font-size: 1.1rem;
	}
	.headerTitle h3 {
		font-size: .8rem;
	}
    #image_text p {
		font-size: 0.72em;
        line-height:1.5;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 34.375em) { /*550px*/
	.headerTitle h1 {
		font-size: 1.2rem;
	}
	.headerTitle h3 {
		font-size: .9rem;
	}
    #image_text p {
		font-size: 0.8em;
        line-height:1.5;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 37.5em) { /*600px*/
	.headerTitle h1 {
		font-size: 1.3rem;
	}
	.headerTitle h3 {
		font-size: 1rem;
	}
     #image_text p {
		font-size: 0.8em;
        line-height:1.6;
	}
     #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 40.625em) { /*650px*/
	.headerTitle h1 {
		font-size: 1.4rem;
	}
    #image_text p {
		font-size: 0.8em;
        line-height:1.6;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 43.75em) { /*700px*/
	.headerTitle h1 {
		font-size: 1.5rem;
	}
    #image_text p {
		font-size: 0.8em;
        line-height:1.6;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 46.875em) { /*750px*/
	.headerTitle h1 {
		font-size: 1.6rem;
	}
    #image_text p {
		font-size: 0.8em;
        line-height:1.6;
	}
    #contactList td {
        font-size:0.9em;
        padding:2px;
    }
}
@media only screen and (min-width: 50em) { /*800px*/
	.headerTitle h1 {
		font-size: 1.7rem;
	}
    #image_text p {
		font-size: 0.9em;
        line-height:1.6;
	}
    #contactList td {
        font-size:1em;
        padding:2px;
    }
}
