/* file albigen.com/styles/albigen.css    update 9/3/2015 */

html, body {background:#fcfeff; text-align:left; }

body {font-family: verdana, tahoma, ariel, sans-serif;
	    font-size:18px; line-height: 1.7em; }
		

#firstdivofskin { /* deprecating this */}

#mainwrapper {width:auto; max-width:800px;}

/* any floats must be cleared properly for border-bottom to work */		
#maincontent {border-bottom: 150px solid transparent;}

p {padding:0; margin:10px 0;}

.totop {margin-top:2em;}


.logo-text {color:maroon;}

a:link     { color: blue;  text-decoration: none; }
a:active   { color: red;   text-decoration: none; }
a:visited  { color: blue;  text-decoration: none; } 
a:hover    { color: green; text-decoration: underline; }
			
h1 { font-size: 125%; margin-top:20px; }
h2 { font-size: 115%; margin-top:20px; }
h3 { font-size: 105%; margin-top:20px; }

hr { margin-left:25px; }

td { text-align:left; vertical-align:top; }

/* end of normal styles */



/* start styles for responsive container */

/* note: Early IE does not recognize max-width, nor media queries */
#container-r 	{margin-left:10px;font-size:18px;}
/* Don't put border-bottom here, because of absolute positioning of elements */

#container-r  div		{margin:0;padding:0;}

/* these IDs are defined in the main pages */		
/* they have relative and absolute positioning, not floats. See further below */					
#container-r  #menu-panel	{font-size:16px;}
#container-r  #main-content	{font-size:18px;} 

/* DEFAULT RESPONSIVE CONTAINER POSITIONING */
/* container-r default WIDTH = 821PX SET FOR I.E. */
#container-r				{float:none; position:relative; width:821px;}  
#container-r #menu-panel		{float:none; position:absolute; top:0; left:0; width:200px;}	
#container-r #main-content	{float:none; position:absolute; top:0; left:220px; width:auto; border-bottom:12em solid transparent;}




#container-r article, 
#container-r #article, 
#container-r .article, 
#container-r aside {width:540px;}	
	
/* END OF DEFAULT CONTENT FOR RESPONSIVE CONTAINER */	

/* MEDIA QUERIES */
/* wide screens, but includes iPad, which is 768px */
@media only screen and (min-width: 751px) {
	
	#container-r				{position:relative; top:0; left:0; width:auto; max-width:800px;} 
	#container-r #menu-panel		{position:absolute; top:0; left:0; width:200px;}	
	#container-r #main-content	{position:absolute; top:0; left:220px; width:auto; max-width:540px;}
	
}
/* end of wide screens */


/* medium screens and smaller */
/* ipad is 768 X 1024 */
@media only screen 	
	and (max-width: 750px) {		
	#container-r 				{position:relative; top:0; left:0; width:auto;max-width:720px;} 		
	#container-r #menu-panel		{position:absolute; top:0; left:0; width:190px;}		
	#container-r #main-content 	{position:absolute; top:0; left:210px; width:auto; max-width:540px;
									padding:0 15px 0 5px;}
		
	/* override default widths, which was fixed */	
	#container-r article, 
	#container-r #article, 
	#container-r .article, 
	#container-r aside {width:auto; max-width:540px;}	

}
/* end of "medium and smaller" screens */

/* GLOBAL STYLE FOR PHONES */
/* TO DO: reposition the menu-panel for phones */
/* larger body font and menu line-height for mobile menus. 
	iPhone 4 breakpoint is 480 px
	iPhone 5 width of 320 is 640 px */
/* using max-device-width not max-width here */	
@media only screen 
		and (max-device-width: 500px) {
	
	body {font-size:20px;line-height:1.9em;}	
	#top {font-size:20px;line-height:1.5em;margin-left:10px;} /* easier access top menu */
	
	#container-r 				{position:static; width:auto;} 		
	#container-r #menu-panel		{position:static; float:left; width:320px;}		
	#container-r #main-content 	{position:static; float:left; width:auto; min-width:320px}
	
	#container-r article, 
	#container-r #article, 
	#container-r .article, 
	#container-r aside {width:100%;}	
									
	
	header, h1, h2, h3, h4, p {text-align:left;} /* don't center headings on a phone */	
	
}


/* END */