/* Master Stylesheet for Salisbury Panoramas
   New site design, November 2009
   Copyright CC2009 Chris Fastie 
   Technical Advisor:  Will Fastie, Fastie Systems
*/

/* Fastie Systems CSS Reset - modified from Eric Meyer's Browser Reset v2, April 2007
   Don't forget to set a foreground and background color on the 'html' or 'body' element! 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, 
/* dd, dl, dt, li, ol, ul, */ /* I don't like to reset lists */
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	/* font-size: 100%; */ /* resetting elsewhere for Salisbury */
	/* line-height: 1;  */ /* I'm not sure about this one... */
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
/* This one is very useful - should it expand to incude :hover? */
a img, :link img, :visited img, :hover img { border: 0; }

table { border-collapse: collapse; border-spacing: 0; }

/* ol, ul { list-style: none; } */ /* I don't like to reset lists */

q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}
/* Will's Overides & Resets */
em { font-style:italic; } strong {font-weight: bold;}

/* Will's Additional very generic classes */
.underline { text-decoration: underline; }
ul ul { list-style-type: disc; } /* recursive - causes ALL nested uls to use disc */
ul li { line-height: 1.30; }     /* ???????????? - need to consider this one */
/* ----------------------------------------------- */

/* Chris Fastie background blue: #336799 
.cf-blue { color: #336799; }
.cf-blue-light { color: #c9fffc; }*/

/* These rules  */
body {
	background-color: #064796;
	background-image: url('../img/gradientback.jpg');
	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #114;    /* dark with a hint of blue */
	font-size: 76%; /* something new to try - size all other text in ems! */
}
p {  }

h1 { font-size: 2.5em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2.0em; }
h4 { font-size: 1.7em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.3em; }

h3+p, h4+p, h5+p, h6+p { margin-top: 5px; padding-top: 0; }
h3+ul, h4+ul, h5+ul, h6+ul { margin-top: 5px; padding-top: 0; }

/* Overall Layout */
.centering-container { /* Centers the site in the browswer viewport. Contains everything else */
  width: 920px;
  margin: 0 auto; margin-bottom: 15px;
  background-color: #6db4cf; 	background-color: #064796;

}
.top-banner { position: relative; z-index: 100;
	background-image:url('../img/SalPanBanner1.jpg');
  height: 60px;
  border-bottom: 1px black solid;
}
.top-banner-logo { position: absolute; top: 0; left: 0px; }
.top-banner h1 { 
	position: absolute; left: 287px; top: 0; width: 350px;
	text-align: center; 
	padding-top: .6em;
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	color: white;
	font-size: 2.2em;
	font-weight: normal;
}
/* Top Nav button with dropdown ------------------------------------ */
.top-nav { position: absolute; top: 20px; right: 8px;
	text-align: right; 
	width: 270px; 
}
ul.tn-menu { 
  text-align: right;
	list-style: none;
	padding: 0; margin: 0; 
  font-weight: normal;
}
ul.tn-menu li { display: inline-block; 
  list-style: none; margin: 0;
  padding: 3px 5px;
  font-weight: bold;
  font-size: 1.5em;
}
ul.tn-menu a { text-decoration: none; margin: 0; padding: 0;  }
ul.tn-menu a, ul.tn-menu a:visited { color: white;  }
ul.tn-menu a:hover { color: yellow; }
ul.tn-menu ul {
	display: none;
	position: absolute;
	right: 0;
	top: 30px;
	width: 270px;
	border: 1px black solid;
	background-color: #F2FFFF;
	padding: 4px;
	z-index: 100;
}
ul.tn-menu ul li { display: list-item;
  text-align: left;
  font-size: .8em;
  font-weight: normal;
  color: black;
}
ul.tn-menu ul a, ul.tn-menu ul a:visited { color: #114; }
ul.tn-menu ul a:hover {
  color: #9900CC;
}
ul.tn-menu .tn-menu-sep { font-weight: bold; color:#0066CC;}
ul.tn-menu .tn-menu-indent { list-style:disc; margin-left: 1.5em;}

/* ----------------------------------------------------------------- */

/* The main container for content */
.portal { 
	width: 920px; 
	background-color: white;
	padding: 0 0 5px 0;
}
/* There are two portals - one for general use and one for use by the specialized Town Forest portal with its 3D block image */
/* The container for the portal image */
.portal-image { position: relative; /* so we can absolutely position within this container */
	width: 890px; margin: 0 auto;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#344ca4;
}
/* The container for the portal with a 3D block */
.portal-3d { position: relative; /* so we can absolutely position within this container */
	width: 920px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#344ca4;
}
/* The container for additional content below the portal image or content on regular pages. This provides the necessary margins */
.content {  
	padding: 15px; 
	font-size: 1.2em;
}
.content p { margin-bottom: .7em;  }

/* This area defines all the style rules for the material contained in portal-3d. ---------------------- */
/* Rules beginning with "x" are specific to portal-3d.                                                   */
.xbtn { position: absolute;  }
.portal-3d .bl-text { 
	font-size: 1.25em;
	color: #00349a; font-weight: normal;
	position: absolute; top: 460px; right: 25px; width: 290px;
}
.portal-3d .bl-text p { text-align: right; }
/* larger headline area in the bottom left */
.portal-3d .bl-headline { 
	font-size: 1.8em;
	color: #00349a; font-weight: normal;
	position: absolute; bottom: 0px; right: 25px; width: 700px;
}
.portal-3d .bl-headline p { text-align: right; }

/* This is the area that contains the static text in the popup area */
.xpopup-area { position: absolute; top: 20px; left: 15px; width: 300px; padding: 10px; 
  color: #0367c5;
}
.xpopup-area p { text-align: center;
  font-size: 1.5em;
}
.xpopup { position: absolute; top: 10px; left: 15px; width: 320px;
  background-color:#FFFFCC;
  border: 1px solid black;
  color: #0367c5;
  display: none;
  padding-top: 5px; padding-bottom: 5px;
}
.xpopup img { border-top: 1px black solid; border-bottom: 1px black solid; margin: 3px 0; }
.xpopup p { margin: 0; padding: 0 4px;  text-align: center; }
.xpopup .xpopup-title { font-size: 1.6em; }
.xpopup .xpopup-caption { font-size: 1.1em; }

/* This area defines all the style rules for the material contained in portal-image. ---------------------- */
.mbtn { position: absolute;  }

.popup { position: absolute; top: 180px; left: 285px; width: 320px;
  background-color:#FFFFCC;
  border: 1px solid black;
  color: #0367c5;
  display: none;
  padding-top: 5px; padding-bottom: 5px;
}
.popup img { border-top: 1px black solid; border-bottom: 1px black solid; }
.popup p { margin: 0; padding: 0 4px; text-align: center; }
.popup .popup-title { font-size: 1.6em; }
.popup .popup-caption { font-size: 1.1em; }
/* -------------------------------------------------------------------------------------------------------- */

.portal-instruction { font-size: 1.25em; font-weight: normal;
  color: #0367c5;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 4px;
}
.portal-caption {
	font-size: 1.4em;
	font-weight: normal;
	color: #00349a;
	text-align: center;
}
.where-maps {
  width: 100%; padding-bottom: 15px; 
}
.where-maps td {
  width: 33%;
  vertical-align: middle; padding-top: 50px; 

}
.where-vtmap {
  padding-left: 55px; 
}
.portal-columns { width: 100%; padding-bottom: 8px; }
.portal-columns td { width: 50%; vertical-align: top; padding: 10px 10px 10px 10px; }

.What-title-blue {
  font-size: large;
  text-align: center;
  color: #0000FF;
}
.title-blue { color: #0367c5;
  font-size: 1.2em; text-align: center;
}
.title-blueleft { color: #0367c5;
  font-size: 1em;  text-align: left; padding-right: 35px;
}
.title-blueleftpad { color: #0367c5;
  font-size: 1em;  text-align: left; padding-right: 35px; padding-left: 35px;

}
.title-blueright { color: #00349a;
  font-size: 1em;  text-align: right;
}
.pbox { position: relative;
	background-color: #CEDBE1; color: #111;
	margin-bottom: 20px;
}
.column-block { padding: 15px 20px 15px 15px; }
.pbox ul { padding-bottom: 5px; }
 
.town-map { position: relative; width: 645px; margin: 0 auto; }
.logobtn { position: absolute;  }
.mytooltip { position: absolute; top: 180px; left: 285px; width: 180px;
  border: 1px solid black;
  padding: 3px;
  background-color:#FFFFCC;
  color: #0367c5;
  font-size: .8em;
  display: none;
}
.blue-text { font-size: 1.25em; font-weight: normal;
  color: #0367c5;
}
.align-middle { vertical-align: middle; }

/* The container for the footer area under the white space */
.footer { clear: both;  /* force the footer clear of everything above */
	font-size: .8em;
	color: #c9fffc;
	padding-top: 4px;
	position: relative;
	padding-bottom: 5px;
	height: 30px;
}
.footer a { text-decoration: none; }
.footer a, .footer a:visited { color: #c9fffc; }
.footer a:hover { color: yellow; }
/* Footer (in cc) ---------------- */
/* Footer layout rules */
.footer p { padding: 0; margin: 0; }
.footer-content { position: absolute; top: 0; padding-top: 5px; }
.footer-menu {  left: 0; padding-left: 6px; }
.footer-copyright { right: 0; padding-right: 6px; padding-right: 0px; padding-bottom: 6px; text-align: right; }
/* Footer        ---------------- */

.ileft  { float: left; margin-right: 15px; margin-top: 5px; }
.iright { float: right; margin-left: 15px; }
.inline { float: none; }
.img-tl { float: left; padding: 0; margin: 0 10px 3px 0; }
.img-tr { float: right; padding: 0; margin: 0 0 3px 10px; }
.img-l { float: left; padding: 0; margin: 0 10px 0 0; }
.img-r { float: right; padding: 0; margin: 5px 0 5px 10px; }

.fineprint { font-size: .7em; font-style: italic; }
.sup { vertical-align: super; font-size: .7em; }
.boldblue  { font-weight: bold; color: #009; }
.boldltblue  { font-weight: bold; color:#0066CC; }
.hfvis { display: none; visibility: hidden; }
.markred { color: red; }
.clearboth { clear: both; }
.clearleft { clear:left; }
.centerme { text-align: center; }
.nospacing { margin:0; padding:0; }
.nobottom { margin-bottom: 0; padding-bottom: 0; }
.underline { text-decoration: underline; }