h1 { color: #800; font-size: 1.2em; }

@media screen and (min-width: 401px) {
	.client-section { margin-bottom: 12px; } 

	p, .client_detail ul li, .client_detail a {
		font-size: 0.8em;
	}

	p.clienttype_gov {
		background-color: #000099;
	}

	p.clienttype_ind {
		background-color: #009900;
	}

	p.clienttype_edu {
		background-color: #a30500;
	}

	h2, { font-size: 1.2em; font-weight: bold; } 

	p.clienttype_gov, p.clienttype_ind, p.clienttype_edu {
		font-family: Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 6px 15px;
		text-align: left;
		font-size: 1.1em;
		font-weight: bold;
		color: #fff;
	}
}

@media screen and (max-width: 400px) {

        .client_detail { 
            // display: none; 
            height: 100%;
            max-height: 0;
            overflow: hidden;
            -webkit-transition: max-height .5s ease-in-out;
            transition: max-height .5s ease-in-out; 
        }   

        .client-section label p { margin: 0; padding: 0; }

        .client-section { 
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                -moz-box-shadow: 0 0 2px 1px #ccc;
                -webkit-box-shadow: 0 0 2px 1px #ccc;
                box-shadow: 0 0 2px 1px #ccc;
                margin-left: 5px;
                padding: 10px;
                width: 85%;
                background: #f0f0f0; 
                background: #fff;
        }   
    
        .client-section label { cursor: pointer; }

        .client-section input[type=checkbox]:checked + label + div { 
            max-height: 2000px; 
        }

	ul.clients {
		float: left;
		margin: 0;
		padding: 0;
		text-align: left;
		width: 98%
	}

	label { font-weight: bold; }

	.midpage {
		margin-bottom: 10px;
	}

}


@media screen and (min-width: 401px) and (max-width: 729px) {

	ul.clients {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
		width: 98%
	}

	ul.clients li {
		float: left;
		font-size: 0.8em;
		font-weight: normal;
		width: 100%;
		margin: 0; 
		padding: 3px 10px;
		color: #333;
	}

	ul.clients li.white {
		background-color: #fff;
	}
		
	ul.clients li.white_pos {
		background-color: #fff;
	}

	ul.clients li.alt {
		background-color: #eee;
	}

	ul.clients li.alt_pos {
		background-color: #eee;
	}


}

@media screen and (min-width: 730px) {

	ul.clients {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
		width: 47%;
	}

	ul.left {
		margin-right: 2em;
	}

	ul.clients li {
		float: left;
		font-size: 0.8em;
		font-weight: normal;
		width: 100%;
		margin: 0; 
		padding: 3px 10px;
		color: #333;
	}

	ul.clients li.white {
		background-color: #fff;
	}
		
	ul.clients li.white_pos {
		background-color: #fff;
	}

	ul.clients li.alt {
		background-color: #eee;
	}

	ul.clients li.alt_pos {
		background-color: #eee;
	}



}