/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
body div,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html,
body {
  height: 100%;
}

/*
  Override the default (display: inline) for
  browsers that do not recognize HTML5 tags.

  IE8 (and lower) requires a shiv:
  http://ejohn.org/blog/html5-shiv
*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

b,
strong {
/*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
*/
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

li {
/*
  For IE6 + IE7:

  "display: list-item" keeps bullets from
  disappearing if hasLayout is triggered.
*/
  display: list-item;
  list-style: none;
}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom; text-align: left;}
td, caption {font-weight: normal; vertical-align: top; text-align: left;}

.hr1 {
  border-top: 1px #ccc solid;
  clear: both;
  height: 0px;
  margin: 5px 5px 30px 5px;
}

.hr2 {
  border-bottom: 1px #ccc solid;
  clear: both;
  height: 0px;
  margin: 80px 5px 10px 5px;
}

/*hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}*/

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em; vertical-align: baseline;}
sub {bottom: -0.25em;}

svg {
/*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
*/
  overflow: hidden;
}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack 
body {font: 13px Helmet, Freesans, sans-serif;}*/

body {
  font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

/* Global Structure
---------------------------------------- */

	/* Header */
	header{
		position:relative;
		}
	.block {
		background:#BE9E59;
		border-bottom: solid 1px #A58951;
		height:19px;
	}
	/* Content */
	section#content {
		position:relative;
		}

.whiteBG { 
	background:#fff;
}

aside {
	background:url(../images/aside-bg.gif) left top repeat-x #15263B;
	min-height:350px;
	color:#b1b1b1;
	border-top: 2px solid #BF9E5A;
}
aside .indent {
	padding:20px 0 10px 0;
}

aside a {color: #b1b1b1;text-decoration:none;}
aside a:hover {color: #BF9E5A;text-decoration:none;}
/* Footer
---------------------------------------- */
footer {
	height:12px;
	font-size:9px;
	font-style: normal;
	color:#636363;
	padding:2px;
	margin: 0px;
	background:#fff;
	border-top: 2px solid #BF9E5A;
	clear: both;
}	
	footer a {
		font-size:9px;
		color:#636363;
		text-decoration:none;
	}
		footer a:hover {
			color:#612020;
			text-decoration:none;
		}

/* Margin & Padding */
.margin {
	margin-top:30px;
}

/* Left & Right alignment */

.fleft { float:left;}
.fright { float:right;}

.alignleft { text-align:left;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}


/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #BF9E5A; color: #fff; text-shadow: none;}
::selection {background: #BF9E5A; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* `Headings
----------------------------------------------------------------------------------------------------*/

h1 {
	margin: 15px 150px 0px 150px;
	padding: 0;
	font-size: 25px;
	font-weight: bold;
	color:#BF9E5A;
}

h1 .tollFree {
	color: #15263B;
}

h1 .tollFreeNum {
	color: #15263B;
}

h2 {
	font-size: 23px;
}

h3 {
	font-size: 21px;
	color:#BF9E5A;
}

.makeitfit {
	padding:0;
	margin:-22px 0px 0px 0px;
}


h4 {
	font-size: 19px;
	color:#BF9E5A;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 15px;
}

/* `Graphics
----------------------------------------------------------------------------------------------------*/
.logo {
	padding-top: 5px;
}
.logo a {
	display:block;
	text-indent:-5000px;
	width:230px;
	height:95px;
	background:url(../images/cpix_logo.jpg) left top no-repeat;
}
.slogan {
	padding:0px;
	margin: 0 auto;
	display:block;
	text-indent:-5000px;
	width:220px;
	height:60px;
	/*background:url(../images/slogan.png) left top no-repeat;*/
}
.contact_bg {
	text-align:center;
	padding:10px;
	border:#eeeeee solid 1px;
	border-radius:6px 6px 6px 6px;
	-moz-border-radius:6px 6px 6px 6px;
	-webkit-border-radius:6px 6px 6px 6px;
	background: #fafafa;
}
.custom_logo {
	float:right;
	padding: 5px 0px 0px 0px;
	margin-left:0px;
}

/* `Product jQuery Thumbs
----------------------------------------------------------------------------------------------------*/

#products {padding: 30px 0;}
.tab-content .grid_3{display: block;background: transparent url(/external/images/alpha-50-fff.png);width: 220px;padding: 10px 0;-moz-box-shadow: 0px 0px 3px #CCC;-webkit-box-shadow: 0px 0px 3px #CCC;box-shadow: 0px 0px 3px #CCC;}
.tab-content_20 .grid_3{margin-bottom: 20px;}
#products img{display:block;margin: 0 auto;width: 200px;height:146px;}
.tab-content {background:none;text-align:left;padding:0;}
.p-container{position:relative; overflow:hidden;}
.expand{padding: 10px;position:absolute;bottom:0;left: 10px;height: 126px;width: 180px;background: #FFF;}
.expand h3{color:#000000;font: normal 1em Arial, Helvetica, sans-serif;text-transform: uppercase;text-align:left;font-weight: bold;line-height: 1em;margin:0;padding:0 0 0.75em 0;}
.expand p{
	font-family: Arial, Helvetica, sans-serif;
	color :#636363;
	font-size :0.9em;
	margin:0;
	padding:0;}
.hand {
	cursor: pointer;
}

.clickHere {
	font-weight: bold;
	text-decoration:underline;
}

/* `Landing Page Form
----------------------------------------------------------------------------------------------------*/

.formTextWhite{
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:normal;
}

#Text3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000000;
	line-height:15px;
}

.formBtn table{
	float: right;
}

.formBtnRed{
	color:#15263B;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float: right;
	height:15px;
	padding:4px;
    cursor: pointer;
}

/* `CirclePix Social Media
----------------------------------------------------------------------------------------------------*/

	.socials {
		padding-top:6px
	}
	.socials li {
		padding-bottom:15px;
	}
	.socials li a {
		display:block;
		color:#b1b1b1;
		text-decoration:none;
		height:36px;
		padding:15px 0 0 67px
	}
		a.facebook {
			background:url(../images/facebook.jpg) left top no-repeat;
		}
		a.facebook:hover {
			color:#fff;
			background:url(../images/facebook-hover.jpg) left top no-repeat;
		}
		.youtube {
			background:url(../images/youtube.jpg) left top no-repeat;
		}
		.youtube:hover {
			color:#fff;
			background:url(../images/youtube-hover.jpg) left top no-repeat;
		}
			.watermark {
				background:url(../images/aside_bg.gif) bottom left no-repeat;
		}

/* `Spacing
----------------------------------------------------------------------------------------------------*/

/*ol {
	list-style: decimal;
}

ul {
	list-style: disc;
}

li {
	margin-left: 30px;
}
*/

.list1 {
		margin-top:-10px;
		padding-right:15px
	}
		.list1 li {
			line-height:3.333em;
			background:url(../images/aside-border-bg.gif) left bottom repeat-x;
		}
			.list1 li a {
				color:#636363;
				text-decoration:none;
			}
				.list1 li a:hover {
					color:#612020;
					text-decoration:none;
				}
	.list1 .last {
		background:none;
	}


/* content */

/* jQuery Carousel
----------------------------------------------------------------------------------------------------*/
.main_container {
	margin :0 auto;
	background :#fff;
	border-top :solid 3px silver;
}

.heading {
	height :100px;
}

.heading h1 {
	font-family :Arial ;
	margin :10px 0 0 0;
	padding :0;
}

.heading h2 {
	font-family :Arial, Verdana ;
	font-size :14px;
	font-weight :normal ;
	margin :10px 0 40px 0;
	padding :0;
	color : #888 ;
}

select {
	width :150px;
}





p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 20px;
}



/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}

