/*
 *	css
 *		elem
 *		#id 
 *		.class 
 *		elem.class	(Language specific, in HTML, the same as DIV[class~="warning"], see class selectors
 *		elem.#id	(Matches any E element with ID equal to "id"), see id selectors
 *		elem .class
 *		elem[attrib]
 *		elem[attribOperatorValue]
 *		
 *		id has to be unique, class not
 *
 *	used colors:
 *		basic color:   #FFFFFF (white)
 *		to gradient:   #EBEBEB (light grey)
 *		pop up bg:     #FFFFCC (yellow)
 *		pop up text:   #999999 (grey)
 *		normal text:   #000000 (black)
 *		hover color:   #FFA500 (orange)
 *		borders:       #C3C7D3 (2px groove grey)
 *
 */

/* added variables for colors, in 2011 IE9 started supporting this, so probably by now i can start using it */

:root,

	:root.light {
	--bgColor:				#FFFFFF; /* white  */
	--fgColor:				#000000; /* black */
	--hoverColor:			#FFA500; /* orange */
	--popupBgColor:			#FFFFCC; /* yellow  */
	--popupFgColor:			#999999; /* grey */
	--endGradColor:			#EBEBEB; /* light grey */
	--borderStyle:			2px groove #C3C7D3; /* grey */
	}

	:root.dark {
	--bgColor:				#000000; /* black  */
	--fgColor:				#FFFFFF; /* white */
	--hoverColor:			#FFA500; /* orange */
	--popupBgColor:			#FFFFCC; /* yellow  */
	--popupFgColor:			#999999; /* grey */
	--endGradColor:			#EBEBEB; /* light grey */
	--borderStyle:			2px groove #C3C7D3; /* grey */
	}

	:root.grey {
	--bgColor:				#C3C7D3; /* grey  */
	--fgColor:				#000000; /* black */
	--hoverColor:			#FFA500; /* orange */
	--popupBgColor:			#FFFFCC; /* yellow  */
	--popupFgColor:			#999999; /* grey */
	--endGradColor:			#EBEBEB; /* light grey */
	--borderStyle:			2px groove #C3C7D3; /* grey */
	}
	
	
#divTitle {
	float:					left;
}
#selectThemeDiv {
	float:					right;
}

#selectTheme {
	background-color: 		var(--bgColor);
	color: 					var(--fgColor);
	border:					none;
}


/* hover stuff */
[class$='On']:hover			{background-color: var(--hoverColor); cursor: pointer;} /* expensive */
.buttonOn:hover				{background-color: var(--hoverColor); cursor: pointer;}
.thumb:hover				{background-color: var(--hoverColor); cursor: pointer;}
input:hover					{background-color: var(--hoverColor); cursor: pointer;}
a:link						{text-decoration:none; color:inherit;}
a:visited					{text-decoration:none; color:inherit;}
a:hover						{text-decoration:underline overline; color:inherit;
								 background-color: var(--hoverColor); cursor:pointer;}
a:active					{text-decoration:none; color:inherit;}
a img						{border: none; }

body {
	z-index:				1;
	background-color:		var(--bgColor);
	background-image:		url(runningDog.gif);
	background-position:	left bottom;
	background-repeat:		no-repeat;
	background-attachment:	fixed;
	font-weight:			normal;
	font-size:				1.5em;
	color:					var(--fgColor);
	width:					100%;
	margin:					0px;
	border:					0px;
	padding:				0px;
}

#divMain {
	z-index:				1;
	margin:					0;
	border:					0;
	padding:				0;
}

#divHeader, #divFooter {
	z-index:				1;
	clear:					both;
	margin:					0;
	border:					0;
	padding:				10px;
}

#divCenter {
	z-index:				1;
	clear:					both;
	width:					100%;
	height:					100vh;
	margin:					0;
	border:					0;
	padding:				0;
}

/* left center column: navigation */
#divNav {
	z-index:				1;
	float:					left;
	margin:					0;
	padding:				10px;
	overflow:				auto;
	min-width:				180px;
	height:					inherit;
	border-right:			var(--borderStyle);
}

/* right center column: content, left margin is width of left column */
/* trigger something called a "block formatting context" (BFC) to fill remaining width */
#divContent {
	filter:					progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='var(--bgColor)', endColorstr='var(--toBgColor)'); /* for IE */
	background:				-webkit-gradient(linear, top left, top right, from(var(--bgColor)), to(var(--toBgColor))); /* for webkit browsers */
	background:				-moz-linear-gradient(left,  var(--bgColor),  var(--toBgColor)); /* for firefox 3.6+ */
	z-index:				1;
	margin:					0;
	border:					0;
	padding:				0px 0px 0px 40px;
	float:					none;
	overflow:				auto;  
	min-width:				180px;
	height:					inherit;
}

#divCenter::after {
	content:				"";
	clear:					both;
	display:				none;
}

#divNavButtons {
	z-index:				1;
	position:				relative;
	overflow:				hidden;
}

#divNavButtons .button {
	z-index:				1;
	float:					left;
	position:				relative;
	width:					34px;
	height:					34px;
	vertical-align:			middle;
	text-align:				center;
}

#divNavButtons .buttonText {
	z-index:				1;
	position:				absolute;
	bottom:                 0px;
	width:                  100%;
	text-align:             center;
}

.buttonNewLine {
	clear:					both;
}

/* removed button on/off locations, the new var function does not work inside url function
 * 		still looking for another solution, maybe start using svg for button icons
 */


#divNavLinks {
}

#divNavLinks .navCurrentFile {
	padding-left:			3px;
}

#divNavLinks .navParentLink {
}

#divNavLinks .navSubDirLink {
}

#divNavLinks .navChildLink {
	padding-left:			3px;
}

.navLine {
}

.dirSign {
	margin:					0px 3px 0px 3px;
	border:					0;
	padding:				0px;
	font-size:				0.8em;
	vertical-align:			top;
}

#divContent .thumb {
	z-index:				1;
	float:					left;
	position:				relative;
	margin:					3px 0px 3px 6px;
	border:					0;
	padding:				3px;
}

#divContent .thumbImgDeco {
	z-index:				1;
	margin:					3px;
	border:					var(--borderStyle);
	padding:				10px;
	display:				block;
}

#divContent .thumbImg {
	z-index:				1;
	position:				relative;
	margin:					0;
	border:					0;
	padding:				0;
}

#divContent .thumbText {
	z-index:				1;
	position:				relative;
	height:					2em;
	margin:					3px;
	border:					0;
	padding:				3px;
	display:				block;
	overflow:				hidden;
	word-wrap:				break-word;
	text-align:				center;
}

#divContent .photo {
	z-index:				1;
	position:				relative;
	width:					100%;
	margin:					0;
	padding:				0;
}

#divContent .horImg {
	width:					100%;
	overflow:				auto;
}

#divContent .vertImg {
	float:					left;
}

#divContent .horImgText {
	z-index:				1;
	border:					0;
	padding:				5px;
	padding-top:			20px;
	overflow:				hidden;
	word-wrap:				break-word;
	text-align:				center;
}

#divContent .vertImgText {
	z-index:				1;
	width:					30%;
	border:					0;
	padding:				5px;
	overflow:				hidden;
	word-wrap:				break-word;
	text-align:				left;
	vertical-align:			top;
}

#divPopups {
	z-index:				9;
	position:				absolute;
	top:					5px;
	left:					210px;
	visibility:				hidden;
	color:					var(--popupFgColor);
}

#divPopups .changeLanguage {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .changeStyle {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .changeMusic {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .changeDelay {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor)
}

#divPopups .helpInfo {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .aboutInfo {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .photoInfo {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .cameraInfo {
	position:				absolute;
	top:					0px;
	left:					0px;
	width:					31em;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

#divPopups .linkInfo {
	position:				relative;
	margin:					0;
	border:					var(--borderStyle);
	padding:				5px;
	background-color:		var(--popupBgColor);
}

.changeLanguageLink {
	padding:				5px;
}

.changeStyleLink {
	padding:				5px;
}

.changeDelayInput {
	margin:					5px;
	padding:				5px;
	width:					3em;
	text-align:				right;
	background-color:		var(--popupBgColor);
}

.changeDelayButton  {
	background-color:		var(--popupBgColor);
}

.linkInfoThumb {
	float :					left;
	margin:					2px;
	border:					2px;
}

.linkInfoText {
	float :					left;
}

.popupFieldLine {
}

.popupFieldName {
	clear :					left;
	float :					left;
	width :					15em;
	overflow:				hidden;
	font-weight:			bold;
}

.popupFieldSep {
	float :					left;
	width :					1em;
	font-weight:			bold;
}

.popupFieldValue {
	float :					left;
	width :					15em;
	overflow:				hidden;
}

.tocLevel1 {
	padding-left:			10px;
}

.tocLevel2 {
	padding-left:			20px;
}

.tocLevel3 {
	padding-left:			30px;
}

.tocLevel4 {
	padding-left:			40px;
}

.tocLevel5 {
	padding-left:			50px;
}

.tocFile {
	font-weight:			normal;
}

.tocDir {
	font-weight:			bold;
	padding-top:			5px;
	padding-bottom:			5px;
}

.tocDir .dirSign {
	position:				absolute;
	visibility:				hidden;
	block:					none;
}

.subLink1 {
	margin-left:			1em;
}