#top
{
    padding: none;
    width: 100%;
}


#homepage-features
{
    /*margin: 10px 0px 10px;*/
    background-color: white;
    width: 100%;
}
#homepage-features h1
{
    margin: 0px;
    padding: 5px 0px;
    font-size: 1.25em;
    font-family: verdana, sans-serif;

    /*color: #b52025;*/
    /*color: #909191;*/
    color: #c0513d;
    background-color: #ffda89;
    text-indent: 20px;
    
}

#homepage-features h5
{
  margin: 0px;
    padding: 5px 0px;
    font-size: .9em;
    font-family: verdana, sans-serif;

    color: #b52025;
    background-color: #ffda89;
    text-indent: 200px;
}



/* featues box is 936 wide minus 20 pix of padding so 916 of space */
div.featuresbox
{
    padding: 10px;
}
/* this is 916 / 2 = 458px wide. Theres gonna be a 16px barrier in the middle,
 * so 8 margin right. That means width is 458 - 8 = 450px;
 */
div.features-left
{
    /*width: 450px;*/
width: 500px;
    float: left;
    margin: 0px 8px 0px 0px;
}
/* this is 916 / 2 = 458px wide. Theres gonna be a 16px barrier in the middle,
 * so 8 margin left. That means width is 458 - 8 = 450px;
 */
div.features-right
{
	float: left;
	/*width: 450px;*/
width: 400px;
	height: 240px;
	margin: 45px 0px 0px 8px;
	padding-top: 0px;
}
div.features-left2
{
    width: 916px;
    float: left;
    margin: 0px 8px 0px 0px;
}
/* these need all the width from above, so 450px.
 * but then we are taking off 5px on each side, so 440px
 * but the height is an issue. Better to not do any css for it
 * any deal with it in terms of content. So instead of capping the height
 * here, just make sure to not add too many words that would stretch the height
 * of these top and bottom boxes to the point they look bad.
 */
div.features-top
{
	/*width: 440px;*/
width: 395px;
	float: left;
	/*padding: 48px 5px 34px;*/
        /*padding: 72px 5px 34px;*/
        padding: 22px 5px 20px;
	border-bottom: 1px dotted black;
}
div.features-top h2
{
    margin: 0px 0px 5px 0px;
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
    color: #7a7474;
}

div.features-top h3
{
    margin: 0px 0px 5px 0px;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
}

div.features-top h4
{
	margin: 0px 0px 5px 0px;
	font-size: 0.8em;
	line-height: 1.5em;
	font-weight: normal;
	font-family: sans-serif;
	color: #c0513d;
}






div.features-top img
{
    float: right;
    margin: 0px 0px 5px 10px;
    border: none;
    /*width: 100px;
    height: 115px; */
}
div.features-bot
{
	width: 900px;
	float: left;
	padding: 15px 5px;
	margin-top: 7px;
}
/** so these feature cols need a width and height for the borders
  * the whole box is 440px wide. So we divide up the columns.
  * so the left col
  * Now lets give each column (except the last) 10 px of right margin
  * so thats 420 of real content, plus 2 borders that are 1 px wide, so 418
  * so 418 / 3 = 139.3 So lets give them 139 px each and we lose a pixel
  * We can add them pixel to the last column making it 140px wide.
  */
div.features-bot h3
{
    margin: 0px 0px 5px 0px;
    font-size: 15px;
    font-family: sans-serif;
    font-weight: normal;
    color: #7a7474;
}

div.features-bot h4
{
	margin: 0px 0px 5px 0px;
	font-size: 13px;
	line-height: 17px;
	font-family: sans-serif;
	font-weight: normal;
	color: #7a7474;
}





div.features-col
{
    width: 200px;
    margin: 0px 10px 0px 15px;
    padding-right: 7px;
    float: left;
    border-right: 1px dotted black;
    
}
div.features-col2
{
    width: 420px;
    /*margin: 0px 10px 0px 10px;*/
    margin: 0px 0px 0px 0px;
    padding-left: 22px;
    padding-right: 7px;
    float: left;
    border-right: 1px dotted black;
    
}

div.features-col3
{
   width: 450px;
    /*margin: 0px 10px 0px 10px;*/
    margin: 0px 0px 0px 0px;
    padding-left: 22px;
    padding-right: 7px;
    float: left;
    /*border-right: 1px dotted black;*/
}

div.features-col4
{
   width: 390px;
    /*margin: 0px 10px 0px 10px;*/
    margin: 0px 0px 0px 0px;
    padding-left: 22px;
    padding-right: 7px;
    float: left;
    /*border-right: 1px dotted black;*/
}


div.features-col4 h2
{
    margin: 0px 0px 5px 0px;
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
    color: #7a7474;
}

div.features-col4 h3
{
    margin: 0px 0px 5px 0px;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
}


div.features-col2 h2
{
    margin: 0px 0px 5px 0px;
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
    color: #7a7474;
}

div.features-col2 h3
{
    margin: 0px 0px 5px 0px;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
}



div.features-lastcol
{
    width: 175px;

    margin-left; 7px;
    float: left;
}


/** if we want 3 columns instead of 4
  * we will make them all 270px wide
  * Now lets give each column (except the last) 10 px of right margin
  */


div.features-col5
{
    width: 270px;
    margin: 0px 10px 0px 15px;
    padding-right: 7px;
    float: left;
    border-right: 1px dotted black;
}

div.features-lastcol5
{
    width: 260px;
    margin: 0px 10px 0px 15px;
    padding-right: 7px;
    float: left;
}


/*******
 *** MIDDLE SECTION
 * 936 total width
 * 538 on the left col
 * 312 on the right col
 * 86 leftover.
 * 40 wide middle padding
 * 23 left and 23 right margin.
 */
div.middlecontent
{
	width: 882px;
	min-height: 500px
	margin: 0px 27px 0px 27px;
	padding: 0px 0px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	color: #ffffff;
}
div.middlecontent3
{
	width: 882px;
	min-height: 500px
	margin: 0px 27px 0px 27px;
	padding: 0px 0px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	/*background-color: #ffda89;*/
}

div.milestonesprofilebox
{
	width: 725px;

	margin: 0px 27px 0px 27px;
	padding: 0px 15px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	/*background-color: #ffda89; yellow*/
        background-color: white;
    border-right: solid 1px #585956;
}


div.middlecontentprofile
{
	/*width: 725px;*/
width: 650px;

	margin: 0px 27px 0px 20px;
	padding: 0px 14px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	background-color: #ffda89;
    /*border-right: solid 1px #585956;*/
}
div.middlecontentprofile h1
{
	margin-top: 5px;
	font-weight: bold;
	background: #ffda89;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlecontentprofile h3
{
  /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}
div.middlecontent2
{
	width: 830px;
	margin: 0px 27px 0px 27px;
	padding: 0px 0px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	color: #ffffff;
}
div.middlecontent2 h1
{
	margin-top: 5px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlecontent2 h3
{
  /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}


div.milestonescontent
{       width: 725px;
        margin: 0px 27px 0px 27px;
	padding: 10px 15px 0px 0px;
        float: left;
    border-right: solid 1px #585956;
}
div.milestonescontent h3
{
    /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}
div.milestonescontent h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}











div.milestonescontent2
{
	width: 725px;
	margin: 0px 27px 0px 27px;
	padding: 0px 15px 14px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	color: #ffffff;
    border-right: solid 1px #585956;
}

div.milestonescontent2 h1
{
	margin-top: 5px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.milestonescontent2 h3
{
  /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}





div.middlefull
{
	width: 882px;
	/*min-height: 500px*/
	margin: 0px 27px 0px 27px;
	padding: 0px 0px 9px 0px;
	float: left;
	/*border-white: 1px solid white;*/
	color: #ffffff;
}

div.middlecol
{
	width: 207px;
	min-height: 500px
	margin: 0px 5px 0px 5px;
	padding: 7px 7px 7px 6.25px;
	float: left;
	border-white: 1px solid white;
        background: #ffffff;
}
div.middlecoltype
{
	width: 200px;
	/*min-height: 500px*/
	/*margin: 15px 6px 0px 20px;*/
        margin: 15px 8px 0px 10px;
	padding: 0px 7px 7px 0px;
	float: left;
	border-white: 1px solid white;
}
div.middlecoltype2
{
	width: 180px;
	min-height: 200px
	margin: 10px 6px 0px 20px;
	padding: 10px 7px 7px 0px;
	float: left;
	border-white: 1px solid white;
}

div.middlecoltype3
{
	width: 250px;
	/*min-height: 500px*/
	/*margin: 15px 6px 0px 20px;*/
        margin: 15px 8px 0px 0px;
	padding: 0px 7px 7px 0px;
	float: left;
	border-white: 1px solid white;
}

div.middlecoltype3 h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlecoltypesm
{
	width: 200px;
	min-height: 140px
	margin: 0px 0px 0px 1.25px;
	padding: 0px 7px 7px 6.25px;
	float: left;
	border-white: 1px solid white;
}
div.middlecoltype h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlecoltype h2
{
    margin-top: 0px;
    font-size: 15px;
	line-height: 1.125em;
    font-weight: normal;
	font-family: sans-serif;
	color: #black;
	padding-top; 5px;
	padding-left: 5px;
}
div.middlecoltype2 h3
{
    margin: -15px;
    font-size: 13px;
    font-weight: normal;
	line-height: 17px;
	font-family: sans-serif;
	color: #7a7474;
	padding-top: 10px;
        padding-left: 20px;
	padding-right: 10px; 
}
div.middlecol-left
{
	width: 588px;
	min-height: 800px
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 0px 0px;
	float: left;
	border-white: 1px solid white;
}
div.middlecol-right
{
	width: 343px;
	height:
	margin: 0px 0px 0px 3px;
	padding: 10px 0px 0px 0px;
	float: right;
}
div.middlebotcolcontent-left
{       width: 560px;
        margin: 0px 20px 15px 20px;
	padding: 10px 0px 0px 0px;
        float: left;
}
div.middlebotcolcontent-left2
{       width: 725px;
        margin: 0px 20px 15px 20px;
	padding: 10px 0px 0px 0px;
        float: left;
}
div.middlebotcol-left
{       width: 560px;
        /*margin: 0px 20px 15px 20px;*/
        margin: 0px 20px 15px 0px;
	padding: 10px 0px 0px 0px;
        float: left;
}
div.middlebotcol-left2
{       /*width: 560px;*/
width: 650px;
        /*margin: 0px 20px 15px 20px;*/
        margin: 0px 20px 15px 0px;
	padding: 10px 0px 0px 0px;
        float: left;
}

div.middlebotcol-left2 h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}

div.middlebotcol-left2 h3
{
    margin: 0px 0px 5px 0px;
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}



div.middlebotcolcontent-right
{       width: 296px;
        margin: 20px 20px 15px 20px;
	/*padding: 10px 0px 0px 0px;*/

        float: left;
        background-color: #ffda89
}
div.middlebotcolcontent-right2
{       /*width: 275px;*/
width: 230px;
        margin: 20px 10px 15px 10px;
	/*padding: 10px 0px 0px 0px;*/

        /*float: left;*/
float: right;
        background-color: #ffda89
}



div.middlebotcolcontent-right3
{       
        width: 226px;
        margin: 20px 10px 15px 10px;
	float: right;
        background-image: url(http://www.ucsbalum.com/Coastlines/2011/Summer/images/main/youngalum_home.jpg);
}

div.middlebotcol-right3 h4
{
    width: 196px;
    margin: 5px 0px 5px 8px;
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 6px;
    text-indent: 0px;
    background-color: #ffffff;
}



div.middlebotcolcontent-right4
{       width: 260px;
        margin: 20px 10px 15px 10px;
        float: right;
        background-color: #ffda89
}

div.middlebotcol-right4
{
    width: 260px;
    margin: 5px 0px 5px 8px;
    /*background-color: #ffda89;*/
}

div.middlebotcol-right4 h4
{
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 6px;
    text-indent: 0px;
}








div.middlemilestonescontent-right
{       /*width: 296px;*/
          width:725px;
        margin: 20px 10px 15px 20px;
	/*padding: 10px 14px 0px 0px;*/

        float: left;
        background-color: #ffda89
    border-right: solid 1px #585956;
}

div.middlemilestonescol-right
{       
        /*width: 296px;*/
width: 725px;
        margin: 20px 27px 15px 27px;
	/*padding: 10px 14px 0px 0px;*/

        float: left;
        background-color: #ffda89
    border-right: solid 1px #585956;
}

div.middlemilestonescol-right h3
{
    /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 7px;
    text-indent: 20px;
}


div.middlemilestonescol-right h1
{
	margin-top: 5px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlemiletonescol-right h2
{
    margin-top: 0px;
    font-size: 15px;
	line-height: 1.125em;
    font-weight: normal;
	font-family: sans-serif;
	color: #black;
	padding-top; 5px;
	padding-left: 5px;
}


div.middlebotcol-right
{       width: 288px;
        /*margin: 0px 20px 15px 20px;*/
	padding: 4px 4px 4px 4px;
        float: right;

}
div.middlebotcol-right2
{       /*width: 260px;*/
width: 200px;
        /*margin: 0px 20px 15px 20px;*/
	padding: 4px 4px 4px 4px;
        float: left;

}

div.middlebotcol-right2 h3
{
    /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}

div.middlebotcol-right2 h4
{
    /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;text-indent: 0px;
}



div.middlebotcol-right h1
{
	margin-top: 5px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlebotcol-right h2
{
    margin-top: 0px;
    font-size: 15px;
	line-height: 1.125em;
    font-weight: normal;
	font-family: sans-serif;
	color: #black;
	padding-top; 5px;
	padding-left: 5px;
}
div.middlebotcol-right h3
{
    /*margin: 5px 0px 5px 0px;*/
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}


div.middlebotcol-left h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 20px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.middlebotcol-left h5
{    margin: 0px 0px 5px 0px;
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;

}
div.middlebotcol-left h2
{
    margin-top: 0px;
    font-size: 15px;
	line-height: 1.125em;
    font-weight: normal;
	font-family: sans-serif;
	color: #black;
	padding-top; 5px;
	padding-left: 5px;
}
div.middlebotcol-left h3
{
    margin: 0px 0px 5px 0px;
    font-size: 13px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #7a7474;
    padding: 4px;
    text-indent: 20px;
}
div.middlebotcol-left h4
{
    margin: 0px 0px 5px 0px;
    font-size: 16px;
    line-height: 17px;
    font-weight: normal;
    font-family: sans-serif;
    color: #c0513d;
    padding: 4px;
    text-indent: 20px;
}


div.col-box
{
	background: white;
}
div.col-box h1
{
	margin: 0px;
	font-weight: bold;
	background: black;
	padding: 5px 0px;
	text-indent: 30px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
	height: 14px;
}
div.col-box-content
{
	padding: 10px 0px 10px 10px;
}
/**
 * col box is 538 wide, so two of these will be 268 wide each
 * these are 250 wide, plus 18 side margin.
 */
div.mini-headline
{
	width: 568px;
	float: left;
	margin: 5px 0px 5px 9px;
   font-family: sans-serif;
}
div.mini-headline h2
{
    margin: 0px;
    font-size: 16px;
	line-height: 1.25em;
    font-weight: normal;
	font-family: sans-serif;
	color: #7a7474;


}

div.mini-headline h3
{
    margin: 0px;
    font-size: .8em;
    font-weight: normal;
	line-height: 1.25em;
	color: #7a7474; 
}


div.mini-headline img
{
    float: left;
    border: none;
    margin: 0px 10px 0px 0px;
}

a.readmore
{
    text-decoration: none;
	color: #488db2;
    border-bottom: 1px dotted blue;
    background: url('nat/coastlines/images/home/rightarrow.jpg') no-repeat center right;
    padding: 0px 12px 0px 0px;
    margin: 0px 0px 0px 3px;
    font-size: inherit;
    line-height: inherit;
}
a.readmore:hover { background: url('../images/home/rightarrowb.jpg') no-repeat center right; color:#d76fed; }

/*simple classes*/
a.specialLink:link { color: #c0513d; border: none; }
a.specialLink:hover { color: #488db2;}
a.specialLink2:link { color: #7a7474; border: none; }
a.specialLink3:link { border: none; }
a.specialLink4:link { color: white; }
a:specialLink:visited {color:#608362;}
a:specialLink:hover {color:#acd9ae;}  
a.specialLink2:hover { color: #488db2; border: none; }
.red {color: #c0513d;}
.purple {color: #492c9f;}
.issue {font-size: 14px; color: #909191;}
.issue2 {font-size: 20px; color: #0a6e55;}
.issue3 {font-size: 20px; color: #997137;}