@charset "utf-8";
/* Cetacean Research Technology - v3 */

/* @group basics0 - links - default and basic */
/* regLnk is used places link P7 routines to override */
/* see specialty links - most content links use navMore */
a { 
	color: #11279b;
	text-decoration: none;
	border-bottom: 1px dotted;
	border-bottom-color: transparent;
}
a:visited, a.regLnk:visited { 
	color: #075490;
	background-repeat: no-repeat;
}
a.wul {
	border-bottom-color: #11279b;
}
a.noul {
	border-bottom: 0px;
}
a.plain {
	color: #000;
	border-bottom: 0px;
}

a:hover, a:active, a:focus, a.wul:hover, a.wul:active, a.wul:focus { 
	color: #259dc5;
	border-bottom-color: #259dc5;
}
a.extLnk {
	color: #666;
	padding: 1px 4px;
	border-radius: 6px;
}
a.extLnk:hover, a.extLnk:active, a.extLnk:focus {
	text-decoration: none;
	background-color: #259dc5;
	color: #fff;
}



/* @end */
/* @group banner area - social media */
/**
  * wrap social area holds contact, and shopping cart
  * note: floating causes an extra blank line at top, position doesn't
  */
.wrapSocial { 
	padding: 10px 15px;
	text-align: right;
	width: auto;
	max-width: 500px;
	display: inline-block;
	float: right;
	line-height: 1em;
}
.wrapSocial img {
	background-position: 0px;
	height: 33px;
	width: 34px;
	border: 0;
	margin: 0 9px;
}
.wrapSocial img:hover {
	background-position: 34px;
}
.wrapSocial .divider2 {
	width: 6px;
}
.wrapSocial .divider2:hover {
	background-position: 0;
}
.smfb1 {
	background-image: url(facebook-circle.png);
}
.smig1 {
	background-image: url(instagram-circle.png);
}
.smplus1 {
	background-image: url(plus1-circle.png);
}
.smtwit1 {
	background-image: url(twitter-circle.png);
}
.smyt1 {
	background-image: url(youTube-circle.png);
}
.smphone1 {
	background-image: url(phone-circle.png);
}
.smmail1 {
	background-image: url(email-circle.png);
}
.smcart1 {
	background-image: url(cart-circle.png);
}

/**
  * banner branding - logo, name, subtitle
  */
.wrapBanner {
	margin: 10px 0 0 10px;
}  
.wrapBanner .crtLogo {
	float: left;
	margin-right: 10px;
	background-image: url(../assets/crt-double-logo.png);
	background-position: 0px;
	height: 140px;
	width: 150px;
}
.wrapBanner .crtLogo:hover {
	background-position: 150px;
}
.wrapBanner h1 {
	font-size: 1.7em;
	line-height: 1em;
	letter-spacing: .1em;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px 1px rgba(0,0,0,1), 1px -1px 1px rgba(0,0,0,1), -1px 1px 1px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1);
	text-shadow: 1px 1px 1px #333, -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 0px 0px 5px #000;
	padding: 30px 0 0 0;
}
.wrapBanner h2 {
	font-size: 1.4em;
	line-height: 1em;
	font-variant:small-caps;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px 1px rgba(0,0,0,1), 1px -1px 1px rgba(0,0,0,1), -1px 1px 1px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1);
	text-shadow: 1px 1px 1px #333, -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 0px 0px 5px #000;
	padding: 0 0 10px 0;
}
.wrapMenu {
	box-shadow: 0px -5px 5px rgba(0,0,0,.3);
	background-image: -ms-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -moz-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -o-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #808080), color-stop(0.5, #EBECF7), color-stop(1, #808080));
	background-image: -webkit-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: linear-gradient(to top, #808080 0%, #EBECF7 50%, #808080 100%);
 	background-size:100% 12px;
   background-position:0 0, 100% 0;
   background-repeat:no-repeat;
   padding-top: 15px;
}
.steelBar {
	background-image: -ms-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -moz-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -o-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #808080), color-stop(0.5, #EBECF7), color-stop(1, #808080));
	background-image: -webkit-linear-gradient(bottom, #808080 0%, #EBECF7 50%, #808080 100%);
	background-image: linear-gradient(to top, #808080 0%, #EBECF7 50%, #808080 100%);
 	background-size:100% 12px;
   background-position:0 0, 100% 0;
   background-repeat:no-repeat;
   padding-top: 15px;
}
.grayBar {
	background-color: #345878;
 	background-size:100% 4px;
   background-position:0 0, 100% 0;
   background-repeat:no-repeat;
   padding-top: 3px;
}
/* this isn't used in banner but seemed like good place for it */
/* it is used to accent special areas such as vacation notice */
.bronzeBar {
	background-image: linear-gradient(to top, #8d4e18,  #b57a43, #d5a165, #f7ce8c,  #d5a165, #fbdca8, #b57a43);
 	background-size:100% 12px;
   background-position:0 0, 100% 0;
   background-repeat:no-repeat;
   padding-top: 15px;
}
/* @end */
/* @group basics0 - set overall canvas, site outer edges, main page layout */
body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	color: #000;
	background-color: #eceeee;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.wrapTop {
	margin: 0;
	padding: 1px 0 0 0;
	text-align: left;
	color: #241c19;
	background-image: url(banner-bkg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.wrapTop a {
	border-bottom: 0;
}
.hide4desktop {
	visibility: hidden;
	display: none;
}
.hide4mobile, .hide4tablet {
	visibility: visible;
}
/* put constraints on width */
.limitSpread {
	margin: 0px auto;
	padding: 0;
	width: 100%;
	max-width: 2920px;
}
.limitSpread600 {
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}
.wrapContent {
	margin: .2em 0em 0em 0em;
	overflow: hidden;
	background-color: #f7f8f8;
}
.wrapColumns {
	overflow: hidden;
	position: relative;
}
.main-content {
	float: left;
	width: 62%;
	position: relative;
	left: 19%;
}
.sidebar1 {
	width: 18.5%;
	float: left;
	position: relative;
	left: -62%;
	background-color: #f7f8f8;
	background-image:  linear-gradient(270deg, #ccc, #f7f8f8);
}
.sidebar2 {
	width: 18.5%;
	float: right;
	background-color: #f7f8f8;
	background-image:  linear-gradient(90deg, #ccc, #f7f8f8);
}

/* @end */
/* @group basics0 - main and sidebars  */
.main-content, .sidebar1, .sidebar2 {
	margin: 0;
	padding: 0;
	text-align: left;
}
.sidebar1 .content {
}
.sidebar1 .content2 {
	font-size: .9em;
	padding: 0 10px;
}
.sidebar2 .content {
	font-size: .9em;
	padding: 0 10px;
}
.main-content .content {
	padding: 20px 10px;
	background-color: #f7f8f8;
	font-size: 1em;
	line-height: 1.5em;
}
/* for cases where it needs to be applied manually */
/* such as for the four column page - like home */
.content2 {
	margin: 0 10%;

	font-size: 1em;
	line-height: 1.5em;
}
.wrapContainerLeft50tight .content,
.wrapContainerLeft25w1 .content,
.wrapContainerLeft60 .content {
	font-size: .9em;
	padding: 0 20px;
}
/* for cases where it needs to be applied manually */
.content3 {
	font-size: .9em;
	padding: 0 20px;
}
/* 1f and 2f are the floated versions for using within a main area
   when you don't want a full length col and want it to stack first for mobile
   width extensively adjusted for mobile - varies from 30-40% or 100% depending on monitor width    
   see basics 2 for definitions 
*/
.content .sidebar2f .content {
	padding-right: 0;
}
.content .sidebar1f .content {
	padding-left: 0;
}
/* @end */
/* @group basics1 - sidebar menu containers, sidebar headings, heading links */
/* see P7TM3-01crt and P7PM3-01crt for menu styling */
.sbmenu1 a, .sbmenu2 a, .sbmenu2s a, .sbmenu3 a, .sbmenu4 a {
	text-decoration: none;
	display: block;
	text-align: center;
}
.sbmenu1 h5, .sbmenu2 h4, .sbmenu2 h3  {
	margin: 0;
}
/* side-bar menu 1 contains the new products link - top part of sidebar */
.sbmenu1 {
	padding: 10px 0 20px 0;
}
.sbmenu1 a {
	border: 2px dashed #fff;
}	
/* NOTE TO SELF - MOVE THE H1-H5 DEFINTIONS ABOVE THIS  */
.sbmenu1 h5 a {
	padding: 5px 0;
	border-radius: 20px;
	margin: 0 20px;

}
/* side-bar menu 2 contains all the main menus - middle part of menu */
.sbmenu2 {
	border-top: 2px solid #fff;
	background-color: #dcdcdc;
	background-image: linear-gradient( #d2d5d5, #879292 30%, #929d9d, #99a1a2);
}
.sbmenu2s {
	background-color: #97a0a1;
}
.sbmenu2 a, .sbmenu2s a {
	color: #fff;
	background-color: transparent;
	text-align: left;
}
.sbmenu2 ul ul li a { 
	color: #11279b;
}
.sbmenu2 ul ul li a:visited { 
	color: #075490;
}
.sbmenu2 h3 a {
	text-align: center;
	padding: 12px 3px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
/* for link directly to comparison chart */
.sbmenu2 h4 a {
	text-align: center;
	padding: 16px 9px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-size: 1.1em;
	border-top: 4px solid #ccc;
	border-bottom: 4px solid #ccc;
}
/* side-bar menu 3 contains the small hydrophones and accessories when on bottom */
.sbmenu3 {
	background-color: #dcdcdc;
	background-image: linear-gradient( #99a1a2, #dedede, #ccc);
	border-bottom: 2px solid #fff;
}
.sbmenu3 h4 {
	display: block;
	text-align: center;
	margin: 10px 0 10px;
	color: #dedede;
	color: #636e6f;
	font-weight: 900;
	font-size: 1.2em;
	/* text-shadow: 0px 0px 9px #636e6f  */
}
.sbmenu3 li a {
	text-shadow: 0px 0px 1px rgba(0,0,0,.2);
}
/* side-bar menu 4 contains the for contact us link on the bottom of page */
.sbmenu4 {
	padding: 10px 0 10px 0;
}
.sbmenu4 h5 a {
	padding: 5px 15px;
	border-radius: 20px;
	margin: 0 20px;
	background-color: #dcdcdc;
	border: 3px dotted #fff;
	font-weight: 700;
}

.sbmenu1 a:hover, 
.sbmenu2 a:hover, .sbmenu2 a:visited:hover, 
.sbmenu2s a:hover,
.sbmenu3 a:hover,
.sbmenu4 a:hover {
	color: #fff;
	background-color: #259dc5;
	border-color: #259dc5;	
}
.sbGetPdf {
	text-align: right;
}
.sbGetPdf a {
	padding: 10px 0 4px 0;
	display: block;
}
.sbGetPdf a:hover {
	color: #fff;
	background-color: #259dc5;
	border-bottom-color: #259dc5;	
}

/* @end */
/* @group basics2 - simple floating areas and or columns, which usually get adjusted for mobile */
/* for photo containers also see basics 6 */
.make3cols {
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}
.make2cols {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
}
.make2cols p:first-child {
	margin-top: 0;
}
/* this is for product photos like hydrophone models
   often contains more than one item in the column 
*/
.sidebar2f, .sidebar2fwf {
	float: right;
	width: 29%;
	margin: 0 0 0 20px;
}
.sidebar1f, .sidebar1fwf  {
	float: left;
	width: 30%;
	margin: 0 20px 0 0;
}

/* fixed width float - for pages like accessories or new 
   used with variations such as w or w/o main col
   may be used without the main col if you want it to wrap 
   
   note: two-toned region has a built in product image float 
*/

.sidebar1fwf, .sidebar2fwf {
	width: 150px;
	text-align: center;
}
.maincolR {
	margin-left: 170px;
}
.maincolL {
	margin-right: 170px;	
}

/* wide version of sidebar 2 fixed witdth float : wide */
/* good for callout box - simple formatting */
/* intended to be used alone (w/o more nesting */
/* this width is for audio so if that changes, this can change */
.sidebar2fwfw  {
	float: right;
	width: 300px;
	margin: 0 0 0 20px;
	padding: 5px 10px;
	text-align: center;
	font-size: .8em;
	border-left: 1px solid #ccc;
}

/* solid color floating sidebar */
/* see basics5 small sections for more */
.sidebar2fwht {
	float: right;
	width: 25%;
	background-color: #f7f8f8;
	margin: 0 0 20px 10px;
	padding: 0 0 10px 20px;
	font-size: .9em;
	border-left: 1px solid #ccc;
}
/* 2f40 is 40% - lines up reasonably well with 60/40 columns */
/* see contact page */

.sidebar2f40 {
	float: right;
	width: 38%;
	margin: 0 2% 0 3%;
}


/* @end */
/* @group basics3 - fancy or special purpose links incl block links  */
.breadcrumbs {
	font-size: .8em;
	font-weight: 400;
	text-align: left;
	color: #11279b;
	margin: 0px 0 20px 0;
}
.breadcrumbs a {
	color: #11279b;
	padding: 1px 4px;
	border-radius: 6px;
}
.breadcrumbs a:visited {
	color : #075490;
}
.breadcrumbs a:after {
	content: "\00a0 \00a0 \02c3 ";
}
/* .breadcrumbs a:first-child:before {
	content: "\220E \00a0";
} */

.breadcrumbs a:hover, .breadcrumbs a:focus, .breadcrumbs a:active {
	text-decoration: none;
	background-color: #259dc5;
	color: #fff;
}
.pdfLnk:after {
	content: url(pdf-logo-sm.png);
}
/* memo type block links for sidebars or ... */
/* also see basics5 for small sections such as notes */

/* slightly rounded links for sidebar PDFs */
/* see signal analysis for sample use */

a.memoLnk {
	border-bottom: 1px dotted #075490;
	display: block;
	background-color: #dcdcdc;
	margin: 0px 0px;
	padding: 10px;
	border-radius: 12px;
}
a.memoLnkPlain {
	display: block;
	padding: 10px;
	border-radius: 12px;
}
a.memoLnk:hover, a.memoLnkPlain:hover {
	background-color: #259dc5;
	color: #fff;
}

/* has a soft smudged looking halo */
a.fancyLnkNew {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 15px;
	font-weight: 900;
	border-radius: 50%;	
	box-shadow: 0px 0px 30px rgba(153,153,0,.3);
}
/* @end */
/* @group basics3 - fancy or special purpose links - more links */

/* navMore links used extensively
   in old version navMore linked to CRT products
   in v3, most content links use a navMore style
   navMore also used in P7 routines and so is regLnk
   I don't like these but Joe does
*/

a:link.navMore, a:link.navMoreReg, a:link.navMoreRegB, a:link.navMoreLight {
	font-weight : 700;
	color: #11279b;
	padding: 1px 4px;
	border-radius: 6px;
	border-bottom: 1px dotted;
	border-bottom-color: #11279b;
}
a:visited.navMore, a:visited.navMoreReg, a:visited.navMoreRegB {
	color : #075490;
}
a:link.navMoreReg, a:visited.navMoreReg {
	font-weight: 500;
	border-bottom-color: #fff;
}
a:link.navMoreRegB, a:visited.navMoreRegB {
	border-bottom-color: #fff;
}

a:link.navMoreLight, a:visited.navMoreLight {
	color: #fff;
	font-weight: 900;
}
a:hover.navMore, a:focus.navMore, a:active.navMoreReg, a:hover.navMoreReg, a:focus.navMoreReg, a:active.navMoreRegB, a:hover.navMoreRegB, a:focus.navMoreRegB, a:active.navMoreReg, a:hover.navMoreLight, a:focus.navMoreLight, a:active.navMoreLight {
	text-decoration: none;
	background-color: #259dc5;
	color: #fff;
}

/* simple more with arrow off to right in text */
.moreLnk {
	font-size: .9em;
	padding: 1px 4px;
	border-radius: 6px;
}
.moreLnk:hover, .moreLnk:focus, .moreLnk:active {
	text-decoration: none;
	background-color: #259dc5;
	color: #fff;
}
.moreLnk:after {
	content: "\00a0\003E";
}

/* turns h3 headings into more links with arrows after them
	for headings on comfy room pages, sounds, new products
	arrow does not show initially, until hover
*/
.moreLnkH3s h3 a {
	padding: 1px 4px;
	border-radius: 6px;
} 
.moreLnkH3s h3 a:hover, .moreLnkH3s h3 a:focus, .moreLnkH3s h3 a:active {
	text-decoration: none;
	background-color: #259dc5;
	color: #fff;
}
.moreLnkH3s h3 a:hover:after {
	content: "\00a0\22ef\003E\00a0";
}

/* for misc buttons, such as home page */
/* note some sidebar links use a region plus link... finish this note... */

/* goes with main menu styling */
a.button1, a.button1moss1, a.button1rustyOrange, a.button1blue1, a.button1moss2,
a.button1gold, a.button1brushedsteel,
a.button1brass1, a.button1chrome1, a.button1gold1, a.button1bronze1
 {
	color: #000;
	font-size: 1.1em;
	background-color: #d9dddd;
	padding: 10px 20px;
	margin: 6px 0;
	display: inline-block;
	vertical-align: middle;
	border-radius: 8px;
	border: 2px solid;
	border-color: #fff;
	box-shadow: 1px 1px 6px rgba(0,0,0,.4);
}
a.button1moss1 {
	background-color: #899b61;	
	font-weight: 900;
	text-shadow: 0 0 1px rgba(256,256,256,.5);
}
a.button1moss2 {
	background-color: #b0bb77;	
	font-weight: 900;
	text-shadow: 0 0 1px rgba(256,256,256,.5);
}
a.button1rustyOrange {
	background-color: #d5995e;	
	font-weight: 900;
	text-shadow: 0 0 1px rgba(256,256,256,.5);
}
a.button1blue1 {
	background-color: #91b9dc;
	font-weight: 900;
	text-shadow: 0 0 1px rgba(256,256,256,.5);
}
a.button1gold {
	background-image: url(metalicGoldhoriz.jpg);
	background-repeat: no-repeat;
	background-position: center;
	border-color: #977b30; 
}
a.button1brushedsteel {
	background-image: url(metalicBrushedSteel.jpg);
	background-repeat: no-repeat;
	background-position: center;
	border-color: #8b8b8c; 
}
a.button1brass1 {
	background-color: #caa154;
	background-image: linear-gradient(45deg,  #e8d283,  #c2ab5b, #caa154, #e8d283,  #9b8537);
	border-color: #b68a38;
}
a.button1chrome1 { 
	background-color: #ebecf7;
	background-image: linear-gradient(45deg, #808080 0%, #EBECF7 20%, #808080 70%, #EBECF7 80%, #808080 100%);
	border-color: #808080;
}
a.button1bronze1 {
	background-color: #fbdca8;
	background-color: #f7ce8c;
	background-image: linear-gradient(45deg,  #8d4e18,  #b57a43, #d5a165, #f7ce8c,  #d5a165, #fbdca8, #b57a43);
	border-color: #c29032;
}


/* simple and clean */
a.button2 {
	font-weight: 900;
	background-color: #fff;
	padding: 6px 9px;
	border-radius: 12px;
}
a.button2 {
	background-color: #fff;
}
a.button1:hover, a.button1moss1:hover, a.button1moss2:hover, a.button1rustyOrange:hover, a.button1blue1:hover, a.button2:hover,
a.button1gold:hover, a.button1brushedsteel:hover, 
a.button1brass1:hover,
a.button1chrome1:hover,
a.button1gold1:hover,
a.button1bronze1:hover {
	color: #FFFFFF;
	background-color: #259dc5;
	background-image: none;
	border-color: #fff;
}



/* not used .moreLnkFancy1, .moreLnkFancy2 {
	font-size: .9em;
	padding: 2px 75px 0 0;
	background-image: url(tiny-dolphin-double.png);
	background-position: 0px;
}
.moreLnkFancy2 {
	background-image: url(tiny-spyhop-double.png);
}
.moreLnkFancy1:after, .moreLnkFancy2:after {
	content: "\00a0\25b6";
}
.moreLnkFancy1:hover, .moreLnkFancy2:hover {
	background-position: 230px;
} */









/* @end */
/* @group basics3 - fancy or special purpose links - image links */
/* imgLnk2 is for links on responsive images when the image needs containing -  goes on a instead of img */
/* usually for accessories - also see productSideBox for a container that is used for hydrophones */
/* both of these styles are links to enlargements (open the image overlay (magic box)) */

/* classic1, used for images that are links to another page */
/* apply to img */

.imgLnk {
	padding: 3px;
	text-decoration: none;
	border: 1px solid;
	border-color: #11279b;
}
a:visited .imgLnk {
	border-bottom-color: #075490;
}
/* classic2, used for image links to another page but go on a tag to contain image */
/* apply to a */
/* variation 3 is like 2 but floats until hover, then has a border
   used on main accessories page
 */
.imgLnk2, .imgLnk3 {
	text-decoration: none;
}
.imgLnk2 img, .imgLnk3 img {
	padding: 5px;
	border: 1px solid;
	border-color:  #11279b;
}
a.imgLnk2:visited img, a.imgLnk3:visited img {
	border-bottom-color: #075490;
}
a.imgLnk2, a.imgLnk3 {
	border-bottom: 0;
}
a.imgLnk3 img {
	border: 2px solid;
	border-color: transparent;
}
a.imgLnk3:hover img {
	border-color: #2181c4;
}
a:hover .imgLnk, .imgLnk2:hover img {
	border-color: #2181c4;
	background-color: #2181c4;
}

/* for script1, used for images which are links to an enlargement like magic box */
/* apply to img - usually hydrophone page */

.imgLnk7mb {
	text-decoration: none;
	border: 1px solid;
	border-color:  #075490;
	box-shadow: 0px 0px 15px rgba(0,0,0,.3);
}

/* for script2 - see accessory pages bluetooth, Zoom H1 to test */
/* and for external links, ie from other pages straight to enlargement */
/* apply to a tag */

.imgLnk7mb2 {
	text-decoration: none;
}
.imgLnk7mb2 img, .imgLnk7mbExt img  {
	border: 1px solid;
	border-color:  #075490;
	box-shadow: 0px 0px 15px rgba(0,0,0,.3);
}

.imgLnk7mbExt img  {
	border-color: #456a85; 
}

a:hover .imgLnk7mb, .imgLnk7mb2:hover img {
	border-color: #259dc5;
}

/* enlarges like the links on the MBX page */
a.imgLnk7mbExt img { transition: transform linear .2s 0s; }
a.imgLnk7mbExt:hover img {
	border-color: #259dc5;
	transform: scale(1.2);
	position: relative;
	z-index: 2;
}

/* 
	product tip triggers  -  looks kinda like a gear 
   and for feature-story (sample sound leadin) triggers
*/

.imgLnk7pt, .imgLnk7fs {
	border: 0;
}
.imgLnk7pt img, .imgLnk7fs img {
	border-radius: 50%;
	padding: 3px;
	border: 3px dotted #fff;  
	margin: 5px 30px 10px 0;
	background-color: #808080;
	background-image: linear-gradient(to top, #808080 0%, #EBECF7 50%, #808080 100%);
	box-shadow: 0px 0px 15px rgba(0,0,0,.2);
}
/* the feature story leadins will prob. all be photos so this is only a border */
.imgLnk7fs img {
	background-color: #456a85;
	background-image: linear-gradient(to top, #456a85 0%, #259dc5 50%, #456a85 100%);
}
/* @end */
/* @group basics4 - headings, text and image shadows */
h1, h2, h3, h4 {
	margin: 20px 0px;
	color: #222;
}
h1 { font-size: 1.6em; line-height: 1.2em;}
h1.pgTitle {
	margin-top: 0;
}
/* see hydrophone systems pages for example */
h1.pgTitle .pgTitleSuper {
	font-size: .85em;
}
/* see Recommended Reading page for example */
h1.pgTitle .pgTitleSub {
	font-size: .7em;
}

h2 { font-size: 1.4em; line-height: 1.4em;}
h3 { font-size: 1.2em; }
h3 .pgTitleSub {
	font-size: .7em;
}
h4 { font-size: 1em; }
h5 { font-size: 1em; }

.h5caption {
	font-size: .9em;
}
/* for product names in lists, removes some spacing, see main hydrophone page */
.h4caption {
	margin: 0 0 3px 0;
	font-weight: 700;	
	text-shadow: 0 0 10px rgba(0,0,0,.2);
}

.wrapQuadToned h5:first-child {
	margin-top: 0px;
}

.fancyTxt0 {
	text-shadow: 0px 1px 3px rgba(0,0,0,.1);
}
.fancyTxt {
	text-shadow: 0px 1px 3px rgba(0,0,0,.3);
}
.fancyTxt2 {
	/* color: #ffcc33; */
	text-shadow: 0px 0px 6px rgba(255,204,51,.8);
}

.leftBorder0 {
	border-left: 1px solid #ccc;
}

.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}
/* use when there are borders  */
.scalable90 {
	height: auto !important;
	width: auto !important;
	max-width: 90%;
}

.fancyBox {
	box-shadow: 2px 2px 9px rgba(0,0,0,.3);
}
.boxLiteShadow {
	box-shadow: 2px 2px 5px rgba(0,0,0,.3);
	margin: 10px;
	border: 10px white solid;
}
/* this style can't have border or it will look too much like imgLnk7mb */
.shadowOnlySubtlePlusMargin {
	margin: 10px 20px 15px 10px;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 10px rgba(0,0,0,.2);
}
.indQuote {
	margin-left: 30px;
}


/* @end */
/* @group basics4 - simple floats, char formatting */
.vCtr {
	vertical-align: middle;
}
.ctrTxt {
	text-align: center;
}
.laTxt {
	text-align: left;
}
.raTxt {
	text-align: right;
}
.fltRt {
	float: right;
}
/* note the styles with right or left margins do not float for mobile */
/* the rest do - but the ones with margins are assumed to be larger */
.fltRtwlm {
	float: right;
	margin-left: 10px;
}
.fltLft {
	float: left;
}
.fltLftwrm {
	float: left;
	margin-right: 10px;
}
.clrBoth {
	clear: both;
	height: 1px;
	line-height: .1em;
	font-size: .1em;
}
.clrRight {
	clear: right;
	height: 0px;
	line-height: .05em;
	font-size: .1em;
}
.clrLeft {
	clear: left;
	height: 0px;
	line-height: .05em;
	font-size: .1em;
}
.sm7 {
	font-size: .7em;
	font-weight: 300; 
}
.sm75 { font-size: .75em; }
.sm8 { font-size: .8em; }
.sm85 { font-size: .85em; }
.sm9 { font-size: .9em; }
.sm95 { font-size: .95em; }
.smCaps9 {
	font-size: .9em;
	font-variant: small-caps;
}
.smCaps95 {
	font-size: .95em;
	font-variant: small-caps;
}
.lg11 { font-size: 1.1em; }
.lg12 { font-size: 1.2em; }
.lg13 { font-size: 1.3em; }

.arial {
	font-family: Arial, Helvetica, sans-serif;
}
.crtnam {
	font-family: "copperplate", Georgia, Helvetica, sans-serif;
	font-weight: 700;
}
.smGrayBold {
	font-size: .9em;
	font-weight: 700;
	color: #666;
}
.smCaps {
	font-variant: small-caps;
}
.bodynote {
	color: #333;
	font-size: .8em;
	font-family: Arial, Helvetica, sans-serif;
}
/* used in sounds section */
.accentColor1 {
	color: #44413c;
}
.accentColor2 {
	color: #5f5f2f;
}
.accentColor3 {
	color: #69764b;
}
.accentColor4 {
	color: #555;
}
.rustyOrange {
	color: #b45128;
}
.rustyOrangeBkg {
	background-color: #b45128;
}
.moss1 {
	color: #899b61;
}
.moss1Bkg {
	background-color: #899b61;	
}
.moss2 {
	color: #9daa54;	
}
.moss2Bkg {
	background-color: #9daa54;	
}
.dkGray {
	color: #555;
}
.dkBlueBkg {
	background-color: #465966;
	color: #fff;
}
.ltGrayBkg {
	background-color: #efefef;
}
.bronzeBkg {
	background-color: #c66c22;
	color: #fff;
}

/* this may not be used - think it is now*/
.attnAC1 {
	color: #5c4c58;
	font-weight: 900;
	text-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.spread16 {
	line-height: 1.6em;
}
.roundedPadded {
	border-radius: 12px;
	padding: 1px 20px;
}
/* @end */
/* @group basics5 - small sections such as notes or product boxes or sidebar callouts */

/* also see .sidebar2fwht for a float with a built in light background & border */
/* also see basics3 memo links for formatted areas if all one link */

/* for the 'contact us for pricing' type link bottom of page usually */
.ctrNoteGrayWhiteRounded {
	text-align: center;
	margin: 20px auto;
}
.ctrNoteGrayWhiteRounded p {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	padding: 15px 30px;
	border-radius: 20px;
	background-color: #efefef;
	border: 4px solid #fff;
}

/* similar to product side box but for page bodies
   can be used for photo borders or boxes with captions
*/
.ctrNoteWhiteRounded {
	text-align: center;
	width: auto;
	margin: 0 auto;
	padding: 15px 20px;
	border-radius: 6px;
	background-color: #fff;
	border: 1px solid #ccc;
	display: inline-block;
}

/* for styling product photo boxes - used inside sidebar2f */
/* sidebar2f is also used when no background or border desired */

.productSideBox {
	background-color: #fff;
	border: 1px solid #ccc;
	text-align: center;
	font-size: .8em;
	position: relative;
	padding: 10px;
}
/* use this technique when link has padding but not this time 
.productSideBox img {
	position: static;
	width: 98% !important ;
	padding: 1%;
}
*/

/* for announcements */

.ctrNoteSeaGrad1 {
	background-color: #3e8d90;
	background-image:  linear-gradient(20deg, #334e51, #3e8d90, #465966, #6dabe3, #3f5880, #333d5e );
	background-image: linear-gradient(20deg, #808080 0%, #EBECF7 50%, #808080 100%);
	padding: 12px;
	border-radius: 16px;
}
.ctrNoteSeaGrad1 p {
	margin: 0;
	padding: 20px;
	background-color: #fff;
	color: #000;
	border-radius: 12px;
}





/* for comfy room symbols above hydrophone systems */

.crsym, .crsym5 {
	display: block;
	text-align: center;
	margin: 0 auto 20px auto;
	max-width: 400px;
	color: #183343;
}
.crsym div {
	display: inline; float: left;
	width: 25%;
}
.crsym5 div {
	display: inline; float: left;
	width: 20%;
}
.crsym div img, .crsym5 div img {
	width: auto;
	height: auto;
	max-width: 100% !important;
	max-height: 100% !important;
}



/* @end */
/* @group basics5 - lists */
.listDblSpc li {
	margin-top: 15px;
}
.listDblHalfSpc li {
	margin-top: 6px;
}

/* these line up flush left */
.listLogo, .listWhiteDot {
	padding: 0 0 1em 0px;
	list-style: none;
}
.listLogo li, .listWhiteDot li {
	padding: 0 0 1em 30px;
	margin: 0;
	text-indent: 0px;
	background-image: url(../assets/crt-logo-tiny.png);
	background-repeat: no-repeat;
	background-position: left 4px;
}
.listWhiteDot li  {
	background-image: url(../images/whiteDot.png);
}
.listLogo li a, .listWhiteDot li a {
	padding: 0 3px 0 3px;
}
.listLogo li li, .listWhiteDot li li {
	list-style: disc;
	background-image: none;	
	padding-left: 0;
}
.listLogo li li:first-child {
	margin-top: 15px;
}

/* these 3 styles are indented to line up with a regular list */
.listLogo2, .listGrayBall, .listGrayBall2 {
	padding: 0px;
	list-style: none;
}
.listLogo2 li, .listGrayBall li, .listGrayBall2 li {
	padding: 0 0 1em 50px;
	margin: 0;
	text-indent: 0px;
	background-image: url(../assets/crt-logo-tiny.png);
	background-repeat: no-repeat;
	background-position: 20px 4px;
}
.listGrayBall li {
	background-image: url(../assets/gray-bullet.png);
}
.listGrayBall2 li {
	background-image: url(../assets/gray2-bullet.png);
}
.listLogo2 li li, .listGrayBall li li, .listGrayBall2 li li {
	list-style: disc;
	background-image: none;
	padding-left: 0;	
}
.listLogo2 li li:first-child, .listGrayBall li li:first-child, .listGrayBall2 li li:first-child {
	margin-top: 15px;
}

/* this is good for sidebars */
.list0 {
	padding: 0 0 0 1.5em;;
}
.list0 li {
	padding: 0;
	margin: 0;
}
/* for lists nested inside something fancy */
.listReg {
	list-style: disc;
}
.listReg li {
	background-image: none;
	padding: 0;
}
.listPlain {
	list-style: none;
}
.faqdl dt {
	font-weight: 700;
	margin: 12px 0 8px 0;
}
.faqdl dd {
	margin-bottom: 24px;
}


/* @end */
/* @group basics6 - special sections - complicated multi-columns for body - proportional and fixed and floating areas */
/* may be used in conjunction with the 2f sidebar for individual accessory pages */

/* page body layout of 50-50 two equal sections if there is room for them to be wide enough - 
   otherwise they stack - stacking is handled with responsive adjustments 
   has wide padding on right side because the 50-50 may be used with the magic box overlay
   which expands past container when hovered on 
   use 50n for a nested 50-50 region - see below

   w is for wide, collapses sooner like the reg so a 50-50 can be used inside it if ok for cols to get skinny
   howeer is only used is only used for one side (left side) and is used 
	with 25(1) and 25(2) cols on many hydrophone pages with 1 col of stats
   note the sizes of left 50 and 25(1) (44 + 24=68) and 2f (29) are so they clear with longer right column 
   see the sq26-h1b page for example of how they need to clear
   - so there is no need for styling the 50w child styles
   containers must be nested for the margins
   
   tight uses full width beautifully, also collapses pretty early
*/
.wrapContainerLeft50 {
	float: left;
	width: 44%;
}
.wrapContainerLeft50w, .wrapContainerLeft50tight {
	float: left;
	width: 48%;
}
.wrapContainerLeft50:nth-child(1) {
	margin: 0 30px 0 0;
	border-right: 1px dotted #ccc;
}
.wrapContainerLeft50:nth-child(2) {
	margin: 0 0 0 10px;
}
.wrapContainerLeft50tight:nth-child(1) {
	margin: 0 2% 0 0%;
}
.wrapContainerLeft50tight:nth-child(2) {
	margin: 0 0 0 2%;
}
/* variation on 50-50 
   1st col 50w then 2 skinny cols
   don't use these for four columns - responsive wrapping is different 
*/
.wrapContainerLeft25w1, .wrapContainerLeft25w2 {
	float: left;
	width: 24%;
	margin: 0 0 0 1%;
}

/* for nested 50-50 sections 
	such as on hydrophone pages with 2 cols of stats thus they use
	a 60/40 plus a nested 50/50 for the body instead of 50 25(1) 25(2)
	at medium widths these columns stack
	at wide (above 1600) and narrower (below approx 100) they are side by side
	this is to accommodate the changes in the left side with the hydrophone specs
*/
.wrapContainerLeft50n {
	float: left;
	width: 49%;
}
.wrapContainerLeft50n:nth-child(1) {
	margin: 0 1% 0 0;	

}

/* page body layout of 2/3 on left and 1/3 on right if room 
   does not make allowances for magic box or any images hanging over container 
   column spacing narrower - may be nested inside 50-50 or 60-40 region 
   note both column in a 60/40 pair or a 35/65 have same style, the 1st style */
.wrapContainerLeft65:nth-child(1) {
	float: left;
	width: 63%;
	padding: 0 5px 0 0;
	border-right: 1px dotted #ccc;
}
.wrapContainerLeft65:nth-child(2) {
	float: left;
	width: 33%;
	padding: 0 0 0 10px;
}
/* page body layout of 1/3 on left and 2/3 on right if room */
/* does not make allowances for magic box or any images hanging over container */
/* column spacing narrower - may be nested inside 50-50 or 60-40 region */
.wrapContainerLeft35:nth-child(1) {
	float: left;
	width: 33%;
	padding: 0 5px 0 0;
}
.wrapContainerLeft35:nth-child(2) {
	float: left;
	width: 63%;
	padding: 0 0 0 10px;
}

/* page body layout of 60% on left and 40% on right if room */
/* has med margins, no left borders - stacks at 1020 */
/* the 'nc' version allows narrow columns, used for row on home with just two buttons */

.wrapContainerLeft60:nth-child(1), .wrapContainerLeft60nc:nth-child(1) {
	float: left;
	padding: 0 2% 0 0;
	width: 57%;
}
.wrapContainerLeft60:nth-child(2), .wrapContainerLeft60nc:nth-child(2) {
	float: left;
	width: 37%;
	padding: 0 0 0 2%px;
}

/* 60-40 regions for highlighted areas */
/* if both to be same color, wrap in it */
/* see contact form */
/* note there is also a '60nc' on home page */

.wrapContainerLeft60c:nth-child(1){
	box-sizing: border-box;
	width: 60%;
	float: left;
	padding: 0px 20px;
}
.wrapContainerLeft60c:nth-child(2){
	box-sizing: border-box;
	float: left;
	width: 40%;
	padding: 0 20px 0 10px;
}


/* page body split into thirds */
.wrapContainerLeft33 {
	float: left;
	width: 31%;
	padding: 0 1%;
}
.wrapContainerLeft33:nth-child(1) {
	padding: 0 1% 0 0;
}




/* @end */
/* @group basics6 - special sections - repeating areas  - product boxes */
/* this is for alternative striping down page - 
   used for comfy rooms and about pages and accessories */

/* two toned (alternating white bkg) rows 
	may contain proportional or fixed width product photos that float to the left or the right 
   image floats to right side of page unless L variation used
*/

.wrapTwoToned, .wrapTwoToned2, .wrapTwoToned2L {
	padding: 10px;
	display: block;
}
.wrapTwoToned:nth-child(even), .wrapTwoToned2:nth-child(even), .wrapTwoToned2L:nth-child(even) {
	background-color: #fff;
}
.wrapTwoToned div, .wrapTwoToned2 div, .wrapTwoToned2L div {
	margin: 20px 0 10px 20px;
	width: 35%;
	float: right;
}
.wrapTwoToned2L div {
	float: left;
}
.wrapTwoToned div img, .wrapTwoToned2 div img, .wrapTwoToned2 div img {
	float: right;
}

/* TwoToned2 is fixed width - use this with the old smaller thumbnails, eg suction cups */
/* TwoToned2L also used on main accessories page inside accordions */
/* unlike the comfy room pages, images aren't tall enough and text wraps... */

.wrapTwoToned2 div:first-child, .wrapTwoToned2L div:first-child {
	width: 120px;
	text-align: center;
}
.wrapTwoToned2L div:nth-child(n+2) { 
	width: auto !important;
	float: none;
	margin-left: 160px;
}

/* these rows are used elsewhere individually to highlight areas */
/* to individually add a white row to match */
.wrapWhite {
	background-color: #fff;
	padding: 10px;
	display: block;
}
.wrapWhiteRounded {
	background-color: #fff;
	padding: 1px 20px;
	display: block;
	border-radius: 12px;
}
/* to individually add a ltgray row to match */
/* all of these also be used elsewhere but has no padding */
.wrapLtGray {
	background-color: #edefef;
	padding: 10px;
	display: block;
}
.wrapLtGrayRounded {
	background-color: #edefef;
	padding: 1px 20px;
	display: block;
	border-radius: 12px;
}
/* to individually add a regular row to match */
.wrapReg {
	padding: 10px;
	display: block;
}
.wrapRegRounded {
	padding: 1px 20px;
	display: block;
	border-radius: 12px;
}
/* for an individual different block inside a quad */
.wrapWhiteGray1Border {
	background-color: #fff !important;
	display: block;;
	border-radius: 12px;
	border: 6px dotted #979fa0;
}

/* Quad toned - to alternate 4x down screen 
	does not have built in formatting for images and sidebars
	so the 'rows' can be more custom - use sidebar1fwf etc
	used on sounds page	
*/
.wrapQuadToned {
	padding: 10px;
	display: block;
}
.wrapQuadToned:nth-child(4n+1) {
	background-color: #fff;
}
.wrapQuadToned:nth-child(4n+3) {
	background-color: #edefef;
}


/* built-in structure for main sounds page */

.quadRight .wrapQuadToned div  {
	float: right;
	width: 300px;
	margin: 0 0 0 20px;
	text-align: center;
	font-size: .9em;
}
.quadRight .wrapQuadToned {
	border-bottom: 1px solid #ccc;
}

/* Quad toned - no margin - images will go to outer edge */
/* elements that need it have margin */
/* gets applied to outer wrapper, not each div */
/* For New Products */

.wrapQuadFull {
	display: block;
}
.wrapQuadFull div:nth-child(4n+1) {
	background-color: #fff;
}
.wrapQuadFull div:nth-child(4n+3) {
	background-color: #edefef;
}
.wrapQuadFull p, .wrapQuadFull H3, .wrapQuadFull h4 {
	margin: 13px 10px 13px 20px; 
}

/* @end */
/* @group basics6 - special sections - specifications, tabular data */

/* very simple tables, 2 cols or sometimes more
   for hydrophone or accessory specs 
   plus styles for related info like hydrophone options
*/
.specTabl0, .specTabl2, .specTablCR {
	font-size: .9em;
}
.specTabl0 caption, .specTabl2 caption, .specTablCR caption {
	font-size: 1.1em;
	font-weight: 900;
	padding: 6px;
	border-bottom: 1px dotted #ccc;
	background-color: #929d9d;
	color: #fff;
	text-align: center;
}
/* look at this when doing kokua samples, this appears to be repeating */
.specTabl2 caption {
	font-size: 1.1em;
	font-weight: 900;
	padding: 6px;
	text-align: center;
}
.specTabl0 tr, .specTabl2 tr, .specTablCR tr {
	border-bottom: 1px dotted #ccc;
}
.specTabl0 tr:nth-child(odd), .specTablCR tr:nth-child(odd) {
	background-color: #fff;
}
.specTabl0 td, .specTabl0 th,
.specTabl2 td, .specTabl2 th {
	padding: 5px 10px;
	text-align: center;
}
.specTabl0 th, .specTabl2 th {
	font-size: .9em;
	text-align: right;
}
/* for the footnotes below the spec table */
.specTabl0notes {
	font-size: .85em;
}
.specTabl2 {
	background-color: #fff;
}
.specTabl2 tr:first-child {
	font-size: 1.1em;
	font-weight: 900;
	padding: 6px;
	border-bottom: 1px dotted #ccc;
	text-align: center;
}
.specTabl2 td:nth-child(2) {
	background-color: #f5f5f5;
	border-right: 1px dotted #929d9d;
}
.specTabl2 td:nth-child(3) {
	background-color: #dedede;
	border-right: 1px dotted #929d9d;
}
.specTabl2 td:nth-child(4) {
	border-right: 1px dotted #929d9d;
}
.specTabl2 td:nth-child(5) {
	background-color: #ebecf7;
	border-right: 1px dotted #929d9d;
}

.hydroBatteryBox {
	text-align: center;
	font-size: .9em;
	box-shadow: 2px 2px 5px rgba(0,0,0,.3);
	margin: 10px;
	border: 10px white solid;
}

.lowFrequencyTable {
	font-size: .9em;
	line-height: 1.2em;
	border: 13px solid #fff;
}
.lowFrequencyTable th {
	text-align:center;
}
.lowFrequencyTable td {
	padding-left: 20px;
}

/* for main comfy rooms .specTablCR started above */

.specTablCR th img {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}


/* @end */
/* @group basics7 - media - video */
.wrapVideo {
	position: relative;
	padding-bottom: 56.25%; */ 16:9 radio */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 1120px;
	max-height: 630px;
}
.wrapVideo iframe,
.wrapVideo object, 
.wrapVideo embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 1120px;
	max-height: 630px;
}
/* @end */

/* @group basics9 - tagline, footer, page bottom */

.wrapContentBot {
	background-image: url(banner-bkg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
	border-bottom: 2px solid #fff;
	margin: 2px 0 0 0;
}
.wrapContentBot .steelBar:nth-of-type(odd) {
	margin-bottom: 36px;
}
.wrapTagline {
	border-top: 2px solid #fff;
	background-color: #6d8385;
	border-bottom: 1px solid #ccc;
	color: #fff;
}
.wrapTagline h4 {
	letter-spacing: 0.4em;
	word-spacing: .2em;
	margin: 18px 10px;
	font-size: 1.1em;
	text-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
.crtlogoSpyhop {
	background-image: url(../assets/crt-logo-orca-spyhop-double.png);
	background-position: 0px;
	height: 105px;
	width: 112px;
	border: 0;
}
.crtlogoSpyhop:hover {
	background-position: 112px;
}
.wrapPageBot {
	padding-top: 20px;
	background-color: #cacece;
}
.wrapPageBot img {
	margin: 10px;
}
.wrapFooter {
	background-color: #dcdcdc;
	padding: 20px 0 50px 0;
}
.termsOfUse {
	text-align: left;
	font-size: .8em;
	line-height: 1.4em;
	margin: 40px 0 0 30px;
}
.kokua {
	float: left;
	background-image: url(kokua-commondolphin.png);
	background-position: 0px;
	height: 23px;
	width: 34px;
	margin-top: 20px;
	margin-right: 25px;
	border: 0;
}
.kokua:hover {
	background-position: 34px;
	background-color: transparent;
}
.artemis {
	float: right;
	text-align: center;
	width: 140px;
	margin: 25px 50px 0 0;
}
.artemisLogo {
	float: right;
	background-image: url(artemisComputingLogo.png);
	background-position: 0px;
	height: 60px;
	width: 70px;
	border: 0;
}
.artemisLogo:hover {
	background-position: 70px;
}

/* @end */

/* this is good for headings like In Production, matches sea colored New! oval */

.eyeCandySeaGrad1 {
	color: #fff;
	background-color: #ccc;
	background-image:  linear-gradient(20deg, #334e51, #3e8d90, #465966, #6dabe3, #3f5880, #333d5e );
	padding: 3px 0;
	border-radius: 12px 0 0 12px;
}
.eyeCandySeaGradCircle {
	color: #fff;
	background-color: #ccc;
	background-image:  linear-gradient(20deg, #334e51, #3e8d90, #465966, #6dabe3, #3f5880, #333d5e );
	padding: 12px;
	border-radius: 50%
}


.devNote1, .devNote1 a {
	color: #666;
	font-size: .9em;
}
.devNote1 a {
	font-family: "Courier New", Courier, monospace;
}
.devNote2 {
	color:#006600;
	font-size: .9;
	font-style: italic;
}
.devNoteToDo {
	color: red;
}

/* utility rule */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}