/* css cotic body style - white */

*{padding: 0; margin: 0;}

html, body {
	color:#1A1A1A;
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 95%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	quotes: '\201C' '\201D' '\2018' '\2019';
}
body {background-color:white;}
html {background-color:#BCBCBC;}
html.dark {background-color:#666666;}
#wrapper {background-color:white;}
@-moz-document url-prefix() {
	body {
		width:100%;
		overflow-x: hidden;
	}
}

p {
	margin-top: 1em;
	margin-bottom: 1em;
}

blockquote {
	margin-left: 15%;
	margin-right: 15%;
}

img {
	font-size: 0.8em;
	border: 0px;
}

.stretch {
	width:100%;
	height:auto;
}

td {border-collapse: collapse;} /* make IE behave normally for tables */

del {color: #999999;}

hr {
	border: 0; /* noshade */
	height: 6px;
	margin-top: 19px;
	margin-bottom: 16px;
    -webkit-box-shadow: 0px 6px 13px -1px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 6px 13px -1px rgba(0,0,0,0.05);
    box-shadow: 0px 6px 13px -1px rgba(0,0,0,0.05);
    background: white;
    border-bottom: #eee solid 1px;
}

hr.plain {
	background: #bbb;
	height: 1px;
	margin-top: 0;
	margin-bottom: 19px;
}


h1, h2, h3 {
	font-weight: normal;
	padding: 0;
	margin: 0;
}

.titles, h1, h2 {
	position:relative;
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.9em;
	left: 10px;
	width : 90%;
	margin-left: 20px;
}

.reading, .viewing {
	position:relative;
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.9em;
	left: 50%;
	margin-left: -300px;
	width: 600px;
	text-align: justify;
}
.width660 {
	left: 50%;
	margin-left: -330px;
	width: 660px;
}
.medium_window .width660 {
	left: 10px;
	margin-left: 0;
	width : 96%;
}
.small_window .width660 {
	left: 10px;
	margin-left: 0;
}
.small_window .reading, .small_window .viewing {
	left: 10px;
	margin-left: 0;
	width : 96%;
}

.reading2, .buy, .availability
{
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.9em;
}

.buy {
	right: 10px;
	background: #bbb;
}

.buy, .availability, .financemodal {
	position: absolute;
	top: 100px;
	width: 200px;
	z-index: 10;
	padding-left: 10px;
	padding-right: 10px;
	opacity: 0.90;
}
.availability {
    width: 500px;
    z-index: -11;
    left: 50%;
    margin-left: -250px;
    background: #dddddd;
	opacity: 0.98;
}
.financemodal {
    width: 660px;
    z-index: -11;
    left: 50%;
    margin-left: -330px;
    background: #ccc;
    opacity: 0.99;
}

.availability.modal {
    border: 1px solid #ff6600;
    -webkit-box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
    -moz-box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
    box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
    display: none
}

.financemodal.modal {
    border: 1px solid #ff6600;
    -webkit-box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
    -moz-box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
    box-shadow: 14px 52px 148px 22px rgba(0,0,0,0.75);
}
.availability th,
.availability td
{
    padding: 4px;
}
.availability th:first-child,
.availability td:first-child
{
    width: 400px;
}
.availability tr:nth-child(even) td:first-child {background: #EEE}
.availability tr:nth-child(odd) td:first-child {background: #FFF}

.availability h2,
.financemodal h2 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2em;
    padding: 0;
    left: 2px;
}
#check_availability {display: none;}
#show_finance {display: none;}

/* keep modals on screen, if window big enough */
/* @media screen and (min-height: 860px) { used when too many Jeht options */
@media screen and (min-height: 780px) {
    .availability.modal, .financemodal.modal {
        position: fixed;
        top: 20px;
    }
}
/* @media screen and (min-height: 790px) {
    .availability.modal, .financemodal.modal {top: 40px;}
}
@media screen and (min-height: 850px) {
    .availability.modal, .financemodal.modal {top: 95px;}
}
@media screen and (min-height: 880px) {
    .availability.modal, .financemodal.modal {top: 115px;}
} */

@media screen and (min-height: 880px) {
    .availability.modal, .financemodal.modal {top: 90px;}
}
@media screen and (min-height: 920px) {
    .availability.modal, .financemodal.modal {top: 110px;}
}

.thirdnav.narrow {min-width: 79px}
.thirdnav {min-width: 103px}
.buy hr, .thirdnav hr {margin-left:-10px;margin-right:-10px; }
.thirdnav a {
	color: #eee;
	text-decoration: none;
	cursor: pointer;
}
.thirdnav a img {
    border-radius: 8px;
}
.thirdnav a:hover {
	color: white;
}
.thirdnav a:hover img {
	opacity: 0.8
}
.thirdnav .current a {
	color: black;
	cursor: default;
}
.thirdnav .current a:hover img {
	opacity: 1
}

.reading a, .reading2 a, .titles a, h1 a, h2 a, h3 a, .buy a {
	text-decoration: none;
	color: #000090;
}
.reading a:visited, .reading2 a:visited, .titles a:visited, h1 a:visited, h2 a:visited, h3 a:visited, .buy a:visited {
	text-decoration: none;
	color: #68204D;
}
.reading a:hover, .reading2 a:hover, .titles a:hover, h1 a:hover, h2 a:hover, h3 a:hover, #TB_window a:hover, .buy a:hover {
	text-decoration: none;
	background: transparent url(/cotic_menu_05/decoration/orangepixel.gif) repeat-x 0 1em;
	color: #000000;
}

/* bullet point styling override for most browsers (IE has conflict with PNG fix) */
.reading ul, [dummy] {
	list-style: none;
	margin: .5em 0 .5em 0; 
	padding: 0px;
}
.reading ul li, [dummy] {
	line-height: 1.3em;
	padding-left: 1.0em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	background: transparent url(/cotic_menu_05/decoration/square.gif) no-repeat 2px 0.8em;
}
.reading ul ul {
	margin: .5em 0 .5em 1em; 
}
.reading ul li.clear, [dummy] {background-image: url();}
/* end of bullet point styling */

.reading ul.size_controls ul {
	margin: .5em 0 0 1em; 
}

.reading span.cotic-logo {
	display: inline-block;
	_display: inline;
	outline: none;
	text-indent: -5000px;
	background: url(/cotic_menu_05/decoration/cotic_tiny.png) no-repeat;
	width: 85px;
	height: 12px;
	vertical-align: -10%;
}

.magquote {
	font-style: italic;
	font-weight: 600;
	font-size: 1em;
}

.magname {
	color: #444444;
}

.cyquote {
	font-style: italic;
	font-weight: 600;
	font-size: 0.8em;
	background-color: #c1cfdb;
	padding: 0 7px;
	border-radius: 5px;
}
.samquote {
	font-style: italic;
	font-weight: 600;
	font-size: 0.8em;
	background-color: #c2dcce;
	padding: 0 7px;
	border-radius: 5px;
}
.teamquote {
	font-style: italic;
	font-weight: 600;
	font-size: 0.8em;
	background-color: #c6e0c5;
	padding: 0 7px;
	border-radius: 5px;
}

.buildkit,
.boxout {
	padding: 7px 7px 7px 10px;
	border-radius: 1px;
	display: block;
	margin-bottom: 8px;
	background-color: #efefef;
}
.boxout {
	padding: 10px 30px 10px 30px;
	margin: 0 -30px 0px -30px;
	background-color: #f9f9f9;
	padding-bottom: 15px;
}
.boxout.quiet {
	background-color: #fafafa;
}

.boxout hr {
	height: 1px;
	margin-top: 0;
	margin-bottom: 12px;
}
.boxout hr,
.boxout iframe {
	background: #eaeaea;
	margin-left: -30px;
	margin-right: -30px;
}

.buildkit > strong,
.boxout > strong,
.boxout.loud p {
    font-family: "Trade Gothic Bold", "Helvetica Neue", Helvetica, Arial, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
}
.boxout.loud p {
    text-transform: uppercase;
}
.boxout > strong {
    display: block;
    text-align: center;
}
.boxout.loud p strong {
    text-transform: initial;
    color: black;
    font-size: 1.4em;
}

.buildkit.silver { background-color:#BCC6CC; }
.buildkit.gold { background-color: #EDDA74; }
.buildkit.platinum { background-color: #e6e5e3; }
.buildkit.bronze { background-color: #BBA37D; }
.buildkit.custom { background-color: #dedede; }
.buildkit.specialedition { border: #ff6600 solid 1px; }

.buildkit .upgrade { color: #FF6600; }
.buildkit.gold  .upgrade { color: #3d4fb2; }
.buildkit.silver  .upgrade { color: #D05300; }
.buildkit.bronze  .upgrade { color: #3F2FBB; }

.boxout.loud {
	background-color: #f0f0f0;
	color: #333333;
	text-align: center;
	margin-top: -05px;
	font-weight: bold;
    letter-spacing: 0.02em;
}
@media screen and (max-width: 1020px) {
	.boxout {
		margin: 0;
	}
	.boxout.loud {
		margin-top: 10px;
	}
}
.boxout.loud > p {
	margin-top: 0;
	margin-bottom: 0;
}

.boxout.summary {
	background-color: #eeeeee;
	font-weight: bold
}
.boxout.summary > p {
	margin-top: 0;
}

.boxout.summary > p,
.boxout.droplink > p,
.boxout.MAX > p,
.boxout.bikeorframe > p:last-child,
.boxout.dark > p:last-child,
div#reviews.boxout > p:last-child  {
	margin-bottom: -3px;
}

.boxout.demo {
	background-color: #f0f0f0;
}
.boxout.dark {
	background-color: #f0f0f0;
}

.boxout.expand {
    background-color: white;
    padding: 10px;
}
.boxout.expand:first-of-type  {
    margin-bottom: 60px;
}

div#slideshow.boxout {
    padding: 0;
}

.sign {
	text-align: right;
	color: #444444;
	font-size: 1.2em;
}

.emailquote {
	font-family: Consolas, "Courier New", monospace;
	font-weight: normal;
	font-size: 1em;
	color: black;
	background-color: white;
	padding: 8px;
	padding-bottom: 13px;
	background: url(/cotic_menu_05/decoration/shadow_orange_full.png) no-repeat bottom right;
	background: url(/cotic_menu_05/decoration/shadow_white_full.png) no-repeat bottom right;
	_background: url(/cotic_menu_05/decoration/shadow_white_full.gif) no-repeat bottom right;
}

.linkon, h3 {
	position:relative;
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.9em;
	right: 10px;
	text-align: right;
}
.linkon a, h3 a {
	text-decoration: none;
	color: #28328D;
}
.linkon a:hover, h3 a:hover {
	text-decoration: none;
	background: transparent url(/cotic_menu_05/decoration/orangepixel.gif) repeat-x 0 1em;
	color: #000000;
}

.smallprint {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.8em;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
}

.save {color: #F10000;}
.new {color: #F10000;}
.orange {color: #FF6600;}
.orangeback {background-color: #FF6600; color: black; padding-left:5px; padding-right: 5px; padding-bottom: 1px;}
.blackback {background-color: black; color: #FF6600; padding-left:5px; padding-right: 5px; padding-bottom: 1px;}
.hilite {background-color: #89C777; border-radius: 2px;}
.emote {background-color: #FF6600; color: white; padding-left:5px; padding-right: 5px;}


.info a {
	text-decoration: none;
	color: #121F41;
}
.info a:hover {
	text-decoration: none;
	background: white url(/cotic_menu_05/decoration/blank.gif) repeat-x 0 1em;
	color: #000000;
}

.photos {
	padding: 20px;
	background: white;
	border-left: 20px solid #cccccc;
	border-right: 20px solid #cccccc;
}

.photos img {
	border: 10px solid #000000;
}

.photos img:hover {
	border: 10px solid #ff6600;
}

div.photocombo, div.photocombogrey {
	padding-top: 1em;
}

.photocombo img, .photocombo iframe {
/*	border-top: solid 3px white; */
	margin-left: 1px;
	margin-right: 2px;
	padding-bottom: 13px;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	background: url(/cotic_menu_05/decoration/shadow_orange_full.png) no-repeat bottom right;
	background: url(/cotic_menu_05/decoration/shadow_white_full.png) no-repeat bottom right;
	_background: url(/cotic_menu_05/decoration/shadow_white_full.gif) no-repeat bottom right;
}
.photocombo a img:hover {
/*	border-top: solid 3px #ff6600; */
	background: url(/cotic_menu_05/decoration/shadow_orange_full.png) no-repeat bottom right;
	_background: url(/cotic_menu_05/decoration/shadow_orange_full.gif) no-repeat bottom right;
}

.photocombogrey img {
/*	border-top: solid 3px white; */
	margin-top: 10px;
	margin-left: 1px;
	margin-right: 2px;
	padding-bottom: 13px;
	padding-top: 3px;
	padding-left: 3px;
	padding-right: 3px;
	background: url(/cotic_menu_05/decoration/shadow_orange_full.png) no-repeat bottom right;
	background: url(/cotic_menu_05/decoration/shadow_grey_full.png) no-repeat bottom right;
	_background: url(/cotic_menu_05/decoration/shadow_white_full.gif) no-repeat bottom right;
}
.photocombogrey a img:hover {
/*	border-top: solid 3px #ff6600; */
	background: url(/cotic_menu_05/decoration/shadow_orange_full.png) no-repeat bottom right;
	_background: url(/cotic_menu_05/decoration/shadow_orange_full.gif) no-repeat bottom right;
}

/* on mobiles, stop big images breaking the layout */
.reading p img, .viewing img, center img  { max-width: 100%; height: auto; }
.photocombo img, .photocombogrey img, .photos img  { max-width: 90%; height: auto; }

/* on mobiles, stop long URLs breaking the layout */
.reading a, h3 a {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}

.width20 img {
    width: 19.2%;
    height: auto;
    margin: 0.4%
}
.width25 img {
    width: 24.2%;
    height: auto;
    margin: 0.4%
}
.width50 img {
    width: 49.2%;
    height: auto;
    margin: 0.4%
}
.width33 img {
    width: 32.53%;
    height: auto;
    margin: 0.4%
}
@media screen and (max-width: 1000px) {
    .width20 img, .width25 img {width: 49.2%;}
    .width50 center img {width: 99.2%;}
}
@media only screen 
    /* mobile only */
    and (max-device-width : 667px) {
    .width50 center img {width: 99.2%;}
}
@media screen and (max-width: 700px) {
    .width33 img {width: 99.2%;}
}
@media screen and (max-width: 500px) {
    .width20 img, .width25 img, .width50 img {width: 99.2%;}
}

.yellowonblack {
    background: black;
    color: #FFE01F;
}

.fullwidth img {
    width: 99.2%;
    height: auto;
    margin: 0.4%
}

.fullwidth  img#hero,
.fullwidth  img.extrahero {
    width: 100%;
    min-width: 900px;
    margin: 0;
}
.fullwidth  img#mobilehero {
    width: 100%;
    margin: 0;
}
/* @media screen and (max-width: 900px) {
    .fullwidth  img#hero {margin-left:-20px; margin-right:-20px;}
}
@media screen and (max-width: 880px) {
    .fullwidth  img#hero {margin-left:-50px; margin-right:-50px;}
}
@media screen and (max-width: 850px) {
    .fullwidth  img#hero {margin-left:-90px; margin-right:-90px;}
}
@media screen and (max-width: 825px) {
    .fullwidth  img#hero {margin-left:-110px; margin-right:-110px}
}
@media screen and (max-width: 800px) {
    .fullwidth  img#hero {margin-left:-180px; margin-right:-180px}
} */


.fullwidth span.reveal {
    width: 100%;
    display: block;
    background-size: cover;
}

.fullwidth .reveal img {
    opacity: 1;
    -moz-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
/*    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s; */
}

.fullwidth .reveal img:hover {
    opacity: 0;
}

.fullwidth h1 {
    padding: 5% 0 0 0;
    margin: 0 5% 5% 5%;
    font-family: "Trade Gothic Bold", "Helvetica Neue", Helvetica, Arial, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 3.5em;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    left: 0;
}

.fullwidth h2 {
    margin: 5% 5% 5% 5%;
    font-family: "Trade Gothic Bold", "Helvetica Neue", Helvetica, Arial, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 3.5em;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    left: 0;
}

.fullwidth p,
.width25 p,
.width33 p,
.width50 p {
    margin: 3% 10% 3% 10%;
    font-family: Arial, "Helvetica Neue", Helvetica, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    font-weight: bold;
    font-size: 2.1em;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    -ms-text-size-adjust: 150%;
}

.fullwidth p.smallprint,
.width25 p.smallprint,
.width33 p.smallprint,
.width50 p.smallprint {
    margin: 0;
    font-size: 1em;
    letter-spacing: 0.01em;
}
.fullwidth p.caption,
.width25 p.caption,
.width33 p.caption,
.width50 p.caption {
    margin: 2px 0 25px 0;
}

.fullwidth a,
.fullwidth a:visited {
    text-decoration: none;
    color: #ff6600;
}

.fullwidth a:hover {
    text-decoration: underline;
}

/* bullet point styling override for most browsers (IE has conflict with PNG fix) */
.fullwidth ul, [dummy] {
	list-style: none;
	margin: 0 10% 0 15%; 
	padding: 0px;
}
.fullwidth ul li, [dummy] {
    font-family: "Trade Gothic Bold", "Helvetica Neue", Helvetica, Arial, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    -ms-text-size-adjust: 150%;
	line-height: 1.3em;
	padding-left: 1.0em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	background: transparent url(/cotic_menu_05/decoration/square_big.gif) no-repeat 2px 0.6em;
}
.fullwidth ul ul {
	margin: .5em 0 .5em 1em; 
}
@media screen and (min-width: 1050px) {
    .fullwidth.droplink ul, [dummy] {
        margin-left: 10%; 
    }
    .fullwidth.droplink ul li, [dummy] {
        display: inline;
        padding-left: 0.6em;
        padding-right: 0.6em;
    }
}
@media screen and (min-width: 1070px) {
    .fullwidth.droplink ul, [dummy] {
        margin-left: 10%; 
    }
    .fullwidth.droplink ul li, [dummy] {
        display: inline;
        padding-left: 0.7em;
        padding-right: 0.7em;
    }
}
@media screen and (min-width: 1100px) {
    .fullwidth.droplink ul, [dummy] {
        margin-left: 10%; 
    }
    .fullwidth.droplink ul li, [dummy] {
        display: inline;
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
}
@media screen and (min-width: 1200px) {
    .fullwidth.droplink ul, [dummy] {
        margin-left: 15%; 
    }
    .fullwidth.droplink ul li, [dummy] {
        display: inline;
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
}
.fullwidth ul li.clear, [dummy] {background-image: url();}
/* end of bullet point styling */

.fullwidth strong,
.width25 strong,
.width33 strong,
.width50 strong {
    text-transform: initial;
    font-weight: normal;
}
.fullwidth h1 strong,
.fullwidth h2 strong {
    text-transform: initial;
    font-weight: normal;
}

.fullwidth.droplink {margin-top: -10px;}

.fullwidth.droplink strong {
    display: inline-block;
    text-transform: initial;
    font-size: 1.4em;
    letter-spacing: 0;
    margin: -10px 0 0 0;
}

.fullwidth.droplink span {
    display:inline-block;
    background:url(/cotic_menu_05/decoration/MAX_logo.png) no-repeat top left;
    background-size: contain;
    font-size: 0px;
    height: 28px;
    width: 115px;
    vertical-align: middle; 
}

.fullwidth.droplink em {
    display:inline-block;
    background:url(/cotic_menu_05/decoration/droplink_logo_black.png) no-repeat top left;
    background-size: contain;
    font-size: 0px;
    height: 48px;
    width: 175px;
    vertical-align: middle; 
    margin: -15px -4px -15px 0;
}
.fullwidth.droplink h2 em {
    height: 68px;
    width: 250px;
}
.fullwidth.droplink b {
    font-weight: normal;
}

.captions {
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Gadget, sans-serif;
	font-size: 0.8em;
	margin-bottom: -5px;
	text-align: center;
	font-style: normal
	font-weight: normal
}

.biggerer {font-size: 1.2em;}

/* NOT mobile */
@media only screen 
    /* profile and about page */
    and (min-device-width : 668px) {
        .shift_window_1 .keep_clear {width: 620px !important}
        .shift_window_2 .keep_clear {width: 590px !important}
        .shift_window_3 .keep_clear {width: 550px !important}
        .shift_window_4 .keep_clear {width: 500px !important}
        .shift_window_5 .keep_clear {width: 450px !important}
        .small_window .keep_clear,
        .medium_window .keep_clear
        {width: 350px !important}
}

.section {
	border: solid #1A1A1A 4px;
	padding: 10px;
	margin-top: 10px;
	background: #cccccc;
}

.sections_1 {
	background:#eeeeee;
	border-top: solid 30px #eeeeee;
	border-bottom: solid 40px #eeeeee;
}

.sections_2 {
	padding-top:30px;
	padding-bottom:40px;
}

.sections_2 .section {
	border: none;
	padding: 10px;
	margin-top: 10px;
	background: #999999;
}

.sections_3 {
}
.sections_3 .section {
	border: none;
	background: #bbbbbb;
	padding-top: 40px;
	margin-top: 40px;
}
.sections_3 .bontrager {
	background: url(/order/interface/headers/bontrager.gif) no-repeat #bbbbbb;
}
.sections_3 .use {
	background: url(/order/interface/headers/use.gif) no-repeat #bbbbbb;
}
.sections_3 .magura {
	background: url(/order/interface/headers/magura.gif) no-repeat #bbbbbb;
}
.sections_3 .hope {
	background: url(/order/interface/headers/hope.gif) no-repeat #bbbbbb;
}
.sections_3 .cotic {
	background: url(/order/interface/headers/cotic_sq.gif) no-repeat #bbbbbb;
}
.sections_3 .roadrat {
	background: url(/order/interface/headers/roadrat.gif) no-repeat #bbbbbb;
}
.sections_3 .canecreek {
	background: url(/order/interface/headers/canecreek.gif) no-repeat #bbbbbb;
}
.sections_3 .sub_section {
	border: none;
	background: #bbbbbb;
	padding-top: 10px;
	margin-top: 10px;
}

.section_width660 {
	left: 50%;
	margin-left: -330px;
	width: 640px;
}
.small_window .section_width660 {
	left: 10px;
	margin-left: 0;
}

.cards {
	margin: 14px;
	padding: 10px;
	background: #aaaaaa;
	width: 6em;
}

.igallery {
	text-align: center;
}
.igallerywide {
	text-align: center;
}

.iframe660 {
	text-align: center;
}
.iframe600 {
	text-align: center;
}
.iframe460 {
	text-align: center;
}

.caption {
	text-align: center;
}

.blacksection {
	background: black;
	color: white;
}
.blacksection a {
	color: #FF6600;
}
.blacksection a:visited {
	color: #D4419C;
}
.blacksection a:hover {
	color: white;
}

.greysection {
	background: #B9B9B9;
}

.whitesection {
	background: white;
	color: black;
}
.whitesection a {
	color: #FF6600;
}
.whitesection a:visited {
	color: #D4419C;
}
.whitesection a:hover {
	color: black;
}

.button_1,
.button_2,
.button_3
{z-index: 999;}


.button_1 img {
	background: #000000;
}
.button_1 img:hover {
	background: #ff6600;
}

.button_2 img {
	background: #999999;
}
.button_2 img:hover {
	background: #ff6600;
}

a.button_3,
a.button_4,
a.button_5,
input.button_5,
a.button_6,
a.button_7,
a.button_8
{
    /* buttons using text not images */
	color: white;
    font-family: "Trade Gothic Bold", Arial, "Helvetica Neue", Helvetica, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    font-weight: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
	display: block;
	text-align: center;
    cursor: pointer;
    transition: all .2s ease-out;
}
a.button_3:visited,
a.button_4:visited,
a.button_5:visited,
input.button_5:visited,
a.button_6:visited,
a.button_7:visited,
a.button_8:visited
{
	color: white;
}
a.button_3 {
    /* text version of button_1 */
	background: #000000;
    font-size: 2.5em;
    line-height: 1em;
	padding: 5px 0 8px 0;
    width: 100%;
}
a.button_4 {
    /* version of button_3 for longer text */
	background: #000000;
    font-size: 1.2em;
    line-height: 1em;
	padding: 6px 0 6px 0;
    width: 100%;
}
a.button_5,
input.button_5,
a.button_6,
a.button_7,
a.button_8
{
    /* small buttons */
    font-size: 1.1em;
    line-height: 1em;
	padding: 6px 0 6px 0;
    width: 9em;
}
a.button_5,
input.button_5 {
    /* small version of button_3 */
	background: #000000;
}
a.button_6 {
    /* slight varient on small button */
	background: #000000;
}
a.button_7 {
    /* spare small button syle */
	background: #999999;
}
a.button_8 {
    /* disabled small button */
	background: #999999;
	color: #fafafa;
	cursor: not-allowed
}

a.button_3:hover,
a.button_4:hover,
a.button_5:hover,
input.button_5:hover,
a.button_6:hover,
a.button_7:hover
{
	background: #ff6600;
	color: white;
	text-decoration: none;
}
a.button_8:hover
 {
	background: #999999;
	color: white;
}

a.button_3:hover .orange,
a.button_4:hover .orange,
a.button_5:hover .orange,
input.button_5:hover .orange,
a.button_6:hover .orange,
a.button_7:hover .orange,
a.button_8:hover .orange
{	color: black;}

.rear_element {
	position:absolute;
	z-index: 0;
}
.front_element {
	position:absolute;
	z-index: 1;
}

.nowrap {
	white-space: nowrap;
}

.sidelogo,
.sidephoto
{
    margin: -35px 0 -15px -15px;
    width: 200px;
    height: 200px;
}
.sidephoto {
    margin: -20px 0 -5px 5px;
	box-shadow: 0 2px 2px 2px rgba(0,0,0,0.15);
}

@media only screen and (max-width: 720px) {
    .sidelogo {margin: -35px 0 -15px 80px;}
}

@media only screen and (max-width: 780px) {
    .sidephoto {margin: -20px 0 -5px 120px;}
}

@media only screen and (min-width: 900px) {
    .sidelogo {margin: 0 0 -220px -200px;}
    .sidephoto {margin: 15px 0 -300px -220px;}
}

@media only screen and (min-width: 940px) {
    .sidelogo {
         margin: 0 0 -220px -220px;
    }
}

.newsvideo {
    margin: 8px 0 0 0;
    background: black;
    padding: 10px 52px;
    border-radius: 5px;
}

.fullwidthvideo { position: relative; padding-bottom: 45.25%; height: 0; overflow: hidden; max-width: 100%; background: black; }
.fullwidthvideo iframe,
.fullwidthvideo object,
.fullwidthvideo embed
{ position: absolute; top: 0; left: 10%; width: 80%; height: 100%; }

@media only screen and (max-width: 1050px) {
    .fullwidthvideo { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: black; }
    .fullwidthvideo iframe,
    .fullwidthvideo object,
    .fullwidthvideo embed
    { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

@media only screen and (min-width: 1350px) {
    .fullwidthvideo { position: relative; padding-bottom: 42.25%; height: 0; overflow: hidden; max-width: 100%; background: black; }
    .fullwidthvideo iframe,
    .fullwidthvideo object,
    .fullwidthvideo embed
    { position: absolute; top: 0; left: 12%; width: 76%; height: 100%; }
}

.biglinks {
    padding: 40px 20px 40px 40px;
    font-size: 250%;;
}

.biglinks a {
    display: block;
}

/* css staff and about profile style */
/* extended to use on item pages */

.profilePhoto img { width: 50%; }

.itemPhoto img {
    width: 49%;
    box-shadow: 0px 6px 13px -1px rgba(0,0,0,0.03);
    border: #eee solid 1px;
    border-left: 0;
    margin-left: 0.4%;
}

a.aboutPhoto  {
    clear: both;
    float: right;
    margin: 3px 0 3px 15px;
    border: 1px solid white;
	box-shadow: 0 2px 2px 2px rgba(0,0,0,0.15);
}

a.aboutPhoto:hover  {
    border: 1px solid #ff6600;
}

.aboutPhoto img {
    width: 75px;
    height: 75px;
}

.profile,
.itemInfo {
    width: 50%;
    float:left;
    font-family: Arial, "Helvetica Neue", Helvetica, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    font-size: 12pt;
    background: white;
    padding-bottom: 15px;
}

.profile p,
.profile ul,
.profile h1,
.profile h2,
.itemInfo p,
.itemInfo ul,
.itemInfo h1,
.itemInfo h2
{
    padding: 10px;
}

.itemInfo p {margin: 20px;}

.profile h1,
.profile h2,
.profile h1,
.profile h2,
.itemInfo h1,
.itemInfo h2,
.itemInfo h1,
.itemInfo h2
{
    font-family: "Trade Gothic Bold", "Helvetica Neue", Helvetica, Arial, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, sans-serif;
    font-size: 2em;
    left: 0;
    width: auto;
    text-transform: uppercase;
}
.profile h2,
.itemInfo h2 {
    font-size: 1.8em;
    padding-bottom: 25px;
}

@media screen and (max-width: 680px) {
    .profilePhoto img, .profile, .itemPhoto img, .itemInfo {width: 100%;}
    .itemPhoto img {border: none; border-bottom: #eee solid 1px; margin-left: 0;}
}

.profile strong
{
    font-weight: normal;
    color: #FF6600;
}


/* bullet point styling */
.profile ul {
	list-style: none;
	margin: 0 15px 0 15px; 
	padding: 0px;
}
.profile ul li {
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 150%;
	line-height: 1.5em;
	padding-left: 1.0em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	background: transparent url(/cotic_menu_05/decoration/square_big.gif) no-repeat 2px 0.6em;
}

@media screen and (max-width: 980px) {
    /* line breaks */
    .profile ul li {line-height: 1em; padding-bottom: 0.8em;}
    .profile strong::after {content: "\A"; white-space: pre;}
}

/* mobile */
@media only screen 
    /* profile and about page + item  */
    and (max-device-width : 667px) {
    .profilePhoto img, .profile, .itemPhoto img, .itemInfo {width: 100%;}
    .itemPhoto img {border: none; border-bottom: #eee solid 1px; margin-left: 0;}
    .profile, .itemInfo {font-size: 32pt;}
    .profile p, .profile ul, .itemInfo p {padding-left: 20px; padding-right: 20px;}
    .profile ul {padding-top: 0.8em;}
    _:-webkit-full-screen, :root .profile ul strong {max-width:600px; display:block;} /* droid fix */
    a.aboutPhoto  {margin: 8px 0 8px 30px;}
    .aboutPhoto img {width: 300px; height: 300px;}
    /* line breaks */
    .profile ul li {line-height: 1em; padding-bottom: 0.8em;}
    .profile strong::after {content: "\A"; white-space: pre-wrap;}
    
    /* sitewide */
    .reading, .viewing, .titles, h1, h2, h3, .linkon {font-size: 30pt; -webkit-text-size-adjust: none; }
    .reading {font-size: 26pt; -webkit-text-size-adjust: none; line-height: 1.7;}
     h3, .linkon {font-size: 24pt;}
    .reading, .viewing {margin-left: -400px; width: 800px;}
    .smallprint, #TB_window {font-size: 20pt;}
    .titles {font-weight: bold; margin-bottom: 20px;}
    
    .reading.socialmedialinks a {
        -webkit-text-size-adjust: none;
        font-size: 24px;
    }
    
    hr {margin-bottom: 45px; margin-top: 45px;}
    
    /* on order pages, scale up sections for mobile */
    div.section.scaleable {
        transform:scale(1.3);
        -webkit-transform:scale(1.3);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
        margin-bottom: 300px;
        margin-top: 100px;
    }

    blockquote {
        margin-left: 2%;
        margin-right: 9%;
    }

    /* on product pages, make better use of screen width */
    .boxout {
        padding: 10px 45px 15px 45px;
        margin: 0 -50px 0px -50px;
    }
    .buildkit {
        padding: 10px 25px 15px 25px;
        margin: 10px -50px 10px -50px;
        line-height: normal;
    }
    .buildkit > strong,
    .boxout > strong,
    .boxout.loud p {
        font-size: 1.3em;
        letter-spacing: 0.07em;
        line-height: normal;
    }
    /* big text on mobile */
    div.reading.bit * {font-size: 26pt !important;}
    div.bit .reading * {font-size: 26pt !important;}
    div.reading.twocols * {font-size: 26pt !important;}
    div.reading.twocols * {font-size: 26pt !important;}
    div.reading div.boxout * {font-size: 26pt !important;}
    div.reading.bit ul li {
    	padding-left: 0.8em;
    	padding-top: 0.1em;
    	padding-bottom: 0.1em;
    	background: transparent url(/cotic_menu_05/decoration/square_big.gif) no-repeat 2px 0.6em;
    }
    div.reading.bit ul ul {
    	margin: .1em 0 .1em 1em; 
    }
    .buildkit ul li {
        text-align: left;
    }

}

/* mobile show and hide */
img.mobileonly {display: none;}
div.mobileonly {display: none;}
span.mobileonly {display: none;}
br.mobileonly {display: none;}
#mobilehero {display: none;}
div.readmorecont {
    display: none;
    text-align: center;
}
div.readmorecont a#readmore {
    font-size: 32pt;
    color: white;
    background: #ff6600;
    padding: 16pt 30pt 18pt 30pt;
    width: 100%;
    margin: auto;
    text-align: center;
    border-radius: 18px;
}
@media screen and (max-width: 980px) {
    img.mobileonly {display: block;}
    img.desktoponly {display: none;}
    div.mobileonly {display: block;}
    div.desktoponly {display: none;}
    h1.desktoponly {display: none;}
    center.desktoponly {display: none;}
    span.desktoponly {display: none;}
    span.mobileonly {display: block;}
    br.desktoponly {display: none;}
    br.mobileonly {display: block;}
}
@media only screen 
    and (max-device-width : 667px) {
    #mobilehero {display: block;}
    #hero {display: none;}
    img.mobileonly {display: block;}
    img.desktoponly {display: none;}
    div.mobileonly {display: block;}
    div.desktoponly {display: none;}
    h1.desktoponly {display: none;}
    li.desktoponly {display: none;}
    center.desktoponly {display: none;}
    span.desktoponly {display: none;}
    span.mobileonly {display: block;}
    div.readmorecont {display: block;}
    h1.hasreadmore div, h1.hasreadmore p, h1.hasreadmore br {display: none;}
    h1.hasreadmore .biggerer, h1.hasreadmore .biggerer p {display: block;}
}
@media only screen 
    and (max-device-width : 667px) {
    a.desktoponly, span.desktoponly {display: none;}
}

/* testimonials */
.testimonial p a img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid;
    vertical-align: middle;
    margin-left: 5px;
    border-color: white;
}
.testimonial p a:hover {
    background: none;
}
.testimonial p a:hover img {
    border-color: #FF6600;
}
.testimonial blockquote {
    font-style: italic;
    font-weight: bold;
    text-align: left;
    margin: -80px 20px -100px 20px;
}
.testimonial blockquote::before { 
    display: block;
    top: 0;
    left: 0;
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    margin-bottom: -75px;
    color:#cccccc;
    padding-left: 10%;
}
.testimonial blockquote > p:first-child { 
    text-align: right;
}
.testimonial blockquote::after { 
    display: block;
    bottom: 0; 
    right: 0; 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    margin-top: -35px;
    color:#cccccc;
    padding-left: 90%;
}
.testimonial > p:last-child { 
    font-weight: bold;
    text-align: left;
    color: #cccccc;
    margin-top: 40px;
    margin-bottom: 5px;
    margin-left: 20px;
}
@media only screen and (max-device-width : 667px) {
    .testimonial p a img {
        width: 150px;
        height: 150px;
        border-radius: 150px;
        border: 6px solid;
        vertical-align: middle;
        margin-left: 5px;
        border-color: white;
    }
    .testimonial blockquote {
        margin-bottom: 0;
    }
    .testimonial blockquote::after, .testimonial blockquote::before { 
        content: none;
        display: none;
        margin: 0;
    }
    .testimonial > p:last-child { 
    }
}
@media only screen and (min-device-width : 667px) and (min-width: 1250px) {
    .testimonial p a img {
        width: 75px;
        height: 75px;
        border-radius: 75px;
    }
    .testimonial blockquote::before {
        padding-left: 12%;
    }
}

/* was forms.css */
.input {
    margin: 2px 0 0 0;
    padding: 0;
    color: black;
    padding: 5px 4px;
    font-family: "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    font-size: 1.1em; _font-size: 0.9em;
    border: solid 2px #999999;
    -webkit-appearance: none;
    border-radius: 0;
}

.input:focus {
    border: solid 2px #ff6600;
}

.submit {
    cursor: pointer;
    border: none;
    background: black;
    color: white;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 0.7em;
    padding-top: 4px;
    padding-bottom: 5px;
    margin-right: 5px;
    font-size: 1em;
    text-transform: uppercase;
/*    letter-spacing: 0.3em; */
}
.blacksection .submit {
    background: #999999;
}
.cancel {
    background: red;
}
.submit:hover, .submit:focus {
    background: #ff6600;
}



.error {
    background: white;
    color: red;
    border: red 2px solid;
    text-align: left;
}
.error p {
    padding: 10px 25px 10px 25px;
}
span.error {
    padding: 10px 15px 10px 15px;
}
span.error p {
    padding: 0;
}

@media screen and (max-device-width: 667px) {
    div.reading.error p {
        font-size: 42px !important;
        padding: 5px 50px 5px 50px;
    }
}

label {
    background: #999999;
    color: white;
    padding-left: 0.9em;
    padding-right: 0.7em;
    padding-top: 4px;
    padding-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.error_label {
    border-left: solid 10px red;
}

label.custom_label {
    background: #ff6600;
}

label.custom_label.locked,
label.locked {
    background: #bbb;
}

/* non-standard select box styling */

form.customSelect select {
    min-width: 575px;
    margin-top: 9px;
    cursor: pointer;
/*    font-size: 16px; */
}

form.customSelect .customStyleSelectBox {
    border: solid 2px #999999;
    margin-top: 3px;
}

form.customSelect select[id*='custom_'] + span.customStyleSelectBox {
    border: solid 2px #FF6600;
}
form.customSelect select[id*='custom_'].locked + span.customStyleSelectBox,
form.customSelect select.locked + span.customStyleSelectBox { 
    border: solid 2px #bbb;
}

form.customSelect .customStyleSelectBoxInner {
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 30px;
    font-family: "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    font-size: 1em;
    background: white url(decoration/select-box-arrow.gif) no-repeat center right;
    min-width: 158px;
}

form.customSelect select.locked {
    cursor: default;
}

form.customSelect select.locked + span.customStyleSelectBox span.customStyleSelectBoxInner {
    background: white url(decoration/select-box-locked.gif) no-repeat center right;
}

/* radio boxes */

input[type="radio"] {
    cursor: pointer;
}

.radio-inline {
    display: inline-block;
    background: #ffffff;
    padding: 0;
    color: #999999;
    padding: 2px 10px 4px 10px;
    margin: -2px 0 0 -5px;
    font-size: 1.1em; _font-size: 0.9em;
    border: solid 2px #999999;
    vertical-align: middle;
}
@media (max-width: 700px)
{
    .radio-inline {
        display:block;
        padding: 0 0 5px 10px;
        margin: 5px 0 0 0;
        font-size: 2em;
        width: 4em;
    }
}

.radio-inline.disabled {
    cursor: not-allowed;
    opacity: 0.3
}

.radio-inline.disabled input[type="radio"] {
    cursor: not-allowed;
    opacity: 0.8
}

.radio-inline.locked {
    cursor: not-allowed;
    opacity: 0.5;
    color: #F60
}

.radio-inline.locked input[type="radio"] {
    cursor: not-allowed;
}

/* single line entry */

.text-inline {
    display: inline-block;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

.text-inline input {
    padding: 4px 10px 3px 10px;
    margin: -1px 0 0 -5px;
}

/* order forms */

#instructions {
    width:580px;
    margin-top: -10px;
    margin-bottom: 10px;
}

#stock, #warranty {
    width:580px;
    margin-top: 10px;
    margin-bottom: 10px;
}

fieldset {
    border:none;
    background: #d5d5d5;
    padding: 10px;
    margin-bottom: 10px;
}

fieldset,
fieldset label {
    -webkit-transition: background-color 0.1s ease;
    -moz-transition: background-color 0.1s ease;
    -ms-transition: background-color 0.1s ease;
    -o-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
}

fieldset:hover,
fieldset:focus {
    background: #ddd;
}

fieldset p {
    margin: 3px 0 15px 8px
}

fieldset p:last-child {
    margin: 3px 0 0 8px
}

fieldset:hover label {
    background: #888;
}

fieldset:hover label.custom_label {
    background: #f96500;
}
fieldset:hover label.custom_label.locked,
fieldset:hover label.locked {
    background: #ccc;
}

fieldset:hover .input,
fieldset:hover .customStyleSelectBox {
    border: solid 2px #888;
}

form.customSelect fieldset:hover select[id*='custom_'] + span.customStyleSelectBox {
    border: solid 2px #f96500;
}
form.customSelect fieldset:hover select[id*='custom_'].locked + span.customStyleSelectBox,
form.customSelect fieldset:hover select.locked + span.customStyleSelectBox {
    border: solid 2px #ccc;
}

form.customSelect span.labelConj {
    color: white;
    background-color: #ff6600;
    display: inline-block;
    height: 22px;
    width: 15px;
    padding: 3px 3px 0 6px;
    margin: 0 0 -3px 0;
}
form.customSelect span.labelConj.locked {
    background-color: #bbb;
}

form.customSelect fieldset:hover span.labelConj {
    background-color: #f96500;
}
form.customSelect fieldset:hover span.labelConj.locked {
    background-color: #ccc;
}


input#address2,
input#address3,
input#delivery_address2,
input#delivery_address3 {
    margin-top: -2px;
}

fieldset.subtotal,
fieldset.finance,
fieldset.advanceDeposit
{
    display: none;
}

fieldset.subtotal p.input,
fieldset.finance p.input,
fieldset.advanceDeposit p.input,
input#quote,
input#admin_price,
input#admin_next_payment {
    display: inline-block;
    background: white;
    min-width: 120px;
    margin-left: 0;
    text-align: center;
    font-size: 150%;
}

fieldset.finance.V12 {
    background-image: url('/partners/interface/logos/v12.png');
    background-position: right top;
    background-repeat: no-repeat;
    min-height: 70px
}

fieldset.cycletowork.cycletoworklogos {
    background-image: url('/partners/interface/logos/cycletowork.png');
    background-position: right top;
    background-repeat: no-repeat;
    min-height: 93px
}

fieldset.action.sagepay {
    background-image: url('/partners/interface/logos/SagePay.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    padding-bottom: 20px;
    min-height: 55px;
}

.illustration table
{
  border-collapse: separate;
  border-spacing: 5px 0;
  padding-bottom: 10px;
}

.illustration th.months {
    background: #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid #CCCD00;
    border-left: 1px solid #CCCD00;
    border-right: 1px solid #CCCD00;
    width: 90px;
    height: 40px;
    vertical-align:middle;
    text-align: center;
}

.illustration th.months span {
    color: black;
    font-size: 1.2em;
    font-weight: bold
}

.illustration .perMonth td {
    background: #bbb;
    border-left: 1px solid #CCCD00;
    border-right: 1px solid #CCCD00;
    width: 90px;
    height: 60px;
    vertical-align:middle;
    text-align: center;
}

.illustration .perMonth td span {
    color: black;
    font-size: 1.2em;
    font-weight: bold
}

.illustration .APR td {
    background: #aaa;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid #CCCD00;
    border-right: 1px solid #CCCD00;
    border-bottom: 1px solid #CCCD00;
    width: 90px;
    height: 40px;
    vertical-align:middle;
    text-align: center;
    font-weight: bold
}

.terms {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
}

fieldset.highlight p.input {
    border-color: #FF6600;
}

@-webkit-keyframes throb {
  from { opacity: 1; }
  50% { opacity: 0.8; }
  to { opacity: 1; }
}

.action input.pay,
.action a.submit.pay,
.payment input.pay,
.payment a.submit.pay {
  background: green;
}

fieldset.action input.pay,
fieldset.action a.submit.pay {
  -webkit-animation-name: throb; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 20;
  margin-bottom: 10px;
}

fieldset.action input.knockback,
fieldset.action a.submit.knockback,
fieldset.payment input.knockback,
fieldset.payment a.submit.knockback {
  background: #cccccc;
  color: #DDDDDD
}

input.knockbackimp,
a.submit.knockbackimp { 
  background: #999999;
  color: #DDDDDD
}

.action input.pay:hover, .action input.pay:focus,
.action a.submit.pay:hover, .action a.submit.pay:focus,
.action input.knockback:hover, .action input.knockback:focus,
.action a.submit.knockback:hover, .action a.submit.knockback:focus,
input.knockbackimp:hover,
a.submit.knockbackimp:hover
{
  background: #ff6600;
  color: white
}

fieldset.customer label.zzip:after {
    content: "/ZIP"
}

fieldset input[readonly="readonly"],
fieldset input[readonly],
fieldset textarea[readonly="readonly"],
fieldset textarea[readonly]
{
  border: solid 2px #bbb !important;
  color: #ff6600;
  background: #eeeeee;
}

/* reCaptcha */

.captcha * { 
        margin:0px; 
        padding:0px; 
        border:0px; 
        letter-spacing: 0;
}
.captcha_label { 
    background: white !important;
    color: #741711;
    padding-bottom: 2px;
}

.outlet {
    height: 610px !important;
}

@media screen and (max-device-width: 667px) {
    /* reCaptcha on mobile */
    .g-recaptcha {
        transform:scale(2.5);
        -webkit-transform:scale(2.5);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
        max-width: 100px;
    }
    /* [paypal on mobile] */
    .outlet,
    .payments-sdk-contingency-handler-close {
        transform:scale(2) !important;
        -webkit-transform:scale(2) !important;
    }
    .outlet {
        margin-left: -225px !important;
        margin-top: -310px !important;
    }
    .terms.nowrap {
        display: block;
        margin-top: 20px;
    }
    
    /* fitting elements on small display for order forms */
    form.framebuilder label,
    form.framebuilder .submit {
/*        letter-spacing: 0.05em; */
        font-size: 0.8em
    }
    form.framebuilder submit {
        background: #000000 !important;
    }
    form.customSelect .customStyleSelectBoxInner {
        font-framebuilder: 0.8em;
        padding-right: 10px;
        font-family: sans-serif;
    }
    form.framebuilder .smallprint {
        font-size: 0.8em;
        line-height: normal;
        padding-bottom: 15px;
        font-family: sans-serif;
        padding-right: 250px;
    }
    form.framebuilder .smallprint strong:before {
        content: '\A';
        display: block;
    }
    form.framebuilder .radio-inline {
        font-size: 0.9em;
        margin-left: -10px;
    }
    form.framebuilder br {
        line-height: 0;
    }
    /* ZOOM */
    #instructions.section,
    #stock.section, #warranty.section {
        width:780px;
        padding: 20px 50px 20px 50px;
        margin-left: -440px;
    }
    form.framebuilder .customStyleSelectBoxInner,
    form.framebuilder select {
        min-width: 750px !important;
        max-width: 750px !important;
        width: 750px !important;
    }
    form.framebuilder select {
        font-size: 24px
    }
    form.framebuilder {
        left: 0;
        margin: 0;
        width: 100%;
    }
    form.framebuilder input[type="radio"] {
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
        transform: scale(1.5);
    }
    form.framebuilder input[type="radio"]:last-child {
        margin-left: 10px;
    }
    /* mobile buttons fix */
    fieldset.action input.knockback,
    input.knockbackimp {
        background: #000000;
        color: #cccccc;
    }
    fieldset.action input.pay {
        background: #000000;
        color: white;
    }
}

/* smaller phones */
@media screen and (max-device-width: 640px) {
    /* [paypal on mobile] */
    .outlet,
    .payments-sdk-contingency-handler-close {
        transform:scale(1.75) !important;
        -webkit-transform:scale(1.75) !important;
    }
    .outlet {
        height: 460px !important;
        margin-left: -225px !important;
        margin-top: -230px !important;
    }
}
@media screen and (max-device-width: 568px) {
    /* reCaptcha on mobile */
    .g-recaptcha {
        transform:scale(2);
        -webkit-transform:scale(2);
    }
    /* [paypal on mobile] */
    .outlet,
    .payments-sdk-contingency-handler-close {
        transform:scale(1.5) !important;
        -webkit-transform:scale(1.5) !important;
    }
    .outlet {
        height: 510px !important;
        margin-left: -225px !important;
        margin-top: -260px !important;
    }
}

/* user */

#pin {
    font-size: 200%;
    letter-spacing: 0.5em;
    min-width: 4.5em;
}

/* pin the tail on the donkey */
@media (min-width: 1000px) {
    form.framebuilder fieldset.subtotal.keepup {
        position: fixed;
        right: 9px;
        top: 100px;
    }
}
@media (min-width: 1000px) and (max-width: 1080px) {
    form.framebuilder fieldset.subtotal.keepup {
        width: 150px;
    }
}
@media (min-width: 1080px) and (max-width: 1180px) {
    form.framebuilder fieldset.subtotal.keepup {
        width: 200px;
    }
}
@media (min-width: 1180px) and (max-width: 1350px) {
    form.framebuilder fieldset.subtotal.keepup {
        width: 250px;
    }
}

/* brush it under the carpet */
.overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 99;
    display: block;
    top: 0;
    left: 0;
}
.greyoverlay {
    background-color: #BCBCBC;
}

div#twitter {
    visibility: hidden; 
}

/* css cotic big headings style */

h2.bigquestion  {
    font-size: 50px;
    font-weight: normal;
    margin: 25px 0 -5px 0 ;
    color: #ccc;
    margin-left: 20px;
    font-family: "Trade Gothic Bold", Arial, "Helvetica Neue", Helvetica, "Trade Gothic", Verdana, "Andale Mono", "Andale Mono IPA", Consolas, "Bitstream Vera Sans Mono", "Courier New", monospace;
    left: 0.02em;
    text-transform: uppercase;
}

/* mobile */
@media only screen 
    /* profile and about page */
    and (max-device-width : 667px) {
        h2.bigquestion {
            font-size: 55px;
            margin: 60px 0 -5px 0 ;
            color: #aaa;
            margin-left: 20px;
        }
}