/*******************************************************************************
	Theme Name: HTML5 CSS3 Style sheet  hall_rentals_tab
	Date: April, 2015
	Description: CSS3 for K of C Website /
	This style sheet should be used for the links on the Hall Rentals tab.
	[Hall Rentals, View Hall, & Calendar pages]
	Version 1.0
	Author: Dennis M. Smith
    Updated: December 2, 2015  DMS
*******************************************************************************/

/* begin styles for calendar section */

iframe {
	padding-top:120px;
	padding-bottom: 0px;
	margin-left: 7%;
	width: 90%;
}

.rates {
	list-style:none;
/*	padding: 0px 0px 0px 40px;  */
	margin-left: 10%;
	font-weight: bold;
	font-size: 115%;
	
}

.rates ul {
	
}

.rates li {
	padding: 10px 0px 0px 0px;  
	margin-left: 10%; 
	font-weight: normal;
	font-size: 130%;
}

/* Hi-light the text by changing background color in specified h3 tag */


#h3ChangeBackgroundColor{
	margin: -5% 20% 5% 10%;     /* Top Right Bottom Left */
	padding: 5px;
	background-color: #ff6;
	border-radius: 15px 15px 15px 15px;
}

/* end styles for calendar section */	

/* Rentals */
/* CSS for using HTML5 structural tags in older browsers */
header, hgroup, menu, nav, section, article, aside, figure, figcaption, details, footer {
	display: block;
}


	/* Hall rental styles pertaining to the article and aside sections of page */
	
article, aside {
	margin: 0;
	padding: 0;
	margin-top: 1.5 em;
	margin-bottom: 1 em;
}

article {
	width 580px;
	border-right: 2px solid #ef9c00;
	padding-right: 20px;
	float: left;
}

article h1 {
	margin-bottom: .35 em;
	padding-left: 5px;
	font-style: italic;
}

article img {
	float: left;
	margin: 0 1.5 em 1 em 0;
	padding-left: 5%;
}

.hall_articles {
	background-color: #ffffff;
	margin: 18% 0% 0% 20%;
/*	border: 2px solid black; */
	border: 2px #ffff66;
    width: 60%;
	height: 80%;	
	box-shadow: 3px 3px 4px 4px red;
}	

section.hall_articles {
	background-color: #3366FF;
	margin: 0% 0% 0% 25%;
	border:  0px solid black;
	
}	


/* View Hall page  */
#image1{
	background-image: url("Desktop\KofC HTML5 CSS3 JS\images\wall_pics\IMG_Wall_2_icon");
	width: 440px;
	height: 320px;
}
#image1: hover {
	background-image: url("Desktop\KofC HTML5 CSS3 JS\images\wall_pics\IMG_Wall_2_lg");
}

/*  Control layout of content for view hall page */

.events_section {
	clear: both;
	height: 60%;
	margin: 50px 20px 0px 30px;   /* Top Right Bottom Left */
	padding: 70px 10px 0px 40px;
}

/* Eliminate dead space between sections */
#imageSections {
	clear: both;
	height: 160px;
	margin: 20px 20px 0px 30px; 
	padding:20px 10px 0px 40px;
	
}



/* Hi-light the text by changing background color in specified h3 tag */


#h3ChangeBackgroundColor2 {
	margin: 0% 20% 5% 0%;     /* Top Right Bottom Left */
	padding: 5px;
	background-color: #ff6;
	border-radius: 15px 15px 15px 15px;
}

#h3GiveSomeSpace{
	margin: 3% 20% 5% 0%;     /* Top Right Bottom Left */
	padding: 5px;
	background-color: #ff6;
	border-radius: 15px 15px 15px 15px;
}



/* Calendar Page */








	
	/*  Make pages RESPONSIVE for mobile devices */
/* work within borders when size of area changes  */
/* Basically you copy everything down and remove what you want to remain as is and update what you want to change */
@media only screen and (min-width: 150px) and (max-width: 600px)
{
















}