/*	graphic.css	Style sheet for Claro graphic Web pages
	Copyright Michael Scannell 2005						*/

/*	body	*/

body	{
	margin:					0;
	padding:				0;
	background-color:		#faf0e6;	/* linen */
	background-image:		url( ../media/backlogo.gif );
	background-position:	top right;
	background-repeat:		repeat-y;
	font-family:			Verdana, Helvetica, Geneva, Arial, sans-serif;
	font-size:				16px
}

/*	common divisions	*/

div#fourth	{
	position:	absolute;
	top:		200px;
	left:		21%;
	width:		65%;
	z-index:	1
}

div#title4	{
	position:	absolute;
	top:		188px;
	left:		56%;
	z-index:	2
}

div#third	{
	position:	absolute;
	top:		248px;
	left:		3%;
	width:		65%;
	z-index:	3
}

div#title3	{
	position:	absolute;
	top:		236px;
	left:		38%;
	z-index:	4
}

div#second	{
	position:	absolute;
	top:		296px;
	left:		15%;
	width:		65%;
	z-index:	5
}

div#title2	{
	position:	absolute;
	top:		284px;
	left:		50%;
	z-index:	6
}

div#first	{
	position:	absolute;
	top:		342px;
	left:		9%;
	width:		65%;
	z-index:	7
}

div#title1	{
	position:	absolute;
	top:		330px;
	left:		44%;
	z-index:	8
}

div.answer	{
	margin:				0 0 0 150px;
	padding:			1px 16px;
	border:				2px solid black;
	background-color:	#75b596;	/* lighter version of section background */
	color:				#003473		/* blue from a logo */
}

div.owners	{
	position:		absolute;
	top:			1048px;
	padding-bottom:	24px
}

div.credits	{
	float:		right;
	font-size:	75%
}

div#tools	{
	position:	absolute;
	top:		0;
	left:		0;
	z-index:	25;
	visibility:	hidden
}

#tools img	{
	margin-bottom:	16px;
	display:		block
}

/*	div styles	*/

.long	{
	height:		600px;	/* should be max-height... */
	overflow:	auto
}

.short	{
	min-height:	160px
}

/*	for IE	*/
* html body .short	{
	height:	160px
}

.main	{
	padding:	48px 40px 32px 64px;
	border:		3px solid black
}

.bridge	{
	background-color:	#2e473b;	/* lamp black */
	color:				white
}

.coolintro	{
	background-color:	#774f4f;	/* plum */
	color:				#ffffd7		/* white touched with cream */
}

.cool3	{
	background-color:	#b3b377;	/* a khaki */
	color:				black
}

.cool4	{
	background-color:	#367736;	/* dark green */
	color:				white
}

.final	{
	background-color:	#120a8f;	/* ultramarine */
	color:				white
}

.intro	{
	background-color:	#5c246e;	/* ultramarine violet */
	color:				#d7ffff		/* white touched with blue */
}

.royal	{
	background-color:	#4169e1;	/* royal blue */
	color:				black
}

.setbridge	{
	background-color:	#404040;	/* a grey */
	color:				white
}

/*	unique divisions	*/

.letter	{
	font-family:		"Courier New", Courier, monospace;
	background-color:	#ece3b2;
	color:				#5c246e
}

.mission	{
	line-height:		150%;
	font-family:		"Book Antiqua", "Bookman Old Style", Georgia, serif;
	font-size:			22px;
	font-weight:		bold;
	text-align:			center;
	background-color:	silver;
	color:				navy
}

.personal	{
	font-family:		"Courier New", Courier, monospace;
	background-color:	#e7e7e7;	/* a light grey */
	color:				navy
}

.inquote	{
	padding:			2px 16px;
	background-color:	#dc9292;	/* lighter version of section background */
	color:				#5c246e
}

.bridgequote	{
	padding:			2px 16px;
	background-color:	#75b596;	/* lighter version of section background */
	color:				#003473		/* blue from logo */
}

/*	pop-up menus	*/

div.popup	{
	margin:		0;
	padding:	0;
	display:	none
}

div#compmenu	{
	width:		10em;
	position:	absolute;
	top:		16px;
	left:		350px
}

div#missmenu	{
	width:		12em;
	position:	absolute;
	top:		56px;
	left:		350px
}

div#trainmenu	{
	width:		12em;
	position:	absolute;
	top:		96px;
	left:		350px
}

div#qualmenu	{
	width:		14em;
	position:	absolute;
	top:		144px;
	left:		350px
}

div#clientmenu	{
	width:		11em;
	position:	absolute;
	top:		184px;
	left:		350px
}

div#nersmenu	{
	width:		9em;
	position:	absolute;
	top:		224px;
	left:		350px
}

div#newcmenu	{
	width:		15em;
	position:	absolute;
	top:		270px;
	left:		350px
}

div#hardmenu	{
	width:		11em;
	position:	absolute;
	top:		310px;
	left:		350px
}

div#softmenu	{
	width:		10em;
	position:	absolute;
	top:		350px;
	left:		350px
}

div#oyermenu	{
	width:		12em;
	position:	absolute;
	top:		400px;
	left:		350px
}

div#leesmenu	{
	width:		11em;
	position:	absolute;
	top:		440px;
	left:		350px
}

div#seekmenu	{
	width:		10em;
	position:	absolute;
	top:		480px;
	left:		350px
}

div#studmenu	{
	width:		11em;
	position:	absolute;
	top:		520px;
	left:		350px
}

.popup ul	{
	margin:		0;
	padding:	0;
	list-style:	none
}

.popup ul li	{
	margin:		0;
	padding:	0
}

.popup a:link, .popup a:visited	{
	display:			block;
	width:				100%;
	margin:				0;
	padding:			4px 8px;
	border:				1px solid #39c;
	font-size:			90%;
	background-color:	navy;
	color:				white;
	text-align:			center
}

/*	images	*/

img	{
	border:	0
}

img.plain	{
	border:	2px solid black;
}

img#sitemap	{
	margin:		0;
	padding:	0
}

img.bigpic	{
	margin:	24px 40px 16px 0;
	float:	left
}

img.hipic	{
	margin:	8px 40px 16px 0;
	float:	left
}

img.icon	{
	margin:	0 16px 0 0;
	float:	left
}

img.lpic	{
	margin:	16px 32px 8px 0;
	float:	left
}

img.llpic	{
	margin:	16px 48px 32px 0;
	float:	left
}

img.qrpic	{
	margin:	24px 0 8px 28px;
	float:	right
}

img.rpic	{
	margin:	16px 0 8px 28px;
	float:	right
}

img.rrpic	{
	margin:	16px 0 32px 48px;
	float:	right
}

img.tpic	{
	margin:		4px 64px 16px 0;
	display:	block
}

div.tpics	{
	margin:		0;
	padding:	0;
	float:		left
}

/*	element colours	*/

h4	{
	border:				1px solid #fffabe;	/* white with hint of lemon */
	background-color:	black;
	color:				#fffabe
}

hr	{
	background-color:	#39c;
	color:				#39c
}

a:visited	{
	color:	#fb0	/* an orange */
}

a:link, a:hover	{
	color:	yellow
}

.owners a:visited, .personal a:visited	{
	color:	#c36	/* Claro pink */
}

.owners a:link, .owners a:hover, .personal a:link, .personal a:hover	{
	color:	red
}

/*	elements	*/

h4	{
	width:			240px;
	margin:			0;
	padding:		6px 0;
	text-align:		center;
	font-family:	"Trebuchet MS", Helvetica, sans-serif;
	font-weight:	normal
}

h5	{
	font-size:	100%
}

p.address	{
	margin-left: 5%
}

a:link, a:visited	{
	text-decoration:	none
}

a:hover	{
	text-decoration:	underline
}

span.unit	{
	white-space: nowrap
}

/*	EOF	*/