@viewport{width: device-width; initial-scale: 1.0; }

body {margin-left: 20px; margin-right: 20px;}
 
hr {border: 1px solid purple}
hr.dashed {border-top: 1px dashed darkgreen; border-bottom: none;}

h1 {margin:0px; padding:0px; font-family: arial, helvetica, sans-serif; font-size: 18px; font-weight: bold; color: darkgreen;}
h2 {margin:0px; padding:0px; font-family: arial, helvetica, sans-serif; font-size: 16px; font-weight: bold; color: green;}
h3 {margin:0px; padding:0px; font-family: arial, helvetica, sans-serif; font-size: 14px; font-weight: normal; color: purple;}

h5 {text-align: center; margin:0px; padding:0px; font-family: arial, helvetica, sans-serif; font-size: 12px; color: green;}

p {margin:0px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: black;}

ol {margin-left:20px; margin-bottom: 20px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: black; 
	list-style-position: inside; text-indent: -20px;}

ul {margin-left:20px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: black; 
	list-style-type: circle; list-style-position: inside; text-indent: -20px;}

/* For mobile phones -----------------------------------------------------------------*/
@media only screen and (max-width: 639px) {
	 
	.logo img {
	max-width: 100%; height: 24px;
    }
	
	.title {
	float: left; width: 100%; line-height: 16px; height: 16px;
	color: darkgreen;
	font-family: arial; font-size: 12px; font-weight: bold; margin-left: 16px;
	}
	
	.navbar a {
	float: right; width: 32px; height: 12px; line-height: 12px; margin-left: 5px;
	font-size: 8px;
	font-weight: normal; text-align: center;
	font-family: arial; font-weight: normal; text-align: center;
	color: darkgreen; border: 1px solid lightgreen;
	text-decoration: none;
	}
	
	.home p {
	font-size: 14px; text-align: center; color: darkgreen; text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}
	
	.home h1 {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 12px; font-weight: bold; text-align: center; 
	color: darkgreen; margin-top: 20px; 
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}

	.home h2 {
	font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 8px; text-align: center; color: darkgreen; margin-top: 20px;
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}
	
	.footer h5 {
	margin:0px; padding:0px;
	font-family: arial, helvetica, sans-serif;
	text-align: center; font-size: 8px; color: darkgreen;
	}
		
	.event-box {
	position: absolute; top: 15%; left: 75%; transform: translate(-50%, -50%); width: 120px; height: 15px; padding-top: 0px; padding-bottom: 5px;
	border: 2px solid purple;
	}
	
	.event-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 10px; font-weight: bold; color: darkgreen; text-align: center;
	text-decoration: none;	
	}

	.event2-box {
	position: absolute; top: 15%; left: 25%; transform: translate(-50%, -50%); width: 120px; padding-top: 1px; padding-bottom: 2px;
	border: 2px solid purple;
	}
	
	.event2-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 10px; font-weight: bold; color: darkgreen; text-align: center;
	text-decoration: none;	
	}
}

 /* For tablets -----------------------------------------------------------------*/
 @media only screen and (min-width: 640px) and (max-width: 800px) {
	  
	.logo img {
	max-width: 100%; height: 32px;
    }
	
	.title {
	float: left; width: 100%; line-height: 20px; height: 20px;
	color: darkgreen;
	font-family: arial; font-size: 16px; font-weight: bold; margin-left: 16px;
	}
	
	.navbar a {
	float: right;
	width: 64px; height: 20px; line-height: 20px; margin-left: 16px;
	font-size: 14px;
	font-family: arial; font-weight: normal; text-align: center;
	color: darkgreen; border: 1px solid lightgreen;
	text-decoration: none;
	}	
	
	.home p{
	font-size: 20px; text-align: center; color: darkgreen;
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}
	
	.home h1 {
	font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 16px; text-align: center; color: darkgreen; margin-top: 20px;
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}
	
	.home h2 {
	font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 12px; text-align: center; color: darkgreen; margin-top: 20px;
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}
		
	.footer h5 {
	margin:0px; padding:0px;
	font-family: arial, helvetica, sans-serif;
	text-align: center; font-size: 12px; color: darkgreen;
	}
	
	.event-box {
	position: absolute; top: 15%; left: 75%; transform: translate(-50%, -50%); width: 175px; padding-top: 2px; padding-bottom: 5px;
	border: 3px solid purple;
	}
	
	.event-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 10px; font-weight: bold; color: darkgreen; text-align: center; 
	text-decoration: none;	
	}
	
	.event2-box {
	position: absolute; top: 15%; left: 25%; transform: translate(-50%, -50%); width: 175px; padding-top: 2px; padding-bottom: 5px;
	border: 3px solid purple;
	}
	
	.event2-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 10px; font-weight: bold; color: darkgreen; text-align: center; 
	text-decoration: none;	
	}
 }
   
 /* For desktop -----------------------------------------------------------------*/
 @media only screen and (min-width: 801px) {
	  
	.logo img {
	max-width: 100%; height: 58px;
    }
	
	.title {
	float: left; width: 100%; line-height: 32px; height: 32px;
	color: darkgreen;
	font-family: arial; font-size: 24px; font-weight: bold; margin-left: 20px;
	}
	
	.navbar a {
	float: right; width: 80px; height: 32px; line-height: 32px; margin-left: 20px;
	font-family: arial; font-weight: normal; text-align: center;
	font-size: 16px; 	font-weight: bold;
	color: darkgreen; border: 1px solid lightgreen;
	text-decoration: none;
	}
	
	.home h1{
	font-size: 30px; text-align: center; color: darkgreen;	
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}


	.home h2 {
	font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 24px; text-align: center; color: darkgreen; margin-top: 20px;
	text-shadow: 1px 0 #FFFFFF, 0 1px #FFFFFF, -1px 0 #FFFFFF, 0 -1px #FFFFFF;
	}	
	
	.footer h5 {
	margin:0px; padding:0px;
	font-family: arial, helvetica, sans-serif;
	text-align: center; font-size: 12px; color: darkgreen;
	}
		
	.event-box {
	position: absolute; top: 15%; left: 75%; transform: translate(-50%, -50%); width: 240px; padding: 5px;
	border: 4px solid purple; background-color: white;
	}
	
	.event-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 18px; font-weight: bold; color: darkgreen;
	text-decoration: none;	
	}
	
	.event2-box {
	position: absolute; top: 15%; left: 25%; transform: translate(-50%, -50%); width: 240px; padding: 5px;
	border: 4px solid purple; background-color: white;
	}
	
	.event2-box a {
	font-family: arial, helvetica, sans-serif; font-weight: normal; font-size: 18px; font-weight: bold; color: darkgreen;
	text-decoration: none;	
	}

 }
 /* ---------- End of Responsive Media ---------- */
	
    .navbar a:hover,   
    .navbar a:active {
	font-weight: bold;
	color: darkgreen; border: 1px solid darkgreen;
    }
	
	.navcurrent a {
	background: #ccffcc;
	}

	.header-line {
	width: 100%; display:inline-block;
	}		

/* ----- Styles for typical page ----- */
	.homepage-content {
	position: relative; 
	text-align: center;
	}
		
	.home {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;	
	}

	.page-content {
	float: left; width: 100%;
	}
		
	.sidebar-block {
    float: left;
	top: 60px;
	width: 140px;
	}
	
	.sidebar {
	display:inline-block;
	}
	
	.sidebar a {
	display: block;
	margin-bottom: 20px;
	font-family: arial; font-size: 14px; font-weight: normal;
	width: 120px; padding: 5px; color: purple; border: 1px solid mediumpurple;
	text-decoration: none;
	}	
	
	.sidebar a:hover,   
    .sidebar a:active {
	font-weight: bold;
	color: purple; border: 1px solid purple;
    }
	
	.sidebarcurrent a {
	background: #ffccff; 
	}
	
	.text {
	margin-left: 160px;
    }
	
/* ----- Styles for Courses Table ----- */
	.course-table {
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight: normal; font-size: 12px;
	line-height: 20px;
	color:#003366;
	text-align: left;
	}
	
/* ----- Styles for Committee Table ----- */	
	.committee-table {
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight: normal; font-size: 14px;
	line-height: 20px;
	text-align: left; vertical-align: top;
	}

/* ----- Styles for Membership Form ----- */
#form-m p label{
	display: block;
	float: left;
	width: 150px;
	}
	
/* width of form field */	
#join {
	width: 380px; height: 20px;
	background: #e6ffe6;
}

/* ----- Styles for Contact Us Form ----- */
#form-c p label {
	display: block;
	float: left;
	width: 150px;
}

#contact {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #e6ffe6;
	width: 420px;
	height: 24px;
	}
	
textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #e6ffe6;
	width: 420px;
	height: 180px;
	}
	
#submit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; font-weight: bold;
	background: darkgreen; color: white;
	margin-left: 150px;
	width:72px;
	height: 24px;
}

/* ----- Styles for Questionnaire Form ----- */
	
/* width of form field */	
#form-q p label {
	display: block;
	float: left;
	width: 200px;
}

#questionnaire {
	width: 80px; height: 20px;
	background: #e6ffe6;
}

#textarea-q {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #e6ffe6;
	width: 600px;
	height: 50px;
}

#submit-q {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; font-weight: bold;
	background: darkgreen; color: white;
	width:100px;
	height: 24px;
}