/* transcendence.css */

/* STANDARD MULTIVERSE STYLES */

body {
	background-color: #121314;

	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 15px;
	color: #bbc0cb;
}

a {
    color: #8494b3;
	text-decoration: none;
}

a:hover {
    color: #bdd3ff;
	text-decoration: underline;
}

.articleBody {
	padding: 0 0 0 20px;
}

.articleBody h1 {
    margin: 2px 0 8px 0;

	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 24pt;
	font-weight:normal;
	color: #99bbff;
}

.articleBody h2 {
	margin: 11pt 0 2pt 0;
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	font-weight:normal;
	color: #99bbff;
}

.articleBody h3 {
	margin: 11pt 0 2pt 0;
	font-size: 12pt;
	font-weight: bold;
}

.articleBody li + li {
    margin: 4px 0 0 0;
}

.articleBody p, .articleBody ol, .articleBody ul {
	margin: 0 0 12px 0;

	font-size: 15px;
	line-height: 1.5;
}

.articleBody p + h1, .articleBody ol + h1, .articleBody ul + h1 {
	margin: 24px 0 12px 0;
}

.articleBody .articleImage {
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
    border-radius: 6px;
}

.boxHeader {
    padding: 4px 8px;

    background-color: #334466;  /* H:220 S:50 B:40 */

    color: #dee9ff;     /* H:220 S:13 B:100 */
    font-size: 10pt;
}

.boxNormal {
    padding: 4px 8px;

    background-color: #43464d;  /* H:220 S:13 B:30 */

    font-size: 10pt;
}

.boxT {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxR {
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxB {
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxL {
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxTR {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-top-right-radius: 3px;
}

.boxTB {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxTL {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-top-left-radius: 3px;
}

.boxTRB {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.boxTRL {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.boxTBL {
    border-top: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.boxRB {
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom-right-radius: 3px;
}

.boxRL {
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
}

.boxRBL {
    border-right: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.boxBL {
    border-bottom: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-left: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-bottom-left-radius: 3px;
}

.boxTRBL {
    border: 1px solid #7a808c;  /* H:220 S:13 B:55 */
    border-radius: 3px;
}

.catalogCategory {
    margin: 0 0 21px 0;
}

.catalogEntry {
	position: relative;
	display: inline-block;
	width: 448px;
	height: 150px;
	margin: 0 24px 24px 0;
    vertical-align: top;
	
	background-color: #35383d;  /* H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;
	
    color: #bbc0cb;
	cursor: pointer;
}

a.catalogEntry:hover {
	background-color: #43464d;  /* H:220 S:13 B:30 */
    color: #bbc0cb;
}

.catalogEntry img {
	display: inline-block;
	margin: 0;

	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.catalogEntryImagePlaceholder {
	display: inline-block;
	margin: 0;

    background-image: url(/res/ImagePlaceholder.png);
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.catalogEntryInfo {
	position: relative;
	display: inline-block;
	width: 224px;
	padding: 0 12px 12px 12px;
	vertical-align: bottom;

	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;

	text-align: left;
}

.catalogEntryInfo .name {
	display: block;
	margin: 0;

	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	font-weight: normal;
	color: #99bbff;
}

.catalogEntryInfo .type {
	display: block;
	margin: 0;

	font-size: 10pt;
}

.catalogEntryPrice {
	display: block;
	position: absolute;
	top: 12px;
	right: 12px;

	margin: 0;
}

.catalogEntryPrice .price {
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #ffcc65;
}

.catalogEntryPrice .text {
	color: #ffe4ad;
}

.catalogEntryNarrow {
}

.catalogEntryNarrow + .catalogEntryNarrow {
    margin: 5px 0 0 0;
}

.catalogEntryNarrow .areaInfo {
    display: inline-block;
    margin: 0 0 0 10px;
    vertical-align: top;
}

.catalogEntryNarrow .entryName {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 12pt;
	font-weight: normal;
	color: #99bbff;
}

.catalogEntryNarrow .entryType {
    font-size: 10pt;
}

.catalogEntryNarrow img {
    margin: 0;
    width: 48px;
    height: 36px;
}

.catalogEntryNarrow .imagePlaceholder {
	display: inline-block;
	margin: 0;
    width: 48px;
    height: 36px;

    background-image: url(/res/ImagePlaceholder.png);
}

.code {
	padding: 12px 12px 12px 12px;

	background-color: #404040;
	border-radius: 6px;

	font-family: "Lucida Console", Monaco, monospace;
	font-size: 10pt;

    white-space: pre;
}

.code p {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 10pt;
}

.ctrlButton {
	display: inline-block;
	height: 26px;

	background-image: linear-gradient(#ffc858, #cc8800);
	background-repeat: repeat-x;
	border-radius: 4px;
	padding: 1px 20px 1px 20px;
	margin: 0;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 12pt;
	color: #2e2410;

	text-align: center;
	line-height: 26px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
	text-decoration: none;

	cursor: pointer;
}

.ctrlButton:hover {
	color: #ffe4ad;
	text-decoration: none;
}

.ctrlButtonDisabled {
	display: inline-block;
	height: 26px;

	background-color: #333333;
	background-color: rgba(255,255,255,0.2);
	border: 1px solid #9a9a9a;
	border-radius: 4px;
	padding: 0px 19px 0px 19px;
	margin: 0;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 12pt;
	color: #9a9a9a;
	text-align: center;
	line-height: 26px;
	text-decoration: none;
}

.ctrlButtonSmall {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 2px 12px 2px 12px;
	
	background-color: #527acb; /* H:220 S:60 B:80 */
	border: 1px solid #2b2e33;  /* H:220 S:15 B:20 */
	border-radius: 4px;
	
	color: #f3f7ff; /* H:220 S:5 B:100 */
	font-size: 8pt;
	text-align: center;
	
	cursor: pointer;
}

.ctrlButtonSmallDangerous {
	display: inline-block;
	vertical-align: top;
	margin: 0 8px 0 0;
	padding: 2px 12px 2px 12px;
	
	background-color: #840016;
	border: 1px solid #5e0010;
	border-radius: 4px;
	
	font-size: 8pt;
	color: #ffc2cc;
	text-align: center;
	
	cursor: pointer;
}

.ctrlChoiceList {
    margin: 0 0 12px 0;
}

.ctrlChoice {
    display: inline-block;
    padding: 3px 6px;
    vertical-align: top;

    border-top: 1px solid #6e7480;
    border-bottom: 1px solid #6e7480;

    font-size: 10pt;
    text-align: center;

    cursor: pointer;
}

.ctrlChoice + .ctrlChoice {
    border-left: 1px solid #6e7480;
}

.ctrlChoice:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 1px solid #6e7480;
}

.ctrlChoice:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: 1px solid #6e7480;
}

.ctrlChoiceSelected {
    background-color: #6699ff;  /* H:220 S:60 B:100 */
    color: #f2f6ff;  /* H:220 S:5 B:100 */
}

.ctrlHeader {
	margin: 4px 0 0 0;

	background-color: #474753;
	font-size: 10pt;
    font-weight: bold;
	color: #939699;
}

.ctrlHelpText {
	margin: 0 12px 12px 0;

	font-size: 10pt;
	color: #939699;
}

.ctrlHelpText p, .ctrlHelpText ol, .ctrlHelpText ul {
	margin: 0;

	font-size: 10pt;
	color: #939699;
}

.ctrlInput {
	margin: 0 12px 12px 0;
	min-height: 22px;
    padding: 2px 6px 2px 6px;

    background-color: #c2c5cc;  /* H:220 S:5 B:80 */
	border-radius: 3px;
	border: 1px solid #494a4d;	/* H:220 S:5 B:30 */
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
}

.ctrlInput:enabled {
}

.ctrlLabel {
    margin: 0 0 2px 0;

	font-size: 10pt;
    font-weight: bold;
	color: #939699;
}

.ctrlLink {
	line-height: 1.4;

	cursor: pointer;
}

.dialogCloseButton {
	position:absolute;
	right:2px;
	top:2px;
	width: 60px;
	height: 20px;

	padding: 2px 12px 2px 12px;
	
	background-color: #527acb; /* H:220 S:60 B:80 */
	border: 1px solid #2b2e33;  /* H:220 S:15 B:20 */
	border-radius: 4px;
	
	color: #f3f7ff; /* H:220 S:5 B:100 */
	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 8pt;
	text-align: center;
	
	cursor: pointer;
}

.dialogCommandBar {
	background-color: #27282d;
	height: 30px;
	padding: 9px 24px 9px 24px;
	text-align: right;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

.dialogContent {
	padding: 24px 24px 24px 24px;

	background-color: #35353d;
	border-top: 1px solid #474753;
	border-bottom: 1px solid #474753;
}

.dlgErrorBar {
	margin: 0;
	padding: 6px 24px 6px 24px;
	
	background-color: #ffda8f;
	
	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 10pt;
	color: #0f0e0b;
	
	text-align: left;
	line-height: 20px;
	
	display: none;
}

.dialogFrame {
	position:absolute;
	margin: 0 auto 0 auto;
	
	background-color: #ebeef5;
	border: 4px solid #474753;
	border-radius: 6px;
	
	z-index: 100;
	display: none;
}

.dialogTitle {
	height: 32px;
	margin: 0;
	padding: 0 24px 0 24px;	
	
	background-color: #27282d;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;

	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #ebeef5;
	
	text-align: left;
	line-height: 32px;
}

.highScoreList li {
	margin-bottom: 8pt;
}

.highScoreList .highScoreTitle {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 18pt;
}

.pageCommandBar {
	height: 30px;
	background-image: url(TransPaneTop.jpg);
	background-repeat: no-repeat;
	padding: 9px 24px 9px 24px;
}

.pageContent {
	background-image: url(TransPaneMiddle.jpg);
	background-repeat: repeat-y;
}

.pageContentTop {
	height:48px;
	background-image: url(TransPaneTop.jpg);
	background-repeat: no-repeat;
}

.pageFooter {
	clear: both;
	margin: 0 0 40px 0;
	padding: 0 0 0 40px;
	
	background-color: #0b0d0f;
	border-left: 1px solid #2f3b54;
	border-right: 1px solid #2f3b54;
	border-bottom: 1px solid #2f3b54;
}

.pageFooter .footerColumn {
    display: inline-block;
    width: 278px;
	margin: 0 40px 0 0;
    vertical-align: top;
    text-align: center;
}

.pageFooter .footerColumn h1 {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #585c66;
    margin: 12pt 0 0 0;
}

.pageFooter .footerColumn a {
    color: #8494b3;
	text-decoration: none;
}

.pageFooter .footerColumn a:hover {
    color: #bdd3ff;
	text-decoration: underline;
}

.pageFooter .footerColumn p {
	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 10pt;
	color: #737780;
    margin: 0;
}

.pageFooter .footerColumn123 {
	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 8pt;
	color: #585c66;
    text-align: center;

    padding: 24px 120px 16px 120px;
}

.pageFrame {
	width: 998px;
	margin: 0 auto;
}

.pageFrameWide {
	width: 80%;
	min-width: 996px;	/* 2 pixels smaller because of border */
	min-height: 600px;
	margin: 20px auto;
	border: 1px solid #2f3b54;
}

.pageFrameWide .canvasWide {
	position: absolute;
	top: 0px;
	left: 25%;
	height: 100%;

	background-color: #121314;
}

.pageFrameWide .sidebarWide {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 25%;
	height: 100%;

	background-color: #27282d;
}

.pageFrameWide .sidebarWide h1 {
	margin: 24px 0 8px 0;
	padding: 0 24px;

	text-align: right;
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 32pt;
	font-weight: normal;
	color: #cad3e5;		/* H:220 S:12 B:90 */
}

.pageFrameWide .sidebarWide h2 {
	margin: 12px 0 4px 0;
	padding: 0 24px;

	text-align: right;
	font-family: MultiverseExoMedium, Verdana, Sans-Serif;
	font-size: 18pt;
	font-weight: normal;
	color: #a2a9b8;		/* H:220 S:12 B:72 */
}

.pageHeader {
	height: 96px;

	background-image: url(HeaderPane.jpg);
}

.pageHeader .headerSignIn {
	height: 48px;
	padding: 8px 24px 8px 24px;
}

.pageHeader .accountControls {
	font-family: Verdana, Sans-Serif;
	font-weight: bold;
	font-size: 8pt;
	line-height: normal;
}

.pageHeader .accountControls span {
	padding: 0 4px 0 4px;
	border-radius: 4px;
	cursor: pointer;
}

.pageHeader .accountControls span:hover {
	background-color: #595966;
}

.pageHeader .accountIcon {
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 8px 0 0;
	
	background-color: #808080;
}

.pageHeader .accountName {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 12pt;
	line-height: normal;
	
	padding: 0 4px 0 4px;
}

.pageHeader .accountSignIn {
	padding: 0 4px 0 4px;
	cursor: pointer;
}

.pageHeader .accountSignIn span {
	padding: 0 4px 0 4px;
	border-radius: 4px;
}

.pageHeader .accountSignIn span:hover {
	background-color: #595966;
}

.pageHeader .headerNavBar {
	height: 32px;
	padding: 0 13px 0 13px;
}

.pageHeader .headerNavBar a {
	display: inline-block;
	width: 162px;
	padding: 2px 0 0 0;
	
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #9ca3b2;
	
	text-align: center;
	line-height: 30px;
	text-decoration: none;
}

.pageHeader .headerNavBar span {
	display: inline-block;
	width: 162px;
	padding: 2px 0 0 0;
	
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #404040;
	
	text-align: center;
	line-height: 30px;
	text-decoration: none;
}

.pageHeader .headerNavBar a:hover {
	background-image: url(HeaderPaneButtonHover.jpg);
	color: #e0eaff;
}

.pageTabBar {
	height:70px;
	padding: 0 13px 0 13px;
	background-image: url(PageTabBar.png);
}

.pageTabBar div {
	display: inline-block;
	width:162px;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

.pageTabBar .tabBarItemDisabled {
	height:40px;
	padding: 6px 0 0 0;

	color: #808080;
}

.pageTabBar .tabBarItemEnabled {
	height:40px;
	padding: 6px 0 0 0;

	color: #9ca3b2;
	cursor: pointer;
}

.pageTabBar .tabBarItemEnabled:hover {
	color: #99bbff;
}

.pageTabBar .tabBarItemSelected {
	height:44px;
	padding: 2px 0 0 0;

	background-image: url(PageTab.jpg);
	color: #99bbff;
	cursor: pointer;
}

.pageTabBar .tabBarTextItem {
	margin: 0;
	
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	
	text-align: center;
	line-height: 30px;
	text-decoration: none;
}

#pageTitleNav {
    margin: 0 0 10px 0;

	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
    font-size: 10pt;
    color: #858c99; /* H:220 S:13 B:60 */
}

.pageTitleText {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 40pt;
	color: #cdd6e9;

    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.pageTitleText p {
    margin: 0;
}

.screenshotFull {
	max-width: 100%;
	border-radius: 4px;
}

.screenshotPlaceholder {
	display: inline-block;
    height: 106px;
    width: 189px;
    background-image: url(/res/ImagePlaceholder.png);
    border: 1px solid #94979a;
    margin: 0 10px 10px 0;
}

.screenshotPreview {
	display: inline-block;
    max-height: 106px;
	border: 1px solid #94979a;
    margin: 0 8px 8px 0;
    padding: 1px;

	cursor: pointer;
}

.sectionCatalog {
    padding-left: 36px;
}

.sectionText {
    text-align: center;
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
}

.sectionSidepane {
	margin: 0 0 24px 0;
	padding: 24px 24px 24px 24px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;
}

.sectionSidepane h1 {
	margin: 0;

	color: #99bbff;
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
}

.sectionSidepane h2 {
	margin: 0;

	color: #99bbff;
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 15px;
}

.sectionSidepane p {
	margin: 0 0 20px 0;
}

.sidepaneButton {
    margin: 0 0 20px 0;

    text-align: center;
}

.sidepaneEntryList {
    margin: 5px 0 20px 0;
}

.triSection1 {
    display: inline-block;
    position: relative;
    width: 285px;
	margin: 0 14px 14px 0;
    padding: 12px 12px 12px 12px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;

    vertical-align: top;
}

.triSection12 {
    display: inline-block;
    position: relative;
    width: 610px;
	margin: 0 14px 14px 0;
    padding: 12px 12px 12px 12px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;

    vertical-align: top;
}

.triSection12 textarea {
    width: 596px;
}

.triSection123 {
    display: inline-block;
    position: relative;
    width: 922px;
	margin: 0 0 14px 0;
    padding: 12px 12px 12px 12px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;

    vertical-align: top;
}

.triSection2 {
    display: inline-block;
    position: relative;
    width: 285px;
	margin: 0 14px 14px 0;
    padding: 12px 12px 12px 12px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;

    vertical-align: top;
}

.triSection3 {
    display: inline-block;
    position: relative;
    width: 285px;
	margin: 0 0 14px 0;
    padding: 12px 12px 12px 12px;

	background-color: #35383d;  /*  H:220 S:13 B:24 */
	border: 1px solid #494d54;  /*  H:220 S:13 B:33 */
	border-radius: 6px;

    vertical-align: top;
}

.triSection3 input {
    width: 225px;
}

.triSection3 textarea {
    width: 225px;
}

.triSection3Float {
	float: right;
    width: 248px;
	margin: 0 0 14px 0;
    padding: 24px 24px 24px 24px;

	background-color: #202329;  /*  H:220 S:22 B:16 */
	border: 1px solid #474753;
	border-radius: 6px;

	font-size: 10pt;
	color: #ebeef5;

    vertical-align: top;
}

.triSection3Float h1 {
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #7a7c80;
    margin: 0 0 4pt 0;
}

.triSection3Float p {
    margin: 0 0 10pt 0;
}

.triSection3Float ul {
	font-size: 10pt;
	color: #ebeef5;
}

/* CUSTOM STYLES */

.transPageBody {
}

.transColumnDouble {
	display: inline-block;
	width: 596px;
	margin: 0 40px 0 0;
	vertical-align: top;
}

.transColumnFull {
	width: 916px;
	margin: 0 40px 0 0;
	vertical-align: top;
}

.transColumnIndex {
	display: inline-block;
	width: 278px;
	margin: 0 40px 0 0;
	vertical-align: top;

	text-align: center;
}

.transColumnIndex h1 {
	margin: 0;

	color: #99bbff;
	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
}

.transColumnIndex p {
	margin: 0 0 20px 0;
}

.transColumnSidebar {
	display: inline-block;
	width: 278px;
	margin: 0 40px 0 0;
	vertical-align: top;
}

.transSection {
	width: 956px;
	margin: 0;
	padding: 0 0 0 40px;
}

/* THEMES */

.theme_standard {
}

.theme_standard h1 {
    margin: 2px 0 8px 0;

	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 24pt;
	font-weight:normal;
	color: #99bbff;
}

.theme_standard h2 {
	margin: 11pt 0 2pt 0;
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 16pt;
	font-weight:normal;
	color: #99bbff;
}

.theme_standard h3 {
	margin: 11pt 0 2pt 0;
	font-size: 12pt;
	font-weight: bold;
}

.theme_standard p, .theme_standard ol, .theme_standard ul {
	margin: 0 0 12px 0;

	font-size: 15px;
	line-height: 1.5;
}

.theme_standard p + h1, .theme_standard ol + h1, .theme_standard ul + h1 {
	margin: 24px 0 12px 0;
}

.theme_steps {
}

.theme_steps h1 {
	float: left;
	clear: left;
	width: 100px;
	height: 100px;
	border-radius: 50px;

    margin: 0 40px 40px 0;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 48pt;
	color: #c2ebff;
	text-align: center;
	line-height: 100px;

	background-color: #0b0d0f;
}

.theme_steps p {
	margin: 0 0 20px 0;
	padding: 0 0 0 140px;
}

a.theme_steps_button {
	display:inline-block;
	height:50px;
	
	background-color: #70644e;
	background-color: rgba(255,170,0,0.2);
	border: 1px solid #ffaa00;
	border-radius: 6px;
	padding: 0 20px 0 20px;
	margin: 0 0 8px 0;
	
	font-family: MultiverseExoRegular, Verdana, Sans-Serif;
	font-size: 18pt;
	color: #ffe4ad;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

a:hover.theme_steps_button {
	color: #ffe4ad;
	text-decoration: none;
}

a:visited.theme_steps_button {
	color: #ffe4ad;
}

/*  BUY PANE */

.buyAddToCart {
    margin: 0 0 20px 0;
    text-align: center;
}

.buyAddToCartHelp {
    margin: 4px 0 0 0;
    font-size: 10pt;
}

.buyExtraPrice {
    width: 100%;
    text-align: right;

    font-size: 10pt;
}

.buyHeader {
    margin: 0 0 20px 0;
}

.buyPrice {
    display: inline-block;
    width: 66px;    /* .buyProduct + .buyPrice should equal 246px */
    vertical-align: top;
    text-align: right;
}

.buyProduct {
    display: inline-block;
    width: 156px;
    text-indent: -24px;
    padding: 0 0 0 24px;
    vertical-align: top;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #adc9ff; /* H:220 S:30 B:100 */
}

.buyProductType {
	font-family: "Open Sans", "Lucida Sans", Arial, sans-serif;
	font-size: 10pt;
	color: #bbc0cb;
}

.buySize {
    display: inline-block;
    margin: 2px 8px;
    width: 40px;
    height: 40px;

	border: 1px solid #484c54;  /* H:220 S:14 B:33 */
	border-radius: 3px;

    text-align: center;
    line-height: 40px;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #bac0cc; /* H:220 S:9 B:80 */

    cursor: pointer;
}

.buySize:hover {
	background-color: #484c54;  /* H:220 S:14 B:33 */
}

.buySizePicker {
    margin: 0 0 20px 0;
}

.buySizeSelected {
	border: 1px solid #6e7480;  /* H:220 S:14 B:50 */
	background-color: #484c54;  /* H:220 S:14 B:33 */
	color: #adc9ff; /* H:220 S:30 B:100 */
}

.buyUnitPrice {
    width: 100%;
    text-align:right;

	font-family: MultiverseExoBold, Verdana, Sans-Serif;
	font-size: 16pt;
	color: #ffe4ad; /* H:40 S:32 B:100 */
}

/*  CART STYLES */

.sectionCart {
    width: 100%;
}

.cartItem {
    display: inline-block;
}

.orderEntry {
}

.orderItemActions {
    display: inline-block;
}

/*  LIST PICKER STYLES */

.ctrlCombobox {
    position: relative;
}

.ctrlComboboxDropdown {
    position: absolute;
    top: 26px;
    width: 244px;
    z-index: 100;

	background-color: #484c54;  /* H:220 S:14 B:33 */
	border-radius: 3px;
	border: 1px solid #6e7480;  /* H:220 S:14 B:50 */
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}

.ctrlComboboxEntry {
    padding: 1px 4px 1px 4px;

    font-size: 10pt;
    cursor: pointer;
}

.ctrlComboboxEntrySelected {
    padding: 1px 4px 1px 4px;

	background-color: #527acb; /* H:220 S:60 B:80 */

	color: #f3f7ff; /* H:220 S:5 B:100 */
    font-size: 10pt;
    cursor: pointer;
}

