@charset "utf-8";
/* CSS Document */

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #555;
	margin: 0;
	padding: 0;
}

#page { max-width: 1100px; margin: 0 auto; position: relative; }

/* Text */

h1 { margin: 0 0 1em 0; font-size: 1.3em; font-weight: 700; margin: 10px 0 15px 5px; line-height: 1.5em;  }
h2 { margin: 2em 0 1em 0; font-size: 1.1em; font-weight: 700; line-height: 1.5em; }
h3 { margin: 0 0 0.5em 0; font-size: 1em; font-weight: 700; margin: 10px 0; }
h4 { margin: 0 0 0.5em 0; font-size: 1em; font-weight: 700; }

p {
	margin: 0 0 1em 0;
	line-height: 1.7em;
}
a { color: #390; }
a:hover { text-decoration: none; }
a:visited { color:#390; }
td {
	padding-left: 5px;
	text-align: left;
}
table {border: 1px solid #666;}
address { font-size: 0.7em; font-style:italic; }

/* Header */

header { height: 235px; width: auto; background: url(https://www.dragoncaralarms.co.uk/images/dragonBanner-1200.jpg) no-repeat center bottom; position: relative; }

header .registered img { height: 115px; width: 148px; float: right; margin-top: 40px; padding-right: 2px; }

header a { position: absolute; display: block ; width: 142px ; height: 25px ; top: 170px ; right: 2px; }

a.btn { font-size: 1.2em; padding-left: 5px; text-decoration: none; color: #360; background-color: #9CC65E; transition: background-color .5s; }
a.btn:hover { background-color:rgba(0,0,0,.3); }
a.navjump {margin-top: 40px; height: 30px; color: grey; font-size: 8px; font-style:italic; text-decoration: none;
	}

/* Section All */

section { padding: 0 30px; }

section::after { content:''; display: block; clear: both; }

/* Contact Us form */
.style5 {font-weight:bold; color: #006600; font-size: 1.3em;}
.red { color: #F00; }
.bold { font-weight:bold; }
#bold { font-weight:bold; }
.italic { font-style:italic; }
.warning { color: #F00; }
.name { }
.contact {margin-left: 320px;}
#alighleft { text-align:left; }
			
/* Breadcrumb */
.home { font-size: 0.8em; display: block; padding: 35px 0 5px 5px;}
.home p { display: inline-block; position: absolute; margin: 3px 0 0 5px;}
#positionarrow { color: #fff; position: relative; }
.home ol { margin: 0; padding: 0; font-size: .8em; }
.home li { display: inline-block; position: relative; margin: 3px 0 0 5px;}

/* Photo */
section.photo { padding-top: 20px; }
iframe { height:472.5px; width:840px; }

/* Section Main */
section.main { margin-top:20px; margin-bottom: 10px; padding: 0; }
section.main aside { width: 33%; float: left; text-align: center; }

section.main .content { margin: 20px 15px 30px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px; height: 180px; }
section::after { content:''; display: block; clear: both; }

section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }

section.main aside .content.ghost { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_ghost_immobiliser.jpg) }
section.main aside .content.smart { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_smart_pro.jpg) }
section.main aside .content.metatrak { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-meta-trak.jpg) } 
section.main aside .content.mini { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_mini.jpg) }
section.main aside .content.cliff { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_650.jpg) }
section.main aside .content.contact { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_env.svg) }

section.main aside .content.ins { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_ins.jpg) }
section.main aside .content.up { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_up.jpg) }
section.main aside .content.pandora { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_pandora.svg) }
section.main aside .content.non { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_non.svg) }
section.main aside .content.engine { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_engine.svg) }
section.main aside .content.remote { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_remote.svg) }
section.main aside .content.removal { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_removal.jpg) }

section.main aside .content.elite { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_elite.jpg) }
section.main aside .content.maxx1 { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_maxx1_remote.jpg) }
section.main aside .content.light { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_light_pro.jpg) }
section.main aside .content.toad { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_toad_ai606.jpg) }
section.main aside .content.campmini { background-image: url(https://www.dragoncaralarms.co.uk/images/motorhome/icon_camp_mini.jpg) }
section.main aside .content.camppro { background-image: url(https://www.dragoncaralarms.co.uk/images/motorhome/icon_camp_pro.jpg) }
section.main aside .content.autowatch { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_remote_457rli.jpg) }

section.main aside .content.auto695 { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_695.jpg) }
section.main aside .content.cliffupgrade { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_clifford_upgrade.jpg) }
section.main aside .content.auto375 { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_375.jpg) }

section.main aside .content.eye { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_eye.jpg) }

section.main aside .content.viper3104v { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_3104v.jpg) }
section.main aside .content.sa30 { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_sa30.jpg) }
section.main aside .content.arrow { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_arrow.jpg) }

section.main aside .content.vcobra { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_vodafone_cobra_immobiliser.jpg) }
section.main aside .content.storm { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_storm.jpg) }
section.main aside .content.viper106v { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_viper_106v.jpg) }
section.main aside .content.shadow { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_shadow_immobiliser.jpg) }
section.main aside .content.xseries { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_scorpion_x_series.jpg) }
section.main aside .content.excel { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_sterling_excel.jpg) }
section.main aside .content.blackjax { background-image: url(https://www.dragoncaralarms.co.uk/images/immobilisers/icon_blackjax.jpg) }

section.main aside .content.s5vts { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_s5_vts.svg) }
section.main aside .content.s5imm { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_s5_imm.svg) }
section.main aside .content.fleettrack { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_fleet.svg) }
section.main aside .content.selftrack { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_selftrack.svg) }
section.main aside .content.s7als { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_s7_als.svg) }

section.main aside .content.ecotrak { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-ecotrak.jpg) }
section.main aside .content.scorpion { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-scorpiontrack.jpg) }
section.main aside .content.trackstar { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-trackstar.jpg) } 
section.main aside .content.smartrack5 { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-s5.jpg) }
section.main aside .content.metatrak { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-meta-trak.jpg) } 

section.main aside .content.smartrack5 { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-s5.jpg) }
section.main aside .content.connect5 { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-clifford-connect-5-small.png) }
section.main aside .content.s5plus { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-s5-plus.jpg) }

section.main aside .content.protectorpro { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-s7.jpg) }
section.main aside .content.trident { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-trident.jpg) }
section.main aside .content.connect6 { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-clifford-connect-6-small.png) }
section.main aside .content.caravan { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-caravan.jpg) }

section.main aside .content.metashield { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-meta-fleet.jpg) }
section.main aside .content.utrack { background-image: url(https://www.dragoncaralarms.co.uk/images/trackers/logo-smartrack-utrack.jpg) }

section.main aside .content.motorhomealarms { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_motorhome_alarms.svg) }
section.main aside .content.package { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_motorhome_both.svg) }
section.main aside .content.s7upgrade { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_s7_695_up.jpg) }
section.main aside .content.s7nonupgrade { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_s7_457_ins.jpg) }

section.main aside .content.smartstart { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_smartstart.jpg) }
section.main aside .content.viper861v { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_861v.jpg) }
section.main aside .content.viper862v { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_862v.jpg) }
section.main aside .content.viper863v { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_863v.jpg) }

section.main aside .content.alarms { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_alarms.svg) }
section.main aside .content.trackers { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_trackers.svg) }
section.main aside .content.engine { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_engine.svg) }
section.main aside .content.motorhome { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_motorhome.svg) }
section.main aside .content.immobilisers { background-image: url(https://www.dragoncaralarms.co.uk/images/icon_immobilisers.svg) }
section.main aside .content.pandoralock { background-image: url(https://www.dragoncaralarms.co.uk/images/alarms/icon_pandora_lock_blk.svg) }

/* Text area */
section.photo { text-align: center; }
section.words { margin-top: 60px; padding: 0 20px 10px; }
section.words p img { float: right; margin: 10px 5px 10px 15px; }
section.smartstart img { float: left; margin: 5px; }
#parts { color:#666; font-size: 0.9em; font-style: italic; }
#price { color:#666; font-size: 0.9em; font-style: italic; }
#greenwords { color: #C30; }
.words.box { border: 1px #CCC solid; margin: 10px 5px; padding-top: 20px;}
section.sitemap { margin-top: 40px; }
section.sitemap li { margin-top: 20px; }
section.sitemap a { color: #555; }

/* Naviagion */
nav {
	background-color: rgba(0,0,0,.70);
	position: absolute;
	top: 237px;
	padding: 0px;
	width: 100%;
}

nav::after { content:''; display: block; clear: both; }

nav ul { list-style: none; margin: 0; padding: 0 ; }

nav ul li:hover { background-color: rgba(0,50,0,.6); } /*   */
nav ul li:hover > ul { display: block; }

nav ul li a { 
	display: inline-block;
	color: #fff;
	padding: 15px 2px 15px 4px;
	text-decoration: none;
	width: 175px;
	position: relative;
}

nav ul li a:visited { color: #fff; }

nav ul li a:hover { color: #9F3; } 

nav ul ul { position: absolute; top: 100%; background-color: rgba(0,50,0,.8); display: none; }

nav ul ul li { position: relative; }

nav ul ul ul { left: 100%; top: 0px; }

/* Top Level */

nav > ul { padding-left: 25%; }

nav > ul > li { float: left; }

nav > ul > li > a { width: auto; padding: 10px 20px 15px 10px; }


/*contact form protection */

.warning {font-weight: bold;color: #F00;}
.pfield {display: none;}

/* Footer */

footer { font-size: .8em; padding: 30px 20px 50px; color: #fff; background-color: #333; }

footer .content { display: inline; }


/* Media Queries */
@media screen and (max-width: 1000px) {
	
	section.main .content { margin-bottom: 50px; height: 220px; }
	nav > ul { padding-left: 17%; }	
			
}

@media screen and (max-width: 900px) {

	section.main .content { margin-bottom: 60px; height: 270px;}
	iframe { height:409.5px; width:728px; }	
	nav > ul { padding-left: 14%; }	
	
}

@media screen and (max-width: 800px) {
	
	section.main .content { margin-bottom: 50px; height: 330px;  }	
	nav > ul { padding-left: 9%; }
	nav > ul > li > a { padding: 10px 10px 15px 9px; }
	iframe { height:346.5px; width:616px; }
}

@media screen and (max-width: 760px) {

	header { background: url(https://www.dragoncaralarms.co.uk/images/dragonBanner-1200.jpg) no-repeat left bottom; margin-left: 5px; } 
	nav > ul { padding-left: 0; }
	
	/* Section - Main */
	section.main { margin-top: 10px; margin-bottom: 30px; }
	.home { margin-top: 35px;}
	.breadcrumb { margin-top: 45px;}
	iframe { height:315px; width:560px; }
	section.main .content { margin-bottom: 80px; height: 330px;  }	
	section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }
	table { font-size: 0.8em; }	
	td { padding-left: 3px; }
	.contact {margin-left: 10px; }	
	
}

@media screen and (max-width: 625px) {
	
	/* Header Contact Us Button */
	header { height: 110px; background: url(https://www.dragoncaralarms.co.uk/images/dragonBanner-625.gif) no-repeat left top; margin-top: 5px; }
	header .registered img { display: none; }
	header a { 
		width: 100%; height: 27px;
		left: 0px; top: 115px;
		padding-top: 1px;
	}
	a.btn { background-color: #999; padding: 5px ; color: #000; }
	a.btn:hover { background-color:rgba(0,0,0,.6); color: #fff; transition: background-color .5s;  }	
	iframe { height:236.25px; width:420px; }	
	a.navjump { margin-top: 50px; color: black; font-weight: bold; font-size: 14px; margin-left: 5px;}


	/* Main */
	.home { margin-top: 50px; margin-left: 5px;}
	.breadcrumb { margin-top: 55px;  margin-left: 5px; height: 50px;}	
	section.main .content { margin-bottom: 20px; height: 200px; }
	section.sitemap { font-size: 0.9em; }		
		
	/* Navigation */
	nav { position: static; width: auto; padding: 20px 5px; background-color: #666; }
	
	nav ul, 
	nav ul ul,
	nav ul ul ul { display: block; position: static; }
	
	nav > ul { padding: 0; }
	nav > ul > li { float: none;  margin-top: 25px; }
	
	nav ul li:hover { background: none; }
	
	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 8px 10px;
		border: 1px solid rgba(255,255,255,.25);
	}
	
	nav ul li a:hover { background-color: rgba(255,255,255,.2); }
	
	nav ul ul  { background: none; }
	
	nav ul ul li a { margin-left: 30px; }
	nav ul ul ul li a { margin-left: 50px; }
	
	/* Section Main */	
	section.main aside { width: 100%; float: none; text-align: left; }
	
	section.main aside div.content { 
		margin: 8px 20px 8px 0;
		padding: 5px 8px 10px 85px;
		background-size: 50px 50px;
		background-position: 20px 5px;
	}
	section.main aside div.alarms { margin-top: 20px; }	
}

@media screen and (max-width: 475px) {
		
	section.main .content { height: 230px; }
	.home { padding: 70px 0 5px 5px;}
	.breadcrumb { margin-top: 55px; }
	iframe { height:204.75px; width:364px; }		
	table { font-size: 0.7em; }
	td { padding-left: 2px; }			
}

@media screen and (max-width: 425px) {
	/* Header */
	header { height: 70px; background-image: url(https://www.dragoncaralarms.co.uk/images/dragonBanner-425.gif); }
	header a { top: 70px; }
	
	h1 { font-size: 1.1em; }
	h2 { font-size: 1.0em; }
	h3 { font-size: 0.9em; }
	h4 { font-size: 0.9em; }	
	
	.home { margin-top: 5px; }
	.breadcrumb { margin-top: 45px; }
	section.main .content { height: 240px; }
	section.sitemap { font-size: 0.8em; }
	iframe { height:191.25px; width:340px; }					
}

@media screen and (max-width: 400px) {
	p { font-size: 0.9em; }
	section.words li {font-size: 0.9em; }
	iframe { height:180px; width:320px; }	
}

@media screen and (max-width: 370px) {
	section.main aside { margin-bottom: 5px; }
	iframe { height:168.75px; width:300px; }		
}

@media screen and (max-width: 350px) {
	section.main aside { margin-bottom: 15px; }	
}

@media screen and (max-width: 325px) {
	section.main aside { margin-bottom: 40px; }
	section.main .content { height: 250px; 	
}