/* CSS Document code from html goodies.com
Teens Penticton Public Library
*/

/*Layout code --------------------------------------------------------------------*/
/*From HTMLGoodies.com.  http://www.htmlgoodies.com/beyond/css/article.php/11160_3642151_1*/
  	body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		background: #FF6600;
		margin-top:0px;
	}
  	#wrapper {
		width:901px;
		margin:0px auto;
		padding:0px;
		background: #FFFFFF;
	}	
	#header {
		/*border:1px solid #bbb;
		border-bottom:0px;*/
		height:120px;
		padding:10px;
		background-image:url(../Images/TeenBookBannerWithType.jpg);
		width:880px;
	}
	/*Adding a visual break between the two navigation bars*/
	#spacer {
		padding: 10px;
		width:878px;
		float:left;
		/*display:inline;*/
	}
	
	#bread{
		float: left;
		/*display:inline;*/
		width:878px;
		padding: 10px;
		padding-bottom:5px;
		padding-top:5px;
		margin-bottom: 0px;
	}
	
	#topnavigation {

		/*width:878px;*/
		/*margin-top:10px;*/
		margin-top: 0px;
		width:898px;
		padding:0px;
	}
	
	#content {
		/*margin-top:0px;*/
		margin-top:0px;
		padding-bottom:10px;
		
	}
	#content div {
		/*padding:10px;*/
		/*border:1px solid #bbb;*/
		float:left;
	}
	#content-left {
		width:154px;
	}
	#content-main {
		margin-left:10px;
		width:500px;
		border-right:0px solid #bbb;
	}
	#content-right {
		margin-left:0px;
		padding-left:10px;
		padding-right:9px;
		width:194px;
	}
	#footer {
		float:left;
		margin-top:10px;
		margin-bottom:0px;
		padding:10px;
		border:1px solid #bbb;
		width:878px;
		height:10px;
	}
	#bottom {
		clear:both;
		text-align:right;
	}
	/*End of Layout code ----------------------------------------------------------------*/
	
	/*Design Code -----------------------------------------------------------------------*/
	
	
	/*Top Navigation --------------------------------------------------------------------*/
	/*code being used http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml*/
	#topnavigation{
		border-right:1px solid #ccc;
		border-left:1px solid #ccc;
	}
	#topnavigation ul{
		list-style:none;
		padding:0px;
		margin:0px;
	}
	
	#topnavigation li
	{
		float: left;
		margin: 0 0.15em;
		font-size:12px;
		display: inline; 
	}
	
	#topnavigation li a
	{
		height: 2em;
		line-height: 2em;
		float: left;
		padding-left:15px;
		padding-right:15px;
		/*to have made all tabs uniform width, I could specify in here*/
		border-left: 0.1em solid #dcdce9;
		border-right: 0.1em solid #dcdce9;
		color: #0d2474;
		text-decoration: none;
		text-align: center;
		text-transform:uppercase;
	}
	
	#topnavigation li a:hover
	{
		background: #3399CC;
		float: left;
		border-left: 0.1em solid #dcdce9;
		border-right: 0.1em solid #dcdce9;
		color: #333333;
		text-decoration: none;
		text-align: center;
	}
	
		#topnavigation li a:active
	{
		background:#3399CC;
		float: left;
		border-left: 0.1em solid #dcdce9;
		border-right: 0.1em solid #dcdce9;
		color: #000066;
		text-decoration: none;
		text-align: center;
	}
	
/*	#topnavigation li a:visited
	{
	}*/
	
	/* Hide from IE5-Mac \*/
	#topnavigation li a
	{
	float: none
	}
	/* End hide */

	/*End of top navigation ----------------------------------------------*/
	
	/*Spacer Properties --------------------------------------------------*/
	#spacer {
		text-align: center;
		font-size:11px;
		border:1px solid #ccc;
	}
	
	/* End of Spacer Prperties -------------------------------------------*/
	
	
	/*Breadcrumb trail properties ----------------------------------------*/
	/*http://alistapart.com/articles/taminglists/*/
	#bread {
		color: #333333;
		background-color: #fff;
		border:1px solid #ccc;
		font-size:12px;
	}

	#bread ul {
		margin-left: 0;
		padding-left: 0;
		display: inline;
		border: none;
	} 
	
	#bread ul li {
		margin-left: 0;
		padding-left: 2px;
		border: none;
		list-style: none;
		display: inline;
	}
	
	#bread a, a:hover,a:active {
		color: #999999;
	}
	
	
	/*--------------------------------------------------------------------*/
	
	/*Left menu navigation -----------------------------------------------*/
	/*Code from: http://www.alistapart.com/articles/horizdropdowns
		check out this site if hack stops working*/
		#content-left ul{
		list-style:none;
		padding:0px;
		margin:0px;
		width: 153px;
		border: 1px solid #ccc;
		border-top:0px;
		}
	
	#content-left ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		border:0px;
		color: #0d2474;
	}
	
	#content-left ul li a{
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	color: #0d2474;
	font-size:14px;
	text-transform:none;
	height: 1%;
	}
	
	/*prevents double border for being added on nested list*/
	#content-left ul li ul{
	border-bottom:0px;
	border-left:0px;
	}

	#content-left ul li ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #D9E9FD;
	padding: 5px;
	border: 1px solid #ccc;
	border-left:0;
	border-bottom:0px;
	border-right:0px;
	padding-left: 20px;
	text-transform:none;
	font-size:12px;
	}
	
	#content-left ul li ul a:active{
		background:#BEDCFA;
		color:#0A4792;
		text-decoration:none;
	}
	
	#content-left ul li a:hover{
		background:#3399CC;
		color: #000000;
		text-decoration:none;
	}
	
	/*condenses menu so there is no space between list elements vertically
	/* Fix IE. Hide from IE Mac \*/
/*	* html ul li { float: left; }
	* html ul li a { height: 1%; } */
	/* End */

	/*End of left menu navigation ----------------------------------------*/
	
	/*Main center content ------------------------------------------------*/
	#content-main{
		padding:10px;
		
	}
	#content-main h1{
		font-size:18px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:center;
		color: #000000;
	}
	
	#content-main h2{
		font-size:16px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:left;
		color: #000033;
	}
	
	#content-main h3{
		font-size:14px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:left;
		color: #006699;
	}
	
	#content-main h4{
		font-size:14px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:center;
		color:#006699;
		margin-bottom:0px;
	}
	
	#content-main h5{
		font-size:12px;
		color:#FF3333;
		display:inline;
	}
	/*b.title is for putting author names close to the heading, instead of the normal gap*/
	#content-main b.title{
		padding-bottom:0px;
		margin-bottom:0px;
		font-size:14px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		text-align:left;
		color: #339966;
	}

	/*div for news articles in content-main*/
	#main-news {
		border:0px;
		padding-top:5px;
		padding-bottom:5px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		width:480px;
	}

	/*paragraph container for articles in main-news div*/
	#main-news .item{
		border-top:1px dashed #999999;
		padding:10px 0px 10px 0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		width:478px;
		line-height:20px;
	}

	#main-news img.leftwithpadding{
		padding-right: 5px;
		border:0 none;
		float:left;
	}
	
	#main-news img.centerwithpadding{
		padding-top:5px 0px 5px 0px;
		border:0 none;
	}

	#main-news ul.nodecoration{
		line-height:20px;
	font-size:12px;
	list-style-type: none;
	}
	/* a regular list with no decoration, used in TrainTravels.html*/
	#main-news ul.nodecoration li{
		margin-bottom:25px;
	}
	
	/*Had to list ul a:link, a:visited, and a:hover all seperate or it affected other links on page outside of div*/
	#main-news ul li{
	line-height:20px;
	font-size:12px
	}
	
	#main-news ul li a:link{
	line-height:25px;
	font-size:14px
	}
	
	#main-news ul li a:visited{
	line-height:25px;
	font-size:14px
	}
	
	#main-news ul li a:hover{
	line-height:25px;
	font-size:14px
	}
	/*So linked images in main-news don't have borders*/
	#main-news ul li img{
		border:0 none;
	}

	/*floating columns to contain 2 columns of lists*/
	  #main-news .floater{
		float:left;
		width:230px;
		margin-top:15px;
		padding-left: 7px;
	  }
	  /*for headers between lists*/
	  #main-news .headers{
		font-size:14px;
		font-weight:bold;
		text-transform:uppercase;
		margin-top:0px;
		padding-left:15px;
	  }
	
			/*Code for two column list----------------------------------------------*/
	#main-news ul.left {
    float: left;
    width: 210px; 
    margin:0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-type: circle;
	margin-left:15px;
	padding-left:15px;
    position: relative;
    left: 5px;
	line-height:20px;
  }
/*These margins leave space between list items in kids book lists*/
  #main-news ul.left li{margin-bottom:15px; line-height:20px;}
  #main-news ul.right li{margin-bottom:15px;line-height:20px;}
  
  
  #main-news ul.right {
    float: right;
    width: 210px; 
    margin:0px;
    padding: 15px 0px;
    border: 0px none; 
    margin-left:15px;
	padding-left:15px;
    list-style-type: circle;
  }
		/*Code for two column list----------------------------------------------*/
	#main-news ul.awardleft {
    float: left;
    width: 210px; 
    margin:0px;
    padding: 15px 0px;
    border: 0 none; 
    list-style-type: none;
	margin-left:15px;
	padding-left:15px;
    position: relative;
    left: 5px;
	text-align:center;
  }

  /*margin to add space between listed award nominees */
  #main-news ul.awardleft li{
  	margin-bottom:25px;
	line-height:20px;
  }
	 /*Had to list ul a:link, a:visited, and a:hover all seperate or it affected other links on page outside of div*/
	  #main-news ul.awardleft li a:link{
	  text-decoration: underline;
	  border: 0 none;
	  font-size:12px;
	  line-height:18px;
	  color: #000000;
	  } 
	  #main-news ul.awardleft li a:visited{
	  text-decoration: underline;
	  border: 0 none;
	  font-size:12px;
	  line-height:18px;
	  color: #000000;
	  }
	  #main-news ul.awardleft li a:hover{
	  text-decoration: underline;
	  border: 0 none;
	  font-size:12px;
	  line-height:18px;
	  color: #000000;
	  }

  
  #main-news ul.awardright {
    float: right;
    width: 205px; 
    margin:0px;
    padding: 15px 0px;
    border: 0px none; 
    margin-left:15px;
	padding-left:15px;
    list-style-type: none;
	text-align:center;
  }

 /*margin to add space between listed award nominees*/
  #main-news ul.awardright li{
  	margin-bottom:25px;
	line-height:20px;
  }
  /*Had to list ul a:link, a:visited, and a:hover all seperate or it affected other links on page outside of div*/
  
   #main-news ul.awardright li a:link{
  	text-decoration: underline;
  	border: 0 none;
 	font-size:12px;
 	line-height:18px;
  	color: #000000;
  }
   #main-news ul.awardright li a:visited{
  	text-decoration: underline;
  	border: 0 none;
 	font-size:12px;
 	line-height:18px;
  	color: #000000;
  }
   #main-news ul.awardright li a:hover{
  	text-decoration: underline;
  	border: 0 none;
 	font-size:12px;
 	line-height:18px;
  	color: #000000;
  }
  
  
  .no-space {
    margin: 0px;
    padding: 0px;
  }
	/*End of code for two column list---------------------------------------*/

	#main-news .teens-box {
		border:2px solid #330033;
		width:480px;
		float:left;
		padding:5px;
		margin-bottom:10px;
	}
	#main-news img.withpadding{
		padding-right: 5px;
		border:0 none;
	}

 	#main-news img.leftwithpadding{
		padding-right: 5px;
		border:0 none;
		float:left;
	}

	 /*Code to float an image to the left of text 
	.floatleft {
		float:left;
		margin-right:10px;
	}
	
	/*End of content navigation --------------------------------------------*/
	
/* Right menu content --------------------------------------------------*/
	#content-right {
		background-color: #FFFFFF;
		border:1px solid #ccc;
		border-top:0px;
	}
	#content-right h1{
		font-size:14px;
		text-align:center;
		color: #aa3300;
	}
	
	#content-right h2{
		font-size:14px;
		text-align:left;
		color: #aa3300;
		margin-bottom:10px;
		text-align:center;
	}
	
	/*Used for hours title*/
	#content-right .hours{
		font-size:14px;
		text-align:center;
		color: #aa3300;
		font-weight:bold;
	}
	/*Used for content in the content-right*/
	#content-right .nav-box{
		border-top:1px solid #ccc;
		padding-top:10px;
		padding-bottom:10px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		width : 192px;
		text-align:center;
		margin-top:0px;
		margin-bottom:0px;
	}
	/*Used for wheel chair accessible box*/
	#content-right .accessible{
		margin-top:0px;
		margin-bottom:5px;
		border-top:1px solid #ccc;
		padding:15px 5px 15px 40px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		width : 150px;
		text-align:center;
		background-image:	url(../Images/WA.jpg);
		background-repeat: no-repeat;
		background-position: bottom left;
	}
	
	/*Code for two column list----------------------------------------------*/
	#content-right ul.left{
    float: left;
    width: 87px; 
    margin:0px;
    padding: 5px 0px;
    border: 0px none; 
    list-style-type: none;
	margin-left:0px;
	line-height:15px;
	font-size:10px;
  }
  
  #content-right ul.right{
    float: right;
    width: 90px; 
    margin:0px;
    padding: 5px 0px;
    border: 0px none; 
    margin-left:0px;
	line-height:15px;
    list-style-type: none;
	font-size:10px;
  }
  
	#content-right .sunday{
  	text-align:center; 
    margin:0px;
    padding: 0px 0px 5px 0px;
    border: 0px none; 
	line-height:15px;
    list-style-type: none;
	font-size:10px;
	/*border-bottom:1px solid #ccc;*/
  }
	/* End of right menu content styling -----------------------------------*/ 
	
	
	/*Footer bar -----------------------------------------------------------*/
	#footer {
		font-size:9px;
		text-align:center;
	}
	#footer a{
		color: #777;
	}
	/*End of footer bar code -----------------------------------------------*/
	
	/*code to get all three columns to appear same height*/
	#wrapper{
	overflow:hidden;
	}
	
	content-left,content-right,content-main{
		padding-bottom:25000px;
		margin-bottom:-25000px;
	
	}