/* 
Master CSS file for HAL5 website 
Copyright Yohon Lo unless noted in the CSS
margin: top right bottom left; 

*/

img { -ms-interpolation-mode: bicubic }

html { font-size: 62.5%; } 

/* start of ipad/mobile device profile */

@media only screen and (orientation:landscape) {

body {
	width:1024px;
	max-width:1024px;
    }

#side-left {
	width: 180px;
}

#side-right { 
	width: 815px;
}

div.monthlybadge {
	width:385px;
}

}


@media only screen and (orientation:portrait) {
body {
	width:768px;
	max-width:768px;
}

#side-left {
	width: 180px;
}

#side-right { 
	width: 560px; /*allow for padding */
}

div.monthlybadge {
	width:540px;
}
}

/* end of ipad, most browser except IE orientation */

body {
	background:#EAEEF2;
	margin: 0px;
	padding: 0px;
}


#wrapper {
	text-align: left;
	margin: 0px auto;
	padding:0px;
	border: none;
	background:#ffffff;
}

#side-left {
	float: left;
	position:relative;
	border: none;
	padding:0px;
	margin: 0px 0px 0px 1px;
	background:#ffffff;
    word-wrap: break-word; /* fix for long ... IE */
    overflow: hidden;     /* fix for ... float */
    text-align:left;
}

#side-right { 
	padding:2px 4px 2px 4px;
	margin: 0px 8px 0px 0px;
	float: right;
	border: 1px solid #CCCCCC;
	background:#EAEFF9;
	height: 1% /* Holly hack for Peekaboo Bug */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
	border-radius:10px;
}



#header {
	margin: 0 0 5px 0;
	background: none;
}


#footer {
	clear: both;
	background:#ffffff;
}

#blankdiv
{
	clear: both;
	width:100%;
}

#w3cref {
	font-size: 11px; 
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: normal;
	line-height: 12px;
}


p {
	font-size:14px;
	font-size:1.4rem;
	line-height:18px;
	line-height:1.8rem;
	margin:0px;
	padding:4px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-align:left;
}

p.two {
	font-size:13px;
	font-size:1.3rem;
	line-height:16px;
	line-height:1.6rem;
	margin:4px;
	padding:4px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	text-align:left;
}

p.three {
	font-size:14px;
	font-size:1.4rem;
	line-height:16px;
	line-height:1.6rem;
	margin:4px;
	padding:4px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-align:center;
}

p.clearboth {	
	clear:both;
	font-size:14px;
	font-size:1.4rem;
	line-height:17px;
	line-height:1.7rem;
	margin:4px;
	padding:4px 10px 4px 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-align:left;
}


fontred {
	color: red;
	}

fontgreen {
	color: green;
	font-weight:bold;
	}


small {
	font-family: Arial, Helvetica;
	font-size: 10px;
	font-size: 1.0rem;
	margin: 10px 0px 0px 1px;
	color: #000000;
	text-align: left;
}



h1 { 
	font-size: 16px; 
	font-size: 1.6rem,;
	text-align: center;
	padding: 2px 0 0 0;
	margin: 4px;
	color: #000033;
	font-family: Arial, Helvetica, sans-serif;
	line-height:18px;
	line-height:1.8rem;
	}
h2 { 
	font-size: 15px; 
	font-size: 1.5rem,;
	text-align: left;
	padding: 5px 0 0 0;
	margin: 2px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	}

h3 { 
	font-size: 16px; 
	padding: 10px 0 10px 0;
	margin: 1px;
	text-align: center;
	color: #000080;
	font-family: Arial, Helvetica, sans-serif;
	}

h4 { 
	font-size: 14px; 
	font-size: 1.4rem,;
	padding: 4px 0 0 0;
	margin: 1px;
	text-align: center;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	}

	
H5 {
	font-size: 14px; 
	margin: 5px 3px 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: Bold;
	Color: #D12227;
	line-height: 16px;	
	text-align: left;
}

H5.pagedivider
{
	border: none; 
	background:#153889;
	color:#ffffff; 
	font-family: Arial, Helvetica, sans-serif;
	font-weight: Bold;
	font-size:15px;
	font-size:1.5rem;
	line-height:18px;
	line-height:1.8rem;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	padding:4px; 
	margin: 5px 2px 5px 2px; 
}





div.monthlybadge {
    min-height:165px;
    float:left;
    padding:5px; 
    margin:5px;
    text-align: Left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    color: #000000;
	background-color:#ffffff;
	border: 1px solid #003366;
    overflow: hidden;
    -moz-border-radius:5px;
	border-radius:5px;
}


div.flyerthumbnail  {
	float:left;
	position:relative;
	border: 1px solid #003366;
	overflow: none;
	padding:4px; 
	margin:4px;
	background-color:#ffffff;    
}


/* start of multi-image or sub div wrapper that center 

*/

.parentwrapper {
	border: none;
	background-color: none;
	text-align: center;
	overflow: hidden;
	width: 100%;
	padding:5px 0 5px 0;
}



.childwrapper {

	border: solid 1px #ccc;
	background-color: #fff;
	display: inline-block;
	letter-spacing: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
}

.childwrapper {
	*display: inline;
	*margin: 0 5px 0 5px;
}


.overallwrapper
{

	background-color:none;
	text-align:center;
	padding:5px;
	font-size:14px;
	font-size:1.4rem;
	font-family: Arial, Helvetica, sans-serif;
}

/* end of multi-image or sub div wrapper that center */




#nav {
	width: 170px;
}
#nav, #nav ul, #nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav a {
	display: block;
	height:1.4em;
	width: 100%;
	padding: 5px;
	text-decoration: none;
	font-size:13px;
	font-size:1.3rem;
	font-weight:bold;
	font-family: "lucida grande", arial, sans-serif; 

}
/* menu default look. Button */
#nav a.span {
    color: #333333;
	background-color: #aaaaaa;
	position: relative;
}

#nav a.span:hover {
    color: #ffffff;
	background-color: #EC4A11;
}


#nav a.span img {
	position: absolute;
	top: 5px;
	right: 6px;
	border: 0;
}
#nav li {
    border: 1px solid #ffffff;
	clear: both;
}
#nav li ul li {
	border: none;
}
#nav li ul li a {
    color: #4c4c4c;
    background-color: #cccccc;
	text-decoration: none;
	font-size:13px;
	font-size:1.3rem;
	font-weight:normal;
	font-family: arial, sans-serif; 
	text-indent: 10px;
}
#nav li ul li a:hover {
    color: #ffffff;
    background-color: #EC4A11;
}


    
a { 
outline: 0;
}

a:link {
  color:  #EC4A11;
  background-color: transparent ;
  text-decoration: none ;
}

a:hover, a:focus {
  color: #336600 ;
  background-color: transparent;
  text-decoration: underline ;
  outline: none; 
}

a:visited {
  color: #EC4A11;
  background-color: transparent ;
  text-decoration: none ;
 }
 
  


hr	{
text-align:center;
}

hr.bar
{
width: 90%;
margin:5px auto;
height:1px;
background-color:#A94700;
border:none;
}

hr.bar2
{
margin:20px auto;
height:1px;
background-color:#A94700;
border:none;
}

hr.clear
{
width: 100%;
margin:0 auto;
height:2px;
color:#ffffff;
background-color:#ffffff;
border:none;
}


/* picture frame with caption */


.picture { background-color: #fff; 
border: 1px solid #333333; padding: 3px; 
font-size:12px;
font-size:1.2rem;
font-family: Arial, sans-serif; text-align: center; color: #663300;
} 

.picture img { border: none; margin: 0px; } 
.right { margin: 5px 5px 5px 5px; float:right; } 
.left { margin: 5px 5px 5px 5px; float:left; } 
.left2 { border:1px solid #cccccc; margin: 0px 10px 5px 5px; float:left; } 
.right-main { margin: 2px 10px 10px 2px ; float:right; width:232px; height:320px; padding:5px;} 
.left-main { margin: 2px 10px 10px 2px ; float:left; width:232px; height:320px; padding:5px;} 
.rightTL1 {float:right; border: 1px solid #e6e6e6;padding:2px;width:262px; height:340px; } 
.rightH1 {float:right; border: 1px solid #e6e6e6;padding:2px;width:220px; height:336px; } 


ul.links  {
	font-family: Arial, Helvetica,sans-serif;
	color: #000000;
	text-align: left;
	font-size:14px;
	font-size:1.4rem;
	line-height:19px;
	line-height:1.9rem;

}
ul.links li {
	font-family: Arial, Helvetica,sans-serif;
	text-align: left;
	font-size:14px;
	font-size:1.4rem;
}

ul.links ul {
	font-family: Arial, Helvetica,sans-serif;
	text-align: left;
	font-size:14px;
	font-size:1.4rem;
	color: #004080;
}

ul.links ul li {
	font-family: Arial, Helvetica,sans-serif;
	text-align: left;
	font-size:13px;
	font-size:1.3rem;
	color: #004080;
	list-style: circle;
}



a.buttonmediumblue {
				font-family: calibri, arial, serif;
				font-size:14px;
				font-size:1.4rem;
				color:#ffffff;
				text-decoration:none;
				display:block;
				width:300px;
				padding:10px;
				border:1px solid #DDD;
				text-align:center;

				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-o-border-radius:5px;
				border-radius:5px;

				background:#4195DD;
				background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4195DD), to(#003C82));
				background:-moz-linear-gradient(0% 90% 90deg, #003C82, #4195DD);

				-webkit-transition: all .4s ease-in-out;
				-moz-transition: all .4s ease-in-out;
				-o-transition: all .4s ease-in-out;
				transition: all .4s ease-in-out;
			}
			a.buttonmediumblue:hover {
				color:#ffffff;
				border-color:#006600;

				background:#4195DD;
				background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#006600), to(#669933));
				background:-moz-linear-gradient(0% 90% 90deg, #669933, #006600);

			}
			a.buttonmediumblue:active {
				color:#ffffff;
				background:#FFFFFF;
				background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#669933), to(#006600));
				background:-moz-linear-gradient(0% 90% 90deg, #006600, #669933);
			}

			a.buttonmediumblue.notransitions {
				-webkit-transition: none;
				-moz-transition: none;
				-o-transition: none;
				transition: none;
			}



/* small link buttons*/
#smallbuttons {
	font-family: calibri, arial, serif;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight:bold;
	line-height:18px;
	line-height:1.8rem;
	color:#ffffff;
}


/* individual box. mouse over off. surround buttons a 
use this inconjunction with width in #buttons to create button.
if delete this line, the button will be verticle with width equal
to that at top's width */

#smallbuttons li {
	margin:4px; /* how far to move the box */
	float: left; 
	list-style-type: none;
	border: 2px solid #000000;
	color:#ffffff;
}

#smallbuttons ul {
	margin: 0; /*removes indent IE and Opera*/
	padding: 0; /*removes indent Mozilla and NN7*/
	list-style-type: none; /*turns off display of bullet*/
}

/* individual box. mouse over off */
#smallbuttons a {
	border: none;
	display: block; /* need this here to have box */
	padding: 10px 10px 10px 5px; /* padding for the text box */
	background-color: #003366;
	color:#ffffff;
}

#smallbuttons a:link, #buttons a:visited {
	text-decoration: none;
}

/* Defining background color and text color for hover */
#smallbuttons a:hover, #smallbuttons a:active {
	background-color: #FFFACB;
	text-decoration: none;
	color:#000000; 
}



/* Colorized grid/table */

table.grid { 
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;  
	color: #000000;
	background-color: #ffffff;
	border-collapse:collapse;
	border: none;
	width:auto;
	margin:5px;
}

.gridHead1 { 
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	padding: 4px 10px 4px 10px; 
	border-bottom: 1px solid #ffffff;
	border-spacing: 0px;
	background-color:#006633;
	width:90%;
}
.gridHead2 { 
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	padding: 4px 10px 4px 10px; 
	border-bottom: 1px solid #ffffff;
	border-spacing: 0px;
	text-align:left;
	background-color:#006633;
}

.gridRowHead { 
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	padding: 4px 10px 4px 10px; 
	background-color:#004080;
	border: none;
}

.gridRowC1 { 
	font-weight: normal;
	color: #000000;
	background-color:#E6E6E6;
	padding: 4px 10px 4px 10px; 
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

.gridRowC2 { 
	font-weight: normal;
	color: #000000;
	background-color:#E6E6E6;
	padding: 4px 10px 4px 10px; 
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	text-align:center;
}

.gridRowCtab { 
	font-weight: normal;
	color: #800040;
	background-color:#E6E6E6;
	padding: 4px 10px 4px 30px; 
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}


.redtext {color:red;}

.greentext {color:green;}

/* end of colorized grid */