﻿/*A-Z Index*/
#divAlpha {padding:5px;background-color:#f7f7f7;}
#divAlpha a {background-color:#d7d7d7;padding:1px 5px;text-decoration:underline;color:#000;margin-left:1px;}
#divAlpha a:hover {background-color:#e4e4e4;text-decoration:underline;}
#divAlpha SPAN {width:100%;}
.divindex {margin-top:20px;}

#divIndexLeft {margin-top:20px;}


/* General content -------------------------------------------------------*/
.grdView {width:100%;}
.grdView th, tr, td {border-style: hidden;}
.grdView th {background-color:#fff;}
.grdView table {color: #000; }


/* Equipment */
#newequipment {}
.equipmentcontainer {margin:0;padding:0;clear:both;padding-top:30px;}
.productsquare {width:150px;float:left;cursor:pointer;text-align:center;margin:20px 0;}
.productsquare img, .productsquarehover img {margin-bottom:5px;width:100px;height:45px;}
.productsquare span {text-decoration:none;font-size:11px;color:#004296;}
.productsquarehover {width:150px;float:left;cursor:pointer;text-align:center;margin:20px 0;}
.productsquarehover img {margin-bottom:5px;}
.productsquarehover span {text-decoration:underline;font-size:11px;color:#004296;}
#newequipmentproductfamily {padding-top:30px;}
#newequipmentproductfamily #modelimagecontainer {float:left;width:150px;}
#newequipmentproductfamily #modellistcontainer {float:left;padding:0;}
#newequipmentproductfamily #availablemodeltitle {font-weight:bold;width:100%;}
#newequipmentlist table {}

#newequipmentlist #introdiv {margin-bottom:20px;}
#newequipmentlist #introdiv #description {float:left;width:60%;}
#newequipmentlist #introdiv #machineimage {float:left;width:30%;margin-top:10px;}
#newequipmentlist .newequipmenttableheader {background-color:#FFF;font-size:1.5em;}
#newequipmentlist #featuretable {font-size:1.1em;}
#newequipmentlist .subfeatures {border:solid 1px gray;padding:0.5em;display:none;}


/* tabs */
#tab { padding: 0px; margin: 0px; list-style-type: none;margin: 25px 0 0 0;clear:both;}
#tab li {list-style-type: none; float: left; padding: 0px; margin:0; margin-right:4px; background: url(../_images/layout/tab_rightblue.gif) no-repeat right top;}
#tab a { line-height:12px;padding: 6px 13px 3px 15px; display: block; font-size: 10px; background: url(../_images/layout/tab_leftblue.gif) no-repeat left top; COLOR: #000;TEXT-DECORATION: none}
#tab a:hover { text-decoration: underline;}
#tab li.selected { background-image: url(../_images/layout/tab_rightwhite.gif)}
#tab li.selected A {background-image: url(../_images/layout/tab_leftwhite.gif); color:#FDD947;}
.tabdiv {display:block;width:90%;border-top:solid 3px black;padding-top:10px;float:left;margin-bottom:20px;}
.notabdiv {display:none;}
.printtitle {display:none;}

/* Search */
#searchdiv {font-size:1.1em;}
#searchdiv .s {width:100%;padding:0;padding-bottom:10px;}
#searchdiv .l {font-size:1.2em;}
#searchdiv .n {padding-top:3em;}

/* Locations */
#mapcontainer {background-color:#fff;border:solid 0px #E5E2DC;padding-top:1.5em;}
#mapnav {width:20%;float:left;padding:0;margin:0;}
#map {width:75%;height:400px;float:right;background-color:#F2EFE9;border:solid 1px #000;}
#mapnav h3 {margin:0;border-bottom:solid 1px #E5E2DC;font-size:1.4em;padding:.5em 0;padding-top:0; text-align:center;margin-bottom:1em;float:left;width:100%;}
#mapnav table td, #mapnav table {border:none;padding:0;margin:0;line-height:.8em;}
#mapnav li, #mapnav ul {list-style-type:none;}
#mapLocation {display:none;}
.bubble {font-family: Arial, Verdana, sans-serif;padding-bottom:20px; width:235px;}
.bubble h1 {font-size:1.2em;margin:0;padding:0;margin-bottom:5px;font-weight:bold;}
.bubble p {font-size:1em;margin:0;padding:0;}
.maplinks {float:left;width:100%; }
.maplinks li {list-style-type:none;background:url(../images/mapbullet.gif) no-repeat left .8em;padding-left:1.3em;margin-bottom:.5em;}
.maplinks a {font-size:1.2em;}
.treeview table tr td, .treeview div {padding:0;margin:0;border:none;}

/* Entry Pages - 1 Col */
.contentcontainer {width:98%;padding:0;margin-bottom:10px;clear:both;}
.card, .cardhover {border:solid 1px #f0f0ef;float:left;margin: 20px 15px 0 10px;padding:5px;color:#000;width:100%;}
.cardhover, .cardhover2col {background: #fff url(../_images/layout/cardbg.gif) repeat-x bottom;cursor:pointer;}
.card img, .cardhover img{float:left;height:90px;width:130px;margin: 0 10px 0px 0;padding:0;border:none;}
span.cardheader{font-size:1.5em;font-weight:bold;color:#7a7a7a;}

/* Entry Pages - 2 Col */
.card2Main {text-align:right;width:47%;float:left;margin: 20px 2% 0 0px;}
.card2col, .cardhover2col {border:solid 1px #f0f0ef;padding:5px;color:#000;text-align:left;}
.card2col img, .cardhover2col img{float:left;height:60px;width:60px;margin: 0 10px 0 0;padding:0;border:none;}
.card2col p, .cardhover2col p {padding:0;margin:0;}

/* classes for alternating table rows */
.even {background-color: #fcfcfc;}
.odd {background-color: #f2f2f2;}

/*Employment*/
#jobdetails {font-size:1.2em;}

/*Publications*/
.ttIssues {
	width: 49%;
	float:left;
	padding: 20px 0 5px 0;
	border-bottom: 0px solid #e2e8ed;
	margin-right:1%;
}

.download {color:#004296;text-decoration:underline;}
.ttIssueshover {
	width: 49%;
	float:left;
	padding: 20px 0 5px 0;
	border-bottom: 0px solid #e2e8ed;
	background: #fff url(/_images/layout/cardbg.gif) repeat-x bottom;cursor:pointer;
	margin-right:1%;
}


.ttIssues img {
	float: left;
	padding-right: 10px;
}

.ttIssueshover img { 
	float: left;
	padding-right: 10px;
}

.ttHead h2, h2 {
	width: 100%;
	padding: 0 0 0 5px;
	margin-bottom: 2px;
	margin-top:15px;
	background-color: #f9fafb;
	border-bottom: solid 2px #f2f4f6;
	clear:both;

}
.ttMain {
	width: 100%;
}
.ttMain img {
	float: left;
	padding-right: 20px;
}

/* Services - machine - maintenance- undercarriage */

.genImgCol {
	width: 100%;
	padding: 20px 0 5px 0;
	border-bottom: 1px solid #ccc;
}
.genImgCol img {
	float: left;
	padding-right: 10px;
}

.ucTable {
	width: 100%;
	font-size: 1.1em;
	background-color: #eee;
	border: 1px solid #000;
	outline: .5px solid #000;
	border-collapse: collapse;
}
.ucTable td {
	border: 1px solid #000;
	outline: .5px solid #000;
}
.ucTable th {
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px;
	background-color: #666;
	border: 1px solid #000;
	outline: .5px solid #000;
}
.ucWhiteCell {
	background-color: #fff;	
}

/*  Form related styles for column display */

.formRow {
	clear: both;
	padding-top: 10px;
	font-size: 1.2em;
}	
.formLabel {
	float: left;
	width: 100px;
	padding-left: 10px;
}	
.formField {
	float: left;
}

.wideLabelForm .formLabel {width:175px;}
.wideLabelForm .formField {}

.formRow input, .formRow textarea {background: #fff url(/_images/layout/textboxBg.jpg) repeat-x bottom left;border:solid 1px #7f9db9;}
.formRow checkbox {}

.inputnormal input {border:none;background:none;}

span.validator {color:#ba0101;}

/* rental tables */

.genericTable {
	width: 100%;
	font-size: 1.1em;
	background-color: #eee;
	outline: 1px solid #000;
	border-collapse: collapse;
	text-align:left;
	border-bottom: 1px solid #000;
}
.genericTable td {
	border: 1px solid #000;
	outline: .5px solid #000;
	
}
.genericTable th {
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px;
	background-color: #666;
	border: 1px solid #000;
	outline: .5px solid #000;
	text-align: left;
}


/* amperage chart */
#psAmp td {text-align: center;}

/* generic container for left/right column display */
.genContainer { 
	width: 100%;
	clear: both;	
}
.genContainer:after { content: ""; display: block; height: 0; clear: both; }
.genDivLeft {
	float: left;
	padding-top: 20px;	
}
.genDivRight {
	float: left;	
	width: 50%;
	padding: 20px;
}

/* same as above but better - need to merge */
.contactLeft {
	float: left;
	width: 50%;
}

.contactRight {
	float: right;
	width: 50%;
}

/* for floating images left / right with text*/
.genImgDivL {
	width: 100%;
	clear: both;
}
.genImgDivL:after { content: ""; display: block; height: 0; clear: both; }
.genImgDivL img {
	float: left;
	padding-right: 10px;
}
.genImgDivR {
	width: 100%;
	clear: both;
}
.genImgDivR:after { content: ""; display: block; height: 0; clear: both; }
.genImgDivR img {
	float: right;
	padding-left: 10px;
}


/* formatting for addresses */
dl.address { padding: 10px; }

/* to do:

format all addresses in this way:

<dl class="address">
  <dt>Address:</dt>
  <dd>ABC Widgets, Inc.</dd>
  <dd>100 - 1234 West Main Street</dd>
  <dd>Anytown, State</dd>
  <dd>Zip<dd>
  <dt>Ph:</dt>
  <dd>555-555-1234</dd>
  <dt>Fax:</dt>
  <dd>555-555-1234</dd>
</dl>

*/

/* These classes are used with tableHighlight.js */
	
.tableRollOverEffect {
	background-color: #999;
	cursor: pointer;
	color: #FFF;
	text-decoration: underline;
}
.tableRowClickEffect {
	background-color: #0066CC;
	color: #FFF;
}

/* employment table rows */

.empRowA {background-color:#fff;}
.empRowB {background-color:#f6f6f6;}

/* right hand phone number column - power systems contacts*/

.phoneCell {
	width:120px;
}

/* About - In the News */
.newsItem {width:90%;border-bottom:1px solid #000; padding:20px;}
.newsDate {font-weight:bold;}
.newsTitle {}
.newsLocation {}

#contactform .formLabel {width:200px;}

#livepersonDiv {clear:both;padding-top:10px;}
#livepersonDiv img {margin: 10px 0 20px 0;}

/****** Style for Calendar ******/
.ajax__calendar_container {
    border:1px solid #646464;
    background-color: white;
    color: black;
    z-index: 200;
}

.ajax__calendar_days td
{
	font-weight: normal;
}

.ajax__calendar_container .ajax__calendar_years td, 
.ajax__calendar_container .ajax__calendar_days td,
.ajax__calendar_container .ajax__calendar_months td
{
	padding: 0px;
}

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: white;
    color: black;
    width: 210px;
    cursor: default;
    z-index: 200;
    height: 170px;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight:bold;
}

.MyCalendar .ajax__calendar_years td, 
.MyCalendar .ajax__calendar_days td,
.MyCalendar .ajax__calendar_months td
{
	padding: 4px;
}


.MyCalendar .ajax__calendar_header
{
	text-align: center;
}

/* PartStore - Feature Content */
#partsRegistration {width:500px;height:340px;padding:0 10px 0 10px; border:solid 1px #000;background-color:#fff;position:absolute;top:200px;left:60px;display:none;}
#partsRegistration h3 {width:100%;font-size:1.3em;font-weight:600;background-color:#f7c106;text-align:center;}
#partsRegistration ul,li {list-style-type:normal;text-align:left;margin:0;padding:0;}
#partsRegistration li {line-height:20px;padding-left:10px;}

/* Generic Buttons */
/* example use: <div class="genButton" style="width:260px;"><p><a href="#"></a></p></div>*/
/* width needs to be set to override 100% div width */
.genButton {
	height: 56px;
	text-align: center;
	background: url(/_images/common/btn_bg.gif) repeat-x;
	border: 1px solid #ccc;
	cursor: pointer;
	font-size: 1.2em;
	font-weight: bold;
	margin: 20px 10px 20px 0;
}
.genButton a {text-decoration:none;}
.genButton a:hover {text-decoration:underline;}

.redText {color:#FF0000;}

.equipmentcontentcontainer {width:100%;padding:0;margin-bottom:10px;clear:both;}
.card, .cardhover {border:solid 1px #f0f0ef;float:left;margin: 20px 15px 0 10px;padding:5px;color:#000;width:100%;}

/*Gas Compression Locations Contact Information*/
/*Fort McMurray*/
#layer1{
	position: absolute;
	visibility: hidden;
	width: 250px;
	height: 80px;
	left: 510px;
	top: 300px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Peace River*/
#layer2{
	position: absolute;
	visibility: hidden;
	width: 260px;
	height: 80px;
	left: 130px;
	top: 290px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Fort Nelson*/
#layer3{
	position: absolute;
	visibility: hidden;
	width: 260px;
	height: 80px;
	left: 40px;
	top: 282px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Fort St.John*/
#layer4{
	position: absolute;
	visibility: hidden;
	width: 260px;
	height: 80px;
	left: 30px;
	top: 375px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Grande Prairie and Grande Cache*/
#layer5{
	position: absolute;
	visibility: hidden;
	width: 280px;
	height: 80px;
	left: 360px;
	top: 410px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Edson and Edmonton*/
#layer6{
	position: absolute;
	visibility: hidden;
	width: 250px;
	height: 80px;
	left: 420px;
	top: 480px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Red Deer*/
#layer7{
	position: absolute;
	visibility: hidden;
	width: 250px;
	height: 80px;
	left: 540px;
	top: 590px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

/*Calgary*/
#layer8{
	position: absolute;
	visibility: hidden;
	width: 240px;
	height: 80px;
	left: 190px;
	top: 640px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}


/*Medicine Hat*/
#layer9{
	position: absolute;
	visibility: hidden;
	width: 270px;
	height: 80px;
	left: 555px;
	top: 680px;
	background-color: #eee;
	border: 1px solid #000;
	padding-left:10px;
	padding-right:10px;
}

#close {
	float: right;
}

/* Power Systems homepage */
.PScontentcontainer {width:100%;padding:0;margin-bottom:10px;clear:both; margin-top:-14px;}
.PScard {border:solid 1px #f0f0ef;margin: 15px 5px 0 10px;padding:5px;color:#000;width:46%;float:left;}
.PScardhover {background: #fff url(../_images/layout/cardbg.gif) repeat-x bottom;cursor:pointer;width:46%;border:solid 1px #f0f0ef;margin: 15px 5px 0 10px;padding:5px;float:left;}
.PScard img, .PScardhover img{float:left;height:80px;width:110px;margin: 0 10px 0px 0;padding:0;border:none;}
span.cardheader{font-size:1.5em;font-weight:bold;color:#7a7a7a;}


/*Locations Province Captions*/
.locationCpt {font-size:large; text-align:left;padding: 0 0 0 5px;margin-bottom: 2px;margin-top:40px;background-color:#f2f4f6;border-bottom: solid 2px #f2f4f6;}
.locationCptBlack {font-size:large; text-align:left;color:White;padding: 0 0 0 5px;margin-bottom: 2px;margin-top:10px;background-color:#5B5B5B;border-bottom: solid 2px #f2f4f6;}
.locationtth {background-color:#808080;color:White;vertical-align:top;width:25%;}
.locationtth td {padding-left:3px;}
.locationttd {background-color:#f1f1f1;vertical-align:top;width:25%;}
.locationttd td {padding-left:3px;}


/*Promo Prices*/
.pricetd {background-color:#f1f1f1;vertical-align:top;}
