/* css for responsive design - header for new webpage*/

html, body {
	font: 1em Arial,Helvetica,sans-serif;
}

body {
/*    background: url(../b-g_images/bg_Ylwchalk.jpg) repeat scroll 0 0 / cover #fff;*/
	background-color: #fff;
	color: #000;
    /*font: 1em Arial,Helvetica,sans-serif;*/
    margin: 0;
    padding: 0;
}

#wrapper {
    
    padding: 2em 0;
    position: relative;
    width: 100%;
}
/*-------------------Navigation----------------------*/


.header {
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-left: 1em;
	text-align: left;
}

.header a {
    font-weight: bold;
    text-decoration: none;
}

.mainLinks {
  margin-bottom: 1em;
}



.links {
	width: 100%;
    list-style: outside none none;
    padding: 0;
	margin: 0;

}

.links li {
	display: inline;
	padding: 0;
	text-align: center;
	font-size: 0.8em;
}

.links li a {
	margin: 0 0.35em;
}


.links .hide {               /* Links to exclude on small screen */
	position: absolute;
	left: -9999px;
}

/* ----------- menu icon 'More' ---------------- */
#moreLinks a:before {
	content: "More";
	padding: 0 .25em;
	border: 1px solid grey;
	border-radius: .25em;
	
}
#moreLinks.noShow {
display: none;
}
/* -------------------------------------------- */
 .show {  /*on small screen show more links when Menu icon is clicked ( needs java script "menuExpand.js") */
	position: relative;
	left: 0;
}

.links .noShow {   /* make hamburger icon diappear when 'clicked' - javascript - NOT in use as of 04-16-2016 */
	display: none;
}


.links a:link, .links a:visited {
    color: #888;
}

.links a:hover {
	color: brown;
}

span#hiLite {
	color: #FFF;/*#AAA, #FBEF69*/
	background-color: #808080;
	border-radius: .25em;
	padding-left: .2em;
	}

/*--------------Heading-------------*/
.womanPane {
	display: block;
	}

.header h1 {
	margin-bottom: .5em;
}

.header h2 {
	margin: 0;
}

/*-----------Text in Paragraphs-----------------------*/

#text a:link, #text a:visited {
	color: #808000; /*olive*/
}	
#text a:hover {
	color: gold;
}

#text a:active {
	color: blue;
}		

/*-----------------------------------*/

/*------------------------------------
           screen size 480px to 760px
--------------------------------------
                Navigation          
------------------------------------*/
@media (min-width: 30em) {

	body {
		font-size:1.125em;
	}
	
	.links li {
		display: inline;
		margin: 0;
	}
	
	
	
	.links .hide {            /* Links to restore on larger screen */
		position: relative;
		left: 0;
	}
	
	#moreLinks {             /* hide the "more links" icon on larger screen */
		display: none;
	} 
	
	.links li a {
		margin: 0 0.3em;
		font-size: .90rem;
	}
	
	.links a:link, .links a:visited {
	    color: #808080;
	}
	
	.links a:hover {
		color: brown;
	}
	
	    /*-------------------
	          heading
	    ---------------------*/
	.heading {
		display: table;	
		margin: 0 auto;
		border-spacing: 1em;
	}

	.womanPane, .heading div {
		display: table-cell;
		vertical-align: top;
		
	}
	
	
	.womanPane img{
/*	  box-shadow: 1px 1px 2px black; not needed with BLACK BACKGROUND */
	  border-radius: .25em;
	}
}



/*-------------------------------------------
               screen size > 760px
---------------------------------------------*/
@media (min-width: 47.5em) {
	body {
		font-size: 1.25em;
	}
	
	#wrapper {
		width: 760px;
	}
	
	.links li a {
		font-size: .95em;
		
	}
	
}