/*	manlutra.css - Cascading Style Sheet for BergOtterTrek2015	*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
	display: block;
}

/*	BODY MET ACHTERGONDFOTO */

body
{
	background-color: #dddddd;
	background-image: url("Otter1260x945.jpg");
	background-repeat: repeat-y;	/* repeat vertical only	*/
	background-attachment: scroll;
	background-position: top center;	/* X (hor) ,y (vert)	*/
	background-size: cover;
	line-height: 1;
	font-size: 62.5%;	/* Set default font-size: 62,5% * 16px = 10px	*/
}

a
{
	color: #FFF;
	text-decoration: none;
}

/*	HEADERS (h1 not used)	 */

h1
{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;	/* 400=normal, 700=bold*/
	padding: 0 2%;
	text-shadow: 1px 1px 0 #111;
	color: #0077AA;
	font-size: 440%;	/* Default font-size 10px * 440% = 44px	*/
	letter-spacing: 7px;
	margin: 2% 0 10px 0;
	word-wrap: break-word;
}

h2
{
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	padding: 0 2%;
	color: #0;
	font-size: 210%;	/* Default font-size 10px * 210% = 21px	*/
	letter-spacing: 2px;
}

h3
{
	width: 100%;
	max-width: 600px;
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	padding: 0 2%;
	color: #0;
	font-size: 170%;		/* Default font-size 10px * 170% = 17px	*/
	line-height: 1.375em;
	letter-spacing: 1px;
	margin: 15px 0 0 0;
}

h4
{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;	/*bold*/
	padding: 0 2%;
	text-shadow: 1px 1px 0 #333;
	color: #0077AA;
	font-size: 250%;	/* Default font-size 10px * 250% = 25px	*/
	letter-spacing: 2px;
	margin: 25px 0 10px 0;
	word-wrap: break-word;
}


/* BERGOTTERTREK	*/

#bergottertrek
{
	position: relative;
	width: 98%;
	max-width: 600px;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 210%;		/* Default font-size 10px * 210% = 21px	*/
	line-height: 1.375em;
	margin: 10px 2% 0 2%;
	z-index: 1;
}

#bergottertrek p
{
	margin: 10px 0;
}

#bergottertrek p.oblique
{
	font-style: italic;
	font-size: 90%;		/* 21px * 90% = 19px	*/
	line-height: 1.375em;
}

/* unordered list*/
#bergottertrek ul		/* See #nestlist ul		*/
{
	margin-left:23px;
}

#bergottertrek li		/* See #nestlist li.nestone */
{
	font-weight: 400;	/* normal	*/
	list-style-type: disc;
	margin-top:0.625em;
}

#bergottertrek li.two	/* See #nestlist li li	*/
{
	font-weight: 400;	/* normal	*/
	list-style-type: circle;
	margin-top:0.125em;
}


#bergottertrek ol.alpha
{
	list-style-type: lower-alpha;
	margin-left:23px;
}

#bergottertrek li.alpha
{
	list-style-type: lower-alpha;
}

#bergottertrek ol.dec
{
	margin-left:23px;
}

#bergottertrek li.num
{
	list-style-type: decimal;
	margin-left:23px;
	line-height: 1.25em;
}

#bergottertrek ul.disc
{
	list-style-type: disc;
	margin-left:23px;
	line-height: 1.375em;
}

#bergottertrek a
{
	color: #0000FF;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#bergottertrek a.hover
{
	color: #BF00FF;
}

/* LinkHead		See h1	*/

#linkhead
{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;	/* 400=normal, 700=bold*/
	padding: 0 2%;

	text-shadow: 1px 1px 0 #111;
	color: #0077AA;
	font-size: 390%;	/* Default font-size 10px * 390% = 39px	*/
	letter-spacing: 6px;
	margin: 2% 0 10px 0;
	word-wrap: break-word;
}

/* Active reference	*/ 
#linkhead a.doshow
{
	color: #0000FF;
	font-size: 92%;
	font-weight: 400;
	text-shadow: 0px 0px 0 #000;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#linkhead a.doshow:hover
{
	color: #BF00FF;
}

/* Inactive reference	*/ 
#linkhead a.noshow
{
	color: #A0A0A0;
	font-size: 92%;
	font-weight: 400;
	text-shadow: 0px 0px 0 #000;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#linkhead a.noshow:hover
{
	color: #A0A0A0;
}

/* TREKLINKS	*/
#treklinks
{
	position: relative;
	width: 100%;
	max-width: 600px;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 300%;
	line-height: 1.375em;
	margin: 5px 2% 0 2%;
	z-index: 1;
}

#treklinks p
{
	margin: 10px 0;
}

/* Active references	*/
#treklinks a.doref
{
	color: #0000FF;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}


#treklinks a.doref:hover
{
	color: #BF00FF;
}

/* Inactive references	*/
#treklinks a.noref
{
	color: #A0A0A0;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#treklinks a.noref:hover
{
	color: #A0A0A0;	/* No color change */
}

/* Nested list */

#nestlist
{
	position: relative;
	width: 98%;
	max-width: 600px;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 210%;		/* Default font-size 10px * 210% = 21px	*/
	line-height: 1.375em;
	margin: 10px 2% 0 2%;
	z-index: 1;
}

#nestlist ul
{
	margin-left:23px;
}

#nestlist li.nestone
{
	font-weight: 700;	/* bold		*/
	list-style-type: disc;
	margin-top:0.625em;
}

#nestlist li li.nesttwo
{
	font-weight: 400;	/* normal	*/
	list-style-type: circle;
}

#nestlist a
{
	color: #0000FF;
	font-size: 98%;
	font-weight: 400;
	text-shadow: 0px 0px 0 #000;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#nestlist a:hover
{
	color: #BF00FF;
}

/* logo */

#logo
{
	width: 95%;
	position: fixed;
	bottom: 5%;
	right: 5%;
	text-align: right;
	z-index: 0;
}

#logo img
{
	width: 100%;
	max-width: 90px;
	height: auto;
}