@charset "utf-8";
html {color: #D3373A; font-family: open-sans, Calibri, Tahoma, sans-serif; font-style: normal; font-weight: 300;}
body {font-size: 1.75em; line-height: 2em; font-family: open-sans, Calibri, Tahoma, sans-serif; font-style: normal; font-weight: 400; }
#wrapper { padding-left: 0px; padding-right: 0px; }


/* controlling carousel (copied from bootstrap.css then modified)  
   for position info, see media queries at bottom 
.carousel-caption {font-family: open-sans, Calibri, Tahoma, sans-serif; z-index: 10; text-shadow: none !important;}
.carousel-caption h3 {letter-spacing: 3px; font-size: 18px; font-weight: bold; } 
.carousel-caption p {font-size: 16px; letter-spacing: 3px; font-weight: normal; } */


/* remove background of the control glyph */
.carousel-control,.carousel-control.left,.carousel-control.right {background-color: none;background-image: none !important;color: #fff;}



/* ------------ change speed and fade in -------------------------------------------
from here https://forums.adobe.com/message/7819215#7819215           --------------- 
.carousel-inner > .item { transition: left 2s  ease-in-out 0s; }     --------------- */
/*
.carousel-inner > .item > img, .carousel-inner > .item > a > img {width: 100%;margin: auto;}  
.carousel-fade .carousel-inner .item {opacity: 0; -webkit-transition-property: opacity; transition-property: opacity;}
.carousel-fade .carousel-inner .active { opacity: 1; }
.carousel-fade .carousel-inner .active.left, 
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; } 
*/
/* -------------------------------doesn't seem to fade----------------------------------------------- */


/*-------- link styles on index.html, plus the glyphs in the carousel -------*/
#index a:link, #main a:link {color: #AFCA08;text-decoration: none; }
#index a:visited, #main a:visited {color: #85932C;text-decoration: none;}
#index a:hover, #main a:hover {color: #AFCA08;text-decoration: none; }
#index a:active, #main a:active {text-decoration:none;outline: none; }

#carousel1 h3 a:link, 
#carousel1 h3 a:visited,
#carousel1 h3 a:hover,
#carousel1 h3 a:active {color:#ffffff;text-decoration: none;}

a.carousel:link {color: #ffffff;text-decoration: none;}
a.carousel:visited {color: #ffffff;text-decoration: none;}
a.carousel:hover {color: #ffffff;text-decoration: none;}
a.carousel:active {text-decoration:none;outline:none;}
a.right.carousel-control {color: #ffffff;}
a.left.carousel-control {color: #ffffff;}

    

/* background-color: #F1F1F1; when I put a background on text links, this also affects the glyphs < and > on index. Sigh */
/* the border-bottom affects the links on index.html */

a:link {color: #2A5DB0; text-decoration: none; outline:none;}
a:visited {color: #0074d9; text-decoration: none; outline:none;}
a:hover {color: #AFCA08; text-decoration: none; outline:none;}
a:active {color: #037d90;text-decoration: none; outline:none;}


#events a {text-decoration: none; font-weight:600;}

#footbar a:hover {color: #ffffff; text-decoration:none;}
#footbar a:active {text-decoration:none; outline:none;}


/* the following puts a little icon after a link starting with http */
	a[href ^="http"] {
	   padding-right: 20px;
	   background: transparent url(../images/icons/icon_external.gif) no-repeat center right;
	}
	/* icon for PDF files */
	a[href $='.pdf'] { 
	   padding-right: 18px;
	   background: transparent url(../images/icons/icon_pdf.gif) no-repeat center right;
	}



/* ----------- main is on index.html --------*/
#main { width: 75%; max-width: 750px; margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 20px;}
#main h1 { color: #AFCA08;	font-style: normal; font-weight: 300; letter-spacing: 5px; margin-bottom: 20px; text-align: center;}
#main p { font-size: 0.8em;	color: #6f6f6f; font-style: normal; font-weight: 400; line-height: 1.85em;	text-align: left;}

#home h1, #home h2, #home h3  { text-align: center;}


.main h1 { font-size: 1.1em; color: #AFCA08; font-style: normal; font-weight: 400; letter-spacing: 2px; margin-bottom: 15px; text-align: left; text-transform: uppercase;}
.main p { font-size: 0.8em;	color: #6f6f6f; font-style: normal; font-weight: 400; line-height: 1.85em; text-align: left; }


.thumbnail .caption p { line-height: 2em; font-size: 0.8em; color: #6F6F6F;}
.thumbnail .caption h3 { color: #AFCA08; font-size: 1.5em; font-weight: 300; line-height: 1.5em;}
.caption h3 a:link { color: #AFCA08; text-decoration: none; background-color: none; border-bottom: none;}
article p.caption {font-style: italic; margin-left: 10px; margin-top: 20px; margin-bottom: 0px;}
article ul li {font-size: 0.8em; color: #6f6f6f; line-height: 1.85em;}


/* ----------- news.html and art*.html -- NOT IN ORIGINAL STYLES ----------- */
#news p { font-size: 0.8em; color: #6f6f6f; font-style: normal; font-weight: 400; line-height: 1.85em; text-align: left; margin-bottom: 2em;}
#news .caption {font-style: italic; padding-top: 20px; margin-bottom: -5px;}
#news img {padding: 10px; margin: 10px;}

#news a {text-decoration: none; color: #AFCA08; }
#news a:hover {padding-bottom: 2px; border-bottom: dashed 1px #AFCA08;}
#news a:active {text-decoration:none; outline:none;}
#news .breadcrumb li {font-size: 0.8em;}

#news .headline {font-size: 1.2em; font-weight: bold; color: #AFCA08;} /* this colors the headline text green */

#news .date {color: #d8d6d6;}

#news .story:first-line {color: red;}  /* The first line of a paragraph with class "story" will be dark green */


/* ---------- brandbar & footer, used on all pages ------------ */
.brandbar { margin-top: 40px; margin-bottom: 40px; margin-left: 20px; margin-right: 20px;}
.navbar.navbar-default { border-width: 0px; border-radius: 0px;	background-color: #FFFFFF;}
#footbar { margin-top: 20px; background-color: #cccccc; }
#footbar h1 { color: #6F6F6F; font-size: 1em; text-align: left; width: auto;	letter-spacing: 3px;}
#footbar p, #footbar ul { color: #6F6F6F; font-size: 0.8em; line-height: 1.6em; width: auto;}
#footbar ul { list-style-type: none; padding: 0; margin: 0;}

footer {	margin-top: 60px;	background-color: #FFFFFF; color: #000000; text-align: left; padding-bottom: 20px;	padding-left: 20px; padding-right: 20px;}
.copyright { color: #999999;	font-size: 0.8em;}


/*---------- misc stuff, used on all pages -------*/
.alignleft { float: left; padding-right: 10px;}
.alignright { float: right; padding-left: 10px;}
.image-fill { width: 100%;}
.center {text-align: center; }
.red {color: red;}

.bigbold {font-size: 150%; font-weight: bold; font-variant-caps: small-caps; color: #6F8004;}


/* ----- content in the body area, all pages ------- */
.bodycopy {width: 85%; max-width: 750px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 40px;}
h1.title {	color: #AFCA08; font-style: normal; font-weight: bold; letter-spacing: 5px; margin-bottom: 20px; text-align: left; line-height: 1.5em;}
.bodycopy h1 {color: #AFCA08; font-style: normal; }
.bodycopy h2 {color: #AFCA08; font-style: normal; font-weight: 600; letter-spacing: 0; margin-bottom: 20px; text-align: left; padding-top: 30px; clear: both; font-size: 1em; }
.bodycopy h3 {font-family: open-sans, Calibri, Tahoma, sans-serif; color: #6F6F6F; 	font-style: normal; font-weight: 600; letter-spacing: 0; 	margin-bottom: 15px; text-align: left; padding-top: 20px; clear: both; font-size: 0.8em;}
.bodycopy p { font-size: 0.8em; color: #6f6f6f; font-style: normal; font-weight: 400; line-height: 1.85em; text-align: left; }

/* ------------------breadcrumb styling, overrides style in bootstrap.css -----------------*/

.breadcrumb { padding: 8px 0px; margin-bottom: 20px; list-style: none; background-color: #fff; border-radius: 0px; }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}


/*--- NO PRINT elements ---*/
/* I don't actually have a class defined. I just add 'noprint' to the class of an element that I don't want to print. Then in the print.css, .noprint is set to display:none, so those items don't print. */
.noprint { }


/* here is special styling for IMAGES */
#news img {padding: 10px; margin: 10px;}
img.space {padding: 10px; margin: 10px;}

/* non-floated images, borders */
img.border { margin: 10px; 	padding: 10px; border: 1px solid #999999; }

/* non-floated images, tight borders */
img.borderTight {	margin: 0 7px; padding: 2px; border: 1px solid #999999;	}

p.clear { clear:both;}
p.caption {font-style: italic; padding-top: 20px;}

/* the tag in bootstrap.css has display:block which makes side-by-side images instead be one on top of another. Might need to make this only in the news section */
.img-responsive {	display:inline;}



/* here is special styling for a section with an ID name */
#careers h3 {font-size: 0.8em; font-weight: 600; text-align: left;}


/* for vista.html, put top border and spacing */
.topline {
	border-top: 2px solid #CCCCCC;
	padding-top: 1em;
	margin-top: 2em;
	}

/* for hybrid.html for notice re golden cylinder */
p.award {padding-top: 20px;	padding-right: 0px;	padding-left: 50px;	padding-bottom: 0px;
	margin-right: 50px;	margin-bottom: 0px;	font-size: 0.9em; line-height: 1.9em;
	color: #037D90;
}
a.award:link {color: #037D90;}
a.award:visited {color: #6f6f6f;}
a.award:hover,
a.award:active {color: #afca08;}


/* special style for notes on EOL pages */
#products p.important {border: #AFCA08 1px solid; padding: 5px 10px; font-weight:900;}

/* ------------------- LISTS -------------------- */
/* if you make the ul, li global instead of per section, it adversely affects the menu bar, makes text tiny. Sigh */
#careers ul, #service ul, #company ul, #products ul,
#careers ol, #service ol, #company ol, #products ol {font-size: 0.8em; color: #6F6F6F; line-height: 1.85em; }

#careers li, #service li, #company li, #products li {margin: 10px 0;}

#events p {font-size: 0.7em;}









/* TABLE on products/more.html
---------------------------------------------------------------------------*/

table.more {border-collapse:collapse; width: 40%; border: 0;}
.more th, .more td, .more p {text-align: center; align-content: center;}
.more td {padding: 10px;}
.more tr {border-top: 2px solid #e3e0e0;}
.more td.gray {background: #E3E0E0; width:5px; border-top: 2px solid #FFFFFF;}



/* TABLE on train/doc/catalog.html
-------------------------------------------------------------------------- */
table.doc {border-collapse:collapse; width: 100%; border: 1px solid #D9EAF0;}
/* table header*/
.doc th {background-color: #D9EAF0; font-weight:bold; color:#000000; text-transform:uppercase; text-align:left; font-size: 0.8em;}
/* spacing for th & td; doesn't work to put the padding in the table */
.doc th, .doc td { padding: 0.5em 0.5em; line-height: 1.2; vertical-align: top; }
p.doc {font-size: 1em;}
/* put some lines under each cell */
.doc td, .doc th {border-bottom: 1px solid #88ADB9; font-size: 0.8em;}
/* left align text*/
#wrapper .doc td {text-align: left;}

/* TABLE on support/equipment.html and products/cls-support.html
-------------------------------------------------------------------------- */
table {	font-family: open-sans, Calibri, Tahoma, sans-serif; color: #6f6f6f; }
table.equip  {border-collapse:collapse; width: 100%; border: 1px solid #afca08;}

/* table header*/
.equip th {background-color: #afca08; font-weight:bold; color:#000000; text-transform:uppercase; text-align:center; font-size: 0.8em;}

/* spacing for th & td; doesn't work to put the padding in the table */
.equip th, .equip td { padding: 0.5em 0.5em; line-height: 1.2; vertical-align: top; }
p.equip {font-size: 1em;}

/* works only in FF */
.equip col { border-right: 1px dashed #afca08;}

/* put some lines under each cell */
.equip td {border-bottom: 1px solid #afca08; font-size: 0.8em;}

/* subhead rows */
.sub {background-color: #F0E4B7; font-style:italic; text-align: left;}

/* center*/
#products .equip td {text-align: center;}



/* TABLE on products/spectrum.html, for cylinder config, class=cyl 
--------------------------------------------------------------------------------*/
table.cyl  {border-collapse:collapse; width: 100%; table-layout:fixed;}
/* table header*/
.cyl th {background-color: #afca08; font-weight:bold; color:#000000; text-transform:uppercase; text-align:center; font-size: 0.8em;}
/* spacing for th & td; doesn't work to put the padding in the table */
.cyl th, .cyl td { padding: 0.2em 0.5em; }
.cyl td {border: 1px solid #afca08; vertical-align:top;}
.cyl p {font-size: 0.8em;}

/* subhead rows */
.subhead {width: 50%; font-style:italic; text-align: center; font-weight:900; font-size: 0.8em;}


/* TABLE on agentlist.html; id=agentlist. I want the p to be correct size with not so much space 
---------------------------------------------------------------------------------------------------------- */
/* class=agents is for the top table, listing countries */
.agents td {vertical-align:top; width:25%; padding: 0; margin: 0;}
.agents td p { font-family: open-sans, Calibri, Tahoma, sans-serif; font-size: 0.8em; padding: 0; margin: 0;}
.agents a {text-decoration:none;outline: none;}
.agents tbody { border-top: 1px #AFCA08 solid; border-bottom: 1px #AFCA08 solid;}
table.agents {margin: 20px 0 50px 0;}

/* these classes are for the agent information */
#agentlist h3 {	font-size: 0.8em; font-weight: 600; text-align: left; color: #AFCA08; margin-bottom: 5px; margin-top: 30px; padding: 0;}
.agentlist table {font-family: open-sans, Calibri, Tahoma, sans-serif;padding: 0; margin: 0; border:0; border-collapse:collapse; border-spacing: 0; font-size:100%; vertical-align: baseline; table-layout: fixed;}
.agentlist td,
.agentlist th {overflow: hidden; white-space: nowrap;  padding: 0px; margin: 0px; line-height: 1.5; font-size: 0.8em;}
.agentlist td.one {width: 50%; }
.agentlist td.two {width: 15%;}
.agentlist td.three {width: 35%;}
.agentlist td.four {width: 45px; text-align: right; border-bottom: 1px #cccccc solid; padding-bottom: 5px;} /* this is td for the 'go-top' image */
.agentlist td.gray {border-bottom: 1px #cccccc solid; padding: 5px 0; font-style:italic;} /* puts bottom line on last row */
.white {color: #FFFFFF;} /* I need to have something in each cell or the spacing gets weird, so I put a "." in empty cells, which looks weird also. So I'll make 'em invisible with this class. */


/* TABLE on products/engcompare.html 
---------------------------------------------------- */
.engcompare table {font-family: open-sans, Calibri, Tahoma, sans-serif;padding: 0; margin: 0; border:0; border-collapse:collapse; border-spacing: 0; font-size:100%; vertical-align: baseline; table-layout: fixed;}
.engcompare td {border-bottom: #AFCA08 1px solid; padding-left: 5px; line-height: 2; font-size: 0.8em;}
.engcompare th { color:#FFFFFF; background-color: #AFCA08; text-align: center;}
.head {background-color: #EDEDED; color: #000000; font-weight: 900; }
.diam {background-image:url(../images/diamond.png); background-repeat: no-repeat; background-position: center;}


/* BASIC TABLE, on spectrum.html and prism.html, for chuck specs. 
   See this page for how I styled this
   http://www.elated.com/articles/styling-tables-with-css/      
--------------------------------------------------------------- */
.basic {
	font-family: open-sans, Calibri, Tahoma, sans-serif;
	font-size:100%;	
	padding: 0; 
	margin: 0; 
	table-layout: fixed; 
	border-collapse: collapse;
	border: 2px solid #ccc;
	}
.basic th, .basic td {
	border: 1px dotted #cccccc; 
	padding: 0.3em 0em 0em 0.5em; /*TBRL*/
	vertical-align: central;
	}
.basic th p {
	font-weight: bold;
	}
.basic td p {text-align: center;}
.basic th[scope=col] {
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
	background-color: #F4F4F4; 
	}
.basic th+th[scope=col] {
	border-right: 1px dotted #ccc;
	}
.basic th[scope=row] {
	border-right: 2px solid #ccc;
	}



/* ------------- 2 columns on products.html - very specific for this page; doesn't work with other pages. rats. ------------------- */

.column { position: relative; float: left; }

#surround { max-width: 750px; padding-right: 350px; }

#left { float: left; width: 100%; min-width: 350px; padding-right: 20px; padding-left: 50px; }
#right { float: left; width: 300px;  margin-right: -1000px;}



/*  -------------------------------------------------------------------  */
@media all and (max-width: 768px) {
	#news {width: 94%;padding: 3%;}
	#events {width: 94%;padding: 3%;border-top: 3px solid #eee;}
}

@media screen and (max-width:470px){
	.carousel-indicators, .carousel-indicators ol, .carousel-indicators li, .carousel-indicators .active {display: none;} /* hide the indicators */
	.left.carousel-control,.right.carousel-control {display:none;} /* hide the glifs*/
	.carousel-caption, .carousel-caption h3 a { color:#000000 !important; text-shadow: none !important; }
	.carousel-caption h3 {letter-spacing: 3px; font-size: 16px; font-weight: bold; } 
	.carousel-caption p {font-size: 14px; letter-spacing: 3px; font-weight: normal; }
	.carousel-caption {position:relative; top: -10px;left: 1%; bottom: 0px;}
}

@media screen and (max-width:768px){
	.carousel-inner {padding-bottom: 0;}
	.carousel-indicators, .carousel-indicators ol, .carousel-indicators li, .carousel-indicators .active {display: none;}
	.carousel-control {top: -120px}
	.carousel-caption, .carousel-caption h3 a { color:#000000 !important; text-shadow: none !important; }
	.carousel-caption h3 {letter-spacing: 3px; font-size: 16px; font-weight: bold; } 
	.carousel-caption p {font-size: 14px; letter-spacing: 3px; font-weight: normal; }
	.carousel-caption {position:relative; top: -10px;left: 1%; bottom: 0px;}
	.container {width: 75%;}
}

@media screen and (max-width:992px){
	.carousel-inner {padding-bottom: 0;}
	.carousel-control {top: -120px}
	.carousel-indicators, .carousel-indicators ol, .carousel-indicators li, .carousel-indicators .active {display: none;}
	.carousel-caption, .carousel-caption h3 a { color:#000000 !important; text-shadow: none !important; }
	.carousel-caption h3 {letter-spacing: 3px; font-size: 16px; font-weight: bold; } 
	.carousel-caption p {font-size: 14px; letter-spacing: 3px; font-weight: normal; }
	.carousel-caption {position:relative; top: -20px; left: 1%; bottom: 0px;}
	.container {width: 85%;}
}

@media screen and (max-width:1199px){
	.carousel-inner {padding-bottom: 30px;}
	.container {width: 85%;}

}
@media screen and (min-width:1200px){
	.carousel-inner {padding-bottom: 30px;}
}