/* clearfix fixes problem with floating elements not pushing borders down,
add the .group class to all elements containing floating elements */

.group:before, .group:after {
	content: "";
	display:table;
	}
.group:after {
	clear:both;
	}
.group {
	zoom:1;
	}
	
body {
	background-image:url('../images/nacoss-bg.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	font-family:Arial, San-serif;
	}
	
h1 {font-size:1.5em;}
h2 {font-size:1.3em;}
h3 {font-size:1em;}
/* Navigation styles */
nav {
    height: 40px;
    width: 1000px;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
	border-radius:0.5em;
	margin-top:0.3em;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 40px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
	color:#F7CE00;
}
nav a#pull {
    display: none;
}   
.scrollToTop{
	width:100px; 
	height:130px;
	padding:10px; 
	text-align:center; 
	background: whiteSmoke;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position:fixed;
	top:250px;
	right:-40px;
	display:none;
	background: url('../images/-arrow-up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
	text-decoration:none;
}
 
#container {width:1000px;height:auto;margin:4em auto;color:white;padding:0.5em;box-sizing:border-box;}
#container #logo {width:453px;height:390px;float:left;background-color:white;border-radius:0.8em;text-align:center;padding:0.5em 0.5em 1em 0.5em;}
#container #logo img{width:100%;border-radius:0.8em;}
#container #header p {text-align:center;vertical-align:middle;padding:0.9em;font-size:2em;margin:0;color:black;}

#container #navigation {width:46%;height:380px;float:right;border-radius:0.8em;padding:0.5em 0.5em 1em 0.5em;}
#container #navigation {transition:background 0.6s ease;background:rgba(255,255,255,0.5);height:95%}
#container #navigation:hover {background:rgba(255,255,255,1);}
#container #navigation h1 {color:black;border-bottom:solid 5px #F7CE00;text-align:center;}
#container #navigation p{color:black;text-align:center;padding:0.3em 0;transition:background-color 0.4s ease;background-color:rgba(247,206,0,0.5);}
#container #navigation p:hover{background-color:rgba(247,206,0,1);}
#container #navigation p a{text-decoration:none;font-weight:bold;color:black;}
#container #navigation p:nth-child(2){margin-top:8%;}
#container #navigation p:last-child {margin-bottom:9%;}

/* about us page */
#header {width:1000px;height:auto;margin:0 auto;background-color:white;border-radius:0.5em;box-sizing:border-box;}
#header img{width:10%;float:left;vertical-align:middle;border-radius:0.5em;min-width:80px;padding-bottom:0.5em;}
#container #profile {clear:left;width:1000px;margin:0.2em auto;color:#000;background-color:white;border-radius:0.5em;box-sizing:border-box;padding:0.5em;}
#container #profile h1, #container #profile p{color:black;margin:0.5em 1em;}
#container #profile h2 {color:black;font-size:1.1em;margin:0.5em 1em;border-bottom:solid 1px #F7CE00;}
#container #profile h1 {margin:1em;}
#container #profile ul{color:black;font-size:0.9em;}
#container #profile a{color:blue;text-decoration:none}
#container #profile a:hover{text-decoration:underline;}
#container #profile ul {width:90%;}
#container #profile ul .link{list-style-type:none;}

/* consitution */
#container #profile ol {list-style-type: decimal-leading-zero}
#container #profile ol li {font-size:0.95em;}
#container #profile ol li ol {list-style:none;margin:0.5em 0;}
#container #profile ol li ol li{width:90%;}

/* executive committee page */
#container #exec-comm {clear:left;width:1000px;margin:0.2em auto;color:#000;background-color:white;border-radius:0.5em;box-sizing:border-box;padding:0.5em;color:black;}
#container #exec-comm dl{margin-left:2em;}
#container #exec-comm dl dt{font-weight:bold;}
#container #exec-comm dl span {font-style:italic}

/* membership application confirmation page */
#container #thank-you {clear:left;width:1000px;margin:0.2em auto;color:#000;background-color:white;border-radius:0.5em;box-sizing:border-box;padding:0.5em;color:black;}

/* members page */
	#members {clear:left;width:1000px;margin:0.2em auto;color:#000;background-color:white;border-radius:0.5em;box-sizing:border-box;padding:0.5em;color:#000;}
	#members #m-left {width:47%;float:left;height:auto;}
	#members #m-left ul, #members #m-right ul{list-style:none}
	#members #m-left ul li, #members #m-right ul li{padding:0.3em 0;}
	#members #m-left ul li img, #members #m-right ul li img {width:10%;vertical-align:middle;min-width:30px;}
	#members #m-right {width:47%;float:right;height:auto;}
/* #container #members {clear:left;width:1000px;margin:0.2em auto;color:#000;background-color:white;border-radius:0.5em;box-sizing:border-box;padding:0.5em;color:#000;}
#container #members h2{font-size:1.1em;}
#container #members ul{font-size:0.9em;} */

/* members links page */
#container #members #one {clear:left}
#container #members #one, #container #members #two, #container #members #three, #container #members #four {width:20%;float:left;height:auto;box-sizing:border-box;margin:0.5em 1.5em;text-align:center;padding:0.3em;}
#container #members #row-one img {width:50%}  #container #members #row-one p{font-size:0.8em}
#container #members #row-two img {width:70%}	#container #members #row-two p{font-size:0.8em;}
#container #members #row-three img {width:40%} #container #members #row-three p{font-size:0.8em;}
#container #members #row-four img {width:40%} #container #members #row-four p{font-size:0.8em;}
#container #members a{color:blue;text-decoration:none;}
#container #members a:hover{text-decoration:underline;}
 hr{ border: 0; height: 1px; background: #333333; background-image: linear-gradient(to right, #cccccc, #333333, #cccccc); }
 
 /* membership application page */
 #container #members #application, #container #members #send-appl {width:70%;margin:0.5em auto;border:solid 1px #000;border-collapse:collapse;}
 #container #members #send-appl {border:none;}
 #container #members #send-appl .Button{font-size:1.2em;padding:0 0.5em;border-radius:5px;width:50%;background-color:#aaa;}
 #container #members .antispam {display:none;}
 #container #members #application .note{text-align:center;color:blue;font-weight:bold;height:2em;}
 #container #members #application .label{text-align:right;font-weight:bold;width:40%;}
 #date-label{text-align:right;font-weight:bold;width:40%;}
 #container #members #application .spec-label{text-align:center;font-weight:bold;width:100%;}
 #container #members #application .spec-label p{width:40%;margin:0.3em auto;}
 #container #members #application .label span{font-style:italic;font-size:0.9em;font-weight:normal;}
 #container #members #application td input{width:100%;font-size:1em;}
 #container #members #application textarea {width:100%;font-size:1em;font-family:Arial, Trebuchet, San-serif;}
 #container #members #application tr:nth-child(odd){background-color:#F3D359;}
 #container #members #application tr p{margin:0.2em;}
 #container #members #application th{background-color:#455868;color:white;padding:0.2em 0;}
 #container #members #application th span{font-style:italic;font-size:0.9em;font-weight:normal;}
 #container #members #application #yes, #container #members #application #no{width:20%;border:solid 1px red;}
 
 /* news page */
 #profile p span{font-size:0.8em;font-style:italic;}
 #profile h2 i {font-weight:normal;font-size:0.9em;}
 
/* contact us page */
#container #contact {width:46%;height:388px;float:left;border-radius:0.8em;padding:0.5em 0.5em 1em 0.5em;background-color:white;}
#container #contact #contact-head {width:100%;border-bottom:solid 1px #aaa;padding:0.5em}
#container #contact #contact-head h1{color:black;font-size:1.5em;}
#container #contact #contact-head img {width:20%;float:left;vertical-align:middle;margin-right:1em;min-width:90px;}
#contact #contact-details table{width:95%;margin:1.5em auto;border:solid 1px #aaa;color:#000;}
#contact #contact-details table a{text-decoration:none;}
#contact #contact-details table a:hover{text-decoration:underline;}
#contact #contact-details table td {width:50%;}
#contact #contact-details table th{background-color:#F7CE00}
#contact #contact-details table td hr {clear:left;color:#cccccc;}
#contact #contact-details .label{text-align:right;font-weight:bold;}


/* footer section */
footer p {clear:left;color:white;text-align:center;font-size:0.8em;font-weight:bold;margin-bottom:4.5em;text-shadow:2px 2px 2px #000;}
footer p span{display:inline-block;width:1em;}
footer a{color:white;text-decoration:none;}
footer a:hover{text-decoration:underline;}