/*All CSS true for all devices*/
body {
		background-image: url("rentalsitepixes/parchmentbackground.jpg");
	}
p {
		margin-top: 0px; 	
	}
img {
		padding-top:10px;
		padding-bottom:10px;
	}
li {
		font-size:10.0pt;
		color:black;
	}
h1 {
		font-weight:normal;
		font-size:1.5em;
		float:right;
		color:#371f26;
	}
.Bluetext1 {
		font-family: Arial, Helvetica, sans-serif;
		font-style: italic;
		font-size:10pt;
	}
.Bluetextserif14pt {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 16px;
		color: #330000;
	}
.Bluetextserif12pt {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 14px;
		color: #000000;
	}
.Bluelink12pt {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10pt;
		color: #0066FF;
		text-decoration: none;
	}
.introtitles {
		font-size:10.0pt;
		font-family: Helvetica, Arial, Sans-serif;
		color:#782F1A;
		font-weight:bold;
	}
a { 
		font-family:Arial,Helvetica,Geneva,sans-serif;
		color:#03C; 
		text-decoration:none;
	}
a:link { 
		font-family:Arial,Helvetica,Geneva,sans-serif; 
		color:#4d2600; 
		text-decoration:none; 
		font-style:italic
	}
a:hover { 
		font-family:Arial,Helvetica,Geneva,sans-serif; 
		color:#990000; 
		text-decoration:none;
		
	}
#topofpage {
		width:90%;
		margin:0 auto;
	}
#calfooter {
	width:90%;
	margin:0 auto;
}
#calfooter img {
	width:100px;
	border:0;
}
/*All below for header/logo display on mobile*/
#logo {
	width:98%;
	margin:0 auto;
}
#logoimg img { /*leaf image*/
	width:30%;
}
#logobig {
	display:none;
}
#calendarlogotext, #indexlogotext { /*i.e. COBBLE HILL STUDIO*/
	position:relative;
	margin-left:30%;
	top:-115px;
}
#calendarlogotext img {
	width:100%;
	max-width:504px;
	position: relative;
	top:-27px;
	margin-left:5%;
}
#calendarlogotext img:last-of-type {
	position: relative;
	width:60%;
	max-width:216px;
	top:-50px;
	margin-left:30%;
}
/*Below for calendar.html only, on mobile */
#caltext {
	width:100%;
	margin:-10em .5em 40px;
	clear:both;
}
#caltext img {
	width:70%;
	max-width:194px;
	margin-top:-1em;
}
nav {
	margin:0 0 10em 0;
}
#monthsindex {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24pt;
	/*color: #0066FF;*/
	text-decoration: none;
}
#monthsindex div {
	float:left;
	margin:.25em;
}
#monthsindex .year {
	clear:left;
}
.monthwrapper {
	padding-top:3em;
}
.month {
	border-style:solid;
	border-width:1px;
	border-color:#999999;
	padding:6px;
	font-style: normal;
	margin:0 auto;
}
.date {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333;
	text-decoration: none;
	margin:0 10px;
	font-style: normal;
}
td .day { 
	width: 2em; 
	height: .75em;  
	margin-top: 0;  
	}
td .dayreserved { 
	width: 2em; 
	height: 0.75em; 
	margin-left: .5em; 
	background-color: #f44; 
	}
.backtotop {
	position:relative;
	bottom:-12px;
	width:30px;
}
footer {
	margin-top:2em;
}
#copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size:7pt;
	color:#999999;
}
/*End of calendar.html CSS for mobile*/
/*Below for index.html only, on mobile*/
#indexlogotext img {
	position: relative;
	width:70%;
	max-width:216px;
	top:-30px;
	margin-left:30%;
}
ul#links {
	width:90%;
	margin:-125px 0 0;
	padding:0;
}
ul#links li {
	display:block;
	padding:1em;
}
ul#links li a {
    background-image: url("rentalsitepixes/parchmentbackgrounddark2.jpg");
    text-decoration: none;
  	padding:5px 10px;
	color:#faffe7;
	transition:color .3s;
	font: small-caps bold 12px sans-serif ;
	letter-spacing:3px;
	border:1px;
	border-color:#faffe7;
}
ul#links li a:hover {
	color:#583e2c;
}
#CHintro {
	margin-top:-125px;
	width:100%;
	line-height:150%;
}
#CHintro img  {
	width:100%;
}
#CHintro #signatures {
	width:50%;
	border:0;
}
#map {
	width:100%;
	height:15em;
	margin-top:2em;
	margin-bottom:2em;
}
#termstable {
	background-image:url("rentalsitepixes/parchmentbackgrounddark2.jpg");
}
#termstable li {
	list-style-type: circle;
}

/*End of index.html CSS for mobile*/
/*SOCIAL MEDIA*/
/*container div for FACEBOOK, TWITTER etc.*/
#socialdiv{
		position:fixed;
		bottom:32%;
		right:10px;
	}
#socialdiv li {
	list-style-type: none;
}
#facebook, #twitter, #pinterest {
	width:24px;
	height:auto;
	margin:3px;
	border-radius: 12px;/*eliminates grey square around icon in Safari*/
	cursor:pointer;
	display:block;
}
#facebook {
	background-image:url("rentalsitepixes/facebook40round.png");
}
#facebook:hover {
	background-image:url("rentalsitepixes/facebookblue.png");
}
#twitter {
	background-image:url("rentalsitepixes/twitter40round.png")
}
#twitter:hover {
	background-image:url("rentalsitepixes/twitterblueround.png")
}
#pinterest {
	background-image:url("rentalsitepixes/pinterest40round.png");
}
#pinterest:hover {
	background-image:url("rentalsitepixes/pinterestredround.png");
}
/* Tooltip text */

.tooltiptext {
    opacity:0;
    transition: opacity .5s;
    color:#aaaaaa;
    /* Position the tooltip text - see examples below! */
    position: relative;
    z-index: 1;
    display:block;
    top:-20px;
    left:-40px;
}
.menutooltip {
	opacity:0;
    transition: opacity .5s;
    color:#aaaaaa;
    /* Position the tooltip text - see examples below! */
    position: relative;
    z-index: 1;
    display:block;
	top:-15px;
	left:100px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:hover .menutooltip {
    opacity:1;
}
/*MEDIA QUERIES*/
					@media only screen 
						and (min-width: 700px)
						
						/*and (orientation:landscape) */
						{
						
						h1 {
							font-size:3em;
							float:none;
						}
						#logosmall {
							display:none;
						}
						#logobig {
							display:block;
						}
						#logoimg img { /*leaf image*/
							width:20%;
						}
						.Bluetextserif14pt {
							font-size: 1.25em;
						}
						.Bluetextserif12pt {
							font-size: 1em;
						}
						.introtitles {
							font-size:1em;
						}
						#indexlogotext, #calendarlogotext {
							margin-top:-70px;
						}
						/*Full-size index.html CSS */
						#socialdiv {
							bottom:44%;
						}
						.menutooltip {
							top:0;
							left:70%;
						}
						#CHintro {
							
							margin: -4em auto;
						}
						#CHintro p:first-child {
							width:100%;
						}
						#CHintro p {
							width:50%;
							float:left;
						}
						#CHintro img {/*photos on main page*/
							width:45%;
							float:right;
							padding:5px;
							max-width:640px;
							clear:both;
						}
						#CHintro #signatures {
							width:50%;
							float:left;
						}
						#termstable {
							width:45%;
							float:left;
							padding:5px;
							font-size:1em;
							color:black;
							line-height:130%;
							margin-bottom:2em;
						}
						#termstable li {
							font-size:.9em;
							color:black;
						}
						#CHintro #frntroom {
							width:50%;
						}
						#map {
							width:70%;
							height:400px;
							margin:0 auto;
						}
						footer p {
							width:65%;
							margin:1em auto;
						}
						#menu {
						    margin:4em auto 0 10%;
						    line-height:188%;
						}
						ul#links li {
							display:inline;
							padding:0;
						}
						ul#links li a {
							padding:5px 10px;
							color:#faffe7;
							font: small-caps 14px sans-serif ;
							letter-spacing:3px;
						}
						/*full-size CALENDAR CSS */
						#logoimg img:first-child	{ /*i.e. leaf image*/
							width:118px;
						}
						#indexlogotext img {
							width:150px;
							right:100px;
						}
						#topofpage {
							margin:0 auto;
						}
						#calendarlogotext img:first-of-type {
							width:318px;
							position: relative;
							top:-27px;
							margin-left:5%;
						}
						#calmonths {
							width:80%;
							margin:0 auto;
						}
						#monthsindex .year {
							margin-top:-10px;
						}
						nav {
							width:100%;
							margin:-2em auto 6em;
						}
						#yearwrapper {
							width:100%;
							margin:0 auto 8em;
						}
						.pairofmonths {
							width:98%;							
							background-color:red;
							border-color:black;
							margin:0 auto;
							clear:both;
						}
						.monthwrapper {
							width:40%;
							display: block;
							float:left;
							padding:0 30px;
						}
						/*For all*/
						footer {
							clear:both;
							position:relative;
						}
						#copyright {
							font-size:9pt;
							text-align:center;
						}
					}
@media only screen 
						and (min-width: 900px)
						
						{
						#CHintro {
							width:70%;
						}
						#topofpage {
							width:60%;
						}
						nav	{
							width:80%;
						}
						.menutooltip {
							top:0px;
							left:60%;
						}
						#yearwrapper {
							width:80%;
						}
						}