/* mobilephonetechnology.co.uk 	*/
/* version 4.0 2021-05-31 			*/

/* 	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 {
	--background : #909090 ;
    --site : #a00000;

    --darkgrey : #404040 ;
    --lightgrey : #d0d0d0 ;
	--black : #000000 ;
    --blue : #0000ff ;
    --green : #00ff00 ;
    --red : #ff0000 ;
	--white : #ffffff ;
}

/* 1. Redefine default htML5 Styles */
body {
    background-color : var(--background) ;
}

td, th {
	vertical-align: top;
}


/*	2. Define the id styles */
#about-card .card-header{
	color : var(--site) ;
	font-size : 1.2em ;
	color : #ffffff ;
	text-align : center ;
}
#about-card h1 {
	color : var(--site) ;
	font-size : 1.2em ;
	text-align : center ;
} 
#about-card h2 {
	color : var(--site) ;
	font-size : 1rem ;
    text-align : center ;
}
#about-card p {
	color : var(--darkgrey);
	font-size : 0.8rem ;
    text-align : center ;
}
#copyright {
	font-size : .8rem ;
	color : var(--site)  ;
}
#data-card p {
    color : var(--darkgrey);
}
#data-card table {
    border-collapse: collapse;
}
#data-card table, th, td {
    border: 1px solid var(--black) ;
}
#data-card th, td {
	padding : 2px ;
	font-size : 0.85em ;
} 
#footer-card a {
    color : var(--white) ;
}
#footer-card .card-header {
	background-color : var(--white) ;
	color : var(--site) ;
}
#footer-card .card-body {
	display : none ;
    background-color : var(--darkgrey) ;
	color : var(--white) ;
    font-size : 0.8rem ;
}
.menu-card .card {
	background-color : #d0d0d0 ;
    margin-bottom : 10px ;
}
.menu-card .card-header { 
	text-align : center ; 
	background-color : #808080 ; 
	color : #f0f0f0 ; 
}
.menu-card .card-body {
	padding : 5px ;
	font-size : 0.85em ;
} 
#nav-card .card-body {
    padding : 5px ;
}
#header-card .card-body {
	background-color : var(--site) ;
	color : var(--white) ;
	text-align : center ;
	padding : 25px ;
	height : 160px ;
} 
#header-card h1 {
    color : var(--white) ;
    font-size : 3.5rem ;
}


/* 3. class styles */
.bold {
    font-weight : bold ;
}
.icon {
	width : 50px ;
	height :auto ;
   	margin-right : 5px ;
   	margin-bottom : 5px ;
}
.phoneimg {
	width : 80px ;
	height :auto ;
	float: left ;
   	margin-right : 5px ;
   	margin-bottom : 5px ;
} 


/*  4. Bootstrap Changes */
.menu-card .btn-primary { 
	background-color : var(--site) ;
	border-color : var(--black) ;
    color : var(--lightgrey) ;
	padding : 5px ;
	font-size : 1em ; }
.menu-card .btn-primary:hover { 
	background-color : var(--lightgrey) ;
	color : var(--site) ;
}
.card {
    margin-bottom : 5px ;
	border : 1px solid var(--black) ;
    padding : 0px ;	
}
.card-header {
    border-bottom : 1px solid var(--black) ;
    padding : 10px ;
	background-color : var(--site) ;
	text-align : center ; 
	color : var(--white) ;
	font-size : 1.0rem ;
}
.card-body {
    padding : 10px ;
	color : var(--darkgrey) ;
	font-size : 1.0rem ;
}
.card-footer {
    border-top : 1px solid var(--black) ;
    padding : 5px ;
	background-color : var(--site) ;
	color : var(--white) ;
	font-size :0.85rem ;
}
.row {
    margin-top : 10px ;
    margin-bottom : 10px ;
}