/***********************************************/
/*     ThinnerFutureStyles.css                 */
/***********************************************/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {zoom: 1;}

/* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt Version: 0.11.3 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
p { font-size: 11pt; color: #333; font-weight: normal; margin: 4px 0 8px; }
p.indenture { text-indent: 3em; }

body { background-color: #ECF4F7; }
/**********************************************************************************************/
/*     Sub-Nav Styles *************************************************************************/
/**********************************************************************************************/

.header { background-color: #036; border-bottom: 6px solid #FFB100; }
.header .logo { float: left; }
.header .headernav { float: right; }
.header .separator { float: right; border: 1px solid #A9BBDE; height:40px; margin: 10px 10px; }

#navbuttons { height: 25px; background: url(../pagedata/header_btn_bkgnd.gif) top left repeat-x; }
#navbuttons li {
	background: url(../pagedata/header_btn_bkgnd.gif) top left no-repeat;
	color: #FFF;
	display: block;
	float: left;
	width: 150px;
	height: 25px;
	text-align: center;
	margin: 0;
}
#navbuttons li.first {
	width: 200px;
}
#navbuttons li a {
	background: url(../pagedata/header_btn_rcap.gif) top right no-repeat;
	color: #FFF;
	font-family: "Times New Roman",Times,FreeSerif,serif;;
	font-size: 12pt;
	font-weight: bold;
	line-height: 25px;
	display: block;
	width: 100%;
}
#navbuttons li.last {
	width: 3px;
}
#main {
	background: #ECF4F7 url(../pagedata/tf-bkgnd.jpg) top left no-repeat;
	height: auto;
	position: relative;
}

#title {
	height: 100px;
	margin: 0;
	padding: 20px 0 0 0;
	border: 0px solid white;
}

#title h1 {
	font-family: "Times New Roman",Times,FreeSerif,serif;
	color: #005495;
	font-weight: normal;
}

#title h1.first {
	font-size: 23pt;
	margin: 0 0 0 100px;
}

#title h1.second {
	font-size: 24pt;
	margin: 0 0 0 230px;
}

#main .nav {
	width: 200px;
	min-height: 400px;
	height: 400px;
	position: absolute;
	top: 122px; left: 0;
}

#main .nav li {
	list-style-type: none;
	text-align: center;
	margin: 0;
}

#main .nav li a {
	line-height: 40px;
	color: white;
	font-family: "Times New Roman",Times,FreeSerif,serif;
	font-size: 14pt;
	display: block;
}

#main .nav li a:hover {
	text-decoration: none;
	background-color: #369;
	opacity: 1;
	-moz-opacity: 1; 
	filter:alpha(opacity=1);
}

#main .nav li.register {
	padding: 2px 30px;
	text-align: left;
}

#main .nav li.register a {
	font-weight: bold;
	font-size: 12pt;
	line-height: 20px;
}

#main .nav li.register a:hover {
	background-color: #C9C750;
}

#main .content {
	margin: 0 20px 0 230px;
	min-height: 400px;
}

#footer {
	margin-top: 1ex;
	border-top: 1px solid #999;
	background-color: #CCC;
	text-align: right;
	font-size: 10pt;
	color: #666;
	padding: 4px 20px 4px 0px;
}

#main .nav .submenu ul li {
	display: block;
	padding: 4px;
	margin: 0;
	border-bottom: 1px solid #FFF;
	vertical-align: middle;
	list-style-type: none;
	text-align: left;
}

.submenu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: auto;
	background-color: #DAEBFB;
	border: 1px solid #069;
	opacity: 1;
	-moz-opacity: 1; 
	filter:alpha(opacity=100);
}

#main .nav .submenu a, #main .nav .submenu a:hover, #main .nav .submenu a:visited {
	font-size: 11pt;
	font-weight: bold;
	color: #014;
	line-height: 1.5em;
}

#main .nav .submenu a:hover {
	background-color: #FFF;
	opacity: 1;
	-moz-opacity: 1; 
	filter:alpha(opacity=100);
}


/***************************************************************************************************************/
/*     HTML Tag Styles *****************************************************************************************/
/***************************************************************************************************************/

body {
	font:normal 12px Arial, sans-serif, Helvetica; 
	color:#1a1a1a;
	margin:0px;
	padding:0px;
	}

a:link, a:visited {
	text-decoration:none;
	}

a:hover {
	text-decoration:underline;
	}
/* overrides decoration from previous rule for hovered links */

#linkRight {
	float:right;
	margin-right:83px;
	}
.clear { clear: both; }
h1, h2, h3, h4, h5, h6 {
	font-family:Arial, sans-serif, Helvetica;
	margin:1em 0 .5em 0;
	padding:0px;
	font-weight: bold;
	}

h1 {
 	font-size:16pt;
 	color:#005495;
	}

h2 {
 	font-size:12pt;
 	color:#006699;
	}

h3 {
 	font-size:11pt;
 	color:#334d55;
	}

h4 {
 	font-size:11pt;
 	color:#333333;
	}

h5 {
 	font-size:11pt;
 	color:#334d55;
	}
h1.notable, h2.notable, h3.notable, h4.notable, h5.notable, h6.notable {
	position: relative;
}
h1 .note, h2 .note, h3 .note, h4 .note, h5 .note, h6 .note {
	position: absolute; right: 0; top: 0;
}
h1 .info, h2 .info, h3 .info, h4 .info, h5 .info, h6 .info {
	font-weight: normal; font-size: 80%;
}
dt { font-weight: bold; font-size: 10pt; color: #006699; }
dl.surgtypes dt { font-weight: bold; color: #036; font-size: 14pt; text-align: center; width: 50%; margin: 0 auto; }
dd { margin-bottom: 2em; }
ul {
 	list-style-type:square;
	}
ul.nobullet { list-style-type: none; }
ul li, ol.alpha li { margin: 0 0 1em 1.5em; font-size: 100%; }

ul ul {
 	list-style-type:disc;
	}

ul ul ul {
 	list-style-type:none;
	}
ol.alpha {
	list-style: lower-alpha;
}
.disclaim { font-weight: bold; font-size: 8pt; margin-top: -.5em; }

cite { text-align: right; font-size: 9pt; }
.floater cite { text-align: center; display: block; }
strong { font-weight: bold; }
hr {
	width:100%;
	height:1px;
	border:none;
	background-color:#5c706e;	/* this is used because Firefox uses "background-color" tag to colorize hr */
	color:#5c706e; 				/* this is because IE uses "color" tag to colorize hr */
	}
.floater { float:right; margin: 0 0 10px 20px; }

a.moreinfo, dl.moreinfo dt{ border-bottom: 1px dashed #09C; }
a.moreinfo:hover, dl.moreinfo dt:hover{ background-color: #9CF; border-bottom: 0; }
a.moreinfo .infoContents, dl.moreinfo dd{ display:none; }
#infobox {
	position: absolute; top: 0; left: 0;
	border: 2px solid #69C;
	background-color: #9ABBD3;
	padding: 4px;
	display: none;
	max-width: 300px;
	font-size: 9pt;
}
#infobox h3, #infobox p { font-size: 9pt; margin-top: 0; }
/***************************************************************************************************************/
/*     Form Element Styles *************************************************************************************/
/***************************************************************************************************************/

/***********************************************/
/*     Form & Label                            */
/***********************************************/
form {
	display:inline;
	}
/*	
.formText {
	font:normal 12px Arial, sans-serif, Helvetica; 
	border:1px solid #666666;
	top:2px;
	}
*/

form p { /* used for any paragraph within a form */
	clear:left;
	margin:0;
	padding:5px 0px 2px 0px;
	}
	
form p label { /* used for any label within a paragraph found in a form */
	float:left;
	width:130px;
	font:normal 12px Arial, sans-serif, Helvetica; 
	white-space:nowrap;
	margin-left:10px;
	}

/* The following class is to fix a difference between the HTML files and the PHP files.
The HTML files use the form tags restrictively, while the PHP files put most of the page content
between form tags.
Therefore a p style in an HTML file, often becomes a 'form p' style in the PHP files. **/
.devOverridenFormP {
	margin:0;
	padding:0;
}

label {
	font:normal 12px Arial, sans-serif, Helvetica; 
 	color:#1a1a1a;
	margin-left:10px;
	}

.labelCustom { /* This is used for New Template Open page. In particular, the "Comments:" section within the Open Set section */
	margin-left:78px;
	}

.longLabel { /* Used in pages such as Admin > User Management > "Create User" fieldset where label is very long e.g. "Zmanda Network Password". Applied to the label it also inherits its styles from form p label  */
	width:160px;
	}

.extraLongLabel { /* Used in pages such as Admin > Backup Sets > "Select Backup Set Template" fieldset where label is very long e.g. "Zmanda Network Password". Applied to the label it also inherits its styles from form p label  */
	width:170px;
	}
	
	
/***********************************************/
/*     Text Area                               */
/***********************************************/
textarea {
	position:relative;
	padding-left:2px;
	color:#1a1a1a;
	font:normal 11px Arial, sans-serif, Helvetica; 
	border:1px inset #5b716f;
	background-color:#e3ead9;
	overflow:auto;
	}

textarea:focus, textareaInverse:focus {
	background-color:#efebc6;
	}

textarea:hover, textareaInverse:hover {
	background-color:#efebc6;
	}

.textareaInverse {
	position:relative;
	padding-left:2px;
	color:#1a1a1a;
	font:normal 12px Arial, sans-serif, Helvetica; 
	border:1px inset #5b716f;
	background-color:#ced3bd;
	overflow:auto;
	}
	

/***********************************************/
/*     Select Box                              */
/***********************************************/
select {
	width:146px;
	height:20px;
	font:normal 12px Arial, sans-serif, Helvetica; 
	}

.selectCustom {
	width:125px;
	height:20px;
	background-color:#ced3bd;
	vertical-align:top;
	font:normal 12px Arial, sans-serif, Helvetica; 
	}
	
.selectCustom:focus {
	background-color:#efebc6;
	}
	
#selectCustomImage {
	position:relative;
	}

.selectCustomLight {
	width:125px;
	height:20px;
	margin-right:3px;
	font:normal 12px Arial, sans-serif, Helvetica;
	background-color:#e3ead9;
	vertical-align:top;
	}
	
.selectCustomLight:focus {
	background-color:#efebc6;
	}

.selectCustomLong {
	font:normal 12px Arial, sans-serif, Helvetica; 
	width:159px;
	height:20px;
	background-color:#ced3bd;
	vertical-align:top;
	}

.selectCustomLong:focus {
	background-color:#efebc6;
	}

.selectCustomLongInverse {
	font:normal 12px Arial, sans-serif, Helvetica; 
	width:159px;
	height:20px;
	background-color:#e3ead9;
	vertical-align:top;
	}

.selectCustomLongInverse:focus {
	background-color:#efebc6;
	}

.selectCustomSmall {
	font:normal 10px Arial, sans-serif, Helvetica; 
	width:55px;
	height:18px;
	background-color:#ced3bd;
	vertical-align:top;
	margin:2px 0px 0px 0px;
	}

.selectCustomChangeSet { 
	font:normal 12px Arial, sans-serif, Helvetica; 
	width:146px;
	height:20px;
	background-color:#83b1c8;
	}

/***********************************************/
/*     Input Buttons                           */
/***********************************************/
input {
	font:normal 12px Arial, sans-serif, Helvetica;
	color:#1a1a1a;
	}
	
input.btn {
	vertical-align:top;
	cursor:pointer;
	}

input.btnSmall {
	width:23px;
	height:20px;
	margin-top:1px;
	cursor:pointer;
	text-align:center;
	font:normal 10px Arial, sans-serif, Helvetica;
	}

input.btnRight {
	float:right;
	vertical-align:top;
	margin:5px 10px 0px 0px;
	cursor:pointer;
	}

input.btnNextToRight {
	float:right;
	vertical-align:top;
	margin:5px 3px 0px 0px;
	cursor:pointer;
	}

input.btnCustom {
	float:right;
	margin:0px 38px 5px 0px;
	cursor:pointer;
	}

.buttonBar {
	width:100%;
	height:30px;
	background-image:url(../images/global/button-bar.gif);
	background-repeat:repeat-x;
	z-index:5;
	}


/***********************************************/
/*     Input Fields                            */
/***********************************************/
input.shortInput { /* The "shortInput" class is for small text fields, such as backup when */
	width:30px;
	background-color:#ced3bd;
	border:1px inset #5b716f;
	}

input.shortInputDisabled {
	width:30px;
	}

input.shortMidInput { /* The "shortMidInput" class is for text fields that are larger than the short input, but smaller than the medium input, such as restore what's backup date and time */
	width:65px;
	background-color:#ced3bd;
	border:1px inset #5b716f;
	}

input.shortMidInputDisabled {
	width:65px;
	}

input.mediumInput { /* The "mediumInput" class is for mid length text fields, such as backup when > label tapes */
	width:100px;
	background-color:#ced3bd;
	border:1px inset #5b716f;
	}

input.mediumInputDisabled {
	width:100px;
	}

input.longInput { /* The "longInput" class is for wide text fields, such as backup where */
	width:200px;
	background-color:#ced3bd;
	border:1px inset #5b716f;
	}

input.longInputDisabled {
	width:200px;
	}
	
input.extraLongInput { /* The "extraLongInput" class is for very wide text fields, such as directory fileds ie. Restore > restore */
	width:300px;
	background-color:#ced3bd;
	border:1px inset #5b716f;
	}
	
input.extraLongInputDisabled {
	width:300px;
	}
	
input.extraLongInput:hover, input.longInput:hover, input.mediumInput:hover, input.shortMidInput:hover, input.shortInput:hover {
	background-color:#efebc6;


	}

input.extraLongInput:focus, input.longInput:focus, input.mediumInput:focus, input.shortMidInput:focus, input.shortInput:focus {
	background-color:#efebc6;
	}



/***************************************************************************************************************/
/*     General Page Styles *************************************************************************************/
/***************************************************************************************************************/

.exteriorContainer {
	position:relative;
	float:left;
	margin:10px 0px 10px 10px;
	background-color:#ccd3ba;
	border:1px solid #5c706e;
	}

.interiorContainer {
	position:absolute;
	padding:10px;
	background-color:#e3ead9;
	border:1px solid #5c706e;
	left: 0px;
	}



/**********************************************************************************************/
/*     General Heading Textual Styles *********************************************************/
/**********************************************************************************************/

.contentHeadingTitle {
	position:absolute;
	top:8px;
	left:10px;
	width:300px;
	font:bold 12px Arial, sans-serif, Helvetica;
	color: #1a1a1a;
	}

.contentHeadingTitle a:link {
	text-decoration:none;
	color:#2591c7;
	}

.contentHeadingTitle a:visited {
	text-decoration:none;
	color:#990066;
	}

.contentHeadingTitle a:hover {
	text-decoration:underline;
	}

.secondaryHeadingTitle {
	position:relative;
	left:10px;
	width:300px;
	font:bold 12px Arial, sans-serif, Helvetica;
	color: #1a1a1a;
	}

.secondaryHeadingTitle a:link {
	text-decoration:underline;
	color:#2591c7;
	}

.secondaryHeadingTitle a:visited {
	text-decoration:none;
	color:#990066;
	}

.secondaryHeadingTitle a:hover {
	text-decoration:underline;
	}

.subHeadingTitle {
	background:#ececc8;
	font:bold 11px Arial, sans-serif, Helvetica; 
	color: #1a1a1a;
	text-align:left;
	padding-left:10px;
	height:20px;
	}
	

/***********************************************/
/*     Feature                                 */
/***********************************************/

.feature {
	padding:0px 0px 10px 0px;
	font:bold 11px Arial, sans-serif, Helvetica;
	}

.feature h3 {
	padding:10px 0px 0px 0px;
	text-align:left;
	}

.feature img {
	float:left;
	padding:0px 10px 0px 0px;
	margin:0 5px 5px 0;
	}
/* adjust margins to change separation between the feature image and text flowing around it */


/***********************************************/
/*     Story                                   */
/***********************************************/

.story {
	margin:0 0 20px 0;
	padding:0px;
	clear:both;
	}

.story p {
  	padding:0px 0px 10px 0px;
	}

.story img {
	float:left;
	clear:both;
	padding:0px 10px 0px 0px;
	margin:0 5px 5px 0;
	}


/******************************************************/
/*     Errors Instructions & Confirmation Styles      */
/******************************************************/

.required {
	font:norm 10px Arial, sans-serif, Helvetica;
	color:#ff0000;
	}

.important {
	color:#ff9900;
	text-decoration:none;
	}
	
.note {
	font:norm 10px Arial, sans-serif, Helvetica;
	color:#ff0000;
	}


/*************** Instructions ***************/
.instructions {
	font:norm 11px Arial, sans-serif, Helvetica;
	color:#006600; /* lt green */
	}

.instructions a:link {
	text-decoration:underline;
	color:#006600;
	}

.instructions a:visited {
	text-decoration:none;
	color:#990066;
	}

.instructions a:hover {
	text-decoration:underline;
	}

/*************** Confirmation ***************/
.confirmation {
	font:bold 11px Arial, sans-serif, Helvetica;
	color:#009900; /* drk green */
	}

.confirmation a:link {
	text-decoration:underline;
	color:#009900;
	}

.confirmation a:visited {
	text-decoration:none;
	color:#990066;
	}

.confirmation a:hover {
	text-decoration:underline;
	}