#tswcssbuttons {
	width: 100% ;
	text-align: left ;
	line-height: 100%; /* distance between lines of text */
	
}
#tswcssbuttons ul {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
}
#tswcssbuttons li {
	margin: 0 ;
	padding: 7px ; /* around the button */
	display: block ;
	list-style: none ;
	font-family: Arial, Helvetica, sans-serif ;
}
#tswcssbuttons li a {
	color: #ffffff ; /* text colour */
	background-color: #006600 ; /* dark green buttons */
/*	border: 1px outset #9191ff ; */
	text-decoration: none ;
	display: block ;
	padding: 10px; /* this gives space around the text */
}
#tswcssbuttons li a:hover {
	color: black ; /* text colour */
	background-color: #009F00 ; /* button colour */
}


body {
	font-family: Arial, Helvetica, sans-serif ;
	font-size: 100%;
	letter-spacing: 0.5px;
}
img {
	max-width: 100% ;
	width: auto ;
	height: auto ;
}


a:link {
color: black;
/*text-decoration: underline; */
}

a:visited {
color: black;
/* text-decoration: underline; */
}

a:hover {
font-weight: bold;
color: red;
}

.camera-box {
text-align: center;
width: 100% ;
}


.camera-box img {
 border: none;
    display: block;
    margin: 0 auto;
}

.demo-box {
   float: left;
   margin: 10px;
   padding: 10px;

width: 190px;
   height: 400px;
   border: 1px solid black;
}

.product-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 28% ;
min-width: 220px;
   height: 400px;
   border: 1px solid gray;
}


.product-box img {
    border: none;
    display: block;
    margin: 0 auto;
}


.old-method-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 50% ;
min-width: 300px;
   height: 650px;
   border: 1px solid black;
}


.old-method-box img {
    border: none;
    display: block;
    margin: 0 auto;
}

.new-method-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 38% ;
min-width: 150px;
   height: 650px;
   border: 1px solid black;
}


.new-method-box img {
    border: none;
    display: block;
    margin: 0 auto;
}

.install-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 40% ;
min-width: 250px;
   height: 400px;
   border: 1px solid black;
}


.install-box img {
    border: none;
    display: block;
    margin: 0 auto;
}

.install-box-long {
   float: left;
   margin: 10px;
   padding: 10px;
width: 40% ;
min-width: 250px;
   height: 570px;
   border: 1px solid black;
}

.install-box-long img {
    border: none;
    display: block;
    margin: 0 auto;
}

.button-box {
width: 100%;
max-width: 500px;
float: center;
}

/*---------------------------below for youtube vids---------------------*/
.video-container {
position: relative;
 padding-bottom: 56.25%; 
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%;
}

div#vidbox {
width: 100%;
max-width: 400px; /* reduces amount of height video takes up */

}
/*-----------------------------above for youtube vids----------------------*/

div#side-menu {
	float: right ;
	width: 20% ;
	padding-top: 20px;
	color: #000 ;
	background-color: #E2FFE9; /* pale green tint */
}
div#main-holder {
	float: right ;
	width: 80% ;
	color: #000 ;
	background-color: #fff
}
div#flag-holder {
	float: right ;
	width: 100% ;
	color: #000 ;
	background-color: #fff
}

div#products {
	padding-left: 60px;
		
}

div#main {
	padding: 40px;
}

div#smallbox { /* to devide and/or group sections over full width */
	float: right ;
	width: 100% ;
	padding-left: 20%;
	color: #000 ;
	background-color: #fff ;
}

div#footer { /* gives wide bar at bottom */
	float: right ;
	width: 100% ;
	text-align: center;
	color: #fff ;
	background-color: #006600 ;
}

div#newbox {
	float: right ;
	width: 30%;
	max-width: 300px;
	height: 320px;
	color: #000 ;
	background-color: #fff ;
	padding: 5px;
	 border: 1px solid gray;
	margin: 5px;
}

/*--------------------------------------------*/
/* below for screen widths between 900 and 1150px */
@media only screen and (max-width: 1150px) {


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

/*
div#products {
	padding-left: 15px;
}
*/

div#side-menu {
	float: right ;
	width: 25% ;
	
	color: #000 ;
	background-color: #E2FFE9 ;
}
div#main-holder {
	float: right ;
	width: 75% ;
	color: #000 ;
	background-color: #fff ;
}

.product-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 42% ;
min-width: 220px;
   height: 400px;
   border: 1px solid black;
}

.old-mehod-box {
width: 100%;
}
.new-method-box {
width: 29%;
}

}

/*--------------------------------------------*/
/* below for screen widths between 600 and 875px */
@media only screen and (max-width: 875px) {


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


div#products {
	padding-left: 15px;
}

div#side-menu {
	float: right ;
	width: 25% ;
	
	color: #000 ;
	background-color: #E2FFE9 ;
}
div#main-holder {
	float: right ;
	width: 75% ;
	color: #000 ;
	background-color: #fff ;
}

.product-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 100% ;
min-width: 220px;
   height: 300px;
   border: 1px solid black;
}

.old-method-box {
width: 100% ;
}

.new-method-box {

width: 100% ;
}


.install-box {
width: 100%;
}
.install-box-long {
width: 100%;
}

}

/*---------------------------------------------*/

/* below for screen widths below 600px */
@media only screen and (max-width: 600px) {

body
{	font-size: 130%;} /* enlarge all text for phones */

div#side-menu {
	/* display: none ;
*/


	float: left; 
	width: 100%;}


.video-container {
position: relative;
padding-bottom: 56.25%;
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%;
}


div#products {
	padding-left: 10px;
		
}

div#main-holder {
	float: right ;
	width: 100% ;
	color: #000 ;
	background-color: #fff ;
}

div#newbox {
	float: right ;
	width: 100% ;
	color: #000 ;
	background-color: #fff ;
}
.product-box {
   float: left;
   margin: 10px;
   padding: 10px;
width: 100% ;
min-width: 220px;
   height: 100%;
   border: 1px solid black;
}

}