/* ---------  Custom Style Sheet  --------- */
/* Written by    :  Raymond Cowan
   Version #     :  2.5
   Date Modified :  20 December 2022
    
    Notes :
    
    Colour Scheme 
    Have used web safe colours from a word document, created by Christine Rigden,
    obtained from URL :  http://safecolours.rigdenage.com/textpalette.doc .  
    The colour schemes of my navigation menus, I used warm colours for the top menu, and cool 
    colours for the bottom menu.  
    Have also altered the line positioning, when the mouse hovers over the link.
    
*/

/* ---------  General  --------- */

body {
	background-color:#333333;
}

.body {
    display:block;
    margin:0 auto;
    width:80%;
	font-family:Arial,Helvettica,sans-serif;
}

hr {
	width:0px;
    clear:both;
}

 
/* ---------  Header & Footer Section  --------- */

header, footer {
	background-color:#000000;
	color:#ffffff;
	overflow:auto;  
}

header {
/*    height:300px;  */
    padding:0 15px 15px 15px;
}

footer {
    height:80px;
    padding:0 15px 15px 15px;
}

#complogo {
	width:15%;
	box-shadow:3px 3px 5px 1px #ff0000;
}

header h1, header h3, header h5 {
	width:65%;
	float:right;
    margin-left:10px;
}

header h1 {
	font-size:200%;
}

header h3 {
	font-size:130%;
}

small {
	margin:2%;
	color:#00ffff;
}


/* ---------  Navigation Menu Section  --------- */

#hmenu, #fmenu {
	margin-top:10px;
}

#hmenu ul, #fmenu ul {
	list-style-type:none;
}

#hmenu li, #fmenu li {
	float:left;
	margin-right:2%;
}

#hmenu a:link {
	color:#99ff33;
}

#hmenu a:hover {
	color:#ffffcc;
}

#hmenu a:visited {
	color:#999900;
}

#toplink {
	float:right;
	margin-top:2%;
}

#toplink:link {
	color:#00cccc;
}

#toplink:hover {
	color:#00ffcc;
}

#toplink:visited {
	color:#0000ff;
}

#fmenu a:link {
	color:#ffcccc;
}

#fmenu a:hover {
	color:#ffffff;
}

#fmenu a:visited {
	color:#ff0099;
}


/* ---------  Main Body Section  --------- */

section, #ContactUs {
    background-color:#ffffff;
    border-color:#000000;
    border-style:solid;
    border-width:0 10px 0 10px;
    padding:5px;
}

section p, h2, h3, h4 {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
}

section h1, h2, h3 {
	font-size:220%;
}

section li {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}


/* --------- Gallery Page -------- */

.CompImg, #MapImg {
	float:right;
	margin:10px 10px 10px 10px;
	box-shadow:3px 3px 5px 1px #000000;
	height:300px;
}

figure {
	padding:10px;
	border:2px solid #000000;
	height:350px;
	border-radius:20px;
}

figcaption {
	font-family:"Courier New";
	padding:10px;
}

figcaption label, #ContactUs Label, #Services label {
	font-weight:bolder;
}


/* --------- Home, Services & Custom PC Page -------- */

#Home h4, #CustomPC h4, #Services h4 {
	font-size:1.4em;
	text-decoration:underline;
}

#CustomPC label, #Services label {
	font-size:1.4em;
	font-weight:bold;
	text-transform:uppercase;
}

#Home p, #CustomPC p, #Services li {
	font-family:"Courier New";
    font-size:100%;
}

#Home li, #Services li {
    list-style-type:square;
}

aside {
    width:80%;
    margin:0 auto;
    padding:5px;
    background:#eeff99;
    border-color:#000000;
    border-style:solid;
    border-width:0 10px 0 10px;
}

aside p {
    width:75%;
    margin:0 auto;
    font-size:80%;
}

aside label {
    font-size:90%;
    font-weight:bolder;
}


/* --------- Contact Page -------- */

#MapImg {
	padding:15px;
	margin:20px 150px 20px 20px;
	border:1px solid #000000;
	border-radius:10px;
}

#MapImg:hover {
	box-shadow:5px 5px 10px 10px #ff0000;
	border:5px solid #000000;
}

#ContactUs label {
	font-size:130%;
	text-decoration:underline;
}

#ContactUs pre {
	font-size:120%;
}

table, th, td {
    margin:0 auto;
    border:2px solid #000000;
    border-spacing:0px;
}

th, td {
    width:200px;
    height:40px;
}


/* --------- Testimonials Page -------- */

article {
	width:80%;
	margin-right:auto;
	margin-left:auto;
	font-size:1.2em;
	background:#ffff99;
	padding:20px;
	border:2px solid #00ccff;
	border-radius:20px;
	font-family:"Courier New"
}

article h5 {
	font-family:"times new roman";
	font-size:0.9em;
	font-weight:bolder;
}

#Testimonies label, #CustInfo label {
	display:block;
	margin-top:30px;
	letter-spacing:2px;
	font-weight:bolder;
}

form {
	margin:0 auto;
	width:440px;
}

input, textarea {
	width:390px;
	height:27px;
	background:#ffffcc;
	border:1px solid #669999;
	padding:10px;
	margin-top:5px;
	font-size:0.9em;
	color:#000000;
	border-radius:5px;
}

input:focus, textarea:focus {
    border:2px solid #0066ff;
}

textarea {
	height:100px;
}

#Submit, #ClearForm {
	width:300px;
    height:38px;
    border:none;
    margin-top:20px;
    cursor:pointer;
	font-weight:bold;
	font-size:1.2em;
}

#Submit {
    background:#66cc33;
}

#ClearForm {
    background:#ff66ff;
}

#Submit:hover, #ClearForm:hover {
	opacity:0.7;
}

#Received h2 {
    color:#0000FF;
}

#Received h3 {
    color:#00CC00;
}

#CustReason input{
	width:27px;
	height:27px;
	background:#ffffff;
	border:1px solid #669999;
	padding:10px;
	margin-top:3px;
	font-size:0.9em;
	color:#000000;
	border-radius:5px;
}