@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Ubuntu:300,400,700');

body {
	background: #f9f9f9;
	color: #000;
	font-weight: 400;
	font-family: 'Lato', sans-serif;
	font-size:100%;
	Line-height:1.5;
	
}

p, dd, li, th, td {font-size:1em}
h1 {text-size:2em;line-height: 100%;font-family: 'Ubuntu', 'Lato', 'Helvetica', 'Arial', sans-serif;text-transform:uppercase;font-weight: 700;letter-spacing: 0.02em;}
h2 {text-size:1.8em;line-height: 100%;}
h3 {text-size:1.4em;line-height: 100%;}
a {
	text-decoration: none;
	color: #008490;
	outline: none;
}

.menu a {
    font-size: 15px;
    font-weight: 400;
}
.menu > ul ul > li > a {font-size: 14px}

a:hover, a:focus {
	color: #01636c;
	outline: none;
}
.content a {font-weight: 400; color:#008490;border-bottom:dashed 1px #008490;transition: color 0.5s ease, border-color 0.5s ease }
.content a:hover {color: #01636c;border-bottom:dashed 1px #01636c}
.content a[href^="img"] {border-bottom:none;}

a[rel~="external"] {padding-right:14px}
a[rel~="external"]::after {content:"";display:inline-block;vertical-align:super; width:10px;height:10px; margin-left:4px;background-image: url("../img/external-link.png");margin-right:-14px}

dt {
    font-weight: 700;
    
}
dd {
    margin: 0 0 1em 0;
}

img {width:100%;}

img.inline-icon {width:1.8em;height:auto;margin:0 0.2em;vertical-align:top;}
.step img.inline-icon {vertical-align: -0.4em;}

hr {display:block;border:0 none;width:50%;height:1px;background:#ccc;margin-left: 0;}

.align-right {text-align: right;}

.hscroll {overflow-x:auto}

h3.chapter-name {color: #a2a7a8;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;}
h3.chapter-name + h1 {margin-top:0.2em}

ul.list-style-none li {list-style: none;}

.content section {margin: 0 0 3em 0;}

.content ol, .content ul {padding-left:1em;}
.content ol li {margin-bottom: 0.5em;}
.content ol ol li {margin-bottom: 0;}

.content table {margin:1em 0}
.content table th, .content table td {border:1px solid #bbb;padding:0.3em;}
.content thead th {font-weight:300;font-size:1.3em;background:#a2a7a8;color:#fff;line-height:120%;}
.content tbody {}
.content tbody th[scope=row] {text-align:left;font-weight: 400;color:#4b4b4b;line-height: 120%;min-width:calc(0.3em + 30px);}
.content .dark th[scope=row] {background:#4b4b4b}

.content .folder {table-layout: fixed;width: 100%}
.content .folder tr {display:inline;font-size:0;}
.content .folder th {font-size:15px;}

.content .compare {width:100%}
.content .compare td {text-align:center;}
.content .compare th[scope=row] {background:#a2a7a8;color:#fff;text-align:right;}
.content .compare th:empty {background:transparent;border:none;}
.content .compare .best {background:#e5ffe5;}
.content .compare .yes, .content .compare .no {text-indent:-9999px;display:inline-block;width:18px;height:18px;background:transparent url("../img/icon-tick.svg") no-repeat center center;margin:0 auto;vertical-align: -3px;}
.content .compare .no {background-image:url("../img/icon-cross.svg")}

.content .specification {text-align:left;}
.content .specification th[scope=row] {font-weight:bold;text-align:right;}

table.specification.led th {min-width:160px;}
table.specification.led td {text-align:center}
table.specification.led img {width:32px;height:auto;}
table.specification.led small {display:block;margin:-4px 0 0;text-align:center;font-size:10px;text-transform: uppercase;}

table.settings {border-collapse: separate;border-spacing: 1em 2em;margin: -1em;}
table.settings th {width:330px;vertical-align:top;padding:0;border:0 none;}
table.settings th img {width:100%;height:auto;}
table.settings td {
	padding: 0.5em 1em;
	vertical-align: top;
	background: #f9f9fb;
	border: 1px solid #ddd;
	line-height: 1.7em;
}

table.settings h3:first-child {margin-top:0.5em}
@media screen and (max-width: 640px) {
    table.settings th {
        display: block;width:100%
    }
    table.settings td {
        display: inline-block;
        width: 100%;
    }
}

ul.icon-list {list-style: none;padding:0;}
ul.icon-list li {margin:0.25em 0}
	.icon-list img {width:20px;vertical-align: text-bottom}
.icon-list.control img {width:30px;vertical-align: -0.3em;margin:-4px}

dl.boxed dt {border: 1px solid #ddd;background: #eee;display: inline-block;padding: 2px 8px;box-shadow: inset 0 0 5px rgba(0,0,0,0.1);margin: 0 auto;}

figcaption {font-weight:400;color:#666}
figcaption + img {margin-top:0.5em}
a + figcaption,
img + figcaption {margin-bottom:1em}

span.note {font-weight:700;margin-right:0.3em}
span.note::before {content:'';display: inline-block;width:1.2em;height:1.2em;background: url("../img/note.svg") no-repeat;margin-right:0.2em;margin-bottom: -0.2em;}
span.path {font-style:italic;font-weight: 400;}

.steps {counter-reset: steps;position:relative;padding:0;}
.steps .step {list-style:none;clear:both;}
.steps .step::before {
	content:counter(steps, decimal-leading-zero);
	counter-increment: steps;
    margin:0 8px 8px;
    padding:4px 8px ;
    color:#fff;
	font-size:1.6em;
    background:#ddd;
    text-align:center;
	display:inline-block;
	vertical-align: middle;
}
.steps.multi-line .step::before {
    margin:0 8px 8px;
    padding:4px 8px ;
	display:inline-block;
	float:left;
}


.footnote {display:block;text-align: right; color:#717172}

/* home styles */


.home-background {background:url("../img/background-family-2024.png") no-repeat center top ;background-size: 100% auto;padding: 0 2em 1em;}
.home h1, .home h2 {text-align:center;}
.home-logo {width:300px;margin:50px auto 0;}
.home h1 {
	font-family: 'Lato', sans-serif;
    margin: 1em 0 0;
    text-transform: uppercase;
}
.home p {max-width:480px;margin-left:auto;margin-right:auto;}

.smallprint {margin-top:5em;opacity:0.6}
.smallprint .license-logo {width:65%;display:inline-block;vertical-align:top;text-align: center;line-height: 110%}
/*.smallprint .license-logo:first-child {margin-right:8%}*/
.smallprint .license-logo img {width:60px;display:inline-block;vertical-align: middle;margin-right:10px;}

.web-link {border:4px solid #008490!important; display:block;width:50%;margin: 0 auto;}
.web-link:hover {border-color:#10b9c8!important}


/* Safety styles */
.warning {border:2px solid #4b4b4b;padding:12px;background:#f9f9f9}
.warning h2 {display: block;text-transform: uppercase;text-align:center;background:#4b4b4b;color:#fff;margin:-12px -12px 0 -12px;letter-spacing: 0.05em;padding:4px}
.warning img.warning-icon {float:left;width:52px;height: 44px;margin:0 0.5em 0.5em 0;}

/* package contents styles */
.package-contents li {margin-bottom:1em;}

.package-contents img {vertical-align: top}
.package-contents img.batteries {max-width:70px}
.package-contents img.remote {max-width:100px}
.package-contents img.quickstart {max-width:140px}


/* apps styles */
.app {width:100%;margin-top:1em;border-bottom:1px solid #ccc;}

.app-icon img {display:block;width:170px;height:auto;margin-bottom:1em;}

/* troubleshooting styles */
table.troubleshooting {width:100%}
table.troubleshooting {font-size:14px;line-height:1.4;}
table.troubleshooting th {vertical-align: bottom;}
table.troubleshooting td {vertical-align: top;}
table.troubleshooting th[scope=row] {vertical-align: top;background:#eee}

/* styles for phablet screens */
@media screen and (min-width: 480px) {
	.footnote {padding-left:25%}
	.app {width:48%;float:left;margin-top:1em;margin-right:0;border-bottom:0 none;}
	.app:nth-child(odd) {clear:left;margin-right:4%}
	table.troubleshooting {font-size:16px}
}

/* styles for small screens - nav invisible */
@media screen and (min-width: 768px) {
	
	.package-contents figure {width:50%}
	img.half {width:50%}
	.content .genre th {width:46px;}
	.content .genre td {width:116px;font-size: 15px}
	
	
}

/* styles for medium screens - left nav visible */

@media screen and (min-width: 1024px) {

    .menu a {font-size: 17px;}
	.menu > ul ul > li > a {font-size: 15px}
	.hide-on-large {display:none;}
}

/* styles for large screens - both left and right nav visible */

@media screen and (min-width: 1324px) {



}

/*YouTube*/

.video-container { position: relative; padding-bottom: 53%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }