/* ========== main CSS for timmit.ca ========== */

@font-face	{								/* used for TimmiT name */
	font-family:TimmiT;
	src:url(font/timmit.woff);
}


@font-face	{								/* used for most text */
	font-family:Vera;
	src:url(font/vera.woff);
}

@font-face	{
	font-family:Vera-Bold;
	src:url(font/vera-bold.woff);
}

@font-face	{								/* used for the script on the yellow post-its */
	font-family:Handwriting;
	src:url(font/handwriting.woff);
}

@font-face	{
	font-family:Data;
	src:url(font/data-latin.woff);
}

.timmit		{								/* font for TimmiT in inline text */
	font-family: TimmiT, Arial, Helvetica, sans-serif;
	font-size:125%;
}

body	{ 	
	background-color:#103000;
	background-image:url(bg_notebook2.jpg);
	font-family: Vera, Arial, Helvetica, sans-serif;
	color:white;
	font-size:125%;
	padding:0;
	margin:0;
}

strong	{
	font-family: Vera-Bold, Arial, Helvetica, sans-serif;
	font-weight:normal;
}


/* ========== Main (home) page ========== */


body.main_page {
	background-image:url(bg_notebook_m.jpg);
}

@media screen and (min-width:2001px) {		/* use big background for really wide screens >2000 */
  body.main_page {
	background-image:url(bg_notebook.jpg);
  }
}

div.main_content	{
	width:60%; 
	margin-left:25%; 
	margin-top:30px; 
	text-align:center;
	color:#a0a0a0;
}

@media screen and (max-width:600px) {		/* use background for small screens <= 600, e.g., phones */
	body.main_page {
		background-image:url(bg_notebook2.jpg);
  }
	div.main_content	{
		width:90%; 
		margin-left:5%;
		margin-top:30px; 
		text-align:center;
		color:#a0a0a0;
	}
}


div.label_outer	{
	padding:10px; 
	background-color:white; 
	border-width:5px;
	border-style:solid;
	border-color:black; 
	border-radius:20px;
}

div.label_inner	{
	border:15px	double red; 
	border-radius:20px;
	color:black;
	font-size:200%;
	font-weight:bold;
	padding-bottom:10px;
}

.main_content ul	{
	margin-bottom:25px;
	margin-top:0;
}

li.mainmenu	{	
	display:inline;		/* the menu items themselves */
	margin-left:0.0em;
	margin-right:0.0em;
	font-size:300%;
}
li.mainmenu a		{	
	text-decoration:none;			/* links in a list */
	font-size:60%;
	font-weight:bold;
	color:white;
	padding-right:0.5em;
	padding-left:0.5em;
	border-radius:1em;
}

li.mainmenu a:hover	{				/* change appearance when hovering over link */
		color:#000066;
		background-color:yellow;
}

/* ========== Header for all subordinate pages ========== */

header	{	
			margin:0;			/* main header container for subsequent pages */
			padding:0;
			color:white;
			background-color:#103000;
			background-image:url(bg_notebook2.jpg);
			border-style:ridge;
			border-color:gray;
			border-width:0 0 10px 0;
}

.logobox	{	
			margin-left:0;		/* container for the logo image in the header */
			margin-top:0;
			margin-bottom:0;
			padding:0;
			width:25%;
			position:absolute;
			top:0;
			left:0;
}

.logoimg	{	
			width:100%;			/* for logo image in the header */
			height:6ex;
			border-style:none;
}

.sloganbox	{
			margin-left:0;		/* container for the text logo in the header */
			margin-top:0;
			margin-bottom:0;
			padding:0;
			width:25%;
			position:absolute;
			top:0.5ex;
			left:25%;
			font-size:80%;
}

.menubox	{	
			margin-right:0.5em;	/* container for the navigation menu in the header */
			margin-top:0;
			margin-bottom:0;
			padding:0;
			float:right;
			width:60%;
			text-align:right;
}

li.menu	{	
			display:inline;		/* the menu items themselves */
}

li.menu a	{	
			text-decoration:none;		/* links in a list, like top menu items */
			font-size:90%;
			font-weight:bold;
			color:white;
			padding-right:0.5em;
			padding-left:0.5em;
			border-radius:1em;
}

li.menu a:hover	{						/* change appearance when hovering over link, like in top menu items */
			color:#000066;
			background-color:yellow;
}

.current	{	
			font-size:90%;				/* to indicate current page, inactive menu selection */
			padding-right:0.5em;
			padding-left:0.5em;
			font-weight:bold;
			color:yellow;
}


/* ========== Body of all subordinate pages ========== */

.main		{	
			background-color:#545557;		/* main part of the page between header and footer */
			background-image:url(bg_rocks.jpg);
			padding-top:20px;
			padding-bottom:20px;
}

.content	{	
			margin-right:5%;				/* the eng paper section with most of the text */
			margin-left:5%;
			background-image:url(bg_engpaper_m.gif);
			color:black;
			text-align:left;
			padding:0px;
			margin-top:0px;
			margin-bottom:0px;
			padding-left:68px;
			padding-right:0px;
			border-style:outset;
			border-color:black;
			border-width:0 10px 0 0;
			border-radius:0px 15px 15px 0;
}

@media screen and (min-width:2001px) {		/* use bigger eng paper for really wide screens */
  .content {
			margin-right:5%;				/* the eng paper section with most of the text */
			margin-left:5%;
			background-image:url(bg_engpaper.gif);
			color:black;
			text-align:left;
			padding:0px;
			margin-top:0px;
			margin-bottom:0px;
			padding-left:68px;
			padding-right:0px;
			border-style:outset;
			border-color:black;
			border-width:0 10px 0 0;
			border-radius:0px 15px 15px 0;
  }
}

@media screen and (max-width:600px) {		/* use simpler eng paper and smaller LH margin for small screens */
  .content {
			margin-right:5%;				/* the eng paper section with most of the text */
			margin-left:5%;
			background-image:url(bg_engpaper_s.gif);
			color:black;
			text-align:left;
			padding:0px;
			margin-top:0px;
			margin-bottom:0px;
			padding-left:1em;
			padding-right:0px;
			border-style:outset;
			border-color:black;
			border-width:0 10px 0 2px;
			border-radius:0px 15px 15px 0;
  }
}

div.top_of_page		{					/* white space at top of eng paper with breadcrumbs and page title */
			background-color:white;
			border-style:solid; 
			border-bottom-color:#dfffff; 
			border-width:0px 0 3px 0;
}

div.content p {							/* for paragraphs in main content */
			padding-left:5px;
			padding-right:20px;
}

div.content a {							/* links in main content */
			color:#000000;
			font-weight:bold;
			padding-right:0.1em;
			padding-left:0.1em;
			border-radius:1em;
}

div.content a:link {
			color:#000099;
}

div.content a:visited {
			color:#000099;
}

div.content a:active {
			color:red;
}

div.content a:hover {
			color:white;
			background-color:#000099
}

div.content li {
			padding-left:0px;
			padding-right:20px;
			padding-bottom:1ex;
}

li.breadcrumb_menu	{					/* breadcrumb menu items themselves */
			display:inline;		
			margin-left:-1em;
			margin-right:0;
}

li.breadcrumb_menu a	{				/* links in breadcrumb menu items */
			text-decoration:none;
			font-size:75%;
			font-weight:bold;
			color:white;
			padding-left:0.5em;
			padding-right:0.5em;
}

li.breadcrumb_menu a:hover	{		/* change appearance when hovering over link, like in top menu items */
			color:yellow;
			border-radius:1em;
}

.breadcrumb_current	{				/* to indicate current page, inactive breadcrub menu selection */
			font-size:75%;
			font-weight:bold;
			color:#000099;
			padding-left:0.5em;
			padding-right:0.5em;
}


div.content h1 {						/* generally for white space at top of engineering paper */
			padding:0; 
			padding-top:1ex; 
			padding-bottom:1ex;
			width:90%;
			margin-left:auto;
			margin-right:auto;
			text-align:center;  
			background-color:#c0c0c0;
			background-image:url(bg_boxes.jpg);
			border-style:solid;
			border-color:black; 
			border-width:3px;
			border-radius:5px;
			font-size:200%;
			font-weight:bold;
}

div.content h2 {
			font-size:125%;
			font-weight:bold;
			padding-left:5px;
}

div.content h3 {
			font-size:100%;
			font-weight:bold;
			padding-left:0;
}


p.bottom	{							/* for white space at bottom of engineering paper */
			padding-top:20px; 
			padding-bottom:20px; 
			background-color:white; 
			text-align:center; 
			border-style:solid; 
			border-top-color:#dfffff; 
			border-width:3px 0 0 0;
			color:#99ffff;
}

div.photo_right	{						/* right-aligned photo */
			width:25%;
			float:right;
			padding:20px;
}


div.photo_left	{						/* left-aligned photo */
			width:25%;
			float:left;
			padding:20px;
}

div.photo_centre {
	width:75%;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

div.side_drawing	{					/* image right-hand side of some pages */
			float:right;
			margin:20px;
			width:20%;
			text-align:center;
}

img.page_photo	{						/* most photos */
			width:100%;
			border-style:solid;
			border-width:2px;
			border-color:black;
}

div.side_drawing img	{						/* background side drawings */
			width:100%;
			border-style:solid;
			border-width:2px;
			border-color:black;
}

img.info_dwg	{
			border-style:solid;
			border-width:2px;
			border-color:black;
}

div.postit_left	{						/* summary sticky, generally top left */
			width:20%;
			float:left;
			background-color:#ffffc0;
			background-image:url(bg_brownpaper.jpg);
			border-style:solid;
			border-width:1px;
			border-color:black;
			box-shadow:10px 10px 5px 0px black;
			margin-right:40px;
			margin-bottom:20px;
			margin-left:2px;
			padding:5px;
			text-align:left;
			font-size:100%;
			font-family:Handwriting, "Comic Sans", "Comic Sans MS", cursive;
}


div.page_toc {
			width:50%;
			background-color:#ffffc0;
			background-image:url(bg_brownpaper.jpg);
			border-style:solid;
			border-width:1px;
			border-color:black;
			box-shadow:10px 10px 5px 0px black;
			margin-right:auto;
			margin-bottom:20px;
			margin-left:auto;
			padding:5px;
			text-align:left;
			font-size:100%;
			font-family:Handwriting, "Comic Sans", "Comic Sans MS", cursive;
}

@media screen and (max-width:800px) {		/* make post-its disappear on smallish screens */
  div.postit_left {
		display:none;
	}
}

div.postit_left h3 {
	text-align:center;
	font-weight:bold;
	font-size:125%;
}


div.figure	{							/* for small figures */
			width:40%;
			border-style:solid;
			border-width:2px;
			border-color:black;
			float:right;
			margin:20px;
			padding:0em;
			background-color:white;
}

div.fullphoto	{
			width:95%;
			margin-right:auto;
			margin-left:auto;
			text-align:center;
}

div.highlight {							/* for yellow highlight warnings */
	border-style:solid; 
	border-width:4px; 
	border-color:black; 
	background-color:yellow; 
	width:90%; margin-left:auto; 
	margin-right:auto; 
	padding:5px;
}

span.warning {
	background-color:red;
	color:white;
	font-weight:bold;
}

span.notice {
	background-color:yellow;
	color:black;
	font-weight:bold;
}

figure img	{								/* images in figures */
			width:100%;
			border-style:solid;
			border-width:1px;
			border-color:black;
}

figcaption	{								/* text for the captions in figures */
			font-size:75%;
			text-align:center;
}

span.command	{						/* for command line examples, Webscalp */
			font-size:110%;
			color:black;
			background-color:white;
			border-style:solid;
			border-color:black;
			border-width:1px;
			font-weight:bold;
			padding:5px;
			font-family:monospace;
}

span.command a	{ 	
			color:black; 
			font-weight: bold; 
			text-decoration:none; 
}

span.command a:link	{ 	
			color:black; 
}

span.command a:visited	{ 	
			color:black; 
}

span.command.index a:active	{ 	
			color:#000099; 
}

span.command a:hover	{ 	
			color:yellow; 
			background-color:red; 
			text-decoration:none; 
}

p.command_example	{
			text-align:center;
}

p.topbutton {
			text-align:center;
			margin-top:3ex;
			margin-bottom:3ex;
}

p.topbutton a {								/* styling for top of page button */
			font-weight: bold; 
			text-decoration:none; 
			background-color:#112f00;
			font-size:100%;
			background-image:url(bg_notebook2.jpg);
			padding:10px;
			color:white;
			border-style:solid;
			border-color:black;
			border-width:5px;
			border-radius:10px;}

p.topbutton a:link	{ 	
			color:white; 
}

p.topbutton a:visited	{ 	
			color:white; 
}

p.topbutton a:active	{ 	
			color:yellow; 
}

p.topbutton a:hover	{ 	
			color:yellow; 
			border-style:inset;
			border-color:yellow;	
			text-decoration:none;
}

.evenline	{						/* colour for even lines in a table */
	color:black;
	background-color:#9999ff;
}

.oddline	{						/* colour for odd lines in a table */
	color:black;
	background-color:#3399ff;
}

hr	{
	width:90%;
	padding-right:20px;
	height:1px;
	background:black;
}

/* ========== Point of Interest table, THEN =========== */

table.poi {
	width:95%;
	border-style:solid;
	border-width:2px;
	border-color:black;
	border-collapse:collapse;
}

table.poi th {
	text-align:center;
	font-weight:bold;
	background-color:#b4b4b4;
	border-style:solid;
	border-width:2px;
	border-color:black;
	padding-left:1em;
	padding-right:1em;
}

table.poi td {
	background-color:#f0f0f0;
	border-style:solid;
	border-width:2px;
	border-color:black;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:1ex;
	padding-top:1ex;
	text-align:center;
}

table.poi td.note {
	text-align:left;
}

/* ========== Photo table, THEN ========== */


table.photos {
	width:95%;
}

table.photos td {
	padding-left:1em;
	padding-right:1em;
	padding-bottom:1ex;
	padding-top:1ex;
	text-align:center;
}

table.photos td.note {
	text-align:left;
}

/* ========== links in THEN tools ========== */

p.tool a { 
	font-size:150%;
	text-decoration:none;
}

/* ========== geographic locations in THEN ========== */

.geo	{
	font-family: Data, mono;
	font-size:135%;
}

/* ========= code samples ========== */

div.code {
	font-family: Courier New, Courier, mono;
	background-color:#f0f0f0;
	white-space: pre;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	border-style:solid;
	border-width:2px;
	border-color:black;
	padding-left:2em;
	padding-bottom:1ex;
	font-size:85%;
}

/* ========= nav buttons for fullsize photos in THEN ========= */


div.picbutcontainer {
	margin-top:1ex;
	margin-bottom:1ex;
	text-align:center;
}


div.picbutcontainer a:link	{	
			text-decoration:none;
			font-family: Vera, Arial, Helvetica, sans-serif; 
			font-size:200%;
			font-weight:bold;
			background-image:url(/bg_notebook2.jpg); 
			color:white;
			padding-right:0.5em;
			padding-left:0.5em;
			border-radius:0.25em;
			border-style:solid;
			border-color:black;
			border-width:0px;
}
div.picbutcontainer a:visited	{
			color:white;
}

div.picbutcontainer a:hover	{
			color:yellow;
}

/* ========== Esri maps ========== */

div.esri_map {
	width:50%;
	margin-left:auto; 
	margin-right:auto; 
	margin-bottom:1ex; 
	border-color:black; 
	border-style:solid; 
	border-width:2px;
	padding:0;
}

div.esri_map a {							/* larger map link in ESRI map */
			color:white;
			font-weight:normal;
			padding-right0.5em;
			padding-left:0.5em;
			border-radius:0;
			text-decoration:none;
			background-color:#6c6d70;
}

div.esri_map a:link {
			color:white;
}

div.esri_map a:visited {
			color:white;
}

div.esri_map a:active {
			color:red;
}

div.esri_map a:hover {
			color:white;
			background-color:#787878
}

/* ========== tools/gps ========== */

ul.spread li {
	margin-bottom:2ex;
}

.fileicon {
	width:32px;
	height:32px;
	border-style:none;
}


/* ========== Contact page ========== */

div.content table {					/* table of contact info */
			margin-left:auto;
			margin-right:auto;
}

td.contact_title {
			text-align:right;
			font-weight:bold;
			font-size:120%;
			vertical-align:middle;
}

td.contact_info {
			text-align:center;
			padding-top:2ex;
			padding-bottom:2ex;
			padding-left:2em;
}

.standard_form {						/* contact form */
			width:90%;
			margin-left:auto;
			margin-right:auto;
			padding-top:10px;
			padding-bottom:10px;
			padding-left:2%;
			padding-right:2%;
			background-color:#c0c0c0;
			background-image:url(bg_boxes.jpg);
			color:black;
			text-align:left;
			border-style:solid;
			border-width:3px;
			border-color:black;
			border-radius:5px;
}

input.txt	{	
			width:95%;					/* single-line text inputs in form */
			margin-bottom:10px;
			margin-left:0%;
			margin-right:0%;
			font-family: "Courier New", Courier, monospace;
			font-size:125%;
			border-style:solid;
			border-width:2px;
			border-color:black;
			border-radius:5px;
			padding:5px;
}

textarea	{	
	width:100%;					/* multiline text area in form */
	margin-bottom:10px;
	font-family: "Courier New", Courier, monospace;
	font-size:125%;
	border-style:solid;
	border-width:2px;
	border-color:black;
	border-radius:5px;
}

input.file	{
	width:100%;
	border-style:solid;
	border-width:2px;
	border-color:black;
	border-radius:5px;
	background-color:white;	
	font-family: "Courier New", Courier, monospace;
}

.submit	{								/* submit button on form */
	font-size:100%;
	background-image:url(bg_notebook2.jpg);
	padding:10px;
	color:white;
	border-style:solid;
	border-color:black;
	border-width:5px;
	border-radius:5px;
}
.submit:hover	{ 
	color:yellow;
	border-style:inset;
	border-color:yellow;
	border-width:5px;
	border-radius:5px;
}

.contact_error {			/* text on contact error page */
	font-size:150%;
}



	
/* ========== Footer of all subordinate pages ========== */

footer	{	
	color:white;				/* footer at the bottom of each page */
	background-color:#103000;
	background-image:url(bg_notebook2.jpg);
	text-align:center;
	border-style:ridge;
	border-color:gray;
	border-width:10px 0 0 0;
}

.copyright	{	
	padding-bottom:20px;	/* copyright notice at the bottom of each page */
	padding-top:20px;
	text-align:center;
	color:gray;
	font-size:75%;
}

.other_sites {				/* links to other TimmiT websites */
	text-align:center;
}


.other_sites a		{	
	text-decoration:none;			/* links in a list */
	font-size:100%;
	font-weight:bold;
	color:white;
	padding-right:0.5em;
	padding-left:0.5em;
	border-radius:1em;
}

.other_sites a:hover	{				/* change appearance when hovering over link */
		color:#000066;
		background-color:yellow;
}