/*These are basic instructions for the set-up of the page*/

body {	
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 90%;
	margin: 0px;
}

/*This code is meant to allow the content to shrink only up to a point; And hopefully keep everything in place*/

#container {
width: auto;
min-width: 780px; /* for Mozilla or all good browsers*/
width: expression((document.documentElement.clientWidth) < 780 ? "780px" : "auto"); /*Hack for IE*/
}

/*This says that links on the page should be a certain colour, and underlined*/
a {
	color:#006600;
	text-decoration: underline;
	font-weight: bold;
}

/*This refers to the top section of the home page*/

.header {
	margin-top: 0px;
	height: 100px;
	width: 100%;
	background: url(http://www.palliserlibrary.ca/images/bridge.jpg) top right 	no-repeat;
}
.header1 {
background-color: #003366;
   BORDER-BOTTOM: #002142 1px solid;
   BORDER-RIGHT: #002142 1px solid;
   BORDER-LEFT: #456a8f 1px solid;
   BORDER-TOP: #456a8f 1px solid;
   color: #FFFFFF;
   font-weight: bold ;
   background-image: url()
}


/*This is the grey strip*/
.nav_strip {
	margin-top: 0px;
	width: 96%;
	height: 20px;
	background-color: lightgrey;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 0 2% 0 2%;
	font-size: 80%;
	font-weight: bold;
}

/*refers to the navigation in the grey strip to the left*/

.breadcrumbs {
	float: left;
}
/*refers to the links in the grey strip to the right*/

.top_links {
	float: right;
}

/*This refers to the content in the left column*/

/*This refers to the menu in the left column*/
.menu {
	margin-top: 0px;
	padding: 1% 2% 0 2%;
	float: left;
	width: 15%;
	font-weight: bold;
	text-align: left;
	line-height: 1.5;
}

/*This describes how to display the links in the menu*/
.menu a {
	display: block;
	padding: 2px;
	text-decoration: none;
	border-bottom: 1px dotted #006600;
	width: 100%;
	font-size: 80%;
}

.menu a:hover {
	text-decoration: underline;
}

/*This describes the content to the right of the left column*/	
.content {
	margin-top: 0px;
	width: 66%;
	float: left;
	background: #ffffff;
	padding: 1% 1% 2% 1%;
}

h1 {
	color: #006600;
	text-align: center;
}

h2 {
	text-align: center;
}

h3 {
	text-align: center;
}

h4 {
	margin-bottom: 0;
	font-size: 100%;
}

/*This refers to the content at the very bottom of the page*/
.footer {
	font-size: 80%;
	text-align: center;
	padding-top: 2%;
	width: 100%;
	float: left;
}

/*This refers to the list of library branches to the right*/
.libraries {
	margin-top: 0px;
	padding: 1%;
	line-height: 1.5;
	width: 10%;
	font-weight: bold;
	float: right;
	text-align: right;

}

.libraries a {
	display: block;
	border-bottom: 1px dotted #006600;
	text-decoration: none;
	padding: 2px;
	font-size: 80%;
}

.libraries a:hover {
	text-decoration: underline;
}

p.center {
	text-align: center;
}

/*This div can be put around any image you want the main text to flow around*/

.img_right {
	float: right;
	padding: 1%;
}

.img_left {
	float: left;
	padding: 1%;
}

/*For images you need centered*/
.img_center {
	text-align: center;
	padding: 1%;
}
table.fees {
	width: 90%;
	text-align: center;
	font-size: 100%;
}
table.subject {
	margin-bottom: 5px;
	width: 90%;
	text-align: center;
	table-layout: fixed;
	font-size: 100%;
}
table.subject td {
	padding: 2px;
	border: 1px solid lightgrey;
}
table.subject a {
	text-decoration: none;
}
table.subject a:hover {
	text-decoration: underline;
}
table.alphabet {
	width: 90%;
	text-align: left;
	table-layout: auto;
	border-spacing: 0 5px;
	font-size: 100%;
	
}
table.alphabet td {
	padding: 3px;
	border: 1px solid lightgrey;
}

table.alphabet a {
	text-decoration: none;
}
table.alphabet a:hover {
	text-decoration: underline;
}

table.hours {
	table-layout: auto;
	width: 90%;
	border-collapse: collapse;
	font-size: 100%;
}

table.hours td {
	padding: 3px;
	border: 1px solid lightgrey;
}

.branch_left {
	float: left;
	width: 50%;
	height: 380px;
}
.branch_right {
	float: right;
	width: 50%;
	height: 380px;
}
.branch_event {
	width: 100%;
}
table.committee {
	font-size: 100%;
	width: 100%;
	table-layout: auto;
}
table.committee thead {
	font-weight: bold;
	background: lightgrey;
	text-align: center;
}
table.committee td {
	border: 1px solid lightgrey;
}