﻿/* Style rules for the GigaPan Popup window */

/* Stylesheet for GigaPan Popups in Shadowboxes 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 */
/* ----------------------------------------------- */

/* This is a simple layout - a white box with several different areas from top to bottom.
	 There is no need to center because this will always be shown in a Shadowbox. However,
	 the width is fixed at 920px. Therefore, one enclosing container is used to force the width.
*/
body {
	background-color: white;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	color: #00349a; /* same shade of blue used in the portal image */
	font-size: 76%; /* something new to try - size all other text in ems! */
}
p {  }
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin-bottom: .7em; }
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 */
.container { width: 100%; }

/* There is a "top banner" with the basic GigaPan access instructions */
.top-banner { width: 100%; margin: 0; margin-top: 5px; padding: 0; }
.top-banner p {
	color:#006600;
	text-align: center;
	font-size: 1.2em;
	padding-top: 4px;
}

/* The viewer drops in as an iframe. Try to wrestle it to the ground. */
iframe { margin: 0 auto; padding: 0;
}

/* We're going to try to put an info bar right under the snapshots */
.infobar { position: relative;
	width: 874px; margin-left: 8px; padding-left: 10px;
	height: 20px;
	background-color: black;
	color: white;
	font-size: .9em;
}
.infobar p { width: 80px; float: left;
	margin-right: 14px;
	padding-top: 0;
	text-decoration: none;
	text-align: center;
	color: white;
	cursor: default;
}
.ibcap { display: none;
	width: 200px;
	background-color: black; color: white;
	padding: 8px;
	position: absolute; top: 20px;
	font-size: 1.1em;
	z-index: 100;
}
.infobar .hovernote { float: right; width: 270px; 
	margin: 0; 
	padding: 0; padding-right: 10px;
	text-align: right; 
}
/* The content area contains the description of the GigaPan */
.content { 
	width: 97%;
	font-size: 1.35em;
	padding: 1px; padding: 12px; padding-bottom: 0px;
}
.content p { margin-bottom: .7em; }
.content h5 { text-align: center; }

/* The table used to create the two-column layout */
table.cols-2 { width: 100%;  }
.cols-2-lft { width: 60%; }
.cols-2-rgt { width: 40%; }
table.cols-2 h6 { 
	text-align: center;
	background-color: #009BF5; color: white;
	padding: 1px;
}
table.cols-2 td { vertical-align: top; }
table.cols-2 td.col-td-lft { padding-right: 10px; }
table.cols-2 td.col-td-rgt { padding-left:  10px; }
.pbox { position: relative;
	background-color: #CEDBE1; color: #111;
	margin-bottom: 20px;
}
.pbox a.helpicon { display: block; position: absolute; top: 1px; right: 2px; }
.pbox p { padding: 0px 10px 5px 10px; }
.pbox ul { padding-bottom: 5px; }

.sharenotice {
	text-align: center;
	color: #008080;
	font-style: italic;
	font-size: 1.1em;
}
.exitnotice { text-align: center; color: black; font-style: italic; font-size: .9em; }
