/**
* Smartmessages main style sheet
* @package smartmessages
* @subpackage smartmessages_web_interface
* @copyright 2011 Synchromedia Limited
* @author Marcus Bointon <marcus@synchromedia.co.uk>
* @version $Id: smcustomer.css 2581 2011-11-14 18:07:34Z marcus $
*/
body, div, table, td, th, select, option, textarea, input, p, h1, h2, h3, h4, li, legend  { 
	/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Ubuntu, "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
	line-height: 130%;
	color: black;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
}
body {
	font-size: 0.75em;
	margin: 0;
}
p {
	padding: 0.2em 0;
	margin: 0;
}
textarea {
	font-size: 1.0em;
}
h1, h2, h3 {
	/*font-family: "Trebuchet MS", Arial, Helvetica, serif;*/
	font-family: Ubuntu, "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
	padding: 0.4em 0em 0.4em;
	text-shadow: 0.15em 0.15em 0.4em #BBBBBB;
	font-weight: 700;
	margin: 0;
	line-height: 1.0em;
}
h1 {
	font-size: 2.2em;
}
h2 {
	padding-bottom: 0.4em;
	font-size: 1.8em;
}
h3 {
	font-size: 1.5em;
}
tt {
	font-size: 1.3em;
}
a img {border: 0;}
pre {
	font-size: 1.2em;
}
form {display: inline;}
div.inlineform {display: inline; border: 0;}
a:link {
	color: #0a37cc;
	text-decoration: none;
}
a:visited {
	color: #2d64bd;
	text-decoration: none;
}
a:hover {
	color: green;
	text-decoration: none;
}
a:active {
	color: red;
	text-decoration: none;
}
input[type="submit"], input[type="reset"], input[type="button"], input[type="file"], select, select option {
	font-size: 1.0em;
}
.smallprint {
	font-size: 0.83em;
}
select.error, textarea.error, input.error {
	margin: 2px;
	padding: 2px;
	border: 2px solid red;
}
.error {color: red;}
.success {color: green;}
.indeterminate {color: orange;}
div.error {background-color: #FF98A1; color:black;}
div.error a {color:black; text-decoration: underline;}

/* Float clearing fix for IE */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block; clear: both;}
/* End hide from IE-mac */

.helpicon {
	vertical-align: -3px;
}
/* Main smartmessages logo header containing 2 images that are pushed left and right
Do them in this order so the the left image appears in front should they overlap */
#header, #footer {
	background: #000000; /* old browsers */
	background: -moz-linear-gradient(top, #000000 21%, #333333 67%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,#000000), color-stop(67%,#333333)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* ie */
	margin: 0;
	padding: 4px;
}
#header {
	text-align: left;
	padding: 4px 4px 0 4px;
}
#butterfly {
	position: absolute;
	right: 150px;
	top: 35px;
}
/* Pretty much every page in the site is wrapped in this div */
#mainbody {
	clear: both;
	padding: 10px 10px 80px 10px;
	background: #F7F7F7; /* old browsers */
	background: -moz-linear-gradient(top, #FAFAFA 0%, #D8D8D8 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#D8D8D8)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAFAFA', endColorstr='#D8D8D8',GradientType=0 ); /* ie */
}
#loginheader {
	clear:both;
	font-weight: bold;
	margin: 0;
	padding: 5px 4px 4px 4px;
	border: none;
	background: #FAD379; /* old browsers */
	background: -moz-linear-gradient(top, #FAD379 0%, #F9E9C5 27%, #FAD379 76%, #C4A160 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAD379), color-stop(27%,#F9E9C5), color-stop(76%,#FAD379), color-stop(100%,#C4A160)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAD379', endColorstr='#C4A160',GradientType=0 ); /* ie */
	text-shadow: 0.3em 0.2em 0.6em #777777;
}
#loginheader input, #loginheader select, #loginheader select option {
	font-size: 1.0em;
	font-weight: normal;
	vertical-align: 10%;
}
#loginheader img {
	vertical-align: -4px;
}
#footer {
	font-weight: bold;
	color: white;
	margin: 0;
	padding: 4px;
	clear: both;
}
#footer a {
	color: white;
	text-decoration: none;
}
fieldset {
	background: #f7f7f7; /* old browsers */
	background: -moz-linear-gradient(top, #D8D8D8 0%, #FAFAFA 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D8D8D8), color-stop(100%,#FAFAFA)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D8D8', endColorstr='#FAFAFA',GradientType=0 ); /* ie */
	margin: 10px 0;
	width:auto;
}
legend {
	font-weight: bold;
}
fieldset input[type="submit"], fieldset input[type="file"], fieldset select, fieldset select option {
	font-size: 1.0em;
}
div.smbox {
	background: #f7f7f7; /* old browsers */
	background: -moz-linear-gradient(top, #D8D8D8 0%, #FAFAFA 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D8D8D8), color-stop(100%,#FAFAFA)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D8D8', endColorstr='#FAFAFA',GradientType=0 ); /* ie */
	margin: 0 0 10px 0;
	width:auto;
	-webkit-box-shadow: 0.3em 0.3em 1.0em #666;
	-moz-box-shadow: 0.3em 0.3em 1.0em #666;
	box-shadow: 0.3em 0.3em 1.0em #666;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
div.smbox h2 {
	width: auto;
	border-bottom: 0 solid #333333;
	padding: 10px;
	background: #FAD379; /* old browsers */
	background: -moz-linear-gradient(top, #FAD379 0%, #F9BD3B 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAD379), color-stop(100%,#F9BD3B)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FAD379', endColorstr='#F9BD3B',GradientType=0 ); /* ie */
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
div.smbox h3 {
	background: #FAD379;
	padding:8px;
	margin: 4px 0;
}
div.smbox div.smboxcontent {
	padding: 4px;
}
.smbox .smboxcontent .displaybox {
	background-image: none;
	background-color: transparent;
}
div.formchunk {
	clear:left;
}
div.formchunk label, div.formchunk input {
	display: block;
	float: left;
	margin-bottom: 3px;
}
div.formchunk input, div.formchunk .input {
	vertical-align: 10%;
}
div.formchunk label, div.formchunk .label {
	text-align: right;
	width: 100px;
}
div.formchunk br {
	clear: left;
}
p.note {
	background: #303030; /* Old browsers */
	background: -moz-linear-gradient(top, #303030 0%, #444444 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#444444)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #303030 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #303030 0%,#444444 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #303030 0%,#444444 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #303030 0%,#444444 100%); /* W3C */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0.3em 0.3em 1.0em #888;
	-moz-box-shadow: 0.3em 0.3em 1.0em #888;
	box-shadow: 0.3em 0.3em 1.0em #888;
	margin: 2em 0 1em 0;
	color: white;
	padding: 1em;
}
p.note a {
	color: white;
	text-decoration: underline;
}
/* Special purpose display tables */
.layout {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
}
.displaybox {
	margin: 10px 0;
	padding: 0;
	border-spacing: 0;
	background: #f7f7f7; /* old browsers */
	background: -moz-linear-gradient(top, #D8D8D8 0%, #FAFAFA 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D8D8D8), color-stop(100%,#FAFAFA)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D8D8', endColorstr='#FAFAFA',GradientType=0 ); /* ie */
}
.displaybox td, .displaybox th {
	padding: 1px;
}
#loginbox {
	-webkit-box-shadow: 0.3em 0.3em 0.7em #888;
	-moz-box-shadow: 0.3em 0.3em 0.7em #888;
	box-shadow: 0.3em 0.3em 0.7em #888;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#loginbox td, #loginbox th {
	padding: 4px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
.displaybox .hth {
	text-align: right;
	padding: 0 4px;
	font-weight: bold;
}
.displaybox td h2, .displaybox.th h2 {
	background-color: #333333;
	color: white;
	padding: 4px;
}
tr.boxheader td, tr.boxheader th, td.boxheader, th.boxheader {
	color: white;
	font-weight: bold;
	background-color: #333333;
	text-align: left;
	padding: 1px;
}
.displaybox input[type="submit"], .displaybox input[type="file"], .displaybox select, .displaybox select option {
	font-size: 1.0em;
	vertical-align: 10%;
}
li.odd, .displaybox tr.odd td, .lister tr.odd td {
	background: #f7f7f7;
	vertical-align: middle;
}
li.even, .displaybox tr.even td, .lister tr.even td {
	background: #eef2fd;
	vertical-align: middle;
}
.entry th {
	text-align: right;
	width: 130px;
}
.entry td.label2 {
	text-align: right;
	width: 160px;
}

/* Table designed for form editing */
.editor {
	margin: 2px;
	border: 1px solid gray;
}
.editor input[type="submit"], .editor input[type="file"], .editor select, .editor select option {
	font-size: 1.0em;
	margin: 2px 1px;
}
.editor td {
	background-color: #CCCCCC;
	padding-right: 5px;
	padding-left: 5px;
}
.editor td.hth {
	color: white;
	background-color: #333333;
	font-weight: bold;
	text-align: right;
	padding-right: 5px;
	padding-left: 5px;
}
/* Table designed for displaying listings */
.lister {
	border: 0;
}
.lister input[type="submit"], .lister input[type="file"] {
	font-size: 1.0em;
	margin: 2px 1px;
	vertical-align: 10%;
}
.lister select, .lister select option {
	font-size: 1.0em;
	margin: 2px 1px;
	vertical-align: 10%;
}
.lister td {
	background-color: #CCCCCC;
	vertical-align: middle;
	padding: 0 5px;
}
.lister th {
	color: white;
	background-color: #333333;
	font-weight: bold;
	padding-right: 5px;
	padding-left: 5px;
}
.lister tr.nodata {
	color: white;
}
.lister tr.formfooter {
	color: white;
}
.lister tr.nodata td {
	background-color: #333333;
	color: white;
}
.lister tr.formfooter td {
	background-color: #333333;
}
li.odd, li.even {
	vertical-align: baseline;
}
.tabs2 img {
	border: 0;
	padding:0;
	margin: 0;
	vertical-align: -25%;
}
.tabs2 {
	padding:0px 0 0 0;
	margin-top: 8px;
	border: 0;
	clear:both;
	height:1.25em;
}
.tabs2 ul {
	padding-left: 0;
	margin-left: 0;
}
.tabs2 li {
	display:block;
	padding: 2px 4px 4px 4px;
	list-style:none;
	float:left;
	margin-left:2px;
	font-weight: bold;
	font-size: 1.2em;
	background-color:#333333;
	border: 1px solid #333333;
	border-bottom: 0;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
.tabs2 li.r {
	float: right;
	margin-left:0;
	margin-right:2px;
}
.tabs2 li.active {
	background-color: #FAD379;
	-webkit-box-shadow: 0 -0.2em 0.3em rgba(0,0,0,0.25);
	-moz-box-shadow: 0 -0.2em 0.3em rgba(0,0,0,0.25);
	box-shadow: 0 -0.2em 0.3em rgba(0,0,0,0.25);
}
.tabs2 li.active a:link, .tabs2 li.active a:visited {
	color: black;
}
.tabs2 li a, .tabs2 li a:link, .tabs2 li a:visited {
	color: white;
}
#helpWidget {
	width: 250px;
	float: right;
	border-top-width:1px;
	border-top-style:solid;
}
.tooltip {
	text-align: left;
	font-size: 0.9em;
	font-weight: normal;
	margin: 0.4em;
	padding: 0.4em;
	border: 1px solid black;
	border-radius: 0.5em;
	max-width: 25em;
	-webkit-box-shadow: 0.5em 0.5em 0.7em rgba(0,0,0,0.25);
	-moz-box-shadow: 0.5em 0.5em 0.7em rgba(0,0,0,0.25);
	box-shadow: 0.5em 0.5em 0.7em rgba(0,0,0,0.25);
	background: #fae2ad; /* Old browsers */
	background: -moz-linear-gradient(top, #fae2ad 0%, #fad379 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fae2ad), color-stop(100%,#fad379)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fae2ad 0%,#fad379 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fae2ad 0%,#fad379 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fae2ad 0%,#fad379 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae2ad', endColorstr='#fad379',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fae2ad 0%,#fad379 100%); /* W3C */
}
.tooltip.bad {
	background: pink;
	border: 1px solid red;
}
#modal_overlay {
	background-color: black;
}
img.templatepreview {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	-webkit-box-shadow: 0.3em 0.3em 1.0em rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0.3em 0.3em 1.0em rgba(0, 0, 0, 0.3);
	box-shadow: 0.3em 0.3em 1.0em rgba(0, 0, 0, 0.3);
	vertical-align:top;
}