/* Colour used are
	Page is designed with 6 panels top-outer, top-inner, middle-outer, middle-inner, bottom-outer and bottom-inner, using 2 colours that each have 2 complimentary variations.
	The 6 panels are defined by the classes .DivTopA .DivTopB .DivMidA .DivMidB .DivBotA .DivBotB here.
	A 7th panel is .DivBotC which adjust text correctly.


*/

body {
	background-color:#ffffff;
	font-family:Arial;
	font-weight: normal;
	color:#000000;
	margin:0em 0em 0em 0em;
}
@media screen and (orientation:portrait) {
 body {
 	font-size:2.5vw;
	}
}
@media screen and (orientation:landscape) {
	body {
		font-size:2.5vh;
	}
}

/* Set size and position of main logo */
#ImageLogo {
 height:2.5em;
 position:absolute;
 top:0.5em;
 left:0.5em;
}

/* Set size and position of MENU button */
#DivMenu {
	position:absolute;
	right:0.15em;
	top:0.15em;
	text-align:right;
	z-index:999;
}

.DeliveryImg {
	box-shadow:0.2em 0.2em 0.1em #363636;
}

/* Adjust different elements to suit portrait (mobile devices) or landscape (PCs laptops) if neccessary */
@media screen and (orientation:portrait) {
 body {
 	font-size:3vw;
 }
 .PlateImg { /*Preview of design */
 	max-width:95% ;
 	height:auto;
 }
 .DeliveryImg { /*Images for delivery options */
 	width:8em;
 	height:auto;
 }
}
@media screen and (orientation:landscape) {
	body {
		font-size:3vh;
	}
 .PlateImg { /*Preview of design */
 	max-width:80% ;
 	height:auto;
 }
 .DeliveryImg { /*Images for delivery options */
		width:auto;
 	height:4em;
 }
}

.DivSp1 {
	height:1em;
}
.DivSp2 {
	height:0.5em;
}
.DivSp3 {
	height:0.25em;
}
.DivBasSp { /* Separator for basket items */
	height:0.5em;
	border-top:#ffffff solid 0.1em;
}

a:link,a:visited,a:hover,a:active {
	text-decoration:none;
}

.ButtonLa {
	color:#000000;
	padding:0em;
	margin:0em 0em 0.25em 0em ;
	background-color:#f36d21;
/*	background: linear-gradient(0deg,#f36d21,#7f7f7f,#f36d21);*/
	border-radius:0.15em;
	border:#fffff solid 0.075em;
	display:inline-block;
/*	box-shadow: inset 0em 0em 0.3em 0.0833333333333333em #dddddd ;*/
/*	box-shadow:0.2em 0.2em 0.1em #363636;*/
}
.ButtonLa:link {
	color:#ffffff;
	background-color:#f36d21;
}
.ButtonLa:visited {
	background-color:#3f3f3f;
}
.ButtonLa:hover {
	background-color:#3f3f3f;
}

@media screen and (orientation:portrait) {
 .ButtonLa {
		font-size:1.25em;
 	padding:0.5em ;
 }
}
@media screen and (orientation:landscape) {
	.ButtonLa {
		font-size:1em;
 	padding:0.25em ;
 }
}

.ButtonLc:link { /* Selection of button fields */
	color:#000000;
}

.ButtonX { /* For X in closing boxes and PREVIEW */
	font-weight: bold;
	text-align:center;
	padding:0.2em 0.4em 0.2em 0.4em ;
	cursor:crosshair;
}
.ButtonXl { /* For X in closing boxes and PREVIEW */
	font-weight: bold;
	text-align:center;
	padding:0.2em 0.4em 0.2em 0.4em ;
	position:absolute;
	left:0em;
	top:0em;
}
.ButtonXr { /* For X in closing boxes and PREVIEW */
	font-weight: bold;
	text-align:center;
	padding:0.2em 0.4em 0.2em 0.4em ;
	position:absolute;
	right:0em;
	top:0em;
}

.ButtonLk {
/*	Exclusive use of the keyboard buttons */
	font-family:UKNumberPlate;
	color:#000000;
	padding:0.5em 0.2em 0.2em 0.2em;
	margin:0.1em 0.1em 0.1em 0.1em ;
	background-color:#ffffff;
	border-radius:0.25em;
	border:#363636 solid 0.05em;
	display:inline-block;
	min-width:0.95em;
	min-height:1.35em;
/*	box-shadow: inset 0em 0em 0.3em 0.0833333333333333em #dddddd ;*/
	box-shadow:0.2em 0.2em 0.1em #363636;
}
.ButtonLk:hover {
	color:#616161;
	background-color:#ffffff;
	border:#616161 solid 0.05em;
	box-shadow: inset 0em 0em 0.25em 0.0833333333333333em #616161 ;
}

.ButtonHi { /* Hiding buttons to right of buttons such as Bottomline */
	display:none;
}

.ShowDivs { /* Used to display and hide SHOW options */
	display:none;
}
.LegalDivs { /* Used to display and hide LEGAL options */
	display:inline-block;
}
.HomeBut { /* Used to display and hide HOME buttons */
	display:inline-block;
}
.DesignBut { /* Used to display and hide NUMBER PLATES buttons */
	display:none;
}

.image_sidebadge_left { /* Sidebadge thumb nails */
	width:auto;
	padding-bottom:0.2em;
	background-repeat:no-repeat,no-repeat;
	background-position:left top,left top;
	background-color:Blue;
	border-radius:0.25em;
}
@media screen and (orientation:portrait) {
 .image_sidebadge_left {
 	background-size:auto 8em,auto 8em;
 	height:8em;
 }
}
@media screen and (orientation:landscape) {
 .image_sidebadge_left {
 	background-size:auto 5em,auto 5em;
 	height:5em;
 }
}

.info_boxMessage {
font-family: arial;
font-size: 1em;
color: #ffffff;
font-weight: normal;
border: none;
padding:0.4em ;
text-shadow: 0.05em 0.05em #f36d21;
}

.info_boxBoxStyle {
position:relative;
color:#000000 ;
//text-shadow: 0.05em 0.05em #f36d21;
background-color:#ffffff;
background-image:URL('background.jpg') ;
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
background-attachment:fixed;
display:none;
z-index: 999;
border:#f36d21 solid 0.1em;
border-radius:0.45em;
text-align:center;
padding:0em 0em 0em 0em;
opacity:1;
}

.DivTopA {
	height:4em;
	text-align:center;
	padding:0.75em 0em 0em 0em;
	border-top:#f36d21 solid 0.1em;
	border-bottom:#f36d21 solid 0.1em;
	background-color:#ffffff;
/*	background:linear-gradient(0deg,#ffffff,#cccccc,#ffffff); */
}
.DivTopB {
	height:4em;
	width:96vw;
	display:inline-block;
	padding:0em 0em 0em 0em;
	border-radius:0.45em 0.45em 0em 0em;
	background-color:transparent;
/*	background:linear-gradient(0deg,#666666,#4d4d4d); */
	position:relative; /* Allows positioning of logo top left and MENU top right */
}
.DivMidA {
	text-align:center;
	padding:0em 0em 0em 0em;
	background-color:transparent;
	background-image:URL('background.jpg') ;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
	background-attachment:fixed;
}
.DivMidB {
	width:96vw;
	text-align:center;
	display:inline-block;
	padding:0em;
	background-color:transparent;
}
.DivBotA {
	height:4em;
	text-align:center;
	padding:0em 0em 0.75em 0em;
	border-top:#f36d21 solid 0.1em;
	border-bottom:#f36d21 solid 0.1em;
	background-color:transparent;
/*	background:linear-gradient(0deg,#343434,#3f3f3f); */
}
.DivBotB {
	width:96vw;
	height:4em;
	text-align:center;
	display:inline-block;
	padding:0em 0em 0em 0em;
	border-radius:0em 0em 0.45em 0.45em;
	background-color:transparent;
/*	background:linear-gradient(0deg,#4d4d4d,#666666); */
}
.DivBotC {
	line-height:1.25;
	height:4em;
	width:96vw;
	display:table-cell;
	vertical-align:middle;
}

.InputText {
text-align:center;
font-family:Monaco,MonoSpace;
font-size:1em;
padding:0.25em;
}
.Input {
	font-size:2em;
	line-height:1.25;
	display:inline-block;
	padding:0.1em 0.25em 0.1em 0.25em;
	background-color:#ffffff;
	border-radius:0.2em;
	border:#616161 solid 0.05em;
	text-align:center;
	/* box-shadow:0.2em 0.2em 0.1em #363636; */
}
.registration { /* Used in keyboard */
	font-family:UKNumberPlate;
	font-weight:normal;
	color:#000000;
}
.bottomline {
	font-family:Arial;
	font-weight:bold;
}
.bsau {
	font-family:Arial;
	font-weight:bold;
}
@media screen and (orientation:portrait) {
 .ButtonLk {
		font-size:1.8em;
 }
}
@media screen and (orientation:landscape) {
	.ButtonLk {
		font-size:1.25em;
 }
}