/* stuff for the main page */

/* 62B1F2
137DCC
95CBF7 */

/* 0b66ad
6699cc
CEDFF0 */

/* print specific - removes nav elements to reduce amount of page cut off at right */

@media print {
	.mainLeft   {
		width: 0px !important;
		display:none !important;
	}
	
	.mainHeaderWireless, .mainHeaderImage, .mainFooterImage {
		display:none;
	}
	
	/* display mxlogo.gif although it has class mainHeaderImage */ 
	.mainHeaderLogo {
		display:inline;
	}
	
	.content {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
}


/* general stuff */

html {
    background: #fff;
    height: 100%;
}

body {
    background-color: #fff;
    font-family: Verdana, Sans-serif;
    font-size: 10pt;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

table {
    font-family: Verdana, Sans-serif;
    font-size: 10pt;
}

a {
    color: #0b66ad;
    text-decoration: none;
}

a:visited {
    color: #0b66ad;
    text-decoration: none;
}

a:hover {
    color: #0b66ad;
    text-decoration: underline;
}


/* IE6 doesn't mark acronym elements in any way so need to force decoration */
acronym {
	text-decoration: none;
	border-bottom:1px dotted;
}

dl {
	margin-left: 1em;
}
dt {
	font-weight: bold;
	padding-top: 0.5em;
	margin-left: 0.5em;
}	
dd { 
	padding-bottom: 0.5em;
	margin-left: 2em; 
}

form {
    margin-bottom: 5px;
    margin-top: 5px;
}

.small {
    font-size: 8pt;
}

.smallDarkBlue	{
    font-size: 8pt;
    color: #0b66ad; }
    
.hRule {
    color: #0b66ad;
}

.choice {
    color: #0b66ad;
}

h1 {
    font-family: Trebuchet MS, Arial, Sans-Serif;
    font-weight: bold;
    font-size: 16pt;
    margin: 0px;
    padding: 0px 7px 0px 7px;
    background-color: #0b66ad;
    line-height: 22pt;
/*  height: 22pt; */
    color: #FFF;
    cursor: default;
    display: block;
    background-image: url('img/tmpl/h1t2.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
}

h2, h3, h4 {
    font-family: Arial, Sans-Serif;
   /*probably best not to colour titles which aren't links - no way to distinguish them
     visually from titles which are links.
     ... except whilst I agree that titles shouldn't be being used as links, we shouldn't "fix" that by
     changing the colourscheme of the website and produce a weird harlequin of blue and black headings.
     So reverting for now.  -- Matthew */
    color: #0b66ad;
}

h2 a, h3 a, h4 a {
	text-decoration: underline ! important;
}

h3 {
	margin-top: 2em;
}

sub, sup {
    font-size: 7pt;
}

.prewrap {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* IE6 specific hack, as IE doesn't understand
   http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
   
h1 {
    * margin-bottom: -6pt;
}

h1 + h2 {
    margin-top: 1em;
}

h2 {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 1.5em;
}

h3 {
    font-size: 10pt;
    font-weight: bold;
}

.footnote {
    font-size: 6pt;
    font-weight: bold;
    vertical-align:super;
}

.picLeft, .picRight {
    margin: 1em;
}

.picLeft {
    float: right;
}

.picRight {
    float: right;
}

.provider {
    color: #0b66ad;
    font-style: italic;
}

/* old-style tables */

.table {
    background: #6699cc;
}
.tableHead {
    font-weight: bold;
    color: #fff;
    background: #0b66ad;
}
.tableHead a, .tableHead a:visited, .tableHead a:hover {
    color: #fff;
}
.tableCell {
    background: #cedff0;
}

.tableHeadDeprecated {
	background: #929292;	
	 color: #ffffff;
}

.tableCellDeprecated {
    background: #cccccc;
    
}

.tableDiffDeprecated { 
    font-weight: bold;
    background: #aaaaaa;
}

.tableHeadCallToClient {
	font-weight: bold;
	background: #0b66ad;
	color: #ffffff;
}
	
.tableCellCallToClient {
	
 	background: #cedff0;
	}

.tableCellGreen	{
    background: #cedff0;
}
.tableCellBlue {
    background: #6699cc;
}
.tableCellRed {
    background: #0b66ad;
}
.tableDiff { 
    background: #aaccee;
}

.smallHead {
    font-size: 8pt;
    font-weight: bold;
    color: #fff;
    background: #0b66ad
}
.smallCell {
    font-size: 8pt;
    background: #CEDFF0;
}

.mainBanner {
    font-weight: bold;
    color: #003876;
}
.smallQuote {
    font-size: 8pt;
    font-style: italic;
    color: #003876;
}

/* new cascading table style */

.newTable {
    background: #fff;
}
.newTable td {
    color: #000;
    text-align: center;
    background: #CEDFF0;
    padding: 3px;
}
.newTable th, .newTable .header {
    font-weight: bold;
    color: #fff ! important;
    background: #0b66ad ! important;
    padding: 3px;
}
.newTable .diff {
    background: #aaccee ! important;
}

.leftTable td, td.leftTable {
    text-align: left ! important;
}
.leftTable th, th.leftTable {
    text-align: left;
}


.newTable .leftgap { 
    border-left: 6px solid white;
}


/* spaced-out lists */
.spacey li
{
    margin-top: 1ex; 
}

/* Old Side menu stuff - to override defaults use ! important specifier. */

.menuTable { }

.menu0 {  }
.menu1 {  }
.menu2 {  }
.menu3 {  }

/****** master template ******/

.widecontent {
	margin-left:  15px;
	margin-right: 15px;
	min-height: 100px;
	border: 1px solid #FFF;
}

/* and now a hack that IE will only pick it up to fix the 3px height offset
   and to force a genuine minimum height, as IE interprets a plain height as
   a min-height. */
.widecontent {
	* height: 100px;
}

.content {
	margin-left: 269px;
	margin-right: 14px;
	border: 1px solid #FFF;
}


/* We either do this or nest another div inside .content with width=100% to stop 
   tables with width=100% pushing content out to be page-width wide, as Gecko tables
   don't seem to inherit the width of their parent correctly if it has margins.
   
.content table {
	width: auto ! important;
}
*/

.copyright {
    color: #ffffff;
    padding-top: 4px;
    font-size: 8pt;
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 18em;
    margin-left: -9em;    
}

/****** header & footer ******/

.pagebody {
    width: 100%;
    min-height: 94%;
}

/* and now a hack that IE will only pick it up to fix the footer's position,
   as it doesn't understand min-height - but interprets height as min-height. */
.pagebody {
    * height:94%;
}

.mainHeader {
    background-image: url('img/tmpl/top2.jpg');
    background-repeat: repeat-x;
    background-position: 254px 0px;
    width: 100%;
    height: 66px;
    padding-bottom: 14px;
}

.mainHeaderImage {
    position: absolute;
    top: 0px;
    left: 0px;
}

.mainHeaderLogo {
    z-index: 2;
}

.mainHeaderWireless {
    position: relative;
    z-index: 1;
}

.mainFooterWrapper {
    height: 6%;
    clear: both;
    position: relative;
}

.mainFooter {
    background-image: url('img/tmpl/bot2.jpg');
    background-repeat: repeat-x;
    background-position: 254px 0px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 23px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.mainFooterImage {
     position: absolute;
     top: 0px;
     left: 0px;
}

/****** sidebar ******/

.mainLeft {
	/*position: absolute;
	top: 81px;*/
    width: 240px;
    /*left: 14px;*/
    margin-left: 14px;
    z-index: 1;
    float: left;
}

.mainMenu {
    width: 240px;
    height: auto;
    background-color: #0b66ad;
/*  background-image: url('img/tmpl/serif2.gif');
    background-position: bottom right;
    background-repeat: no-repeat; */
    position: relative;
}

.mainMenuCorner {
	width: 16px;
	height: 21px;
	right: 0px;
	bottom: -1px;
	position: absolute;	
}

.mainMenuOptions {
    clear: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin-top: 0px;
    color: #FFF;
    line-height: 17px;
    margin-left: 0px;
}

.mainMenuOptions a:link    { color: #FFF; text-decoration: none; }
.mainMenuOptions a:visited { color: #FFF; text-decoration: none; }
.mainMenuOptions a:hover   {
    color: #FFF;
    background-color: #6698CC;
    text-decoration: none;
}
.mainMenuOptions li:hover   {
    color: #FFF;
    background-color: #6698CC;
    text-decoration: none;
}

.mainDemos {
    margin-top: 15px;
}

/****** frontpage slabs ******/

.slabTable {
    font-family: Verdana, Sans-serif;
    font-size: 10pt;
    margin-top: 4px;
    margin-left: -15px;
    margin-right: -15px;
    padding-right: -15px;
}

.slabDouble {
    width: 815px;
}

.slabSingle {
    width: 400px;
}


.slabPromo{
	width: 400px;
}

.slabCell {
    height: 100%;
    vertical-align: top;
    color: #0b66ad;
    border-top-color: #BDBDBD;      border-top-width: 1px;      border-top-style: solid;
    border-right-color: #BDBDBD;    border-right-width: 1px;    border-right-style: solid;
    background-image: url('img/tmpl/tail.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
}



.slabCell a:link     { color: #0b66ad; text-decoration: none; }
.slabCell a:visited  { color: #0b66ad; text-decoration: none; }
.slabCell a:hover    { color: #0b66ad; text-decoration: underline; }
.slabCell ul         { margin-left:20px;  margin-right:0px; padding-left: 0px; margin-top: 10px; margin-bottom: 0px;}
.slabCell li         { margin-left: 0px; padding-left: 0px;}

.slabCell h2 a {
    color: #fff ! important;
    text-decoration: none ! important;
}
.slabCell h2 a:hover {
    text-decoration: underline ! important;
}



.slabCell h2 {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
    background-color: #0b66ad;
    padding: 0px 7px 0px 3px;
    height: 20px;
    float: left;
    line-height: 18px;
    margin: 0px;
    cursor: pointer; cursor: hand;
}

.slabCellPromo h2 {
	cursor: default;
	}



	
.slabSerif {
    border: 0px;
    margin-left: -4px;
    vertical-align: top;
    clear: right;
}

.slabImage {
    float: right;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    border: 0px;
}

.slabList {
    color: #0b66ad;
    padding-right: 1em;
}

.slabDiv {
    vertical-align: top;
    color: #0b66ad;
    border-top-color: #BDBDBD;      border-top-width: 1px;      border-top-style: solid;
    border-right-color: #BDBDBD;    border-right-width: 1px;    border-right-style: solid;
    background-image: url('img/tmpl/tail.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
    margin-top: 15px;
    padding-bottom: 5px;
}

.slabDiv p {
    clear: both;
    text-align: center;
    margin: 0px;
}

.slabDiv h2 {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 7pt;
    font-weight: normal;
    color: #BDBDBD;
    margin: 0px;
    top: -9pt;
    position: relative;
}

.slabDiv img {
    border: 0px;
    margin-top: -5px;
}

/* uncomment this to stop list from flowing underneath the icon */

/*
.slabSingle .slabList {
    margin-right: 121px;
}

.slabDouble .slabList {
    margin-right: 200px;
}
*/

.slabSection {
    vertical-align: top;
    border-top-color: #BDBDBD;      border-top-width: 1px;      border-top-style: solid;
    border-right-color: #BDBDBD;    border-right-width: 1px;    border-right-style: solid;
    background-image: url('img/tmpl/tail.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
}

.slabSection h2 a {
    color: #fff ! important;
}

.slabSection h2 {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
    background-color: #0b66ad;
    padding: 0px 23px 0px 3px;
    float: left;
    line-height: 18px;
    margin: 0px;
    cursor: pointer; cursor: hand;
    
    background-image: url('img/tmpl/serif2.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
    border-bottom: 1em solid #fff;
}

.slabSection p {
    clear: both;
    /* margin-left: 1em ! important; */
    margin-right: 1em ! important;
    border-bottom: 1em solid #fff;
}

/* faq tables and other .css data */
.faqSearchForm {
    padding: 3px 3px 3px 10px;
    background: #cedff0;
    margin-top: 0px;
    background-image: url('img/tmpl/h1t2-blue.gif');
    background-position: bottom right;
    background-repeat: no-repeat;
}
.faqTableHead {
    font-weight: bold;
    text-align: left;
    color: #fff;
    background: #0b66ad;
}
.faqTableHead a, .faqTableHead a:visited, .faqTableHead a:hover {
    color: #fff;
}
.faqTableCell {
    background: #cedff0;
}
.faqHighlight {
    background: #ffff66;
    color: #000000;
}

.recruitment .figure {
    margin: 2px 1.5em 1.5em 1.5em;
    border: 1px #888 solid;
}

.recruitment .recruitmentimg {
    margin: 2px 1.5em 1.5em 1.5em;
}

.recruitmentContent {
    max-width: 823px;
    margin: 0px 14px 0px 14px;
}

/* hacks for IE6 */
.recruitmentContent {
    * width: 823px;
    * padding-top: 1em;
}

    
.recruitment .callout {
    background-color: #f4fbfe;
    float: right;
    padding: 1em 1em 0em 1em;
    margin: 0em 1em 1em 1em;
    max-width: 50%;
}

.recruitment .callout {
    * width: 50%;
}

.recruitment .callout h3 {
    color: #0b66ad;
    font-size: 12pt;
    margin: 0px;
    padding: 0px;
}

.recruitment .callout ul {
    float: left;
    margin: 0.5em 0em 0em 0em; 
    padding: 0em 1em 1em 2em;
}

.recruitmentTable {
    margin: auto;
}
	
.recruitmentTable td {
    margin: 2px;
}
    
.recruitmentTable td:first-child,
.recruitmentTableLeft {
    text-align: right;
    font-weight: bold;
    padding-right: 0.5em;
}

.recruitmentContent .profile {
    margin-bottom: 3em;
}

.recruitmentContent .profile h2 {
    margin-bottom: 0px;
}

.recruitmentContent .profile h4 {
    margin: 0px;
    font-style: italic;
}

.recruitmentContent .date {
    margin-left: 1em;
    font-style: italic;
}

/* Experimental TinyMCE Stuff
 
*[mce_name]:before, *[mce_name]:after {
    padding: 2px;
    background-color: #ad0b66;
    color: #fff;
    font-family: monospace;
}
*[mce_name]:before {
    content: "<" attr(mce_name) ">";
}
*[mce_name]:after {
    content: "</" attr(mce_name) ">";
}

*[locale]:before *[mce_name="mxdoc:Doc"] {
    content: "<" attr(mce_name) " locale=\"" attr(locale) "\">";
}
*[mce_name="mxdoc:Locale"]:before {
    content: "<" attr(locale) ">";
}
*[mce_name="mxdoc:Locale"]:after {
    content: "</" attr(locale) ">";
}
*[mce_name="mxdoc:TimeSensitive"] *[after]:before {
    content: "<" attr(mce_name) " after=\"" attr(after) "\">";
}
*[mce_name="mxdoc:TimeSensitive"] *[before]:before {
    content: "<" attr(mce_name) " before=\"" attr(before) "\">";
}
*[mce_name="xi:include"]:before {
    content: "<" attr(mce_name) " href=\"" attr(href) "\">";
}
*[mce_name="strong"]:before, *[mce_name="strong"]:after {
    padding: 0px;
    content: "";
}

*/

.mxDocUri {
	font-family: Courier New, Fixed, monospace;
	font-weight: bold;
	display: block;
	margin-left: 2em;
	margin-right: 2em;
}

.mxDocUriQueryKey {
	color: #008000;
}

.mxDocUriQueryValue {
	color: #800000;
}

.mxDocUriQueryValue span:after  {
	 content:"\00200B"
}

.codeExample {
	font-family: monospace;
}

.ctaResponseValue {
	color: #087546;
}

.ctaResponseValueStrong {
	color: #AA290B;
	font-weight: bold;
}

.ctaSteps {
	margin-left: 2em; 
	margin-right: 2em;
}

.ctaSteps .diagram {
	margin-top: 2em;
	margin-bottom: 3em;
}

.boxout {
	border: thin solid #6699cc;
	background-color: #eaf5ff;
	padding: 0.5em 1em;
	margin-left: 4em; 
	margin-right: 4em;
	margin-top: 2em;
	margin-bottom: 2em;
}

.boxout img {
	float:left;
	padding:1em;
	vertical-align:middle;
}

.boxout p {
	vertical-align:middle;
	margin-left: 36px;
}

/* Creates a border with some padding. This is for putting output examples in. (ENM 2010) */

.output {
	border: thin solid #6699cc;
	background-color: #ffffff;
	padding: 0.5em 1.5em;
	margin-left: 1.5em; 
	margin-right: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.ctaUi {
}

.ctaUi img {
	float: left;
	margin-left: 3em;
	margin-right: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.ctaUiImgOnly{
	margin-left: 3em;
	margin-right: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.ctaUiImgLeft{
	margin-left: 0.1em;
	margin-right: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
}


.ctaUiCaption {
	padding: 4em;
}

.ctaUi br {
	clear: both;
}

.ctaSms {
	font-family: monospace;
}
	
.devNote {
	border: thin solid #FF0000;
	background-color: #ffdab9;
	padding: 0.5em 1em;
	margin: 2em; 
}
	
.parameterName {
	font-family: monospace;
	font-weight: bold !important;
}
	
.parameterValue {
	font-family: monospace;
	font-weight: normal;
}

.newFeature {
	font-weight: bold;
	color: #ff0000;
}

/* small heading style used on SMS HTTP pages, etc. */

.refHeading {
	font-weight: bold;
	color: #111111;
}

/* stuff for the delivery reports tables */
table.drTable td { 
    text-align: left;
}

table.drTable tr.subsection td { 
    color: #fff;
    background-color: #0b66ad;
    padding: 3px;
    font-style: italic;
}

table.drTable td.indent, table.drTable tr.subsection td.indent,
table.drTable td.blank {
    background-color: #ffffff;
}

table.drTable td.reason {
    font-family: monospace;
}

table.drTable td.changed {
    background-color: #a66;
}

table.drTable td.reason_code { 
    font-family: monospace;
    text-align: right;
}

/* we don't italicise the reasoncode in heaters to make it align better
   vertically ... XXX but that makes it ook like a real reason code?
*/
table.drTable tr.subsection td.reason_code { 
    /* font-style: normal; */
}


/* force the checkbox cells to 31 pixels wide
 * 31 = sqrt (2*(12+2*5)^2))
 */
table.drTable td.checkbox { 
    text-align: center;
    padding: 0;
    margin: 0;
}

table.drTable td.checkbox div { 
    width: 31px;
}


table.drTable td.imghdr {
    padding: 0;
    background-color: #ffffff;
}


/* stuff for the popups used on various pages */

.popup {
    visibility: hidden;
    position: absolute;
    text-align: left;
    font-size: 10pt;
    background-color: #EEE;
    border: 1px solid #333;
    opacity: 0.9;
    padding: 0.3em;
    width: 250px;
    left: 0px;
}

.popup h3 {
    font-size: 10pt;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #888;
}