/* cairngormhills.co.uk 	*/
/* version 4.0 2026-01-01 			*/

/* 	Table of contents 			    */
/*	1. Default Default Styles	    */
/*	2. Define the id styles  	    */
/*	3. Define the class styles      */
/*  4. Bootstrap changes 		    */


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

/* 1. Redefine default htML5 Styles */
a {
    color : var(--site) ;
	font-weight : bold ;
}
a:hover {
    color : var(--site) ;
    text-decoration : none ;
}
button {
	color : var(--site) ;
	background : var(--white) ;
	border : 1px solid var(--black) ;
	margin-bottom : 5px ;
}
/*-------------------------------------------------*/

/*  2. Define id styles */
/* copyright statement */
#copyright { border : 0px  ; }
#copyright .card-body {
    background-color : var(--background) ;
	color : var(--site) ;
	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) ;
}

/* Header - image and titles */
#header { 
    color : var(--white) ; 
    margin-top : 10px ;
}

/* Stle for map box */
#map {padding : 0px ; }

/* Style of the carousel of images */
#MyCarousel { 
    padding : 0px ; 
    font-size : 1em ;
    color : var(--grey) ;
    text-align : center ;
}
#MyCarousel .smalltext {
    font-size : 0.85em ;
}

/* Style from nav */
#nav .card-body {
    padding : 0px ; 
    font-size : 0.9em ; 
}

/* Style for the note at the botton of the route page */
#note {
    font-size : 0.9rem ;
}

/* notes to show experience of route */
#notes {
	display : none ;
}

/* A notice placed at the top of the page */
#notice {
    border : 2px solid #a00000 ;
    padding : 5px ;
    background-color : var(--lightred);
} 
#notice .card-body { 
    color : #a00000; 
    background-color : var(--lightred);
    font-size : 0.9em ;
} 

 
/* overall site id*/
#pagelayout{
    background-color : var(--background) ;
}

/* Site Title */
#title .card-body { 
    color : var(--site) ; 
    text-align : center ;
}

/* Weather styles */
#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 : #a00000 ; }
.boldwhite {font-weight : bold ; color : var(--white) ; }
.center {text-align : center ; }
.site { color : var(--site) ; }
.smalltext { 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 */
.card {
    margin-bottom : 10px ;
	border : 1px solid var(--black) ;
    padding : 0px ;	
}
.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(--black) ;
	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 ;
}
/*------------------------------------------*/

/*
#msg .card-body { display : block ; }