/*This is the home page with a frameset.
	
	Visit http://127.0.0.1/recharge/cssZone.css
	
	Started:	January 16, 2013
	Completed:	January 16, 2013
	Modified:		
		
	Copyright (c) 2013	*/
/*@import url(http://fonts.googleapis.com/css?family=Bree+Serif);*/
/* Reset Element to create consistency across browsers - Removed p, fieldset, strong, ul, li, em, b, footer, */
html, body, div, span, applet, object, iframe, h1, h2, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    /*vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}


@media print{ 		/*Specify style when printing*/
	.dont_print, .fixed_top, .info_bar {
		display: none;
    visibility: hidden;
	}
  #orderHolder{

  }

}

body{
  /*background-image: url("../images/bg_green.png");
  background-color: #FAFAFA;*/
  padding: 0px;
}

#site_logo{
      margin-top: 0px;
      margin-right: 30px;
      float: left;
      clear: right;
    }
 
.fixed_top {
    z-index: 50;  /*Ensures that the element stays above other fixed and absolute positioned elements except the Disclaimer*/
    top: 0px;   /*Eliminates the default page margin*/
    left: 0px;  /*Eliminates the default page margin*/
    width: 100%;
    height: 110px;
    border-bottom: 1px solid gray;
    display: block;
    background-color: white;
    padding-top:5px;
    box-sizing: border-box;
}
#headerText{
  font: normal 26px Tahoma;  
  width:100%; 
  margin-left: 150px; 
  display:inline
}
#miniMenu {
  position: fixed;
  right: 0px;
  top: 65px;
  font:bold 14px Verdana;
	text-decoration: none;
	color: black;
  padding:10px;
  text-transition: vertical;
  border-radius: 7px 0px 0px 7px;
  -moz-border-radius: 7px 0px 0px 7px;
  -webkit-border-radius: 7px 0px 0px 7px;
}

.info_bar {
	font:bold 12px Verdana;
  color: white;
  background-color: black;
  position: fixed;
  bottom:0px; 
  left: 0px;
  width:100%; 
  text-align:center; 
  z-index:500;
  padding: 5px;
  border-top: 1px solid white;
}

.info_bar a {text-decoration: none;}
.info_bar span{margin-right: 20px; font: normal 16px Arial;}
/*text-shadow: 0px 1px 0px white;*/
#dp_name{  color: #999999; }

#dp_log a, #dp_dash a{
  font-weight: bold;
  color:gray; 
  text-decoration: none;  
  border: 1px solid white; 
  padding: 1px 5px;
  box-sizing: border-box;
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
}
#dp_dash a{   color:#84c326; }

 #dp_cart{  
  color: #e46713; 
  padding: 2px 5px; 
  border: 1px solid white; 
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
 }
#dp_install{  color: #84c326; }

#dp_log a:hover, #dp_dash a:hover{ background-color:white;}


.nav_bar, #NavBar  {
	font:bold 12px Verdana;
	margin-top: 0px;
	text-align: center;
  display: block;
}

.nav_bar a#reg:link, .nav_bar a#reg:visited{
  font-weight: normal;
  display:inline;
	background-color: #fbfbfb;
  padding:10px;
  color: green;
  border: 1px solid orange;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.nav_bar a#reg:hover, .nav_bar a#reg .active-link {
  color: orange;
  border: 1px solid green;
}

.nav_bar a:link, .nav_bar a:visited ,a#miniMenu{
  font:bold 14px Verdana;
  display:inline-block;
	text-decoration: none;
	color: black;
  padding:10px;
	border-right: 2px outset #000000;
	border-left-width: 0px;
	background:rgb(132, 195, 38); /*#84c326 - Greenlike*/
  -webkit-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
}

 .nav_bar a.active-link, .nav_bar a:hover, a#miniMenu:hover {
	border-left: 2px outset #000000;
  border-right-width: 0px;
	background:rgb(228, 103, 19); /*#e46713 - Orangelike*/
  -webkit-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;    /*Animate the background colour of the links*/
}

.main_holder{
  display: block;
  left:0;         /*Eliminates the default page margin*/
  width: 100%;
  overflow: auto;
  box-sizing: border-box; /*This makes sure that the padding and eventually borders are included in the total width and height of the elements.*/
  padding-bottom: 20px;
}

.top_content{
  width: 100%;
	height: auto;
  background-color: orange;
  display: block;
	padding: 0px;
	margin-left:0px;
}
.column{
    font:normal 16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    display: inline-block;
    height: auto;
    padding: 10px;
    margin: 20px;
    margin-right: 0px;
    width: 31%;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    text-align: justify;
    float: left;
    background-color: white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.bottom_strip {   /*Contains style for displaying the footer section*/
  display: block;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
  overflow: auto;
  background-color: #EEEEEE;
  box-sizing: border-box;
}

.footer_stub {
  font: normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #e46713;
  text-align: center;
  /*background-color: white;*/
  width: 200px;
  display: inline-block;
  float: left;
  margin: 20px;
  border: 1px solid white;
}

.footer_stub a , .footer_stub a:visited , .footer_stub a:hover  {
  display: block;
  padding: 3px;
  text-decoration: none;
  margin-bottom: 10px;
  color: black;
}

.footer_stub .title {
  font:normal 18px Arial;
  text-align: center;
  padding: 3px;
  color: green;
  text-shadow: 0px 1px 0px white;      /*Add shadow (x, y, blur, color) to the text*/
  width: 100%;
  margin-top: -20px;
  background-color: #f8f8f8;/*#ff6600;*/
  box-sizing: border-box;
}

.row_content{
    font:normal 16px/2 "Trebuchet MS";
    display: block;
    width: auto;
    padding: 10px;
    margin: 20px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    text-align: justify;
    background-color: white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.login_holder {
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  display: inline-block; 
  width: 300px; 
  margin:0px 100px; 
  float:left;
  color: #555555;
  background-color: white;
  /*border: 1px dashed #e46713;*/
  box-shadow: 2px 2px 2px gray;   /*Add shadow (x, y, blur, color) to the DIV*/
  padding: 20px;
  border-radius: 5px;              /*Add rounded corners to the DIV*/
  -moz-border-radius: 5px;              /*Add rounded corners to the DIV*/
  -webkit-border-radius: 5px;              /*Add rounded corners to the DIV*/
}

.cform_holder {
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  display: inline-block; 
  width: 300px; 
  margin:10px 10px; 
  float:left;
  color: #555555;
  background-color: white;
  border: 1px solid #fbfbfb;
  box-shadow: 2px 2px 2px gray;   /*Add shadow (x, y, blur, color) to the DIV*/
  padding: 20px;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}
.rform_holder {
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  width: 320px; 
  color: #555555;
  background-color: white;
  border: 1px solid gray;
  box-shadow: -2px -2px 2px black;   /*Add shadow (x, y, blur, color) to the DIV*/
  padding: 20px 30px 0px 20px;
  margin:20px 20px 50px 10px; 
  float: right;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

.ep_form_holder {
  float: left;
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  width: 320px; 
  color: #555555;
  background-color: white;
  border: 1px solid gray;
  box-shadow: -2px -2px 2px black;   /*Add shadow (x, y, blur, color) to the DIV*/
  padding: 20px;
  margin:30px; 
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

.dCenter_holders {
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  color: #FFFFFF;
  padding: 25px 20px 10px 25px;
}
/*.dform_holder select{width: auto};*/

.side_menu_holder {
  width: 200px;
  height: 500px;
  background-color: #333333;
  position: fixed;
  top: 105px;
  left: 0px;
  box-sizing: border-box;
  z-index: 50;
}

.side_menu_holder a{
  font:bold 14px Verdana;
  display:block;
	text-decoration: none;
  padding:20px;
  border-bottom: 1px dashed white;
}

.side_menu_holder a, .side_menu_holder a:visited {
  color: white;
  background-color: #333333;
  border-bottom: 1px dashed gray;
  -webkit-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;
}

.side_menu_holder a.active-side-link, .side_menu_holder a:hover{
  color: #777777;
  background-color: black;
  -webkit-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;    /*Animate the background colour of the links*/
}

#title, #title2 , #title3{
  font: bold 20px Georgia;
  margin-bottom: 10px;
  display: block;
  text-shadow: 0px 1px 0px black;      /*Add shadow (x, y, blur, color) to the text*/
}

#title {	color: #e46713;}
#title2 {	color: #84c326;}
#title3 {	color: #bbbbbb;}

input {
  color: #777777;
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  display: block;
  width: 100%;
  padding: 7px;
  margin: 0px 0px 12px 0px;
  box-sizing: border-box; /*This makes sure that the padding and eventually borders are included in the total width and height of the elements.*/
  border: 1px solid #eeeeee;
}

input#lEmail, input#lPass {
  display:inline-block; 
  width:85%;
}

.input-addon{
  float: left;
  display:inline-block;
  padding: 3px 7px; 
  border-radius: 5px 0px 0px 5px; 
  background-color:#efefef; 
  font: normal 24px tahoma;
  text-align: center;
  width: 35px;
  height: 37px;
  box-sizing: border-box;
}
/*input type=[radio]{*/
input.rbutton{
  width: 20px;
  display: inline-block;
  margin: 8px 8px;
  box-sizing: border-box; /*This makes sure that the padding and eventually borders are included in the total width and height of the elements.*/
  border: 1px dashed #e46713;
}

select {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    background-color: #f1f1f1;
    margin-bottom: 8px;
    font:bold 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

textarea {
  font:normal 15px Tahoma;
  padding: 10px;
  resize: none;
  display: block;
}

p {
	line-height: 150%;
}

a.mybutton  {
  text-decoration: none;
}
.mybutton  {
  text-decoration: none;
  text-align: center;
  font:bold 14px Verdana;
  color: black;
  width: 100%;
  display:block;
  background-color:#e46713;
  padding:10px;
  margin: 10px 0px 10px 0px; 
  box-sizing: border-box;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

.smallButton  {
  text-decoration: none;
  text-align: center;
  font:bold 14px Georgia;
  color: black;
  width: auto;
  display:inline-block;
  background:rgb(132, 195, 38); /*#84c326 - Greenlike*/
  padding:10px;
  margin: 10px 20px 10px 0px; 
  box-sizing: border-box;
  border-radius: 5px; 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
}

.hidden{
	display: none;
	visibility: hidden;
}

h3{ 
	font: bold 16px Georgia, "Times New Roman", Times, serif;
	color: #e46713;
	background: #EFEFEF;
	border: 1px dashed #CFCFCF;
	padding: 5px;
}

.side_content{
    font:normal 16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    width: 100%;
    height: auto;
    padding: 10px 10px 10px 20px;
    box-sizing: border-box;
    /*position: absolute;*/
}

.cubes a{text-decoration: none;}

.cubes{
    font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #e46713;
    background-color: white;
    width: 230px;
    height: 255px;
    display: inline-block;
    float: left;
    margin: 20px;
    border: 1px solid #a4e346;/*#ffd3b3;*/
    box-sizing: border-box;
}
.cubes .title {
  font:normal 18px Arial;
  text-align: center;
  padding: 3px;
  display: block;
  color: green;
  text-shadow: 0px 1px 0px white;      /*Add shadow (x, y, blur, color) to the text*/
  width: 100%;
  margin: 0px;
  background-color: #f8f8f8;/*#ff6600;*/
  box-sizing: border-box;
}
.cubes img {width: 100%;}

#cat_bar{
  border-bottom: 1px solid #efefef;
  padding-left: 10px;
  background-color: #fafafa;
}

#cat_bar a{
  font:normal 15px "Lucida Sans Unicode", "Lucida Grande", sans-serif;;
  text-decoration: none;
  display:inline-block;
	color: #bbbbbb;
  padding:5px;
  border-right: 1px solid #dedede;
  -webkit-transition: color 0.8s ease-in-out;
  transition: color 0.8s ease-in-out;
}

#cat_bar a:active, #cat_bar a:hover{
  color: black;
  -webkit-transition: color 0.8s ease-in-out;
  transition: color 0.8s ease-in-out;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 4s;
  animation-name: fade;
  animation-duration: 4s;
}

@-webkit-keyframes fade {
  from {opacity: .1}
  to {opacity: 1}
  /*from {width: 0%}
  to {width: 100%}*/
}

@keyframes fade {
  from {opacity: .1}
  to {opacity: 1}
  /*from {width: 0%}
  to {width: 100%}*/
}

.form_splitter {
  padding: 10px;
  display:inline-block; 
  width:450px; 
  height:auto;
  box-sizing: border-box;
  float: left;
}

.datacenter_holder{
  left: 200px; 
  margin-top:95px; 
  margin-bottom:50px;
  position: absolute;     /*In this case - it ensures that the element stretches the full screen width */
  background-color: black;
  padding: 0px;
  color: white;
}

.prodCol{
  font:normal 14px Verdana; 
  display: inline-block;  
  height: 470px; 
  margin:0px; 
  float:left;
  color: #333333;
  background-color: white;
  /*border: 1px dashed #e46713;*/
  padding: 10px;
}
.prodCol input {margin: 0px;}

#prodTitle{
  font-weight: bold;
  width:auto; 
  background-color:black; 
  color:white; 
  padding: 10px; 
  margin-bottom: 10px; 
  display:block;
  border-radius: 7px; 
  -moz-border-radius: 7px; 
  -webkit-border-radius: 7px; 
}

#tPrice {
  font:bold 24px Arial; 
  text-align: center;
  color: #78bc20;
}
th{
  text-align: middle;
  margin: auto;
}

a#mainImage img{
 width: 400px;
 display: block;
}
#thumbnailStrip{position:relative; bottom: 0px;}

a.thumbnail{
  display: inline-block;
  border: 1px solid green;
  margin: 5px;
}

a.thumbnail:hover{
  border: 2px solid black;
}

.thumbnail img{
  width:70px;
  height:60px;
}

#cart_count{
  width: 45px; 
  height: 45px; 
  padding-top: 9px; 
  text-align: center; 
  box-sizing: border-box; 
  border-radius: 50%; 
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  background-color: #84c326; 
  color: black; 
  font: normal 24px Arial; 
  position: relative; 
  right: 5px; 
  top: 5px; 
  float: right
}

#cart_holder{
  background: url('../onlinestore/images/shopping_cart.png') no-repeat white; 
  width: 170px; 
  height: 190px; 
  border: 1px solid white;
}
.prodCol a {text-decoration: none;}

form{padding: 0px;}


.shopping_cart_item{
    font:bold 12px Verdana;
    width: auto;
    height: auto;
    padding: 10px;
    box-sizing: border-box; 
    border:1px solid #dddddd;
    margin: 10px;
    background-color: #fbfbfb;
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
}
.shopping_cart_item input{
  font-weight: normal;
  padding: 5px;
  font-size: 13px;
  color: black;
  display:inline;
}

#cart_summary {
  font:normal 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
  width: 300px; 
  color: #555555;
  background-color: white;
  border: 1px solid gray;
  border-radius: 5px;              /*Add rounded corners to the DIV*/
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  box-shadow: 2px 2px 2px black;   /*Add shadow (x, y, blur, color) to the DIV*/
  padding: 20px;
  margin:15px; 
  display: inline-block;
  text-align: center;
  top: 120px;
  right: 200px;
}

#cart_summary td {text-align: right; border-bottom: 1px dashed gray; padding-top: 10px;}

.itemCost{
  width: 200px;
  background-color: white;
  padding: 10px;
  border: 1px solid gray;
}

#tQty, #tCost, #shipping, #amtToPay, #numProducts {
  color: green;
  font: bold 16px arial; 
}
.itemAttrib{
  display: inline-block;
  margin-left: 20px;
}

#orderHolder {
 border: 1px dashed #84c326;
 margin: auto;
 margin-bottom: 20px;
 width: 800px;
 height: auto;
 padding: 10px 20px 20px 20px;
}

.address, .orderDetail{
  width: 310px;
  padding: 10px;
  border: 1px solid black;
  box-shadow: 2px 2px 1px gray;
  display: inline-block;
  font-size: 14px;
  font-family: "Lucida Sans Unicode";
  line-height: 180%;
  margin: 10px 40px 5px 0px;
}

.address {
  font-family: "trebuchet ms";
  float: left;
  margin: 10px 70px 20px 0px;
}

#orderTable {
  border: 1px solid gray;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

#orderTable td{
  font-size: 14px ;
  font-family: Verdana; /*"Lucida Sans Unicode";*/
  border-bottom: 1px solid gray;
  padding: 10px;
  margin-top: 10px;
}

iframe{
  padding:0px;
  margin: 0px;
}


iframe[seamless] { 
    display: block;
}

li{line-height: 200%;}

.edit_link{
  float: right;
}

#order_list_table{
  padding: 10px;
  font: normal 15px 'Trebuchet MS';
}

#order_list_table td  {
  font: normal 14px Verdana;
  padding: 10px;
  border-bottom: solid 1px black;
}