/* FONTS */

.title .text {font-family: Arial, Helvetica, sans-serif; font-size: 28px; color: #555555; text-align: center;}
.title .subtext {font: 14px Arial, Helvetica, sans-serif; color: #666666; text-align: center;}
.h100 .text, .top > .text {font-family: Arial, Helvetica, sans-serif; font-size: 60px; letter-spacing: -3px;}
.h100 .subtext {font: 16px bold Arial, Helvetica, sans-serif; font-weight: 900;}
.top .subtext {font: 16px Arial, Helvetica, sans-serif;}
.title .text.left, .title .subtext.left, .h100 .text.left, .h100 .subtext.left {text-align: left;}

.header .nav, #header #nav {font: 12px "Helvetica Neue", "HelveticaNeue", Arial, Helvetica, sans-serif; font-weight: 900; text-align: center; line-height: 48px; text-transform: uppercase;}
.header .nav a, #header #nav a {color: #666; text-decoration: none; }
#footer a, #helper a, #TB_helper a, .top a {color: #555555; text-decoration: none; }
.nav a:hover, .nav .select, .nav .select-small {color: #555555;}
.subnav, #subnav {font: 12px "Helvetica Neue", "HelveticaNeue", Arial, Helvetica, sans-serif; font-weight: 400; line-height: 24px; text-transform: none;}
.top, .top p, .title .content p {color: #FFF;}
.top .content p {} /*filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;}*/
#footer p, #helper p, #TB_helper p {font: bold 11px Arial, Helvetica, sans-serif; color: white; text-align: right;} /* filter:alpha(opacity=67); -moz-opacity:.67; opacity:.67;*/
.bbox .nav p {font: 11px "Helvetica Neue", "HelveticaNeue", Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; text-transform: uppercase;}
.bbox .nav .select p {font-weight: 900;}

h1 {color: #003060;}
h2 {font: bold 22px Arial, Helvetica, sans-serif; color: #2D4359; letter-spacing: -1px; line-height: 26px; margin: 0;}
h3 {font: bold 20px Arial, Helvetica, sans-serif; color: #003060; letter-spacing: -1px; line-height: 24px; margin: 0; padding: 0 0 8px 0;}
h4, .h4 {font: bold 16px Arial, Helvetica, sans-serif; color: #406080; letter-spacing: -1px; line-height: 20px; padding: 0; margin: 8 0 5px 0;}
h5, .h5 {font: 11px Arial Black, Arial, Helvetica, sans-serif; color: #004080; letter-spacing: 1px; margin: 0; padding: 0 0 8px 0; text-transform: uppercase;}
h6, .h6 {font: bold 8px Arial, Helvetica, sans-serif; color: #728FAB; letter-spacing: 1px; margin: 0; padding: 5px 0 5px 0; text-transform: uppercase;}

p, td, .card-field, .tile .text, li, #TB_caption {font: 12px "Segoe UI", Arial, Helvetica, sans-serif; line-height: 18px;}
.card-desc, .card-header p {font: bold 11px Arial, Helvetica, sans-serif; color: #406080; text-transform: uppercase;}
.card-desc strong {font: 11px Arial Black, Arial, Helvetica, sans-serif; font-weight: normal;}
textarea, input, select {font: 12px "Segoe UI", Arial, Helvetica, sans-serif;}
.card-input.large {font: 28px Arial, Helvetica, sans-serif;}

.w4 .rbox h4, .w5 .rbox h4 {font-size: 12px; text-align: center; line-height: 14px; letter-spacing: 0;}
.w4 .rbox p, .w5 .rbox p {font-size: 11px; text-align: center; line-height: 14px;}
.w4 .rbox li, .w5 .rbox li {font-size: 11px; line-height: 14px;}

.sIFR-active .title .text span, .sIFR-active .title .subtext span {visibility: hidden;}
.sIFR-active .h100 .text span, .sIFR-active .h100 .subtext span {visibility: hidden;}
.sIFR-active .top .text span, .sIFR-active .top .subtext span {visibility: hidden;}

.more {text-align: right;}

a {color: #004080;}

.mbox a {text-decoration: none; border-bottom: 1px dotted #B2CFFB; color: #004080;}
.mbox a:hover {text-decoration: none; border-bottom: 1px dotted #004080; }
a.zoom, a.zoom:hover {border: 0;}
.top a:hover {text-decoration: none; border-bottom: 1px dotted #FFFFFF; }

.rbox.button p {color: #000000;}
.button p, .button .text {font-family: "Segoe UI", Arial, Helvetica, sans-serif; color: white;}
.button p {text-align: center; font-size: 12px;}
.s200x60 {color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -1px;}

.sidebar, .sidebar p, .sidebar li {font: 11px "Segoe UI", Arial, Helvetica, sans-serif; color: black; line-height: 16px;}
.diagram p {font-size: 11px; line-height: 14px;}
.betatag {position: relative; top: -4px; font-size: 66%; font-style: italic; color: #FF8800}
.h100 .betatag {top: -10px;}

.emboss .first {position: relative; display: block; max-height: 1px; height: 1px; color: #000;}
.emboss .second {position: relative; display: block;}

.shadow .first {position: relative; display: block;  max-height: 1px; height: 1px; z-index: 5;}
.shadow .second {position: relative; display: block; color: #000;}

.shadow.white .second {color: #fff;}

.count {font-size: 75%;}

.highlight h4 {color: #2288DD;}
.highlight {cursor: help;}
.highlight-cover {display: none;}


/* POSITION */

html, body {overflow-x: hidden; overflow-y: auto; background: #efefef;}

/* Container is used for normal scrolling pages, while Dialog is used for modal wizard-like pages. */
#container, #dialog {position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 540px; min-width: 1000px;}

/* Background is done with my special stretch technique */
#container .background .layer, #dialog .background .layer {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.background-simple {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px;
	background: url('images/dbox-simple.png') repeat-x;
}

/* Header */
#container .header, #container #header {position: relative; top: 0; left: 50%; margin-left: -490px; width: 980px; height: 70px;}
#container .header .logo, #container #header #logo {position: absolute; top: 19px; left: 25px; width: 210px; height: 38px; background: url('images/logo-nav.png') no-repeat;}
#dialog .header {position: absolute; top: 0; left: 0; width: 100%; height: 80px;}
#dialog .header .logo {position: fixed; top: 16px; left: 16px; width: 36px; height: 32px; background: url('images/logo-single.png') no-repeat; z-index: 9999;}
#dialog.narrow .header .logo {left: 50%; margin-left: -474px;}

/* Header Navigation */
.header .nav, #header #nav {
	position: absolute;
	top: 2px;
	left: 250px;
	width: 750px;
	height: 50px;
}
.header .nav div, #header #nav div {display: inline; padding: 0 18px 10 17px; float: left;}
.header .nav .select, #header #nav .select {background: url('images/nav-select.png') center 25px no-repeat;}
.nav .download {color: #88BBFF; background: url('images/nav-select-download.png') center 25px no-repeat;}
.header .nav .select-small {background: url('images/nav-select-small.png') center 25px no-repeat;}

/* Header Sub-Navigation (Line 2) */
.header .nav .subnav {position: absolute; top: 38px; left: 0; margin-left: -11px; height: 20px; width: 735px;}
.header .nav .subnav div {display: inline; float: left; padding: 0 10px 10px 10px;}
.header .nav .subnav .select {background: url('images/nav-sub-select.png') center 12px no-repeat;}
.header .nav .subnav .select-small { background: url('images/nav-select-small.png') center 12px no-repeat;}
.header .nav .subnav .nav-search {display: inline; float: right;}
.header .nav .subnav .nav-search .nav-search-text {width: 200px;}

/* Main Content */
#container #content {position: relative; top: 0; left: 50%; margin-left: -490px; width: 980px;}

#dialog #content {position: absolute; top: 80; bottom: 80; left: 50%; margin-left: -490; width: 980;}
#dialog #c2 {display: table; width: 100%; height: 100%; margin-bottom: 80;}
#dialog #c3 {display: table-cell; vertical-align: middle;}
/* #dialog #content {position: relative; top: -80; left: 50%; margin-left: -490; width: 980; margin-bottom: -80;} */

/* Page Title */
.title {position: relative; left: 50%; margin-left: -500; width: 1000; height: 80;}
#dialog .title {top: -10; z-index: 5;}
.title .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.title .back .tl {position: absolute; top: 0; left: 0; width: 11; height: 11; background: url('images/tbox-tl.png') no-repeat;}
.title .back .tm {position: absolute; top: 0; left: 11; width: 978; height: 11; background: url('images/tbox-tm.png') repeat-x;}
.title .back .tr {position: absolute; top: 0; right: 0; width: 11; height: 11; background: url('images/tbox-tr.png') no-repeat;}
.title .back .l {position: absolute; top: 11; left: 0; width: 11; height: 58; background: url('images/tbox-l.png') no-repeat;}
.title .back .m {position: absolute; top: 11; left: 11; width: 978; height: 58; background: url('images/tbox-m.png') repeat-x;}
.title .back .r {position: absolute; top: 11; right: 0; width: 11; height: 58; background: url('images/tbox-r.png') no-repeat;}
.title .text {position: absolute; top: 24; left: 30; width: 920; height: 30;}
.title .content {position: relative; top: 30; left: 30; width: 100%}

/* Page Title - Tall 100px Type */
.h100 {height: 150;}
.h100 .back .l {position: absolute; top: 11; left: 0; width: 11; height: 90; background: url('images/tbox-l-100.png') no-repeat;}
.h100 .back .m {position: absolute; top: 11; left: 11; width: 978; height: 90; background: url('images/tbox-m-100.png') repeat-x;}
.h100 .back .r {position: absolute; top: 11; right: 0; width: 11; height: 90; background: url('images/tbox-r-100.png') no-repeat;}
.h100 .text {position: absolute; top: 26; left: 30; width: 920; height: 100;}
.h100 .subtext {position: absolute; top: 100; left: 30; width: 920; height: 30;}

/* Page Top (for display screenshots without Title) */
.top {position: relative; left: 50%; margin-left: -490; width: 1000; z-index: 5;}
.top .text {padding: 20 20 0 20;}
.top .subtext {padding: 0 20 0 20;}
.top .content {position: relative; top: 30; left: 30; width: 100%}

/* Bottom Navigation Box */
.bbox {position: fixed; top: 100%; margin-top: -59; left: 50%; margin-left: -500; width: 1000; height: 59;}
.bbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.bbox .back .l {position: absolute; top: 0; left: 0; width: 11; height: 59; background: url('images/bbox-l.png') no-repeat;}
.bbox .back .m {position: absolute; top: 0; left: 11; width: 978; height: 59; background: url('images/bbox-m.png') repeat-x;}
.bbox .back .r {position: absolute; top: 0; right: 0; width: 11; height: 59; background: url('images/bbox-r.png') no-repeat;}

.bbox .nav {position: absolute; top: 0; left: 0; width: 100%; height: 59;}
.bbox .nav div {display: inline-block; position: relative; width: 60; height: 59;}
.bbox .center {text-align: center;}
.bbox .nav div p {position: absolute; top: 36; left: 2; width: 56; margin: 0; padding: 0;}
.bbox .nav a {text-decoration: none;}
.bbox .nav div img {position: absolute; top: 0; left: 14; margin: 0; padding: 0; border: 0;}
.bbox .nav .next {width: 22; background: url('icons/next.png') center center no-repeat;}
.bbox .nav .select {background: url('images/bbox-select.png') center bottom no-repeat;}
.bbox .nav .disabled {background: none;}

/* Middle Boxes */
.mbox {
	position: relative;
	width: 980;
	min-height: 120;
	display: inline-block;
	margin-bottom: 10;
	background-image: url(../common/images/wbg.png);
	height: 360;
}
.mbox .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2355px;
}
.mbox .back .tl {position: absolute; top: -4; left: -10; width: 11; height: 110; background: url('images/mbox-tl.png') no-repeat;}
.mbox .back .tm {position: absolute; top: -4; left: 1; right: 1; height: 110; background: url('images/mbox-tm.png') repeat-x;}
.mbox .back .tr {position: absolute; top: -4; right: -10; width: 11; height: 110; background: url('images/mbox-tr.png') no-repeat;}
.mbox .back .ml {position: absolute; top: 106; bottom: 1; left: -10; width: 11; background: url('images/mbox-ml.png') repeat-y;}
.mbox .back .mm {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color:white; padding-left:15px;}
.mbox .back .mr {position: absolute; top: 106; bottom: 1; right: -10; width: 11; background: url('images/mbox-mr.png') repeat-y;}
.mbox .back .bl {position: absolute; bottom: -11; left: -10; width: 11; height: 12; background: url('images/mbox-bl.png') no-repeat;}
.mbox .back .bm {position: absolute; bottom: -11; left: 1; right: 1; height: 12; background: url('images/mbox-bm.png') repeat-x;}
.mbox .back .br {position: absolute; bottom: -11; right: -10; width: 11; height: 12; background: url('images/mbox-br.png') no-repeat;}

.mbox .backtop-link {
	position: absolute;
	top: 220px;
	right: -9px;
	z-index: 20;
	background-image: url(../common/images/rbox-select-tm.png);
	width: 970px;
}
.mbox .backtop-link a, .mbox .backtop-link a:hover {border: 0;}

/* Middle Boxes with a Specific Width or Height */
.w50 {width: 490; clear: none; float: left; margin-bottom: 10;}
.w33 {width: 326; clear: none; float: left; margin-bottom: 10;}
.w67 {width: 654; clear: none; float: left; margin-bottom: 10;}

.h300 {height: 300; max-height: 300;}
.mbox-with-h3 .back .mm {position: absolute; top: 100; bottom: 0; left: 0; right: 0; background: url('images/mbox-mm.png') repeat;}
.mbox-with-h4 .back .mm {position: absolute; top: 40; bottom: 0; left: 0; right: 0; background: url('images/mbox-mm.png') repeat;}
.h300 .back .mm {background: url('images/mbox-mm-300.png') repeat-x;}

.h100 .back .mm {background: url('images/mbox-mm-160.png') repeat-x;}
.h160 .back .mm {background: url('images/mbox-mm-160.png') repeat-x;}

.h50 {min-height: 50;}
.h50 .back .tl, .h50 .back .tr {background: none;}
.h50 .back .ml, .h50 .back .mr {top: 0;}

/* Middle Box Content */
.mbox .content {
	position: relative;
	z-index: 2;
	padding: 20;
	zoom: 1;
}
#TB_window.mbox .content {padding: 0;}
.mbox .content h1 {position: relative; height: 40; max-height: 31; padding: 9 30 0 30; background: url('images/mbox-mm-40.png') repeat-x; margin-bottom: 20;}
.mbox .content h2 {position: relative; padding: 16 20 16 20; background: url('images/mbox-mm-h2.png') repeat-x bottom; margin: -20 -20 20 -20;}
.mbox .content p {
	position: relative;
	margin: 0;
	padding: 0 0 5 0;
}
/* #dialog .mbox .content {max-height: 500; overflow-x: hidden; overflow-y: auto;} This puts the scrollbar in a neat place, but I don't have a way to determine a max-height in CSS, and will result in double scrollbar hell in x768 users. 600 is a little arbitrary, no? I guess for 1280x1024 not to explode */

.mbox .full-diagram {position: relative; z-index: 2;}
.mbox .diagram {position: relative; z-index: 2;}
.mbox .diagram h5 {padding: 0; margin: 0 0 5 0;}
.mbox .diagram p {padding: 0; margin: 0 0 5 0;}

/* Sidebar Box */
.mbox .sidebar {
	position: relative;
	float: right;
	margin-right: -20;
	width: 320;
}

.sbbox {
	position: relative;
	margin: 0 0 20 20;
	padding: 1 20 1 0;
}
.sbbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sbbox .back .t {position: absolute; top: 0; left: 0; width: 280; height: 10; background: url('images/sbbox-t.png') no-repeat;}
.sbbox .back .m {position: absolute; top: 10; bottom: 100; width: 280; background: url('images/sbbox-m.png') repeat-y;}
.sbbox .back .b {position: absolute; bottom: 0; left: 0; width: 280; height: 100; background: url('images/sbbox-b.png') no-repeat;}

/* Round Box */
.rbox {position: relative; display: inline-block; margin: 0 0 20 0; width: 100%; height: 100%;}
.rbox .back {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.rbox .back .tl {position: absolute; top: 0; left: 0; width: 10; height: 10; background: url('images/rbox-tl.png') no-repeat;}
.rbox .back .tm {position: absolute; top: 0; left: 10; right: 10; height: 10; background: url('images/rbox-tm.png') repeat-x;}
.rbox .back .tr {position: absolute; top: 0; right: 0; width: 10; height: 10; background: url('images/rbox-tr.png') no-repeat;}
.rbox .back .ml {position: absolute; top: 10; bottom: 10; left: 0; width: 10; background: url('images/rbox-ml.png') repeat-y;}
.rbox .back .mm {position: absolute; top: 10; bottom: 10; left: 10; right: 10; background: url('images/rbox-mm.png') repeat;}
.rbox .back .mr {position: absolute; top: 10; bottom: 10; right: 0; width: 10; background: url('images/rbox-mr.png') repeat-y;}
.rbox .back .bl {position: absolute; bottom: 0; left: 0; width: 10; height: 10; background: url('images/rbox-bl.png') no-repeat;}
.rbox .back .bm {position: absolute; bottom: 0; left: 10; right: 10; height: 10; background: url('images/rbox-bm.png') repeat-x;}
.rbox .back .br {position: absolute; bottom: 0; right: 0; width: 10; height: 10; background: url('images/rbox-br.png') no-repeat;}

/* Round Box on Hover or Select */
.rbox.hover .back .tl {background: url('images/rbox-hover-tl.png') no-repeat;}
.rbox.hover .back .tm {background: url('images/rbox-hover-tm.png') repeat-x;}
.rbox.hover .back .tr {background: url('images/rbox-hover-tr.png') no-repeat;}
.rbox.hover .back .ml {background: url('images/rbox-hover-ml.png') repeat-y;}
.rbox.hover .back .mm {background: url('images/rbox-hover-mm.png') repeat;}
.rbox.hover .back .mr {background: url('images/rbox-hover-mr.png') repeat-y;}
.rbox.hover .back .bl {background: url('images/rbox-hover-bl.png') no-repeat;}
.rbox.hover .back .bm {background: url('images/rbox-hover-bm.png') repeat-x;}
.rbox.hover .back .br {background: url('images/rbox-hover-br.png') no-repeat;}

.rbox.select .back .tl {background: url('images/rbox-select-tl.png') no-repeat;}
.rbox.select .back .tm {background: url('images/rbox-select-tm.png') repeat-x;}
.rbox.select .back .tr {background: url('images/rbox-select-tr.png') no-repeat;}
.rbox.select .back .ml {background: url('images/rbox-select-ml.png') repeat-y;}
.rbox.select .back .mm {background: url('images/rbox-select-mm.png') repeat;}
.rbox.select .back .mr {background: url('images/rbox-select-mr.png') repeat-y;}
.rbox.select .back .bl {background: url('images/rbox-select-bl.png') no-repeat;}
.rbox.select .back .bm {background: url('images/rbox-select-bm.png') repeat-x;}
.rbox.select .back .br {background: url('images/rbox-select-br.png') no-repeat;}

/* Round Box Rows and Columns */
.row {margin: 0 -30 0 0;}
.column {display: inline-block; vertical-align: top; margin: 0 25 0 0;}
.column-block {display: inline-block; vertical-align: top; margin: 0 25 -20 0;}
.w2 {width: 445;}
.w3 {width: 293;}
.w32 {width: 586;}
.w4 {width: 220; margin-right: 15;}
.w5 {width: 172; margin-right: 15;}
.w6 {width: 140; margin-right: 15;}
.rbox-w2 {width: 460; margin-right: 15;}
.rbox-w3 {width: 300; margin-right: 15;}
.rbox-w23 {width: 620; margin-right: 15;}

/* List Adjustments */
li {margin: 0 0 5 0; padding-left: 12; text-indent: -12; list-style-image: url('icons/bullet.png'); list-style-position: inside;}
ul {margin-bottom: 20;}
.w4 .rbox li {margin: 0; list-style-image: url('icons/bullet-small.png');}

/* Helper Buttons */
#helper, #TB_helper {position: fixed; top: 0; right: 0; width: 100; padding: 10 10 0 0; z-index: 90;}
#TB_helper {z-index: 1000;}
#helper p, #TB_helper p {padding: 0 0 3 0; margin: 0;}
#helper p span, #TB_helper p span {display: none; padding-right: 3;}
#helper img, #TB_helper img {display: inline; vertical-align: middle; margin: 1;}
#dialog.narrow #helper {right: 50%; margin-right: -490;}

/* Footer */
#container #footer {
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -490;
	width: 200;
	padding: 15 0 25 0;
}
#content #footer {position: relative; top: 10; width: 1000;}
#dialog #footer {position: fixed; bottom: 0; right: 0; left: 50%; margin-left: 500; padding: 0 10 10 0; overflow: hidden; z-index: 1000;}
#footer p {padding: 0; margin: 0;}
#dialog.narrow #footer {right: 50%; margin-right: -490; margin-left: 400;}

/* Miscellaneous */
hr {border: 0px; background: #edf6f9; height: 1px; margin: 20 -20 20 -20;}
.thickboxed {display: none;}
/*#TB_window .content {width: 940;}*/
#TB_window .table {width: 940;}
#TB_window h2 {padding-right: 80; margin-right: -80;}
#TB_window .command {position: relative; left: -20; width: 980; margin: 20 0 0 0;}


/* Buttons */
.button {cursor: pointer;}
.button a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; border: none; color: white; z-index: 10; }
.button a:hover {border: none;}

.button.disabled {cursor: default; color: gray;}
.button.disabled a {color: gray;}

.s190x30 {position: relative; top: 0; left: 0; width: 190px; height: 30px;}
.s190x30 p {line-height: 26px;}
.s190x30.green {background: url('images/button-green-190x30.png') no-repeat;}

.s200x30 {position: relative; width: 200px; height: 30px;}
.s200x30 p {line-height: 30px;}
.s200x30.green {background: url('images/button-green-200x30.png') no-repeat;}	/* Green is for Beginning a process that is no permanent yet. */
.s200x30.blue {background: url('images/button-blue-200x30.png') no-repeat;}		/* Blue is for normal things. */
.s200x30.gray {background: url('images/button-gray-200x30.png') no-repeat;}		/* Gray is for Cancellation that is no big deal. */
.s200x30.orange {background: url('images/button-orange-200x30.png') no-repeat;}	/* Orange is for Creation of a process that is permanent. */
.s200x30.red {background: url('images/button-red-200x30.png') no-repeat;}		/* Red is for Destruction that is big deal. */
.s200x30.disabled {background: url('images/button-disabled-200x30.png') no-repeat;}		/* Disabled is for any temporarily disabled functions. */

.s200x60 {
	position: relative;
	top: 0;
	left: 0;
	width: 234px;
	height: 74px;
	background-image: url(images/button-disabled-200x60.png);
}
.s200x60 .icon {position: absolute; top: 16; left: 20; width: 32; height: 32;}
.s200x60 .text {position: absolute; top: 16; left: 62; width: 180; height: 40;}
.green.s200x60 {background: url('images/button-green-200x60.png') no-repeat;}
.s200x60.disabled {background: url('images/button-disabled-200x60.png') no-repeat;}
.sepline {background: url(images/sepline.png) x-repeat;}

/* Tiles for Icons */
.tiles {padding: 5 0 5 0;}
.tiles + .tiles {padding: 0 0 5 0; margin-top: -5;}

.tile.s48x48 {position: relative; display: inline-block; width: 88; height: 94; margin: 1;}
.tile.s48x48 .icon {position: absolute; top: 6; left: 0; width: 88; text-align: center;}
.tile.s48x48 .text {position: absolute; top: 58; left: 0; width: 88; text-align: center;}
.tile.s48x48 .back {position: absolute; top: 0; left: 0; width: 88; height: 94;}

.tile.s64x64 {position: relative; display: inline-block; width: 102; height: 104; margin: 1;}
.tile.s64x64 .icon {padding-top: 6; left: 0; width: 102; text-align: center;}
.tile.s64x64 .text {padding-top: 6; left: 0; width: 102; text-align: center;}
.tile.s64x64 .back {top: 0; left: 0; width: 102; height: 104;}

.tile.s96x96 {position: relative; display: inline-block; width: 144; height: 148; margin: 1;}
.tile.s96x96 .icon {position: absolute; top: 6; left: 0; width: 144; text-align: center;}
.tile.s96x96 .text {position: absolute; top: 108; left: 4; width: 136; text-align: center;}
.tile.s96x96 .back {position: absolute; top: 0; left: 0; width: 144; height: 148;}

.tiles a, .tiles a:hover {border: 0;}
a:hover .tile .back {border: 1px solid black; background: #004488; -webkit-border-radius: 5px; -webkit-opacity: .10; -moz-border-radius: 5px; -moz-opacity: .10; border-radius: 5px; opacity: .10; filter: alpha(opacity = 10);}


/* Tables */


/* Edit Cards or Settings Cards for Dialog Mode */

.card {display: table; padding: 10 0 10 0; width: 100%;}
.table {display: table; margin: 10 0 10 0; border-top: 1px dotted white; width: 100%;}
.card-row {display: table-row;}
.table .card-row div {border-bottom: 1px dotted white; padding: 8 0 2 0;}
.card-desc {display: table-cell; width: 240; padding: 3 10 3 0; text-align: right; vertical-align: middle;}
.card-field {display: table-cell; padding: 3 0 3 0; text-align: left; vertical-align: middle;}
.card-field.error {background: url('icons/warn.png') 0px 4px no-repeat; text-indent: 20px;}

.card-input {width: 600;}
.card-input.small {width: 175;}
.card-input.large {width: 600; height: 40;}
.card-input.error {background: #FFEEBB;}
.card-checkbox {position: relative; top: 2; margin-right: 5;}
.card-field textarea {width: 600; height: 90;}
.command {position: relative; height: 60; width: 100%; left: 0; background: url('images/mbox-mm-60.png') repeat-x bottom; text-align: center;}
.command .left {display: inline-block; float: left; left: 20; width: 200; height: 30; top: 15; margin-right: 10;}
.command .center {position: absolute; left: 50%; margin-left: -100; width: 200; height: 30; top: 15;}
.command .right {display: inline-block; float: right; right: 20; width: 200; height: 30; top: 15; margin-left: 10;}
input.button {border: 0; color: white; cursor: pointer;}

.command .button.green {background: url('images/button-green-200x30.png') no-repeat;}
.command .button.blue {background: url('images/button-blue-200x30.png') no-repeat;}
.command .button.gray {background: url('images/button-gray-200x30.png') no-repeat;}
.command .button.orange {background: url('images/button-orange-200x30.png') no-repeat;}
.command .button.red {background: url('images/button-red-200x30.png') no-repeat;}
.command .button.disabled {background: url('images/button-disabled-200x30.png') no-repeat;}

.command p {margin: 0;} /* Drooping buttons in Chrome and FF? */

.error-field {font: 12px "Segoe UI", Arial, Helvetica, sans-serif; line-height: 18px; display: table-cell; padding: 3 0 3 0; text-align: left; vertical-align: middle; background: url("icons/warn.png") 0px 4px no-repeat; text-indent: 20px;}