// ----------------------------------------------------------------
//		Project Specific Extended HTML Stylings
// ----------------------------------------------------------------
body{background:#CCDF9B}

// Highlight Text Selection
::-moz-selection  {background:$c-Brand-1; color:$c-Light; text-shadow:none}
::selection       {background:$c-Brand-1; color:$c-Light; text-shadow:none}

// Full container for the entire page.  
.page{min-height:600px;
  @media (max-device-width:480px), screen and (max-width:800px){
    min-height:25px;
  }  
}

// Generic tag to wrap around content within sections to apply a max width to the interior content
// while allowing for larger sections to expand the whole page for BG purposes
.content{
	margin:0 auto;
	max-width:1200px;
	padding:$spacing*5;
	
	& > :last-child{
	  margin-bottom:0;	// kill any extra margin on the last element in the .content div
	}
}

// ----------------------------------------------------------------
//		Project Specific Link Stylings
// ----------------------------------------------------------------
a{   
	color:$c-Link;
	&:hover, &:active{color:darken($c-Link, 15%)}
  &:visited{color:#A5424B}
//	&:visited{color:darken($c-Link, 30%)}
}
// example - :hover{color:darken($c-Link, 15%)}

// Outlines - kill or keep.  It's your project
:focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner{outline:none}

.col-33, .col-40, .col-60{
  @media (max-device-width:480px), screen and (max-width:800px){
    float:none;
    width:100%;
  }
}

.header-Outro .col{
  @media (max-device-width:480px), screen and (max-width:800px){
    float:none;
    padding:0;
    width:100% !important;
  }
}

@import 'project-Header';		// Project Specific Header Styling
@import 'project-Main';			// Project Specific Main Content Area Styling
@import 'project-Footer';		// Project Specific Footer Styling

.alert{
   background-color:#F5BA00; color:#fff;
}
