/* ski-touring.uk 	*/
/* version 1.0 2022-12-07 		*/

/* 	Table of contents 				*/
/*	1. Redefine HTML5 Defaults		*/
/*	2. Define the id styles  		*/
/*	3. Define the class styles  	*/
/*  4. Bootstrap issues 			*/

/*  Set up the colours  */
:root {
	--background : #c0c0c0 ;
	--site : #428BCA ;
	--black : #000000 ;
    --blue : #0000ff ;
    --darkgrey : #404040 ;
    --green : #00ff00 ;
    --grey : #909090 ;
    --lightred : #f09090 ;
    --red : #ff0000 ;
	--white : #ffffff ;
}

/* 1. Redefine default htML5 Styles */
body {
    background-color : var(--background) ;
}
td {
	vertical-align: text-top;
}
a {color : var(--site);}
a:hover {
	color : var(--site) ;
	text-decoration: none ;	
}

/* 2. Define id Styles */
#avalanche a {
	color : var(--white) ;
	font-size : 0.9em ;
} 
#avalanche a:hover {
	color : var(--white) ;
	font-size : 0.9em ;
	text-decoration: none ;
} 
#avalanche .card-header {
background-color : var(--site) ;
color : var(--white) ;
font-size : 1.2em ;
border-bottom : 0px ;
} 
#avalanche .card-body {
	background-color : var(--site) ;
	color : var(--blue) ;
}
#avalanche h1 {
	font-size : 1.2em ;
	color : var(--blue) ;
}
#avalanche h2 {
	font-size : 1em ;
	color : var(--blue) ;
} 
#copyright { border : 0px  ; }
#copyright .card-body {
    background-color : var(--background) ;
	color : var(--site) ;
	font-size : 0.85em ;
}
#factfile .card-body {
    font-size : 0.85em ;
} 
/* Styles for the footer ID */
#footer {
	background-color : var(--site) ;
	margin : 2px ;
	border : 1px solid var(--black) ;
}

#footer .card {
	border : 0px ;
}

#footer .card-body{ 
    padding : 20px ;
	background-color : var(--site) ;
	color : var(--white) ;
	font-size : 0.85em ;
}
#footer .card-body a{ 
	color : var(--white) ;
}
/* -- */

/* Styles for the footer ID */
#header { 
    color : var(--site) ; 
    margin-top : 10px ;
}
/* --- */

#imagescard .card-body {
	padding : 0px ;
}
#imagescard h1 {
	font-size : 1.0em ;
	color : var(--grey) ;
	text-align : center ;
}
#imagescard h2 {
	font-size : 0.9em ;
	color : var(--grey) ;
	text-align : center ;
} 
#map {padding : 0px ; } 
#nav .card-body {
    padding : 0px ; 
    font-size : 1em ; 
} 
#notice {
    border : 1px solid var(--red) ;
    background-color : var(--lightred);
} 
#notice .card-body { 
    color : var(--red) ; 
    font-size : 0.85em ;
} 
#title .card-body { 
    color : var(--site) ; 
    text-align : center ;
} 
#weather .card-body {	
	background-color : var(--black) ;
	color : var(--white) ;
}
#weather h1 {
	font-size : 2.0em ;
	text-align : center ;
	color : var(--site) ;
}
#weather h2 {
	font-size : 1.5em ;
	text-align : center ;
	color : var(--white) ;
}
#weather h3 {
	font-size : 1.2em ;
	text-align : center ;
	color : var(--white) ;
}

/* 3. Define class styles */
.bold { font-weight : bold ; color : var(--site) ; } 
.boldred {font-weight : bold ; color : var(--red) ; } 
.boldwhite {font-weight : bold ; color : var(--white) ; } 
.center{
	text-align : center ;
} 

.resort .card-footer a {
	color : var(--white) ;
}
.resort .card-footer a:hover {
	color : var(--white) ;
	text-decoration: none ;
}
.site{
	color : var(--site) ;
} 
.summary .card-body {
	padding : 0px ;
}
.summary h1 {
	font-size : 0.9em ;
	color : var(--grey) ;
	text-align : center ;
}
.summary h2 {
	font-size : 0.8em ;
	color : var(--grey) ;
	text-align : center ;
}

.summary table {
	margin : 10px ;
	padding : 10px ; 
    font-size : 0.85em ;
} 
.tableleft {
	text-align : right ;
	vertical-align : top ;
	width : 30% ;
}
.tableright {
	text-align : left ;
	vertical-align : top ;
	width : 70% ;
}

/* 4. Bootstrap Changes to cards */
.align-items-stretch {
	margin-bottom : 10px ;
}
.card {
    margin-bottom : 10px ;
	border : 1px solid var(--black) ;
    padding : 0px ;	
	width : 100% ;
}
.card-header {
    border-bottom : 1px solid var(--black) ;
    padding : 5px ;
	background-color : var(--site) ;
	text-align : center ; 
	color : var(--white) ;
	font-size : 1.0em ;
}
.card-body {
    padding : 5px ;
	color : var(--darkgrey) ;
	font-size : 1em ;
}
.card-footer {
    border-top : 1px solid var(--black) ;
    padding : 5px ;
	background-color : var(--site) ;
	color : var(--white) ;
	font-size :0.85.0em ;
}

.row {
	margin-bottom : 10px ;
}