/* Common CSS file for RnRCoffeeCafe.com website v3
   CSS is available with commented acknowledgement */
   


body { margin: 0;
	   padding: 0;
	   height: 100%;
	 }




@media only screen and (min-width: 35em) {

	
	div#lhcolumn {background: url(pics/navbarleft.png) no-repeat left bottom fixed;
		margin-left: 0;
		width: 250px;
		height: 100%;
		float: left;
		position: fixed;
		}
		
	div#toggleText {
		display: block;
		}
		
	div#lhcolumn ul {display: block;
		list-style-type: none;
		margin: 0; padding: 0;
		}
		
	div#lhcolumn ul li {display: block;
		width: 150px;
		text-align: center;
		padding: .5em;
		margin: 0;
		}
	
	div#lhcolumn ul li a, div#lhcolumn li.menu {font-family: 'Gahndi', Arial, sans-serif;
		font-variant: small-caps;
		text-decoration: none;
		font-weight: bold;
		color: #fff;
		}
		
	div#lhcolumn ul li a:hover, div#lhcolumn li.menu:hover {text-decoration: underline;}
	
	div#lhcolumn ul li a#here {font-variant: normal;
		font-style: italic;
		}
	
	div#body {display: block;
		margin: 0 0 0 250px;
	}
	
	p.menu {display: none;}

	h1 {font-family: 'Dancing', cursive;
		text-align: right;
		margin: 0; padding: 0 1em 0 0;
		}
		
	div#bodytext, div#bodytextfull {display: block;
		float: right;
		width: 100%;
		margin: 2em;
		border-radius: 20px;
		background-color: rgb(127,51,0);
		opacity: .9;
		filter:alpha(opacity=80);
		}
		
	div#bodytext p, div#bodytextfull p {
		margin: 2em;
		color: #fff;
		font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		}

	div#bodytext ul, div#bodytextfull ul {list-style-type: none;}

	div#bodytext ul li, div#bodytextfull ul li {font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		display: block;
		width: 90%;
		color: #fff;
		text-align: center;
		}
	div#bodytext ul.landing li, div#bodytextfull ul.landing li {text-align: left;}
	
	div#bodytext ul li a, div#bodytextfull ul li a {text-decoration: none;
		font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		color: #fff;
		font-weight: bold;
		}
	div#bodytext ul li a img, div#bodytextfull ul li a img {padding: .2em; 
		border: 0;
		height: 30px;
		width: 30px;}

	div#bodytext p.dancing, div#bodytextfull p.dancing {font-family: 'Dancing', cursive;
		font-size: 2em;
		color: #eee;
		margin: .5em;
		text-align: center;
		}
		
	div#bodytext p a, div#bodytextfull p a {color: #eee; 
		text-decoration: none; 
		font-weight: bold;}

	div#bodytext p a:hover, div#bodytextfull p a:hover {text-decoration: underline;}

	div#bodytext p.fineprint, div#bodytextfull p.fineprint {font-size: .5em; 
		text-align: center;}
		
	div#bodytext p.jumplinks, div#bodytextfull p.jumplinks {text-align: center; 
		font-size: .8em;
		margin: 0;
		padding: 0 0 .5em 0;}

	span.small {font-size: .7em;
		}
	
	img.inlinepict {float: right; border: 0; margin-left: .3em; margin-bottom: .3em; opacity: 1;}
}
	
@media only screen and (min-width: 46.8em){	 

	
	div#lhcolumn {background: url(pics/navbarleft.png) no-repeat left bottom fixed;
		margin-left: 0;
		width: 250px;
		height: 100%;
		float: left;
		position: fixed;
		}
		
	div#toggleText {display: block;
		}
		
	div#lhcolumn ul {display: block;
		list-style-type: none;
		margin: 0; padding: 0;
		}
		
	div#lhcolumn ul li {display: block;
		width: 150px;
		text-align: center;
		padding: .5em;
		margin: 0;
		}
		
	div#lhcolumn ul li a {font-family: 'Gahndi', Arial, sans-serif;
		font-variant: small-caps;
		text-decoration: none;
		font-weight: bold;
		color: #fff;

		}
		
	div#lhcolumn ul li a:hover {text-decoration: underline;}

	div#lhcolumn ul li a#here {font-variant: normal;
		font-style: italic;
		}
		
	img.mdesign {border: 10px #f00;}
		
	div#body {display: block;
		margin: 0 0 0 250px;

		}

	h1 {text-indent: -4000px;
		text-align: left;
		display: block;
		width: auto;
		height: 50px;
		margin: 0 0 0 -250px;
		background: url(pics/roastnrest.png) no-repeat top left;
		}
		
			
	
	div#bodytext {display: block;
		float: right;
		width: 70%;
		margin: 2em;
		border-radius: 20px;
		background-color: rgb(127,51,0);
		opacity: .9;
		filter:alpha(opacity=90);
		}

		
	@media only screen and (min-width: 65em) {
		div#bodytext  {display: block;
			float: right;
			width: 50%;
			margin: 2em;
			border-radius: 20px;
			background-color: rgb(127,51,0);
			opacity: .8;
			filter:alpha(opacity=80);
			}
		}

	div#bodytextfull  {display: block;
		/*float: right;*/
		width: 95%;
		margin: 2em auto;
		border-radius: 20px;
		background-color: rgb(127,51,0);
		opacity: .9;
		filter:alpha(opacity=80);
		}
		
		
	div#bodytext p, div#bodytextfull p {
		margin: 2em;
		color: #fff;
		font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		}

	div#bodytext ul, div#bodytextfull ul {list-style-type: none;}

	div#bodytext ul li, div#bodytextfull ul li {font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		display: block;
		width: 90%;
		color: #fff;
		text-align: center;
		}

	div#bodytext ul li a, div#bodytextfull ul li a {text-decoration: none;
		font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1em;
		color: #fff;
		font-weight: bold;
		}
	div#bodytext ul li a img, div#bodytextfull ul li a img {padding: .2em; 
		border: 0;
		height: 30px;
		width: 30px;}

	div#bodytext p.dancing, div#bodytextfull p.dancing {font-family: 'Dancing', cursive;
		font-size: 2em;
		color: #eee;
		margin: .5em;
		text-align: center;
		}
		
	div#bodytext p a, div#bodytextfull p a {color: #eee; 
		text-decoration: none; 
		font-weight: bold;}

	div#bodytext p a:hover, div#bodytextfull p a:hover {text-decoration: underline;}

	div#bodytext p.fineprint, div#bodytextfull p.fineprint {font-size: .5em; 
		text-align: center;}
		
	div#bodytext p.jumplinks, div#bodytextfull p.jumplinks {text-align: center; font-size: .8em; margin: 0; padding: 0 0 .5em 0;}

	span.small {font-size: .7em;}

	img.inlinepict {float: right; border: 0; margin-left: .3em; margin-bottom: .3em; opacity: 1;}

	h2 {font-family: 'Gandhi', Arial, sans-serif;
		font-size: 2em;
		color: #ddd;
		font-weight: bold;
		text-align: center;
		text-decoration: underline;
		}
		
	h3 {font-family: 'Gahndi', Arial, sans-serif;
		font-size: 1.5em;
		color: #000;
		font-weight: bold;
		text-align: center;
		}
		
	h5 {font-family: 'Gandhi', Arial, sans-serif;
		font-size: 1.2em;
		color: #000;
		text-align: center;
		}
		
	p.menu, li.menu, p.menumobile {display: none;}
	div.menudesktop {display: block;}/*navigation menu header for mobile: not needed on desktop versions */
}


@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {  /* iPhone5 shenanigains */
	* {margin: 0; padding: 0; font-size: inherit;}
  
	html {background: rgb(127,51,0) repeat top left;
		color: #ccc;
		}
		
	p.menu {text-align: center;
		width: 95%;
		padding: 45px;
		background: #fff;
		margin: 0;
		display: block;
		z-index: 200;
		}
	p.menumobile {display: block;}
	div.menudesktop{display: none;}
	
	div#lhcolumn {margin-left: 0;
		width: 100%;

		height: auto;
		z-index: 200;
		float: none;
		}

	div#lhcolumn ul {display: block;
		list-style-type: none;
		margin: 0; padding: 0; padding-top: .5em;
		}
		
	div#lhcolumn ul li {display: block;
		width: 100%;
		text-align: center;
		padding: 1em 0;
		margin: 0 auto;
		}
		
	div#lhcolumn ul li a , p.menu a{font-family: 'Gahndi', Arial, sans-serif;
		font-variant: small-caps;
		font-size: 4em;
		text-decoration: none;
		font-weight: bold;
		color: rgb(127,51,0);

		}

	div#lhcolumn ul li a {padding: 1em;
		font-size: 4em;}
		
	div#toggleText {background: #fff;
		width: 100%;
		margin: 0;
		padding: .7em;
		display: none;
		}
			
	div#body {width: 95%;
		margin: 0 auto;
		padding: 0;
		}
		
	div#bodytext, div#bodytextfull {margin: 200px 0 0 0;
		/*display: block;*/
		width: 100%;
		
		border: none;
		z-index: 100;
		float: none;
		}

	img.rrdot {float: left; border: 0;}
	
	h1 {visibility: hidden;
		}
		
	div#bodytext ul, div#bodytextfull ul {list-style-type: none;
		width: 100%;}

	div#bodytext ul li, div#bodytextfull ul li {font-family: 'Gahndi', Arial, sans-serif;
		font-size: 3em;
		color: #ccc;
		text-align: center;
		padding: .5em 0;
		margin: 0;
		}
		
	div#bodytext ul li img.social, div#bodytextfull ul li img.social {width: 2em; height: 2em;}
		
	div#bodytext a, div#bodytextfull a {text-decoration: none;
		font-weight: bold;
		color: #fff;
		}

	div#bodytext p, div#bodytextfull p {font-family: 'Gahndi', Arial, sans-serif;
		font-size: 3em;
		color: #ccc;
		text-align: center;
		line-height: 1.5;
		padding: 1em 0;
		}
		
	div#bodytext p.dancing, div#bodytextfull p.dancing {font-family: 'Dancing', cursive;
		text-align: center;
		font-size: 4em;
		color: #ccc;
		}
		
	div#bodytext span.small, div#bodytextfull span.small {font-size: 1em;}
		
	p.fineprint {font-size: 1em;
		}
		
	img.social {width: 1em;
		height: 1em;
		}

}