@charset "utf-8";
/* Starter CSS */

body {background:url(i/grn-bg.png) repeat; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px; font-weight:normal; color:#444; margin:0px; -webkit-font-smoothing: antialiased;}
header, footer, aside, nav, article, section {display: block;}  

img	{margin:0px 10px 10px 0px; border:2px solid #DDD; cursor:auto; max-width:100%;}

.image{position: relative; width: 100%; /* for IE 6 */}
.image h4{position: absolute; top:-12px; left:0;width: 100%; color:rgba(0, 100, 0, 0.5);}
.image span{float: left; clear: left;color:rgba(255, 255, 255, 0.7); font: bold 12px/45px Helvetica, Arial, Sans-Serif;background: rgba(37, 68, 99, 0.7); padding: 0px 10px; position:0 0;}


p {font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:22px; font-weight:normal; vertical-align:top; color:rgba(51,51,51,1); display:block; clear:left;}
ol li {font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; font-style:normal; color:#000; vertical-align:top; margin-top:20px}

hr {display: block; clear: left; margin: -0.66em 0; visibility: hidden;}
.split {border-bottom:3px solid #DDD; margin:20px 0px 20px 0px;}

br {line-height:12px;}
br.clear {clear: both;}

h1,h2,h3,h4,h5,h6 {font-family:Arial, Helvetica, sans-serif; letter-spacing: -0.025em; font-style:normal;}

h1 {font-size:24px; font-weight: normal; color:#111; vertical-align:top;  line-height:1.1;}
h2 {font-size:16px; font-weight: bold; color:#111; line-height:20px;}
h3 {font-size:14px; font-weight: bold; color:rgba(51,51,51,1);}
h4 {font-size:12px; font-weight: normal; color:#000;}
h5 {font-size:12px; font-weight: normal; color:#000;}
h6 {font-size:10px; font-weight: normal; color:#999;}

	/* Links */
	a {-webkit-transition: color .4s ease-out; -moz-transition: color .4s ease-out; -o-transition: color .4s ease-out;}
	a:link {color: rgba(51,51,51,1) border-bottom:1px dotted #111; text-decoration:none;}
	a:visited {color:rgba(51,51,51,1); border-bottom:1px dotted rgba(51,51,51,1); text-decoration:none;}
	a:hover {color:#09c; border-bottom:1px dotted #09c; text-decoration:none; padding-top:2px;}
	a:active {color:rgba(51,51,51,1); border-bottom:1px dotted #09c; text-decoration:none;}
	
	/* Navigation Links */
	nav li.mn		    {font-size:18px; display:inline; float:left; clear:none; list-style:none; margin-right:20px; color:#e83119}
	nav li.mn a:link   {border-bottom: 3px solid #e83119; color:#e83119}
	nav li.mn a:hover  {border-bottom: 50px solid #e83119; #e83119}
	nav li.mn a:link   {-webkit-transition: border .3s ease-out;}
	
	
	
	nav li a			{border-bottom:2px solid #e83119;}
	
	
	
	
	
	/* Straight Corners */
	img.thumb a {border:2px solid #DDD; margin:0px 10px 10px 0px; cursor:pointer; -webkit-transition: color .3s ease-out; -moz-transition: color .3s ease-out;}
	img.thumb:link {border:2px solid #DDD; text-decoration:none; cursor:pointer;}
	img.thumb:visited {border:2px solid #DDD; text-decoration:none; cursor:pointer;} 
	img.thumb:hover {border:2px solid #F00; text-decoration:none; cursor:pointer;}
	img.thumb:active {border:2px solid #F00; text-decoration:none; cursor:pointer;}
	img.thumb a {-webkit-transition: color .3s ease-out; -moz-transition: color .3s ease-out;}
	
	/* Rounded Corners 
	img.thumb	{margin:0px 10px 10px 0px; border:2px solid #DDD; cursor:pointer;}
	img.thumb:link {-moz-border-radius:2px; -webkit-border-radius:2px; border:2px solid #DDD; text-decoration:none; cursor:pointer;}
	img.thumb:visited {-moz-border-radius:2px; -webkit-border-radius:2px; border:2px solid #DDD; text-decoration:none; cursor:pointer;} 
	img.thumb:hover {-moz-border-radius:2px; -webkit-border-radius:2px; border:2px solid #090; text-decoration:none; cursor:pointer;}
	img.thumb:active {-moz-border-radius:2px; -webkit-border-radius:2px; border:2px solid #090; text-decoration:none; cursor:pointer;}*/
	
	.sub-header:link {color:rgba(51,51,51,1); border-bottom:1px dotted rgba(51,51,51,1); text-decoration:none;}
	.sub-header:visited {color:rgba(51,51,51,1); border-bottom:1px dotted rgba(51,51,51,1); text-decoration:none;}
	.sub-header:hover {color:#09c; border-bottom:1px dotted #09c; text-decoration:none;}
	.sub-header:active {color:rgba(51,51,51,1); border-bottom:1px dotted rgba(51,51,51,1); text-decoration:none;}
	
	footer:link {color:rgba(51,51,51,1); border-bottom:1px dotted #111; text-decoration:none;}
    footer:visited {color:rgba(51,51,51,1); border-bottom:1px dotted rgba(51,51,51,1); text-decoration:none;}
	footer:hover {color:#09c; border-bottom:1px dotted #09c; text-decoration:none;}
	footer:active {color:rgba(51,51,51,1); border-bottom:1px dotted #09c; text-decoration:none;}

/* Page */
#container 			{width:993px; height:auto; margin-left:auto; margin-right:auto; margin-top:40px;}

/* Corners */
.roundedBox {position:relative; padding:0px; margin:0px 0; width:auto; height:auto;}
.corner {position:absolute; width:5px; height:5px;}
.tl {top:0; left:0; background-position:0px 0px;}
.tr {top:0; right:0; background-position:-5px 0px;}
.bl {bottom:0; left:0; background-position:0px -5px;}
.br {bottom:0; right:0; background-position:-5px -5px;}
#white {background-color:#FFF; width:993px; height:100%;}
#white .corner {background-image:url(i/corners.png);}

/* Head */
#valance			{width:100%; height:30px; background-color:#CCC;}
#header-wrapper		{width:370px; height:100px; background-color:#EEE; float:right;}
#logo				{}
#menu				{}

/* Body */
#page-wrapper 		{width:1000px;margin-left:auto; margin-right:auto; display:block;}
#body-wrapper		{width:993px; height:auto; display:block;}
#main-column{width:525px; height:auto; display:block; padding:20px; float:left; clear:none;}
aside		        {width:370px; height:auto; display:block; padding:20px 20px 20px 20px; background-color:#eee; float:left;}
#© 					{width:370px; height:auto; display:block; padding:10px 20px 20px 20px; background-color:#fff; float:left; clear:right; color:#aaa;}

.thumb-box			{width:500px; height:auto; display:block; margin:20px 0px 20px 0px;}
.aro 				{font-weight:900; font-size:10px;}



/* Footer */
footer				{width:100%; height:400px; background-color:#111; float:left; clear:both;}
#footer-wrapper		{width:993px; height:290px;	margin-left:auto; margin-right: auto; background-color:#111; padding:20px 0px 20px 0px; clear:left; border-top:12px solid #333;}











/*
NEW FLUID GRID -- RESPONSIVE WEB LAYOUT -- CSS3 
--the below statement says if the sceen resolution falls BELOW 
600px wide, lets dump the layout into a single column, making it 
more friendly for small screen resolutions on handhelds 
and smart phones.--

--the @media query can manipulate the div widths based on
the screen resolution!!--

http://www.alistapart.com/articles/responsive-web-design/
*/

@media screen and (max-width: 600px) {
  .mast, .intro, .main, #footer-wrapper {float: none; width: auto;}
}