/************ global resets *************/
* {margin:0; padding:0;}
ol, ul{list-style:none;}
strong { font-weight: 700;}
em {font-style: italic;}
* a {position:relative;} /* Gets links displaying over a PNG background */
a {outline:none;cursor:pointer;} /* Gets rid of Firefox's dotted borders */
a img {border:none;} /* Gets rid of IE's blue borders */
select img {border:none;}
img {border:none;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.hidden {display: none;}
.center {text-align: center; margin: inherit auto;}
a:link, a:visited {text-decoration: underline;}
a:hover {text-decoration: none;}

body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1em;font-size-adjust: none;font-stretch: normal;font-style: normal;
	font-variant: normal;font-weight: normal;line-height: normal;text-align: center; /* for IE */
}

/************ text *************/
h3 {font-size: 0.9em; line-height: 0.9em; letter-spacing: .05em;}

#frame-wrap {height: 100%;}
#wrapper {margin-top: 120px; margin-bottom: 20px;}

#top-navigation {
	font-family: "Lucida Grande", Arial, Helvetica, "sans-serif" !important;
	font-size: 1em;
	text-align: left;
	color: #fff;
	z-index: 1001;
	width: 100%;
	background: #0b0b0c url(images/splash-background.png) repeat-x scroll left top;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 2000px;
	border-bottom: 1px solid #000;
	overflow: hidden;
	margin: 0 auto;
}

#top-navigation-center {width:972px;margin:0 auto;}

/*#mosaic-logo {float:left;background: url(images/nav-logo.png) no-repeat 10px 21px;width:190px;height:100px;}*/

#layout-changer {position: relative;float: left;margin-right: 10px;top: 5px;height: 95px;}
#layout-changer .left, #layout-changer .center, #layout-changer .right {height:95px;}
#layout-changer .left {width:19px; background: url(images/top-nav-box-left.png) no-repeat; float:left;}
#layout-changer .center {width:315px;background: url(images/top-nav-box-center.png) repeat-x; float:left;}
#layout-changer .right {width:26px; background: url(images/top-nav-box-right.png) no-repeat; float:left;}
#layout-changer .content {position: absolute; left: 7px; top: 8px;}
#layout-changer .content h3 {color: #2f3f75;}
#layout-changer .content ul {height:50px; margin: 7px 0 0 8px;}
#layout-changer .content ul li {float: left;padding-right: 4px;}
#layout-changer .content ul li.last {padding-right: 0;}


#layout-changer .content ul li a {display:block;cursor:pointer;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity: .50;
	-moz-opacity: .50;
}

#layout-changer .content ul li a:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

#layout-changer .content ul li a.active {cursor:default;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}

#color-changer {position: relative;float: left;margin-right: 10px;top: 5px;height: 95px; overflow:hidden; z-index: 2;}
#color-changer .left, #color-changer .center, #color-changer .right {height:95px;}
#color-changer .left {width:19px; background: url(images/top-nav-box-left.png) no-repeat; float:left;}
#color-changer .center {width:292px;background: url(images/top-nav-box-center.png) repeat-x; float:left;}
#color-changer .right {width:26px; background: url(images/top-nav-box-right.png) no-repeat; float:left;}
#color-changer .content {position: absolute; left: 1px; top: 8px; width: 326px; height: 72px; overflow:hidden;}
#color-changer .content h3 {margin-left: 7px; color: #2f3f75;}
#color-changer .content ul {height:50px;}
#color-changer .content ul li {float: left;border: 1px solid #000;margin-right: 10px;}
#color-changer .content ul li.last {margin-right: 0;}
#color-changer .content ul li a {display:block;cursor:pointer;}

#a-youtube, #a-youtube:visited, #a-youtube:hover {color:#2F3F75;text-decoration: none;cursor:pointer;}

#color-changer .content #picker-tab {position:relative;height: 50px;margin-left: 17px;top: 6px;}
#color-changer .content #picker-tab li {width:48px;}
#color-changer .content #picker-tab .color-selector {height:48px; width:auto; position:relative; cursor: pointer;}

#color-changer .content #palettes-tab {height: 60px; width: 326px; position: relative; left: 20px; padding: 0;display: block; overflow: hidden;}
#color-changer .content #palettes-tab div {width:25px;height:25px;float:left;}
#color-changer .content #palettes-tab div.txt {height:25px;width:25px; left:11.5px; top:12.5px; border:1px solid #000; position:absolute;}
#color-changer .content #palettes-tab #palettes-ul {margin: 0 27px;}
#color-changer .content #palettes-tab #palettes-ul li {width: 50px;display: block;height: 50px;float: left; margin-right: 3px; position:relative;}
#color-changer .content #palettes-tab #palettes-ul li.last {margin-right: 0;}
.scroll-pane {width: 200px;float: left;padding: 0;}

#palette-error {float: right; font-size: 0.58em; position: absolute; top: 0px; right:0px; color: red;}

#top-navigation .jScrollPaneContainer {position: relative; overflow: hidden; z-index: 1;}
#top-navigation .jScrollPaneTrack {position: absolute; cursor: pointer; left: 0; bottom: 0; width: 100%; background: #666; display: none;}
#top-navigation .jScrollIntervalTrack { position: absolute;}
#top-navigation .jScrollPaneDrag {position: absolute;background: #2f3f75;cursor: pointer;overflow: hidden;}
#top-navigation .jScrollPaneDragLeft {position: absolute;bottom: 0;left: 0;overflow: hidden;}
#top-navigation .jScrollPaneDragRight {position: absolute;bottom: 0;right: 0;overflow: hidden;}
#top-navigation a.jScrollArrowLeft, #top-navigation a.jScrollArrowRight {display:block;position:absolute;z-index:1;text-indent: -2000px !important; overflow: hidden;  background-color: #666; height: 58px;}
#top-navigation a.jScrollArrowLeft {left: 0; width: 25px; background: #fff url(images/left-arrow.png) no-repeat 2px 17px;}
#top-navigation a.jScrollArrowRight {right: 0; width: 27px; background: #fff url(images/right-arrow.png) no-repeat 3px 17px;}
#top-navigation a.jScrollArrowLeft:hover {}
#top-navigation a.jScrollArrowRight:hover {}
#top-navigation a.jScrollActiveArrowButton, #top-navigation a.jScrollActiveArrowButton:hover {}

#color-menu {float: left;position: relative; top: 13px; left: -19px; overflow: hidden;}
#color-menu li {font-size: 0.7em;margin-bottom: 5px;text-align: right;position:relative;}
#color-menu li a, #color-menu li a:visited {z-index: 0; border: 1px solid #fff; border-left: 1px solid #fff; display:block; text-decoration:none; background:#2f3f75; padding: 2px 4px 2px 0px; width: 100px; color: #fff;position:relative;}
#color-menu li a:hover, #color-menu li a.active {background: #fff; color: #2f3f75; z-index: 3; border: 1px solid #2f3f75; border-left: 1px solid #fff;}
#color-menu li a.hover {background: #fff; color: #2f3f75; z-index: 3; border: 1px solid #2f3f75; border-left: 1px solid #fff;}

#design_form input.submit {background: transparent url(images/save-design.png) no-repeat top left; cursor: pointer; position: relative;border: none;height:42px;
top:7px;width:149px;}

#design_form input.Update {background: transparent url(images/update-design.png) no-repeat top left;}

#design_form input.buy {background: transparent url(images/buy-design.png) no-repeat top left;}


#loading {margin: 0 auto; position: relative; top: 100px;text-align:center;}
#loading h2 {font-size:1.4em; line-height:1em; letter-spacing:0.05em;}

div.jqmAlert { /* contains + positions the alert window */
  display: none;
  position: fixed;
  top: 17%;
  width: 100%;
}
    
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html div.jqmAlert {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

#saveForm .jqmClose {position: absolute; right: 2px; top: 4px;}
#saveForm h2 {color: #fff; padding-bottom: 20px;}
#saveForm {width: 277px; padding: 10px 19px 10px 0; border: 1px solid #fff; background: #0b0b0c url(../images/splash-background.png) repeat-x top left; margin: 0 auto; position: relative;}
#saveForm ul {padding: 0;}
#saveForm li {height: 20px; padding: 0 0 15px 0; background: none; text-align: left;}
#saveForm li.button-li {padding-left: 90px;}
#saveForm li label {color: #2cb7ff; float: left; width: 70px; text-align: right; padding-right: 20px;}
#saveForm li input, #saveForm li textarea  {float: left; width: 180px; border: 1px solid #2cb7ff; padding: 2px;}
#saveForm li input.invalid, #saveForm li textarea.invalid  {border: 1px solid red;}
#saveForm li label.invalid  {color: red;}
#saveForm li textarea {width: 204px; height: 100px;}
#saveForm li input.buttons {height: 20px; cursor: pointer; width: 68px; float: left; margin-right: 20px; border: 1px solid #000; background: #c7c7c7;}
#saveForm li input.less-margin {float: left; margin-right: 0px;}
#saveForm li input.buttons:hover {color: #2cb7ff;}

#saveForm #errors {font-size: 0.8em; color: red;}
#saveForm #errors li {padding: 0 0 5px 10px; height: auto; text-align: left; font-size: 0.9em;}


.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(images/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
	z-index:1002;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(images/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(images/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(images/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(images/colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(images/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(images/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(images/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(images/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(images/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(images/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(images/colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}
/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */
	
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}