* {
	border-style: none;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/*
@font-face {
    font-family: 'kmcPrefFont';
    src: url('/inc/font/Sansation-Regular-webfont.eot');
    src: url('/inc/font/Sansation-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/font/Sansation-Regular-webfont.woff') format('woff'),
         url('/inc/font/Sansation-Regular-webfont.ttf') format('truetype'),
         url('/inc/font/Sansation-Regular-webfont.svg#kmcPrefFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/

@font-face {
    font-family: 'kmcPrefFont';
    src: url('/inc/font/OpenSans-Regular-webfont.eot');
    src: url('/inc/font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/font/OpenSans-Regular-webfont.woff') format('woff'),
         url('/inc/font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/inc/font/OpenSans-Regular-webfont.svg#kmcPrefFont') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
	font-family: 'kmcPrefFont';
	src: url('/inc/font/OpenSans-Bold-webfont.eot');
	src: url('/inc/font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('/inc/font/OpenSans-Bold-webfont.woff') format('woff'),
		url('/inc/font/OpenSans-Bold-webfont.ttf') format('truetype'),
		url('/inc/font/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
	font-weight: bold;
	font-style: normal;
}


body {
	margin: 0;

	background-color: #444;
	/*background: linear-gradient( #7bf 10%, #444 90% );*/
	background-image: linear-gradient( #7bf 140px, #444 180px );
	background-repeat: no-repeat;
	color: #ddd;
	font-family: 'kmcPrefFont', sans-serif;

	font-size: 0.95em;
	font-style: normal;
	font-weight: normal;
	line-height: 1.4em;
	

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p, a, h1, h2, h3, h4, h5, h6, img, hr {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
}

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

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

hr {
	border-top: 1px solid #888;
}

input {
	border: 1px solid #aaa;
}
/*
	Below default setting for screens widths less than 600px 
*/



#login {
	display: inline-block;
	float: right;
	background-color: lightgreen;
}





#header {
	background-color: lightgoldenrodyellow;
}

#title {
	background-color: lightsteelblue;
	text-align: center;
	padding: 0 10%;
}





#pageWrapper {
	display: block;
	width: 100%;

	background: url( '/links/mountain.jpg' );
	background-attachment: fixed;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
}


#bannerTab {
	display: table;
	table-layout: auto;
	width: 100%;

	position: relative;
}
#bannerRow {
	display: table-row;
}

#bannerWalker {
	display: none;
}

#bannerLogo {
	display: table-cell;
	width: 28%;

	vertical-align: middle;
	text-align: center;
	padding-left: 6%;
}

#bannerKMCShort {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-right: 3%;
}

#bannerKMCLong {
	display: none;
}

#imgCell img {
	width: 100%;
	height: auto;
	max-height: 190px;
}
#bannerClimber {
	display: none;
}


.fuzzy {
	position: absolute;
	top: 90%;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: transparent;
	background: linear-gradient( to bottom, rgba( 244, 250, 255, 0 ), rgba( 244, 250, 255, 1 ) );
}


#login3 {
	position: absolute;
	top: 5%;
	right: 2%;
	margin: 0;
	padding: 0 8px;

	font-size: 1em;
	line-height: normal;

	border-radius: 5px;

	opacity: 0.7;
	border: 1px solid #8bf;
}
#login3 a {
	color: #bdf;
	font-weight: bold;
	opacity: 1;
}
#login3:hover {
	background-color: red;
	opacity: 0.9;
}
.loggedin {
	background-color: green;
}

/*
Content styles defined in content3.css
*/
#contentTable { display: none; }
#contentLeft { display: none; }
#contentBody { display: none; }
#contentRight { display: none; }


/*
	DEBUG: turn OFF article areas
*/
/*	#art-head {	display: none; }*/
/*	#art-left {	display: none; }*/
/*	#art-right {	display: none; }*/
/*	#art-centre {	display: none; }*/
/*	#art-foot {	display: none; }*/

/*
	DEBUG: hightlight article areas
*/
/*
#art-head {	background-color: lightseagreen; }
#art-left {	background-color: #9d9; }
#art-right {	background-color: #99d; }
#art-centre {	background-color: #9b9; }
#art-foot {	background-color: #99b; }
*/


.large-width {
	display: none;
	color: #030;
	font-size: 1.2em;
	line-height: 1.5em
}

.small-width {
	display: block;
	color: #000;
	font-size: 1.2em;
	line-height: 1.5em
}

.smallPrint {
	font-size: 0.84em;
	line-height: 1.4em;
}

#art-centre {
	padding: 10px;
	text-align: center;
}


/*
	menuTable is the new menu-bottom
	menuLeft - menu items in columns
	menuRight - goto top button
*/
#menuTable {
	display: table;
	width: 100%;
	background-color: #444;
}
#menuTableRow {
	display: table-row;
}

#menuLeft {
	display: block; /*  ??? !!! */

	margin-left: 24px;
	margin-right: 0;
	margin-bottom: 0;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: left;

	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;

	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;

	-webkit-column-rule: 1px solid #666;
	-moz-column-rule: 1px solid #666;
	column-rule: 1px solid #666;

}
#menuLeft ul {
	margin: 0;

	padding-left: 0;
}
#menuLeft ul li {
	display: inline-block;
	width: 100%;
	padding: 6px 0;

}

#menuLeft ul li ul {
	padding-left: 1em;
}
#menuLeft ul li ul li {
	display: block;
	border: none;
	padding: 3px 0;
}
#menuLeft ul li ul li a {
	color: #ace;
}

#menuLeft a {
	color: #fdb;
	padding-left: 0.5em;
	padding-right: 0.5em;

}
#menuLeft a:hover {
	color: #000;
	background-color: #def;
}



#menuRight {
	display: table-cell;
	vertical-align: top;

	width: 24px;
	max-width: 24px;
}



#copyrightTab {
	display: table;
	width: 100%;

	background-color: #444;
}

#copyrightRow {
	display: table-row;
}

#copyrightKMC {
	display: table-cell;
	width: 50%;

	padding: 20px;
	border-top: 1px solid #888;
}
#copyrightKMC a {
    color: #7ad;
}
#copyrightKMC a:hover {
    color: #adf;
}


#copyrightTFC {
    display: table-cell;

    padding: 0.5em;
    text-align: right;
    border-top: 1px solid #888;
    vertical-align: top;
}

.tfc {
    display: inline-block;
    height: 1.8em;
    margin: 0.5em 0;
    padding: 0;
    margin-right: 0.5em;

    line-height: 1.1;
    border-radius: 2px;

    transition-property: height;
    transition-duration: 1.2s;
}
.tfc:hover {
    height: 3.5em;
}
.tfcPopup {
	display: none;
}

/*.tfc3 { height: 1.8em; } */

.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}



/* ************************************************
	button stuff
	turn links into button look-a-likes
************************************************ */

.button-thin {
	display: inline-block;
	padding: 0 8px;
	margin: 2px;
	border: 1px solid #999;
	text-decoration: none;
	cursor: default;
	border-radius: 0.2em;
        color: #333;
        background-color: #def;
}
.button-thin:link {
	color: #333;
	background-color: #def;
}
.button-thin:visited {
	color: #333;
	background-color: #def;
}
.button-thin:hover {
	color: #000;
	background-color: #cdf;
}

/*  used with button-thin  */
.b-tag:link, .b-tag:visited {
	background-color: #fff;
}
.b-tag:hover {
	background-color: #def;
}


/* Used on forms */
.input-button {
	color: #444;
	background-color: #def;
	height: 3em;
	border: 0.1em #777;
	border-style: solid;
	border-radius: 0.4em;
	margin-top: 0.15em;
	margin-bottom: 0.15em;
}

.input-button:hover {
	color: #000;
	background-color: #cdf;
}


/* style html->dropdown box, set class in surrounding div */
.select-style {
	display: inline-block;
	vertical-align: middle;
    border: 1px solid #555;
    border-radius: 0.3em;

    overflow: hidden;
    background-color: #def;
}

.select-style:hover {
	background-color: #bdf;
}

.select-style select {
	font-size: 1.0em;
	font-weight: bold;
    padding: 2px 4px;

    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}



.small-form {
	display: inline-block;
	text-align: left;
	padding:1em 1.5em;
	background: #ddd;
	border: 1px solid grey;
	border-radius: 0.8em;
}
.small-form-textbox {
	width: 12em;
	margin: 0 0 0.7em 0;
}



/* ************************************************
	panel similar to events3
	contents are centred
************************************************ */
.panel, .panel2 { /* center align */
	display: block;
	text-align: center;
	background-color: #f8f8ff;
	padding: 2%;
	border: 1px solid #aaa;
	border-radius: 7px;
	color: #444;
}

.panel div {
	display: inline-block;
	text-align: left;
}

.left {
	text-align: left;
}
.right {
	text-align: right;
}

/* *************************************************
	puts contents of sub divs into a grid with a
	variable number of columns. Used with: 'panel2'
************************************************* */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	grid-gap: 0.1em;	
	margin-top: 0.5em;
	margin-bottom: 0.8em;
	/*background-color: #dff;*/
}
.grid > div {
	padding-left: 0.5em;
}


/* ************************************************
	how events might be displayed
	.events3 - wrapper around a number of event3's
	.event3 - wrapper around a title and dates
	.event3title 
	.event3date - smaller text than title
************************************************ */
.events3 {
	background-color: #f8f8ff;
	padding: 2%;

	border: 1px solid #aaa;
	border-radius: 7px;
	color: #999;
	overflow-wrap: break-word;

}

.event3 {
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 1px solid #d8d8d8;
}
.event3 a {
	color: #44a;
}
.event3 a:hover {
	color: #fff;
}


.event3title {
	display: inline-block;
	vertical-align: top;

	padding: 0 5%;
}
.event3title:hover {
	color: white;
	background-color: #8af;
	border-radius: 4px;
}

.event3date {

	vertical-align: top;
	font-size: 0.9em;
	color: #333;
	line-height: 1em;

	padding: 0 5%;
}

/* ************************************************
	Alert boxes
	.red-alert - used by participation statement
************************************************ */

.red-alert {
	margin: 0.4em 0;

	border: 3px solid red;
	border-radius: 0.7em;
	background-color: #fdd;
	padding: 0.2em 1em;
}

/* ********************************************
Small Screen Menu
******************************************** */
#ssMenu {
	display: none;
	width: 2.3em;
	position: absolute;
	left: -0.2em;
	bottom: -0.3em;
	border-top-right-radius: 0.5em;
	padding: 0.3em;
	margin: 0.2em;
}

/* ******************************************** */


@media screen and (min-width: 450px) {
	#menuLeft {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
/*
		Above is the default for screens less than 600px across
		Below setting over-ride above for various screen widths starting with 600px
*/

@media screen and (min-width: 620px) {

	body {
		font-size: 1.0em;
	}

	
	#pageWrapper {
		background-position: 0 -60px;
	}

	
	#bannerWalker {
		display: table-cell;
		width: 12%;
		max-width: 100px;

		text-align: left;
		vertical-align: bottom;
	}

	#bannerLogo {
		display: table-cell;
		width: 7%;

		vertical-align: middle;
		text-align: center;
		padding: 0;
	}
	
	#bannerKMCShort {
		display: none;
	}
	
	#bannerKMCLong {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	
	#imgCell img {
		width: 100%;
		height: auto;
		max-height: 190px;
	}
	#bannerClimber {
		display: table-cell;
		width: 20%;
		max-width: 100px;
		
		text-align: right;
		vertical-align: middle;
	}
/*	
	#login {
		position: absolute;
		top: 0.5%;
		right: 1%;
		margin: 0;
		padding: 0 8px;
		line-height: normal;
		border-radius: 6px;
		color: white;
		background-color: white;
		opacity: 0.4;
		
	}
	#login a {
		color: #555;
	}
*/

	#login3 {
		font-size: 0.7em;
	}

	.events3 {
		margin-left: 0;
	}


	#ssMenu {
		bottom: 70em;
	}

}



@media screen and (min-width: 750px) {

	#menuLeft {
		margin: 0;
		margin-left: 10%;
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
	#menuLeft ul {
		padding-left: 0.5em;
	}

	#menuRight {
		width: 10%;
		max-width: 10%;
		text-align: right;
	}

}



@media screen and (min-width: 900px) {

	body {
		/*font-size: 1.2em;*/
	}

	#login3 {
		font-size: 0.85em;
	}

	.large-width {
		display: block;
	}
	.small-width {
		display: none;
	}

}


@media screen and (min-width: 1100px) {

	#login3 {
		font-size: 1em;
	}



	#menuLeft {
		margin: 0;
		margin-left: 10%;

		-webkit-column-count: 5;
		-moz-column-count: 5;
		column-count: 5;

	}

	#menuRight {
		width: 7%;
		min-width: 7%;
	}

}

@media screen and (min-width: 1400px) {

	body {
		font-size: 1.1em;
	}

	#menuLeft {
		/*font-size: 1.1em;*/
		margin: 0;
		margin-left: 18%;
	}
	#menuRight {
		width: 10%;
		min-width: 10%;
	}

}





@media screen and (min-height: 600px) {

	#menuTopList ul li {
		padding: 6px 0;
	}
	#menuTopList ul li ul li {
		padding: 2px 0;
	}

}