@charset "utf-8";
/* CSS page Using CSS3 for HTML5 */

/* Make boxes appear consistently sized */
* {
    box-sizing: border-box;
}

/* Reset */
.row:after {
    content: "";
    clear: both;
	display: table;
    padding: 0px;
}

/* Columns for responsive layout */
[class*="col-"] {
    float: left;
    padding: 15px 15px 15px 15px;
    margin: 0px;
}

/* Image resize for responsive layout */
img {
    max-width: 100%;
    height: auto;
}

/* Basic settings */
html {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

/* Background */
body {
	margin: 0px;
    background: #444444;
    color: #333333;  
}

/* Divs */

/* container surrounds the other divs */
.container {
	max-width: 1000px;    
    margin: 0 auto;
}
    
.header {
    background-color: #FFFFFF;
    color: #000000;
    padding: 0px;    
}

.mainbody {
    background-color: #FFFFFF;
}


/* These must be before menu, otherwise menu will be restyled by these */

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #444444;
	text-decoration: underline;
}

a:visited {
	color: #444444;
	text-decoration: underline;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #AA0000;
    text-decoration: underline;
}

h1 {
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-size: 2em;
	color: #AA0000;
	font-weight: normal;
}

h2 {
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-size: 1.4em;
	color: #333333;
	font-weight:bold;
}

h3 {
	/*font-family: Verdana, Geneva, sans-serif;*/
	font-size: 1.2em;
	color: #AA0000;
	font-weight:normal;
}


h1 a:link {
	color: #AA0000;
	text-decoration: none;
}

h1 a:visited {
	color: #AA0000;
	text-decoration: none;
	/*	text-decoration: underline; */
}

h1 a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #AA0000;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0px;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    margin-botton: 0px;
	padding-right: 10px;
	padding-left: 10px; 
	/* these two padding are the space between the text or whatever and the edge of the div */
	/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}


.xsmall {
	font-size:x-small;
	font-weight: normal;
}

.green { /* green text */
	color: #2A9F00;
}
.red { /* green text */
	color: #FF0000;
}

.logo {
	display: inline-block;
}

.lower1 {
	vertical-align:-5px;
}

/* Tick List bullets */
.ticklist {
    list-style:none;
    margin:0; padding:0;
}
.ticklist li {
  margin:0; padding:0;
  background:url('images/checkbox-ticked-small.png') no-repeat 0 0;
  padding-left: 2em; 
  line-height: 1.4em;
  min-height: 2em; /* Does nothing? */
}


[class*="imagebg-"] {
	padding: 15px;
    margin: 0px;    
}

.imagebg-print {
	background-image: url("images/3x3DPrinters1000.JPG");
    height: 400px;
}

.imagebg-antivirus {
	background-image: url("images/virus-1000.png");
    height: 500px;
}

.imagebg-store {
	/* background-image: url("images/latches-1000-red.jpg"); */
    background-image: url("images/latches-1000.jpg");
    height: 500px;
}

.imagebg-home {
	background-image: url("images/latches-1000.jpg");
    height: 500px;
}

.imagebg-cloud {
	background-image: url("images/cloud2.jpg");
    height: 500px;
}

.imagebg-parts {
	background-image: url("images/compartment2.jpg");
    height: 500px;
}


[class*="imagebg-"] h1, [class*="imagebg-"] h2, [class*="imagebg-"] h3, [class*="imagebg-"] p {
	/* font-size: 4em; */
    color: #FFFFFF;
    text-shadow: 2px 2px 8px #000000;
}



/* Menu */ 

/* Add a black background color to the top navigation */
.topnav {
    background-color: #444444;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 0.8em;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #AA0000;
    color: #FFFFFF;
}

.topnav a.active {
  background-color: #000000;
  color: #FF0000;
  font-size: 0.8em;  
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



.nav ul {
  list-style: none;
  background-color: #444444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #000000;
}

.nav a {
  text-decoration: none;
  font-size: 0.8em;
  color: #DDDDDD;
  display: block;  
}
 
.nav a:hover {
  background-color: #AA0000;
  font-size: 0.8em;
  color: #FFFFFF;
}
 
.nav a.active {
  background-color: #000000;
  color: #FF0000;
  font-size: 0.8em;
  cursor: default;
}
 
/* @media at end of file */

/* active menu item */
body#home a#homenav,
body#apple a#applenav,
body#cloud a#cloudnav,
body#antivirus a#antivirus,
body#print a#printnav,
body#web a#webnav,
body#contact a#contactnav,
body#store a#storenav,
body#parts a#partsnav
{
	color: #FFFFFF;
	background-color: #AA0000;
    display: block;
}


/* Footer */
.footer {
	background-color: #444444;
}

.footer p {	
    color: #DDDDDD;
    font-size: 0.7em;
    margin: 0px;
    padding: 15px;
}

.footer a:link, .footer a:visited {
	color: #DDDDDD;
	text-decoration: underline;
}

.footer a:hover, .footer a:active, .footer a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #FFFFFF;
}


/* Shopping Buttons */

.buttonbox {
	display: inline-block;
}

.buttons {
	float: left;
    padding: 20px;
    margin: 10px;
    width: 100%;
    border: 1px solid #DDDDDD;
    text-align: center;
    font-size: 1em;
    display: inline-block;    
}

/* Link Buttons */

.button1 {
	text-align:center;
    color:#DDDDDD;
  	background-color: #444444;		
	border:1px solid #222222;
	padding: 10px 15px 10px 15px;
    margin: 0px 0px 0px 0px;	
	display:inline-block;	
	text-indent:0;	
}
.button1:link, .button1:visited {	
	text-decoration: none;
    color:#DDDDDD;
}
.button1 img, .button1right img{	
	/*make images look cool*/
	opacity:0.8;
	filter:alpha(opacity=40); /* For IE8 and earlier */
}
.button1:hover, .button1:active, .button1:focus{	
  	background-color: #AA0000;
	border:1px solid #AA0000;	
	color:#FFFFFF;
	text-decoration: none;
	text-emphasis: none;
}
.button1:hover img, .button1:active img, .button1:focus img{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	text-decoration: none;
}


.floatright {
	float: right;
}


/* Responsive Layout */

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

/* For desktop: */
@media only screen and (min-width: 768px) {    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    .nav li {
    width: 13%;
    border-bottom: none;
    height: 35px;
    line-height: 35px;    
    display: inline-block;
    margin-right: 0px;
    }
    
    .buttonbox {
        display: table;
    }
    
    .buttons {
        float: none;
        padding 20px;
        margin 10px;
        width: 25%;
        border: 1px solid #DDDDDD;
        text-align: center;
        font-size: 1em;
        display: table-cell;
        vertical-align: top;
    }
}