html,
body {
	margin:0;
	padding:0;
	height:100%;
	min-height: 100%;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;	
	color: #000;
}

p {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;	
}

a {text-decoration: none; color: #058205; font-weight: 500;}
a:hover {text-decoration: underline;}

#wrapper {width: 100%;min-height:100%;position:relative;}

#header {
	height: 144px;
	width: 100%;
	border: 0px solid #545454;
	z-index: 9999999;
	background: transparent url(https://www.protocase.com/img/header-tile4.png) top left repeat-x;
}

#header #colour-band {
	height: 5px;
	width: 100%;
	background: #007dc3;
}

#header #corp {}
#header #corp #brand {position: relative; float: left;}
#header #corp #right {position: relative; display: inline-block;  margin-top: 0px; float: right; text-align: right; }
#header #corp #right #search {position: absolute; top: 0px; right: 0px; border: 0px solid green; height: 34px; width: 330px; background: #fff url(https://www.protocase.com/img/search-back.png)top right no-repeat; }

#header #corp #right .search_box { position: relative; float: right; margin-right: 20px; display: inline; vertical-align: top; padding-top: 0px; font-size: 13px; color: #545454;}
#search-box {margin: 3px 0; padding-right: 10px; border: 0px solid red;}
#header #corp #right #contact {position: absolute; top: 20; right: 0; width: 700px; height: 30px;}
#header #corp #right #contact ul {list-style-type: none; display: inline-block; margin: 0px 20px 0px 0px; padding: 0;}
#header #corp #right #contact ul li {display: inline-block; color: #4b4b4b; font-size: 14px; vertical-align: middle; }
#header #corp #right #contact ul li.break {display:block; font-size: 14px; vertical-align: middle;}
#header #corp #right #contact ul li.divider {display: block; width: 1px; color: #490407; text-align: center; top: 0; margin: 0px 5px; font-size: 10px;}		

#header #main-menu {width: 100%; height: 39px; background: url(https://www.protocase.com/img/tile-main-menu.jpg) top left repeat-x;}
#header #main-menu span {display: block; margin-top: 10px;}
#header #main-menu ul {position: relative; list-style-type: none; margin: 10px 0; padding: 0;}
#header #main-menu ul li {
	display: inline-block;
	margin-top: 13px; 
	margin-left: 20px;
	}
	
#header #main-menu ul li a {
	border: 1px solid transparent; 
	background: transparent;
	color: #1085c6; 
	font-size: 15px; 
	padding: 14px 4px 5px 4px; 	
	font-weight: 600; 
	border-radius: 4px 4px 0 0;	
	-khtml-border-radius: 4px 4px 0 0; 
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;		
	}
	
#header #main-menu ul li a:hover {
	border: 1px solid #0163b1; 
	background: #0163b1;
	text-decoration: none;
	color: #fff; 	
	}	
	
#header #main-menu ul li a#menu-active {
	border: 1px solid #0163b1; 
	background: #0163b1;
	text-decoration: none;
	color: #fff; 	
	}
	
#header #main-menu ul li a sup {color: red; font-size: 11px; font-weight: 400; margin-top: -10px !important; padding: 0px 0px 0px 2px;; float: right;}	
	
#header #main-menu ul li.divider {position: absolute; border: 0px solid #000; height: 40px; width: 6px; margin: 0 5px 0 5px; background: url(https://www.protocase.com/img/main-menu-divider.png)top center no-repeat;}		

.middle {display; inline-block;  margin: 0 auto;}
.center {width: 1000px; margin: 0 auto;}
.spacer {display: block; height: 20px;}
.bold {font-weight: 600;}
.clear {clear: both;}

.Mcontent {min-height: 400px;}

#content {
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
	padding-bottom: 0px; 
	border: 0px solid #545454;	
}

img.right { float: right; margin-left: 0 0 20px 20px;}
img.left { float: left; margin: 0 20px 20px 0; }

.float-right { float: right; margin-left: 20px;}
.float-left { float: left; margin: 0 20px 20px 0; }

.specialfield{ display: none; }
	
.strong { font-weight: 700; }
.small-link { font-size: 13px; font-weight: 400; }

.grey {
	background: #f5f5f5;
	border: 1px solid #e1e1e1; 	
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
	padding: 10px;
	}
		
span.old-inv {color: black;}		
span.new-inv { color: blue;}	

img.powdercoat {width: 60px; height: 60px;}

.notes { margin: 20px 0 10px 0; font-size: 14px; }	
.notes em {font-style: normal; color: red; font-weight: 600;}	

ul.support-grid {list-style-type: none; padding-left: 0px; width: 22.5%; float: left; margin-left: 15px;}
 
ul.support-grid li strong {display: block;
	margin-top: 10px;
	font-size:24px;
	font-weight: 400;}
ul.support-grid li a {
	display: block;
	text-decoration: none;
	font-size:14px; 
	line-height: 24px; 
	text-align: center; 
	border: 1px solid #ddd;
	min-height: 185px; color: #303030; background: #f5f5f5; margin-bottom: 25px; padding: 10px;}	
	
ul.support-grid li a:hover {background: #fff; color: #0059b3 !important; border: 1px solid #0059b3;}	

.required {color: red;}
	
.center-image {width: 100%; text-align: center;}	
	
.send-cad {min-height: 280px;max-height: 280px;}	

.mcf-box {width: 33%; padding: 0 10px 0 10px ;}	
.wide-mcf-box {width: 45%; padding: 0 10px 0 10px ;}	
.full-mcf-box {width: 100%; padding: 0 10px 0 10px ;}	

.mcf-box ul {padding-left: 15px;}

.caption {font-size: 11px; color: #545454;}

table.data-table { background: #eee;}
table.data-table td {border-right: 2px solid #fff; padding: 10px; vertical-align: top;}
table.data-table td hr {height: 1px; color: #545454; border: 0px;}

.thumb-wrapper {
	background: #eee; 
	padding: 10px;
	border: 1px solid #f5f5f5; 	
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	}

.thumb-wrapper img { width: 200px; height: auto; }
.thumb-wrapper span { font-size: 13px;}
	
blockquote {font-size: 24px; font-weight: 400; color: #909090; width: 60%; margin: 15px auto 15px auto; line-height: 30px; text-align: center;}
blockquote em {display: inline-block; font-family: 'Times new roman'; font-size: 48px; padding: 0; }
#section-block {
	width: 100%;
	background: #0163b1;
	border-top: 0px solid #0163b1;
}

p.left {margin-left: 0px !important; padding-left: 0px !important; text-indent: 0px;}

#section-grey img {float: right;}

#section-block #new-home {width: 1000px; max-height: 385px; color: #fff; padding-left: 0px; margin-top: 0px !important; background: #0163b1 url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }

#section-block #home {width: 100%; height: 385px; padding-left: 20px; border: 0px solid red; background: url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }
#section-block #home span {display: block; width: 350px; height: 70px; font-size: 48px; font-weight: 400; line-height: 48px; padding: 40px 0; color: #fff;}
#section-block #home span em {display: block; font-style: normal;  font-weight: 700; color: #fff;}
#section-block #home strong {display: block; font-size: 18px; font-weight: 600; line-height: 24px; margin-top: 10px; padding: 0 0 0 30px; 
	color: #fff;
	background: url(https://www.protocase.com/img/icon-g-arrow.png) top left no-repeat;
	}


#section-block #home p {color: #fff; width: 350px; font-weight: 400;}

#section-block #home img {float: right; margin-right: 150px;}

#section-block-hv {
	width: 100%;
	background: #0163b1 url(https://www.protocase.com/products/high-volume/hv-header-wide.jpg) top center no-repeat;
	border-top: 0px solid #0163b1;
	min-height: 220px; max-height: 440px;
}
#section-block-hv span {display: block;  font-size: 48px; font-weight: 400;  padding: 20px 0; color: #fff;}


#section-block-hv #high-volume {width: 100%; min-height: 220px; max-height: 440px; padding-left: 20px; border: 0px solid red; background: url(https://www.protocase.com/products/high-volume/hv-header-wide.jpg) top center no-repeat; }

#video-wrapper {background: #9ac5e9;  float: right; width: 592px; height: 272px;  margin: 56px 32px 0 0;}
#video {width: 580px; height: 260px; overflow: hidden;  outline: 5px solid #058205; margin: 6px;}

#video iframe {margin-top: -50px;}

#section-block #default {width: 100%; height: 220px; border: 0px solid red; background: url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; }
#section-block #default img {display: inline-block; float: right; width: 500px; height: 180px; border: 4px solid #fff; margin: 15px;}
#section-block #default span {display: block; border: 0px solid red; font-size: 48px; font-weight: 400; padding: 30px 0 15px 0; margin-bottom: 0 !important; color: #fff;}
#section-block #default p {margin: 0; color: #fff; font-weight: 600; width: 450px; border: 0px solid yellow;}

	a.bevel-button{
		background: #fff;
		border-radius: 5px;	
		-khtml-border-radius:  5px;
		-webkit-border-radius:  5px;
		-moz-border-radius:  5px;		
		padding: 10px 20px;
		display: inline-block;
		font-size: 24px;
		font-weight: 500;
		color:#303030;
		text-decoration: none;
		text-shadow:0px 1px 0px #fff;
		border:1px solid #a7a7a7;
		min-width: 250px; 		
		min-width: 250px; 		
		margin:10px auto 5px auto;
		box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
		-webkit-transition:box-shadow 0.5s;
	}
	a.bevel-button:hover{
		box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
		color: #0163b1;
	}
	a.bevel-button:active{
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
		background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
	}

section h1 {text-align: center; font-size: 42px; font-weight: 300; color: #303030;}	

h1.white {color: #fff;}		
	
section.home {
width: 100%; height: 385px; padding-left: 0px; 
border: 0px solid red; 
color: #fff;
text-align: center;
background: #0163b1 url(https://www.protocase.com/img/tile-section-block2.png) top left repeat-y; 	
padding-bottom: 80px;
} 	
	
section.white {
  background: #fff url() top right no-repeat;
  background-size:  100% auto;
  background-position: center top;
  border-bottom: 1px solid #ccc;
  width:100%;
  min-height: 300px; 
}

section.white-template {
  background: #fff  url() top center no-repeat;
  border-bottom: 1px solid #ccc;
    background-size:  2000px 450px;
  width:100%;
  padding: 0px !important;
  min-height: 450px; 
}

section.home-blue {
  background: #0163b1 url(https://www.protocasedesigner.com/img/home-blue.jpg) top right no-repeat;
  background-size:  100% auto;
  background-position: center top;
  border-bottom: 1px solid #303030;
  border-top: 1px solid #303030;  
  width:100%;
  min-height: 300px; 
  color: #fff;
}	
	
section .container {
	min-width: 950px;
	max-width: 950px;
	margin: 0 auto;
	padding: 0px;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
}	

section .container-full {
	min-width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0px;
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	border: 0px solid red;
}	
ul.three-column {list-style-type: none; border: 0px solid blue; margin: 0px; padding: 0px;}

ul.three-column li {display: inline-block; text-align: center; width: 28%; padding: 6px; vertical-align: top;  margin: 0px 20px 0px 0px; 
		border: 1px solid #f5f5f5; 	
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

#quicklinks {width: 100%; height: 73px; border: 0px solid red; margin: 0; background: url(https://www.protocase.com/img/tile-quicklinks.jpg) top left repeat-x;}
#quicklinks ul {width: 100%; position: relative; text-align: center;  border: 0px solid red; list-style-type: none; margin: 0; padding: 0;}
#quicklinks ul li {
	display: inline-block;
	margin-left: 10px;
	vertical-align: bottom;
	}
#quicklinks ul li.divider {position: absolute;  border: 0px solid #000; height: 55px; width: 6px; margin: 13px 5px 0 5px; background: url(https://www.protocase.com/img/main-menu-divider.png)top center no-repeat;}		

#quicklinks ul li a {
 	float: left;
 	margin-top: 13px; 
	border: 1px solid transparent; 
	text-align: left;
	display: inline-block;
	background: transparent;
	color: #545454; 
	font-size: 13px; 
	line-height: 15px;
	padding: 5px 5px 2px 5px; 	
	font-weight: 400; 	
	}
	
#quicklinks ul li a:hover {
	border: 1px solid transparent; 
	background: #69af32;
	text-decoration: none;
	color: #fff; 	
	border: 1px solid #e7e7e7; 	
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;		
	}		
#quicklinks ul li a img {position: relative; display: inline-block; float: left; width: 40px; height: 40px; margin: 0px 10px 0 0;}

#supplier {}

#supplier strong {display: block; font-size: 18px; font-weight: 600; line-height: 24px; margin-top: 10px; padding: 0 0 0 30px; 
	color: #0066cc;
	background: url(https://www.protocase.com/img/icon-g-arrow.png) top left no-repeat;
	}

#supplier p {margin: 5px 0 0 30px;}

#sub-menu {width: 100%; height: 40px; border: 0px solid red; margin: 0; background: #00507d url( ) top left repeat-x;}
#sub-menu ul {width: 100%; position: relative; border: 0px solid red; list-style-type: none; margin: 0; padding: 0;}
#sub-menu ul li {
	display: inline-block;
	margin: 0 0 0 10px;
	vertical-align: middle;
	}
#sub-menu ul li.divider {position: absolute;  border: 0px solid #000; height: 40px; width: 6px; margin: 0px 0px 0 0px; background: url(https://www.protocase.com/img/sub-menu-divider.png)top center no-repeat;}		

#sub-menu ul li a {
 	float: left;
 	margin-top: 0px; 
	height: 30px;
	border: 1px solid transparent;
	text-align: center;
	display: inline-block;
	background: transparent;
	color: #fff; 
	font-size: 16rpx; 
	line-height: 15px;
	padding: 5px 15px 5px 15px !important; 	
	font-weight: 700; 	
	border-radius: 4px 4px 0 0;	
	-khtml-border-radius: 4px 4px 0 0; 
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;	
	}
#sub-menu ul li a#selected {
	border: 1px solid transparent;
	background: #fff url()top left repeat-x;
	text-decoration: none;
	color: #00507d; 	
	}	
	
#sub-menu ul li a:hover {
	background: #fff;
	text-decoration: none;
	color: #0163b1; 	
	}		
#announcements { width: 100%; display: block; padding-top: 20px;  padding-bottom: 5px; background: #1e1e1e; cursor:pointer; }
#announcements h3	{ width: 900px; margin: 0 auto; font-size: 30px; color: #eee; padding: 0 30px 15px 0; background: url(https://www.protocase.com/img/more-less.png)right 0px  no-repeat;}
#announcements h3:hover	{ color:#fff; }
#announcements h3.active { color:#fff; background: url(https://www.protocase.com/img/more-less.png)right -30px  no-repeat;}
#announcements span { display: block; width: 100%; margin: 0 auto; background: #eee; height: 0; overflow:hidden; position:relative; }
#announcements span p { padding:0; margin-bottom:15px; }
#announcements img { float: right; margin-bottom: 20px; }

h1 {font-size: 42px; font-weight: 400; margin: 40px 0px 20px 0px; line-height: 56px; padding:0; color: #303b41;}
h1 em {font-style: normal; color: #707d84;}
h1.short {width: 650px;}
h2 {font-size: 24px; line-height: 30px; font-weight: 600; margin:20px 0; padding:0;color: #303b41;}
h3 {font-size: 18px; line-height: 24px; font-weight: 600; margin:20px 0; padding:0;color: #000;}
h4 {font-size: 36px; line-height: 48px; font-weight: 400; margin: 10px 0; color: #005ab4;}
h4.no-hover a {text-decoration: none; color: #005ab4;}
h4.no-hover a:hover {text-decoration: none; color: #005ab4;}
p {margin: 20px 0; padding: 0;}

h5 {font-size: 30px; line-height: 36px; font-weight: 300; margin-bottom: 5px; margin-top: 10px; color: #007dc3; padding-bottom: 10px; border-bottom: 1px solid #007dc3;}

.tiny {font-size: 12px; font-weight: 300; line-height: 16px;}
.x-small {font-size: 14px; font-weight: 300; line-height: 18px;}
.small {font-size: 16px; font-weight: 300; line-height: 22px;}
.medium {font-size: 18px; font-weight: 300; line-height: 24px;}
.large {font-size: 24px; font-weight: 300; line-height: 30px;}
.x-large {font-size: 30px; font-weight: 300; line-height: 36px;}
 .bold {font-weight: 600;}

img.round {border: 1px solid #ccc; 

	border-radius: 8px;	
	-khtml-border-radius:  8px;
	-webkit-border-radius:  8px;
	-moz-border-radius:  8px;	}

.red {color: #a31b1b;}
.blue {color: #007dc3;}

a.button {font-size: 24px; font-weight: 600; padding: 5px 10px 5px 10px; margin-bottom: 10px; background: #007dc3; color: #fff; z-index: 9999;
	border: 1px solid #007dc3;
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px; }

a.button:hover { background: #303030; border: 1px solid #303030; color: #fff; text-decoration: none;}

a.small-button {font-size: 16px; font-weight: 600; padding: 2px 5px 2px 5px; background: #007dc3; color: #fff; z-index: 9999;
	border: 1px solid #007dc3;
	border-radius: 2px;	
	-khtml-border-radius: 2px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px; }

a.small-button:hover { background: #303030; border: 1px solid #303030; color: #fff; text-decoration: none;}

a.medium-button {font-size: 20px; font-weight: 600; padding: 4px 8px 4px 8px; background: #f5f5f5; color: #007dc3; z-index: 9999;
	border: 1px solid #303030;
	border-radius: 2px;	
	-khtml-border-radius: 2px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px; }

a.medium-button:hover { background: #303030; border: 1px solid #303030; color: #fff; text-decoration: none;}


	a.bevel-button{
		background: #fff;
		border-radius: 15px;
		padding: 10px 20px;
		display: inline-block;
		font-size: 24px;
		font-weight: 500;
		color:#303030;
		text-decoration: none;
		text-shadow:0px 1px 0px #fff;
		border:1px solid #a7a7a7;
		min-width: 250px; 		
		min-width: 250px; 		
		margin:10px auto 30px auto;
		box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
		-webkit-transition:box-shadow 0.5s;
	}
	a.bevel-button:hover{
		box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
		color: #007dc3;
	}
	a.bevel-button:active{
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
		background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
	}

.nothing {
		box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 0px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.25), 0px 8px 10px rgba(0, 0, 0, 0.25);		
}	
	
	a.bevel-button-sml{
		background: #fff;
		padding: 3px 6px 3px 6px;
		display: inline-block;
		font-size: 18px;
		font-weight: 400;
		color:#303030;
		text-decoration: none;
		text-shadow:0px 1px 0px #fff;
		border-top:1px solid #fff;	
		border-bottom:1px solid #fff;	
		border-left:2px solid #007dc3;	
		border-right:1px solid #fff;			
		margin-top:5px;
		margin-bottom:5px;
		margin-left:5px;		

		-webkit-transition:margin-left 0.25s;
	}
	a.bevel-button-sml:hover{
				background: #fafafa;
		margin-left:10px;		
		color: #007dc3;
	}


ul.inline {
	padding: 0px;
	width: 100%;
	list-style-type: none;
	border-bottom: 1px solid #007dc3;
	}

ul.inline li {display: inline-block; padding: 0px 10px 0px 0px; text-align: center; vertical-align: top;}	

ul.prod-grid {
	padding: 0px;
	width: 100%;
	list-style-type: none;
	}

ul.prod-grid li {display: inline;}	
	
ul.prod-grid li a.gasket {background: url(https://www.protocase.com/img/products/electronic/grid/gaskets.png) center center no-repeat;}
ul.prod-grid li a.rack {background: url(https://www.protocase.com/img/products/electronic/grid/rackmount.png) center center no-repeat;}
ul.prod-grid li a.hybrid {background: url(https://www.protocase.com/img/products/electronic/grid/hybrid.png) center center no-repeat;}
ul.prod-grid li a.ushape {background: url(https://www.protocase.com/img/products/electronic/grid/ushape.png) center center no-repeat;}
ul.prod-grid li a.consolet {background: url(https://www.protocase.com/img/products/electronic/grid/consolet.png) center center no-repeat;}
ul.prod-grid li a.diecast {background: url(https://www.protocase.com/img/products/electronic/grid/diecast.png) center center no-repeat;}
ul.prod-grid li a.five-sided {background: url(https://www.protocase.com/img/products/electronic/grid/5-sided.png) center center no-repeat;}
ul.prod-grid li a.storage {background: url(https://www.protocase.com/img/products/electronic/grid/storage.png) center center no-repeat;}
ul.prod-grid li a.lshape {background: url(https://www.protocase.com/img/products/electronic/grid/rackmount.png) center center no-repeat;}
ul.prod-grid li a.panels {background: url(https://www.protocase.com/img/products/electronic/grid/panels.png) center center no-repeat;}
ul.prod-grid li a.pelican-panel {background: url(https://www.protocase.com/img/products/electronic/grid/pelican-panel.png) center center no-repeat;}
ul.prod-grid li a.lshape {background: url(https://www.protocase.com/img/products/electronic/grid/lshape.png) center center no-repeat;}
ul.prod-grid li a.computer {background: url(https://www.protocase.com/img/products/electronic/grid/computer.png) center center no-repeat;}
ul.prod-grid li a.machined {background: url(https://www.protocase.com/img/products/electronic/grid/machined.png) center center no-repeat;}
ul.prod-grid li a.aluminum {background: url(https://www.protocase.com/img/products/electronic/grid/aluminum.png) center center no-repeat;}
ul.prod-grid li a.copper {background: url(https://www.protocase.com/img/products/electronic/grid/copper.png) center center no-repeat;}
ul.prod-grid li a.brackets {background: url(https://www.protocase.com/img/products/electronic/grid/brackets.png) center center no-repeat;}
ul.prod-grid li a.custom {background: url(https://www.protocase.com/img/products/electronic/grid/custom.png) center center no-repeat;}


ul.prod-grid li a{display: inline-block; min-width: 225px; min-height: 225px; background-size: 225px 225px !important; padding: 0px 0px 0px 0px; margin: 0px; text-align: center; vertical-align: top; max-width: 33%;  border: 1px solid #fff; cursor: pointer; 
		transition: background .25s ease-in-out;
	  -moz-transition: background .25s ease-in-out; /* Firefox 4 */
	  -webkit-transition: background .25s ease-in-out; /* Safari and Chrome */
	text-decoration: none;
	  background-color: #fff;
	  font-size: 18px; font-weight: 500;

}

ul.prod-grid li a span {display: block; position: relative; width: 100%; border-bottom: 1px solid transparent; background: transparent; color: #303030;}

ul.prod-grid li a:hover {
		color:  #303030 !important;
		border: 1px solid #545454; 
		transition: all .25s ease-in-out;
	  -moz-transition: all .25s ease-in-out; /* Firefox 4 */
	  -webkit-transition: all .25s ease-in-out; /* Safari and Chrome */
	   background-color: #e6e6e6;

}

ul.prod-grid li a:hover > span {color: #303030;  background: #fff; border-bottom: 1px solid #ccc;
		transition: color .25s ease-in-out;
	  -moz-transition: color .25s ease-in-out; /* Firefox 4 */
	  -webkit-transition: color .25s ease-in-out; /* Safari and Chrome */
}

ul.prod-grid li img { }

ul.testimonials {
	padding: 0px;
	width: 100%;
	list-style-type: none; 
	}
	
ul.testimonials li {display: inline-block;  width: 31%; vertical-align: top;	background: #f5f5f5; border-bottom: 1px solid #007dc3; margin: 0px 20px 20px 0px;}

ul.testimonials li  p.quote {padding: 10px; margin: 0px !important; }
ul.testimonials li  p.name {text-align: right; font-weight: 600; font-size: 18px; padding: 0px !important;  margin:  0px 10px 0px 0px !important ; 	 	}
ul.testimonials li  p.co {text-align: right;  padding: 0px !important;  margin:  0px 10px 0px 0px !important ; 	}

ul#powdercoat {list-style-type: none; border: 0px solid blue; margin: 10px 0px; padding: 0px;}
ul#powdercoat li {display: inline-block; min-width: 100px; max-width: 100px; width: 100px; min-height: 200px; font-size: 13px;  padding: 5px; margin: 0px 1px 3px 0px; vertical-align: top; background: #eee; text-align: center;}
ul#powdercoat li img {width: 60px; height: 60px; border: 1px solid #ccc;}
ul#powdercoat li em {display: block; font-style: normal; font-size: 15px; font-weight: 600; color: #001e4b;}
ul#powdercoat li strong {color: red !important; font-weight: 700;}

	
a.u-button {font-size: 24px; font-weight: 400; text-decoration: none; padding: 4px 14px 2px 14px; cursor: pointer; padding-bottom: -7px;
	background: #fafafa;
	border-top: 1px solid #ccc; 
	border-right: 1px solid #ccc; 
	border-bottom: 1px solid #fafafa; 
	border-left: 1px solid #ccc; 
	color: #303030;
	border-radius: 4px 4px 0px 0px;	
	-khtml-border-radius:  4px 4px 0px 0px;
	-webkit-border-radius:  4px 4px 0px 0px;
	-moz-border-radius:  4px 4px 0px 0px;		
	}

a.u-button:hover {background: #007dc3; color: #fff; border: 1px solid #007dc3;}
a.u-button.active {background: #007dc3; color: #fff; border: 1px solid #007dc3;}

input.button {font-size: 24px; font-weight: 600; padding: 5px 10px 5px 10px; margin-bottom: 10px; background: #007dc3; color: #fff; z-index: 9999;
	border: 1px solid #007dc3;
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px; }

input.button:hover { background: #303030; border: 1px solid #303030; color: #fff; text-decoration: none;}

input.small-button {font-size: 16px; font-weight: 600; padding: 2px 5px 2px 5px; background: #007dc3; color: #fff; z-index: 9999;
	border: 1px solid #007dc3;
	border-radius: 2px;	
	-khtml-border-radius: 2px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px; }

input.small-button:hover { background: #303030; border: 1px solid #303030; color: #fff; text-decoration: none;}

#image-popup a img {padding: 4px; border: 1px solid #058205; background: #fff;}

#image-popup a img:hover {padding: 4px; border: 1px dashed #058205; background: #eee;}

#whatsnew-wrapper {background: #f5f5f5; width: 250px; border: 0px solid #f5f5f5;}	
	
.sidebar-box {
	background: #fff;
	display: block;
	width: 300px;
	border: 1px solid transparent;
	 padding: 10px 10px 20px 10px;
	 margin-bottom: 10px; 
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}

.sidebar-box:hover {background: #f5f5f5;
	border: 1px solid transparent;
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}

.sidebar-box .title {display: block; border-bottom: 1px solid #eee;  font-size: 16px; font-weight: 700;}
.sidebar-box .title a {color: #000; text-decoration: none;}
.sidebar-box .title a:hover {color: #2294d8; text-decoration: none;}

.sidebar-box .desc {font-size: 14px; font-weight: 400; display: block; margin: 10px 0}
.sidebar-box .desc em {display: block; font-style: normal;}
.sidebar-box .desc .sidebar-bold {color: #000; font-weight: 600;}
.sidebar-box .desc a {font-size: 14px; font-weight: 400; color: #000; text-decoration: none;}
.sidebar-box .desc a:hover {color: #69af32; text-decoration: none;}
.sidebar-box div.link {display: block; font-size: 14px; font-weight: 600; }
.sidebar-box img {display: block; width: 60px; height: 60px; margin: 10px 10px 10px 0;}
.sidebar-box img  {border: 1px solid transparent;}
.sidebar-box img:hover {border: 1px solid #69af32;}
.sidebar-box img.social-sidebar {display: block; width: 40px; height: 40px; margin: 10px 10px 10px 0;}	
.sidebar-box img.social-sidebar {border: 2px solid transparent;}	

.sidebar-box div.link a {
	display: block;
	border: 1px solid transparent; 
	text-indent: 20px;
	max-width: 60px;
	color: #fff; 
	margin-top: 10px; 
	background: #69af32 url(https://www.protocase.com/img/icon-plus-g.png) no-repeat;
	background-position: 2px -13px;
	border-radius: 2px;	
	-khtml-border-radius: 2px; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;	
	}
	
.sidebar-box div.link a:hover {text-decoration: none; background: transparent url(https://www.protocase.com/img/icon-plus-g.png) no-repeat; background-position: 2px 2px; color: #69af32;}

.heavy-blue { display: block; font-size: 16px; font-weight: 600; color: #0066cc; }

#maincontainer {width: 1000px; margin: 0 auto;  background: transparent; }
.innertube { margin:0; padding:0; }
#leftwrapper {
	float: left;
	width: 100%;
	margin: 0px;	
}

#leftcolumn {
	margin-right: 300px; /*Margin for left column. Should be (RightColumnWidth + CentreColumnWidth)*/
	background: transparent;
	outline: 0px solid #ff0000;
}

#centrecolumn {
	float: left;
	width: 40px; /*Width of left column in pixel*/
	margin-left: -300px; /*Set margin to -(CentreColumnWidth + RightColumnWidth)*/
	background: transparent;
}

#rightcolumn {
	width: 260px; /*Width of right column in pixels*/
	margin-left: -260px; /*Set margin to -RightColumnWidth*/
	float: left;
	background: transparent;
	outline: 0px solid #ff0000;
}

#prod-container{
	width: 1000px; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	min-height: 100%;
	border: 0px solid #000;
	background: transparent;
	overflow: hidden;
}

#prod-container a img {padding: 4px; border: 1px solid #058205; background: #fff;}

#prod-container a img:hover {padding: 4px; border: 1px dashed #058205; background: #eee;}

#prod-wrapper{
float: left;
width: 100%;
}

#prod-rightcolumn{
	margin-left: 260px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
	border: 0px solid green;
	overflow: hidden;
}

#prod-leftcolumn{
	float: left;
	width: 240px; /*Width of left column in pixel*/
	margin-left: -1000px; /*Set left margin to -(MainContainerWidth)*/
	border: 0px solid #000;	
	overflow: hidden;
}

#prod-ee-rightcolumn{
	margin-left: 300px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
	border: 0px solid green;
	overflow: hidden;
}

#prod-ee-leftcolumn{
	float: left;
	width: 280px; /*Width of left column in pixel*/
	margin-left: -1000px; /*Set left margin to -(MainContainerWidth)*/
	border: 0px solid #000;	
	overflow: hidden;
}

#mcf-menu { background: #005ab4; }

.cutout-menu {max-width: 210px;}

#mcf-menu a { display: block; width: 100%; padding: 6px 0 6px 10px; font-size: 16px; background: #00507d; color: #eee; text-decoration: none;}
#mcf-menu a:hover { background-color:#669cd2; color: #fff; text-decoration: none;}

#mcf-menu a#mcf-selected {background: #fff url(https://www.protocase.com/img/prod-selected.jpg) center left no-repeat; color: #058205; font-weight: 600; border-left: 8px solid #325575;}

#mcf-menu .mcf-l0  {  border-bottom: 1px solid #FFFFFF; }
#mcf-menu .mcf-l0 a {display: block; width: 100%; font-size: 20px; color: #fff; font-weight: 600;}
#mcf-menu .mcf-l0:hover  { background-color:#669cd2; color: #fff; text-decoration: none;}

#mcf-menu a#mcf-selected-l0 {background: #fff url(https://www.protocase.com/img/prod-selected.jpg) center left no-repeat; color: #058205; font-weight: 600; text-indent: 15px; border-left: 8px solid #325575;}

.mcf-l1  { font-size: 20px; color: #fff; font-weight: 600; padding: 6px;   border-bottom:1px solid #FFFFFF;  }
.mcf-l1:hover  { }


.mcf-l2  {  text-indent: 15px; border-bottom:1px solid #FFFFFF; }
.mcf-l2:hover  {   }


.mcf-l3  {  text-indent: 25px; border-bottom:1px solid #FFFFFF; }
.mcf-l3:hover  {  }

/*used for cutout library menu*/
.cutout-subcat  {  margin-left: 10px; border-bottom:1px solid #FFFFFF; }
.cutout-subcat:hover {text-decoration: underline;}
#mcf-menu a.subcat-selected {background: #fff; color: #058205; font-size: 13px; max-width: 190px; overflow: hidden; font-weight: 600; border-left: 8px solid #325575;}



div#right {float: right; display: block; margin: 10px 0 10px 20px;}



#footer {display: block; width: 100%; background: #f0f0f0; border-top: 1px solid #b8b8b8; padding: 20px 0 10px 0; margin:20px 0;}

#footer ul#fmenu {list-style-type: none; width: 1000px; margin: 0 auto;}
#footer ul#fmenu li {display: inline-block; font-size: 16px; line-height: 24px; vertical-align: top;  text-align: center;  border-top: 1px dashed #ccc;  border-bottom: 1px dashed #ccc; padding: 10px 6px 10px 6px; margin-top: 20px; }
#footer ul#fmenu li a {color: #005696;}
#footer ul#master {list-style-type: none; width: 1000px; margin: 0 auto;}
#footer ul#master li {display: inline-block; font-size: 13px; line-height: 24px; width: 235px; vertical-align: top; margin-right: 10px;}
#footer ul#master li a {color: #303030; text-decoration: none; background: transparent; width: 80%; padding: 2px 10px 2px 10px;
	border: 1px solid transparent;
	border-radius: 4px;	
	-khtml-border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}
#footer ul#master li a:hover {color: #69af32; text-decoration: underline; background: #fff;}

#footer div.section-title {font-size: 15px; font-weight: 700; margin-top: 10px; }
#footer div.section-title a {color: #303030; text-decoration: none;}
#footer div.section-title a:hover {color: #0066cc; text-decoration: none;}
#footer div em {font-style: normal; color: #69af32; font-weight: 700;}
#footer div em img {vertical-align: middle;}

.side-content {
	float: right;
	margin-top: 35px;
	padding-left: 20px;
}

.side-content div.row {
	padding-left: 20px;
	padding-right: 20px;
}

@media screen and (min-width: 320px) and (max-width: 480px) { 

.Mcontent {width: 100%; padding: 0px 0px 0px 0px; }

.notes {display: none;}

select.form_inputs {max-width: 200px;}
input.form_inputs {max-width: 200px;}

#sub-menu {display: none;}

.small-link {display: none;}

.spot-img {max-width: 320px !important;}

#maincontainer {width: 100%; margin: 0 auto;  background: transparent; }
.innertube { margin:0; padding:0; }
#leftwrapper {
	float: left;
	width: 100%;
	margin: 0px;	
}

#leftcolumn {
	margin-right: 0px; /*Margin for left column. Should be (RightColumnWidth + CentreColumnWidth)*/
	padding-right: 5px;

}

#centrecolumn {
	display: none;
}

#rightcolumn {
	display: none;
}

#prod-container{
	width: 100%; /*Width of main container*/
	margin: 0 auto; /*Center container on page*/
	min-height: 100%;
	border: 0px solid #000;
	background: transparent;
	overflow: hidden;
}

#prod-container a img {padding: 4px; border: 1px solid #058205; background: #fff;}

#prod-container a img:hover {padding: 4px; border: 1px dashed #058205; background: #eee;}

#prod-wrapper{
float: left;
width: 100%;
}

#prod-rightcolumn{
	margin-left: 0px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
	width: 100%;
	border: 0px solid green;
	overflow: hidden;
}

#prod-leftcolumn{float: left; display: none;}

#prod-ee-rightcolumn{
	margin-left: 0px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
	border: 0px solid green;
	overflow: hidden;
	width: 315px;
	
}

#prod-ee-rightcolumn img {float: none; width: 90%; height: auto; border: 0px solid red; }

#prod-ee-leftcolumn{float: left; display: none;}

ul.prod-grid {
	padding: 0px 0px 0px 0px;
	text-align: center;
	width: 100%;
	list-style-type: none;
	}

ul.prod-grid li {display: block;}	

ul.prod-grid li a{display: inline-block; min-width: 225px; min-height: 210px; background-size: 180px 180px !important; background-position: center center; padding: 0px 0px 0px 0px;}

#supplier {width: 310px;}

#supplier strong {display: block; font-size: 18px; font-weight: 600; line-height: 24px; margin-top: 10px; padding: 0 0 0 30px; 
	color: #0066cc;
	background: url(https://www.protocase.com/img/icon-g-arrow.png) top left no-repeat;
	}

#supplier p {margin: 5px 0 0 30px;}

.mcf-box {width: 95%; padding: 0px ;}	
.wide-mcf-box {width: 95%; padding: 0px ;}	
.full-mcf-box {width: 95%; padding: 0px ;}	

.mcf-box ul {padding-left: 20px;}
.wide-mcf-box ul, .full-mcf-box ul {padding-left: 0px;}

.grey {
	background: transparent;
	border: 0px solid #e1e1e1; 	
	border-radius: 0px;	
	-khtml-border-radius: 0px; 
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;	
	padding: 0px;
	}
	
.iframe-video	{max-width: 300px; height: auto; margin-bottom: 20px; }
	
ul.testimonials {
	padding: 0px;
	width: 100%;
	list-style-type: none; 
	}
	
ul.testimonials li {display: block; width: 100%;  vertical-align: top;	background: #f5f5f5; border-bottom: 1px solid #007dc3; margin: 0px 0px 20px 0px;}

ul.testimonials li  p.quote {padding: 10px; margin: 0px !important; }
ul.testimonials li  p.name {text-align: right; font-weight: 600; font-size: 18px; padding: 0px !important;  margin:  0px 10px 0px 0px !important ; 	 	}
ul.testimonials li  p.co {text-align: right;  padding: 0px !important;  margin:  0px 10px 0px 0px !important ; 	}	

.side-content {
	margin-top: 0px;
}

.side-content div.row {
	padding-left: 20px;
	padding-right: 50px;
}

.sideBySide {
	width: 47%;
}
	
}