﻿/* CSS layout */
figure {
	margin:0;
}
*.clear {
	clear:both;
}
 .center {
 	text-align:center;
}
*.topMargin {
	margin-top:.8em
}
*.right{
	float:right;
}
*.left{
	float:left;
}
*.block{
	display:inline-block;
}
*.oneLine{
	display:inline;
}
*.picColumn {
	display: block;
	text-align: center;
}
.link {
	text-decoration: none;
	color: #10206B;
}
.link:hover {
	color: #25AAA0;
}
/* Ribbon for Pictures */
.ribbon-holder{
    overflow: hidden; 
    position: relative;
    margin-top:.15em;

}
.ribbon-holder img{
margin-top:0;
}
.ribbon{
  	border-color:#bdbdbd;
	border-width: 1px;
	border-style: solid;
	border-collapse: collapse;
	position: absolute;
	background: yellow;
    padding:1px;
    color: black;
    font-weight: bold;
    transform: rotate(-45deg);
    text-align: center;
    top: 33px;
    left: -30px;
    width:145px;
}
/* Ribbon for Pictures */
/* Tables */
.fullTable {
	width: 95%;
	border-color:#086FA1;
	border-width: 1px;
	border-style: solid;
	border-collapse: collapse;
}
.halfTable {
	width: 50%;
	border-color:#086FA1;
	border-width: 1px;
	border-style: solid;
	border-collapse: collapse;
}
.TD20 {
	width: 20%;
	padding: 5px;
	border-color:#086FA1;
	border-width: 1px;
	border-style: solid;
}
.TD50 {
	border: thin dotted #086FA1;
	padding: 5px;
	width: 50%;
}
/* Tables */
/* Fonts */
h1 {
	font-weight: bold;
	color: #10206B;
	margin-bottom: .75em;
	font-size: 1.2em;
}
h2 {
	color: #10206B;
	display: inline;
	font-size:1em;
}
h2 a{
	text-decoration: none;
	color: #10206B;
	font-size:90%;
	display: inline;
	font-weight: normal;
}
h2 a:hover{
	color: #25AAA0;
}

h3 {
	font-weight: bold;
	color: #10206B;
}
.ramp {
	text-decoration: none;
	font-size:90%;
	color: #10206B;
	font-weight: bold;
}
.ramp:hover {
	color: #41D4CF;
	font-weight: bold;
}
.TxtBody {
	line-height: 1.2em;
	font-size:90%;
	color:black
}
.TxtBullet {
	list-style-type: disc;
	font-weight: bold;
	line-height: 1.7em;
	font-size: 90%;
	margin-top: 0px;
}
.prodBullets {
	text-align: left;
	margin-left: 15px;
	padding-top: 10px;
	padding: 0;
	margin-bottom: 0px;
	font-size: 75%;
	font-weight: bold;
}
.TxtCaption {
	font-size:90%;
	color:black;
}
.TxtPageTitle {
	color: #10206B;
	font: bold 110% Arial, Helvetica, sans-serif;
	text-decoration: underline;
}
.TxtSmall {
	font-size:80%;
}
.txtSubCat {
	color: #25AAA0;
	font-weight: bold;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 2px;
}
/* Fonts */
/* Header */
.NavBlue {
	background-color: #10206B;
	color: white;
	font-weight: bold;
	padding: .3em;
	overflow: hidden;
}
#breadcrumbs {
	color: #41D4CF;
}
.breadcrumbsTrail {
	margin-bottom: .6em;
	display:inline-block;
}
.TxtBreadCrumbs {
	font-size: 75%;
	text-decoration: none;
	color: #25AAA0;
}
.TxtBreadCrumbs:hover {
	text-decoration: underline;
}
/* Header */
/* Product Display */
.starsLeft {
	padding-left:10px;
}
  /* Product Table */
tbody tr:nth-child(even) {
	background-image: url('portable_wheelchair_ramps.gif');
}
.ProdTbl {
	border: thin solid #CCCCCC;
	border-collapse:collapse;
	width:100%
}
.ProdTbl tr {
	border-width: thin;	
	border-color: #CCCCCC;
	border-bottom-style: solid;
	vertical-align:top;
}
.ProdTbl td {
	width:100%;
}
.ProdHeaderTbl {
	background-color: #25AAA0;
	font-weight: bold;
	color: #FFFFFF;
}
.TxtPrice {
	font-weight: bold;
	color: #FF0000;
}
.TxtRetail {
	color: #808080;
	text-decoration:line-through;
}
.TxtStock {
	color: #10206B;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

   
/* Footer */
.SocialBar {
	display:inline-block;
	margin:auto;
	vertical-align:top
}

/* Photo-Caption PZ3 CSS v080630 
* copyright: http://randsco.com/copyright 
* www.randsco.com 
*/

.PZ3-l { float:left; }
.PZ3-r { float:right; direction:rtl; }
  html>/**/body .PZ3-r { position:relative; }

.PZ3zoom { border:1px solid #25AAA0; margin-bottom: 10px;}
.PZ3zoom a,.PZ3zoom a:visited { display:block;
  padding:0; overflow:hidden; text-decoration:none;
  height:100%; width:100%; }
  html>/**/body .PZ3-r a { right:0; }


.PZ3zoom a img { border:0; height:auto; width:100%; }


.PZ3cap,
.PZ31cap {
	display: block;
	direction: ltr;
	font: .8em verdana,sans-serif;
	margin-top: -4px;
	background: #25AAA0;
	color: #FFFFFF;
	text-align: left;
}
.PZ3cap { padding:3px 5px; }
.PZ3inr { display:block; padding:2px 5px; }

.Lnk a:hover { cursor:pointer; } 
/* End Photo-Caption Zoom CSS */
*.picTesting {
	display:block
}
/* Nav Bar Code */
.barNav ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 .1em 0;
	position: absolute;
	width: 100%;
	clear: both;
	background-color: #999999;
}

/*Create a horizontal list with spacing*/
.barNav li {
	float: left;
	width: 19.9%;
	margin-right: .1%;
	text-align: center;
	background: #E2EAF2;

}
.barNav li a {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	color: #10206B;
	min-height:2.5em;
}
.barNav a {
		padding-top:.4em;
		display:block;
}
.barNav li:hover a {
	background: #FFFFFF;
}
.barNav li:hover {
	background: #FFFFFF;
}

/* Nav Test */
.arrows {
	font-size: 80%;
}
/*Make all menu links full width*/
.newMenu ul li, li a {
		width: 100%;
	}

/*Strip the ul of padding and list styling*/
.newMenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	margin-bottom: .5em;
}

/*Create a Vertical list with spacing*/
.newMenu li {
	border-width: thin;
	border-color: #999999;
	border-bottom-style: solid;
}

/*Style for menu links*/

.navCat{
	color: #FFFFFF;
	background: #25AAA0;
}
.navList li a {
	background: #E2EAF2;
	color: #10206B;
}
.navList li:hover a:hover {
	background: #FFFFFF;
}
.newMenu li a {
	display: block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	padding: .4em 1% .4em 1.5%;
	width: 97.5%;
}
/*Hide dropdown links until they are needed*/
.newMenu li ul {
	display:block;
}

/*Make dropdown links vertical*/
.newMenu li ul li {
	display: block;
	float: none;
}

/*Display the dropdown on hover*/
.newMenu ul li a:hover + .hidden, .hidden:hover {
	display: block;
}
/*CSS Tabs*/
.tabs {
	max-width: 100%;
	display: block;
	float: none;
	list-style: none;
	padding: 0;
	margin: 5px auto 0px auto;
}
 
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
 
.tabs input[type=radio] {
    display:none;
}
 
.tabs label {
	border-style: solid;
	border-width: thin thin medium thin;
	border-color: #C0C0C0;
	display: block;
	float: left;
	color: #999999;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */;
	transition: all 0.5s;
	line-height: 1.5em;
	padding-right: 4px;
	padding-left: 4px;
}
  
.tabs label span {
    display: none;
}
 
.tabs label i {
    padding: 5px;
    margin-right: 0;
}
 
.tabs label:hover {
	color: #10206B;
	border-bottom-width: medium;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: thin;
	border-top-color: #10206B;
	border-bottom-color: #10206B;
}
 
.tab-content {
	border: thin solid #C0C0C0;
	display: none;
	width: 100%;
	float: left;
	box-sizing: border-box;
	background-color: #ffffff;
	padding-right: 5px;
	padding-left: 5px;
}
.tabs [id^="tab"]:checked + label {
	background: #FFF;
	border-bottom: solid #10206B;
	color: #10206B;
	border-color: #10206B;
	border-style: solid;
	border-width: thin 1% thin 1%;
}
 
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3,
#tab4:checked ~ #tab-content4 {
    display: block;
}
.tab-content * {
 
    -webkit-animation: scale 0.7s ease-in-out;
    -moz-animation: scale 0.7s ease-in-out;
    animation: scale 0.7s ease-in-out;
}
 
@keyframes scale {
 
  0% { 
    transform: scale(0.9);
    opacity: 0;
    }
 
  50% {
    transform: scale(1.01);
    opacity: 0.5;
    }
 
  100% { 
    transform: scale(1);
    opacity: 1;
  }
 
}


/* END CSS Tabs*/

   .oneBox {width:99%;	float:left; padding:.5%}

/*Responsive Styles*/

@media (min-width: 1400px) {
   h1 h2 {	font-size:100%; }
   .hide0 { display:none; }
   .hideBar { display:none; }
   .thirds { width: 33.3%; display:inline-block; vertical-align:top; float:left;}
   #page-container { margin-top:.3em}
	.sideNav {	width:15%; float:left}         
	#mainContent { width:84.5%; float:right; padding-left:.5%}
   .mainColumn {width:69%;	float:left;	padding:.5%;}
   .picColumn {width:29%;	float:left;	padding:.5%;}   
   .SocialBar {	width:10%;}
   .prodCart {	width:59%; margin:.5%; float:left;}
   .prodSpecs2 { width:39%; margin:.5%; float:left;}
   .prodSizes { float:right; }
   	.txtForm { text-align:right;}
   
   .fourBox {width:24%; float:left; margin:.5%;}
   .twoBox {width:49%;	float:left;	padding:.5%;}
   .title {width:49%;	float:left;	padding:.5%;}
   .bulletPoints {width:49%;	float:left;	padding:.5%;}

  .PZ3zoom a:hover img { height:auto; width:auto; border:0; }
  .PZ3zoom a:hover { position:absolute; z-index:999; padding:0; background:none; cursor:default; height:auto; width:auto; overflow:visible; border:1px solid #369; margin:-1px 0 0 -1px; }
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

}
@media (min-width: 769px) and (max-width: 1399px) {
   h1 h2 {	font-size:85%; }
   .hide0 { display:none; }
   .hideBar { display:none; }
   .thirds { width: 33.3%; display:inline-block; vertical-align:top; float:left;}   
   #page-container { margin-top:.3em}
   .sideNav {	width:20%; float:left}   	
   #mainContent { width:79.5%; float:right; padding-left:.5%}
   .mainColumn {width:69%;	float:left;	padding:.5%;}
   .picColumn {width:29%;	float:left;	padding:.5%;}
   .SocialBar {	width:10%;}
   .prodCart {	width:59%; margin:.5%; float:left;}
   .prodSpecs2 { width:39%; margin:.5%; float:left;}
	.prodSizes { float:right; }
         
   .fourBox {width:24%; float:left; margin:.5%;}
   .twoBox {width:49%;	float:left;	padding:.5%;}
   .title {width:39%;	float:left;	padding:.5%;}
   .bulletPoints {width:59%;	float:left;	padding:.5%;}
   .txtForm { text-align:right;}
   .menuBar{ font-size:75%}

  .PZ3zoom a:hover img { height:auto; width:auto; border:0; }
  .PZ3zoom a:hover { position:absolute; z-index:999; padding:0; background:none; cursor:default; height:auto; width:auto; overflow:visible; border:1px solid #369; margin:-1px 0 0 -1px; }
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

}

@media (min-width: 401px) and (max-width: 768px) {
   h1 h2 h3 {	font-size:80%; }
   .thirds { width: 50%; display:inline-block; vertical-align:top; float:left; }
   .hide1 { display:none; }
   .hide2 { font-size:80%; }   
   #page-container { margin-top:.1em;}
   *.sideNav {	width:20%; float:left}   
   #mainContent { width:79.5%; float:right; padding-left:.5%; font-size:80%;}
   .mainColumn {width:69%;	float:left;	padding:.5%;} 
   .picColumn {width:29%;	float:left; padding:.5%;}   
   .SocialBar { width:15%;}
   .prodCart .prodSpecs2 {width: 99%; padding:.5%; display:block; margin-bottom:3em; clear:both}
     
   
   .fourBox {width:49%; float:left; margin:.5%;}
   .twoBox *.bulletPoints *.title {width: 99%; padding:.5%; display:block; margin-bottom:3em; clear:both}  
  
   .menuBar { font-size:70%;}
   #tagline { font-size:80%;}
   .NavBlue { font-size:80%;}
   .TxtBullet { margin:0px}
   .txtForm { text-align:left;}
   
}   
 
@media (max-width: 400px) {
   h1 h2 h3 {	font-size:80%; }
   .hide1 { display:none; }
   .hide2 { display:none; }
   .hideBar { display:none; }
	.thirds { width: 100%; text-align:center;}   
   .NavBlue { display:none}
   .sideNav {	width:20%; float:left}
   #mainContent { width:98%; padding-left:1%;padding-right:1%}      
   .mainColumn {width:99%;	float:left; padding:.5%}
   .picColumn {width:99%;	float:left; padding:.5%;}
   .SocialBar { width:15%;}   

   *.twoBox *.fourBox *.bulletPoints *.title .prodCart .prodSpecs2 {width: 99%; padding:.5%; display:block; margin-bottom:3em; clear:both}
   .TxtBullet { margin:0px}
   .imageSize { margin:0;}
   .prodCart img { padding:5px}   
	.txtForm { text-align:left;}
   
    .menuBar{ font-size:65%}
/*Menu Max width Media*/
.newMenu li a {
	line-height:3em;
	text-align: center;
}
.newMenu li {
	border-color: #FFFFFF;
}
.newMenu li ul {
	display: none;
}
*.sideNav {	width:100%; clear:both}
	/*Make dropdown links appear inline*/
.newMenu ul {
		position: static;
		display: none;
}
/*Show menu when invisible checkbox is checked*/
	#menu{
    display: block;
}
}