﻿/*Global Core*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, form, label, legend, caption, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; 	background: transparent;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, form, label, legend, caption { vertical-align: baseline; }
:focus { outline: 0; }
body {line-height: 1; color: #666; font-size: .75em; font-family: tahoma, arial, serif, sans-serif; margin: 0; padding: 0;}
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
a { color: #36D; text-decoration: none; font-weight: normal; }
a:visited { color: #36D;}
a:hover { color: #C00; text-decoration: underline;}

ul.list { padding: 0 0 0 20px; margin: 0;}
ul.list li {padding-bottom: 0px; padding-left: 5px; list-style-type:disc;}

p, ul {	margin-bottom: 1em; line-height: 1.3em; clear: both; }
strong {font-weight:bold;}

/* Prevent Firefox/Chrome Scrollbar Jump */
html {overflow-y:scroll;}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #000; font-family: Trebuchet MS, arial, helvetica, sans-serif;}
h1 { font-size: 2em; padding-bottom: 0; margin-bottom: 0; }
h2 { padding: 0 0 10px 0; }
h3 { font-weight: bold; font-size: 1.3em; margin-bottom:6px;}
h4 { font-size: 1.0em; font-weight: bold; }
h5 { font-weight: bold; font-size: 1em; margin-bottom:4px;}
h6 { font-weight: bold; font-size: 1em; margin-bottom:4px;}


/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
	margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* specify a percentage for the page width or specify an exact pixel width. */
.page {	width: 980px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }

div#header
{
	width: 100%;
	z-index: 0;
	padding-top: 0px;
}

.header-inner 
{
	background-color: #fff;
	margin: 0px auto;
	width: 980px;
	padding-left: 15px;
	padding-right: 15px;
}

.nav-inner 
{
	background-color: #fff;
	margin: 0px auto;
	width: 980px;
	padding: 0px;
}

div.tabs
{
	height: 110px;
	background-color: #fff;
	position: relative;
}

div.tabs ul
{
	bottom: 12px;
	right: 6px;
	position: absolute;
	list-style:none;
	margin: 0;
	padding: 0;
}


div.tabs li
{
	display: inline;
	margin: 0;
}

div.tabs li.relative
{
	position: relative;
}


div.tabs li a span
{
	display: block;
	line-height: 28px;	
	padding-right: 10px;
	padding-left: 7px;
}

div.tabs li a,
div.tabs li span.tabs_text
{
	float:left;
	margin: 0 6px;
	color: #1d7bbf;
	font-size: 16px;	
	height: 28px;
	outline: none;
	padding-left: 3px;
}


div#logo {
	float: left;
	padding: 10px 0px 10px 0px;
}
div#logo-text 
{
	float: left;
}

div#top_right {
	font-size: 12px;
	margin-top: 8px;
	text-transform: uppercase; 
	float:right; 
	clear:right; 
	text-align: right;
}

div.top_right_login {
}
div.top_right_login a
{
	color: #1d7bbf;
	font-weight:bold;
	display: block;
	padding: 8px;
	background-color: #f4faff;
	border: solid 1px #ace;
}
div.top_right_login a:hover
{
	color: #1d7bbf;
	text-decoration: underline;
}


div.nav_top 
{
	float:right; clear:right; text-align: right; margin-top:15px;
}



div.member_nav 
{
	float:none; clear:left;
}
div.member_nav_tab { float: left; }
div.member_nav_tab a
{
	letter-spacing: 1px;
	font-weight:bold;
	margin-right:4px;    	
	color: #1d7bbf;
	display: block;
	padding: 8px 8px;
	border: solid 1px #ace;
	background-color: #f4faff;
	font-size: 16px;	
}

div.member_nav_tab a:hover
{
	text-decoration: underline;
}



#main {	padding: 30px 0px 15px 0px; background-color: #fff; margin-bottom: 30px; min-height: 400px;
		_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}

#mainbar
{
	float: left;
	margin-bottom: 40px;
	margin-bottom: 40px;
	width: 730px;
}

div#sidebar {
	float: right;
	text-align: right;
	width: auto;
	width: 230px;
	margin-top: 18px;
	line-height: 150%;
	margin-bottom: 60px;
}

.sidebar_vm {
	margin-top: 0px;
}

	div#sidebar div.sidebar_header {
		width: 233px;
		height: 29px;
		text-align: left;
		border: solid 1px #ddd;
		color: #5E8A32;
		font-size: 12pt;
	}

		div#sidebar div.sidebar_header a {
			color: #5E8A32;
			display: block;
			padding: 4px 5px 5px 15px;
		}
		div#sidebar div.sidebar_header span {
			color: #5E8A32;
			display: block;
			padding: 4px 5px 5px 15px;
		}

		div#sidebar div.sidebar_header_vm a {
			color: #666;
		}
		div#sidebar div.sidebar_header_vm span {
			color: #666;
		}

	div#sidebar div.sidebox_content {
		text-align: left;
		padding: 10px 5px 30px 5px;
	}
	
	div#sidebar div.sidebox_content a{
		color: #5E8A32;
	}

	div#sidebar div.sidebox_content_vm {
		text-align: left;
		padding: 10px 5px 30px 5px;
	}

	

#mainbar100
{
	margin-bottom: 40px;
	width: 960px;
}

#mainbar50left
{
	float: left;
	margin-bottom: 40px;
	width: 560px;
}
#mainbar50right
{
	float: left;
	margin-left: 15px;
	margin-bottom: 40px;
	width: 380px;
}

#footer
{
	width: 960px; 
	border-top: 1px solid #888;
	padding: 10px 22px 25px 22px;
	position: relative;
	margin: 10px auto;
	color: #666;
	font-size: .9em;
	line-height: normal;
	text-align: center;
}

#footer a {
	color: #444;
}

.breadcrumb 
{
	font-size: 90%;
	padding-bottom: 20px;
}

#pageheader
{
	/*border-bottom: 1px solid #1d7bbf;*/
	height: 34px;
	padding: 0;
	padding-top: 5px;
	width: 100%;
}
#pageheader h1
{
	font-weight: bold;
	font-size: 2.4em;
	line-height: 30px;
	color: #333;
}

.pagedescription
{
	color: #333;
	font-size: 120%;
	margin: 1.2em 1.2em .5em 0em;
	line-height: 120%;
}

.pagecontent
{
	color: #333;
	font-size: 120%;
	line-height: 1.2;
	margin: 1.2em 1.2em .5em 0em;
}

.pagewrapper
{
	padding: 10px 0px 100px 0px;
}

.myaccount
{
	color: #333;
	font-size: 120%;
	line-height: 1.8;
}

.confirmationmessage
{
	/*color: #333;*/
	color: #3366DD;
	font-weight: bold;
	font-size: 120%;
	margin: 1.2em 1.2em .5em 0em;
	line-height: 120%;
}

.errormessage
{
	color: #FF0000;
	font-size: 120%;
	margin: 1.2em 1.2em .5em 1.2em;
	line-height: 120%;
}


.form-content
{
	margin: 1.2em 1.2em .5em 0em;
}
.form-content-bordered
{
	margin: 1.2em 1.2em .5em 0em;
	border-style: solid; 
	border-width: thin;
	padding-left: 10px;
	border-color: #36D;
}

.module
{
	background-color: #eee;
	padding: 8px 8px 2px 8px;
	margin-bottom: 10px;
}

.module h4
{
	line-height: 1.4;
	color: #444;
	font-size: 135%;
	font-weight: bold;
	padding-bottom: 12px;
}



.header_banner
{
	background-color: #f4faff;
width: 100%; height:220px; float:left; margin-bottom:2px;
border: solid 1px #ace;
	margin-top: 20px;
}

.content_headbanner
{
	float:left; width:540px;
}
.content_headbanner h1
{
	color:#000;
	font-family:tahoma;
	float:left;
	font-size:25px;
	margin:0;
	margin-left: 20px;
	padding:0;
	font-weight:normal;
	letter-spacing:1px;
	margin-top:20px;

	width:100%;

	
}
.content_headbanner p
{
  margin:0; padding:0; float:left; width:98%; color:#666;
	font-family:verdana;
	font-size:16px;
	font-weight:normal;
	padding-top:10px;
	letter-spacing:normal;
	line-height:20px;
}
.content_headbanner h1 span
{
	line-height:28px;
	float:left; margin:0; padding:0;
}
.content_headbanner p span
{
	float:left !important; margin:0 !important; padding:0 !important; padding-left:20px !important;
}

.content_headbanner span
{
	margin-left:20px; width:100%; margin-top:20px;
}
.content_headbanner p.head_banner_dashed_line
{
	border-bottom: dotted 2px #ace; margin-left:20px; width: 95%;
}

.content_headbanner p span.blurb
{
	font-size: 90%;
}

.content_headbanner h2
{
  margin:0; padding:0; float:left; width:63%; color:#111;
	font-family:verdana;
	font-size:15px;
	font-weight:normal;
	padding-left:10px;
	letter-spacing:1;
	line-height:40px;
	padding-top:18px;
}

.content_headbanner .video-button
{
	float:left;	margin-top:20px; background-image: url('/zsys/img/btn_bkg_green.png'); width:160px; height:35px;
	text-align:center;	
}

.content_headbanner .video-button a
{
	color: #fff;
	font-weight:bold;
	font-size: 18px;
	display: block;
	padding: 8px;
}


#features-wrapper {width: 100%; text-align: left;}
#features { margin: 3em 0 1em 0; width:90%; text-align:left;}
#features ul.blue-bullets { padding-left: 20px;}
#features ul.blue-bullets li { width: 100%; float: left; display: block; font-size: 15px; color: #333; margin: 8px 0; text-indent: -20px;}

.blue-bullet {color:#1d7bbf;}



.virtualmachine-summary
{
	border-bottom: 1px dotted #999;
	overflow: hidden;
	padding: 11px 0;
	width: 700px;
	float: left;
}

.summary
{
	padding-left: 10px;
	float: left;
	width: 680px;
}

.summary-catalog
{
	width: 610px;
}

.summary-vm
{
	padding-left: 0px;
}

.summary h3
{
	color: #333 !important;
	font-size: 19px;
}

.summary h3 a
{
	color: #333 !important;
}

.summary h3 span.vm-name
{
	color: #666 !important;
}

.virtualmachine-hyperlink
{
	font-weight: bold;
}

.virtualmachine-description
{
	line-height: 1.2;
	padding: 0;
	margin: 0;
	padding-bottom: 10px;
}

div.vm-price
{
	padding-bottom: 10px;
}

span.vm-price
{
	color: rgb(153, 0, 0);
	font-size: 1.35em;
	font-weight: normal;
	letter-spacing: -1px;	
}

.virtualmachine-description .tags
{
	width: 410px;
	margin-top: 5px;
}

.tags
{
	line-height: 18px;
	float: left;
}
.tags a:hover
{
	text-decoration: none;
}

.vm-tag
{
	color: #3E6D8E;
	background-color: #E0EAF1;
	border-bottom: 1px solid #3E6D8E;
	border-right: 1px solid #7F9FB6;
	margin: 2px 2px 2px 0;
	padding: 3px 4px 3px 4px;
	text-decoration: none;
	font-size: 90%;
	line-height: 2.2;
	white-space: nowrap;
}
.vm-tag:hover
{
	background-color: #3E6D8E;
	color: #E0EAF1;
	border-bottom: 1px solid #37607D;
	border-right: 1px solid #37607D;
	text-decoration: none;
}




.vm-panel
{
	color: #444;
	padding: 8px 8px 2px 60px;
	margin-top: 10px;
	margin-bottom: 0px;
	float:left; 
	width: 100%;
}

.vm-panel h4
{
	line-height: 1.4;
	font-size: 100%;
	padding-bottom: 7px;

}
.vm-panel .vm-panel-top
{
	border-top:solid 1px #999;
	width: 80%;
}

.vm-details
{
	float: left;
	margin-left: 10px;
	width: 400px;
	overflow: hidden;
}

.vm-details
{
	color: #888;
	line-height: 17px;
}

.vm-details td
{
	color: Black;
	padding: 4px 0 4px 0;
	vertical-align: top;
}

.history-table
{
	margin-bottom: 10px;
	line-height: 125%;
}
.history-table td
{
	vertical-align: middle;
	padding: 0 5px 5px 0;
	border-bottom: solid 1px #EEE;
}
.history-table td.started
{
	color:Green;
}
.history-table td.deleted
{
	color:Red;
}


.signup-button
{
	background-image: url('/zsys/img/btn_bkg_signup.png'); width:160px; height:50px; background-repeat:no-repeat;
	text-align:center;
	padding-top: 12px;	
	color: #fff;
}

.signup-button a
{
	color: #fff !important; 
	font-weight:bold;
	font-size: 22px;
}
.signup-button a:hover
{
	color: #fff;
}


.signup-button-small
{
	margin-top: 5px;
	float:left;
	background-image: url('/zsys/img/btn_bkg_signup2.png'); width:60px; height:40px; background-repeat:no-repeat;
	text-align:center;
	padding-top: 2px;	
	color: #fff;
}

.signup-button-small a
{
	color: #fff !important; 
	font-weight:bold;
	font-size: 16px;
}
.signup-button-small a:hover
{
	color: #fff;
}


.box-progress-info {display: none; float:left; visibility: hidden; 
					border: solid 1px #c2e1ef; background-color: #dff4ff; 
					padding: 10px 10px 10px 10px; 
					margin:15px 20px 5px 20px;
					color:#336699; font-family: Verdana; font-weight:bold; }
.box-progress-info div {float:left; padding-right: 10px;}
.box-progress-info span {float:left; line-height:32px; font-weight:bold;}
.box { border: solid 1px #000000; padding: 10px 10px 10px 10px; background-position:bottom;}
.box-title { margin-top: 10px; margin-bottom: 15px;  font: bold 18px Arial,sans-serif; color: #336699; }


.PopupBackground { filter:alpha(opacity=30); -moz-opacity:.3; opacity:.3; background-color:Black; width:100%; height:100%; position:absolute; top:0; left:0; display:none; z-index: 1; }
.PopupBody { width:100%; height:100%; text-align:center; position:absolute; top:0; left:0; display:none; z-index: 2; }
.PopupContent { z-index: 3; border:solid 1px Black; background-color:#fff; padding:10px; margin:210px auto; }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
form hr
{
	border: 1px solid #ccc;
	width: 100%;
	text-align: left;
}
div.form-item
{
	padding: 10px 0 15px 0;
}
div.form-submit
{
	padding: 10px 0 15px 0px;
	display: block;
}
div.form-submit input
{
	font-size: 130%;
	font-weight: bold;
	padding: 5px ;
	cursor:pointer;
}
div.form-item label
{
	display: block;
	font-size: 115%;
	font-weight: bold;
	color: #333;
	padding-bottom: 3px;
}
div.form-item p
{
	font-size: 115%;
	font-weight: normal;
	color: #333;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.field-validation-error { color: #ff0000; }
.input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; }
.validation-summary-errors { color: #ff0000; }

span.form-error
{
	color: #900;
	font-weight: normal;
	margin-left: 5px;
	font-size: 90%;
}
div.form-error
{
	color: #900;
	font-weight: bold;
	font-size: 120%;
}
div.form-item-info
{
	padding: 4px 0 4px 4px;
	width: 90%;
	color: #777;
}



fieldset
{
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #CCC;
}

fieldset p
{
	margin: 2px 12px 10px 10px;
}

fieldset label
{
	display: block;
}

fieldset label.inline
{
	display: inline;
}

legend
{
	font-size: 1.1em;
	font-weight: 600;
	padding: 2px 4px 8px 4px;
}

input[type="text"]
{
	width: 200px;
	border: 1px solid #CCC;
}

input[type="password"]
{
	width: 200px;
	border: 1px solid #CCC;
}


/* MISC  
----------------------------------------------------------*/
.clear
{
	clear: both;
}

.error
{
	color: Red;
}

#menucontainer
{
	margin-top: 40px;
}

div#title
{
	display: block;
	float: left;
	text-align: left;
}



/* BUTTONS */

.buttons a, .buttons button{
	display:block;
	float:left;
	margin:0 7px 0 0;
	background-color:#f5f5f5;
	border:1px solid #dedede;
	border-top:1px solid #eee;
	border-left:1px solid #eee;

	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size:100%;
	line-height:130%;
	text-decoration:none;
	font-weight:bold;
	color:#565656;
	cursor:pointer;
	padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
	width:auto;
	overflow:visible;
	padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
	padding:5px 10px 5px 7px; /* Firefox */
	line-height:17px; /* Safari */
}
*:first-child+html button[type]{
	padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
	margin:0 3px -3px 0 !important;
	padding:0;
	border:none;
	width:16px;
	height:16px;
}

.buttons div.button-note
{
	font-size: 80%;
}

/* STANDARD */

button:hover, .buttons a:hover{
	background-color:#dff4ff;
	border:1px solid #c2e1ef;
	color:#336699;
}
.buttons a:active{
	background-color:#6299c5;
	border:1px solid #6299c5;
	color:#fff;
}


/* DISABLED */

button.disabled, .buttons a.disabled{
	color:#888;
}
.buttons a.disabled:hover, button.disabled:hover{
	background-color:#f5f5f5;
	border:1px solid #dedede;
	color:#888;
	cursor:default;
}
.buttons a.disabled:active{
	background-color:#f5f5f5;
	border:1px solid #dedede;
	color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
	color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
	background-color:#E6EFC2;
	border:1px solid #C6D880;
	color:#529214;
}
.buttons a.positive:active{
	background-color:#529214;
	border:1px solid #529214;
	color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
	color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
	background:#fbe3e4;
	border:1px solid #fbc2c4;
	color:#d12f19;
}
.buttons a.negative:active{
	background-color:#d12f19;
	border:1px solid #d12f19;
	color:#fff;
}


