/*--------------------------------------------------------------------------------
WriteMaps Application Presentation Layer
Author: Scott Jehl
Updated: October 07
Notes: 
--------------------------------------------------------------------------------*/



/*------------------------------------------------------------------
Global Styles
------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	outline: 0;
	list-style: none;
}
body {
	background: #fff url(/images/site/bg_topGrad.jpg) top repeat-x;	
	font-size: 62.5%;
	font-family: verdana, helvetica, arial, sans-serif;
	color: #444;
	margin: 20px 5px 0 5px;
}
a {
	color: #076EAD;
}
h2 {
	float: left;
	font-size: 1.3em;
	line-height: 3em;
	margin-right: 20px;
	font-weight: normal;
}
h2 a {
	text-decoration: underline;
	font-weight: bold;
}
h3 {
	margin: 0 0.5em 0;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1.3em;
	float: left;
	padding-bottom: .3em;
	width: auto;
}
h4 {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.3em;
	clear: left;
	padding-bottom: 0;
	float: left;
}
p, li {
	font-size: 1.3em;
	line-height: 1.4em;
}
li {
	font-size: 1em;
	line-height: 1em;
}


/*------------------------------------------------------------------
Header Styles
------------------------------------------------------------------*/
h1 {
	height: 49px;
	margin-bottom: 12px;
	position:relative;
	width: 250px;
	margin-left: 18px;
	font-size: 1.2em;
}
p#userMsg {
	float:right;
	position: relative;
	z-index: 60000;
	font-size: 1.1em;
	margin-right: 20px;
	margin-top: -60px;
}
p#userMsg a {
	text-decoration: underline;
}



/*------------------------------------------------------------------
My Maps Content styles
------------------------------------------------------------------*/
body#myMaps h3 {
	font-size: 1.9em; 
	margin: 2em 0 0 2em; 
	color: #555; 
	float: none;
}
body#myMaps div#mapNames {
	display: block; 
	margin: 1em 4em; 
	float: left; 
	padding: 2em; 
	background: #ebf4f9; 
	border: 1px solid #eee; 
	width: 30%; 
	height: 23em; 
	overflow: auto;
}
body#myMaps div#mapNames li {
	font-size: 1.4em; 
	line-height: 1.2em;
	padding-left: 20px; 
	padding-bottom: .5em; 
	background: url(/images/site/favicon.gif) 0 0 no-repeat;
}
body#myMaps div#mapNames li a {
	text-decoration: underline;
}
body#myMaps div#mapNames li .mapOptions { 
	font-size: .85em; 
}
body#myMaps div#mapNames li .mapOptions a { 
	color: #666;
}
body#myMaps div#secondaryOptions {
	float: left; 
	width: 50%; 
	margin-top: 1em;
}
body#myMaps p.welcome {
	margin: 0 3em;
}
body#myMaps p#secondaryLeadin {
	font-size: 1.4em; 
	font-weight: bold;
}
body#myMaps div#secondaryOptions h4 {
	float: none; 
	margin: 1em 0;
}
body#myMaps div#secondaryOptions h4 a {
	background: #3397d1; 
	padding: .4em 1em;
	font-size: 1em; 
	color: #fff; 
	border: 1px solid #0a75bb; 
	cursor: pointer;
}

/*------------------------------------------------------------------
Application Canvas Styles
------------------------------------------------------------------*/
div#canvas {
	background:url(/images/site/bg_appCanvasTop.jpg) top left no-repeat;
}
div.canvasWrap {
	background:url(/images/site/bg_appCanvasTopRight.jpg) top right no-repeat;
	padding: 5px 20px;
}




/*------------------------------------------------------------------
Application Menu Styles
------------------------------------------------------------------*/
ul#appNav {
	background: url(/images/site/bg_menuTile.jpg) repeat-x;
	float: left;
	margin-top: .3em;
	margin-left: 10px;
}
ul#appNav:hover {
	background-position: 0 -32px;
}
ul#appNav li {
	float: left;
	position: relative;
	padding: 0 1em;
	font-size: 1.3em;
	line-height: 32px;
	cursor: pointer;
	border-right: 1px solid #eee;
	z-index: 8000;
}
ul#appNav li:hover {
	color: #111;
}
ul#appNav li.first {
	background: url(/images/site/bg_menuLeftCap.gif) no-repeat 0 0;
}
ul#appNav li.last {
	background: url(/images/site/bg_menuRightCap.gif) no-repeat right 0;
	border: 0;
}
ul#appNav ul {
	position: absolute;
	top: -99999px;
	left: -99999px;
}
ul#appNav ul li {
	font-size: 1em;
	line-height: 1em;
	margin: 0;
	padding: 0;
	float: left;
	clear: left;
}
ul#appNav li a  {
	float: left;
	line-height: 1.5em;
	padding: .3em;
	background: #fff;
	text-decoration: none;
	color: #444;
	width: 13em;
}
ul#appNav li a:hover {
	color: #eee;
	background-color: #3397d1;
}
ul#appNav li.disabled, ul#appNav li.disabled a, ul#appNav li.disabled a:hover {
	color: #aaa;
	cursor: pointer;
	background: #fff;
}
ul#appNav li.open ul {
	top: 2.4em;
	left: 0;
	border: 1px solid #ddd;
}

/*------------------------------------------------------------------
View and Mode Toggle Styles
------------------------------------------------------------------*/
div#viewToggles, div#modeToggles {
	margin-left: 20px;
	float: left;
}
div#viewToggles ul, div#modeToggles ul {
	float: left;
}
div#viewToggles li, div#modeToggles li {
	float: left;
	width: 23px;
	height: 23px;
	margin: 8px 2px;
	background: url(/images/site/btn_views.gif) 0 0 no-repeat;
}
div#viewToggles li a, div#modeToggles li a {
	display: block;
	width: 23px;
	height: 23px;
	text-indent: -9000px;
}
div#viewToggles li:hover, div#modeToggles li:hover {
	background-position: 0 -23px;
}
ul.map li#mapView, ul.outline li#outlineView, ul.editing li#editingMode, ul.presentation li#presentationMode, ul.printing li#printMode {
	background-position: 0 -46px;
}
li#mapView a {
	background: url(/images/site/icon_mapView.gif) 50% 50% no-repeat;
}
li#outlineView a {
	background: url(/images/site/icon_outlineView.gif) 50% 50% no-repeat;
}
div#modeToggles li#editingMode a {
	background: url(/images/site/icon_editMode.gif) 50% 50% no-repeat;
}
div#modeToggles li#presentationMode a {
	background: url(/images/site/icon_presentationMode.gif) 50% 50% no-repeat;
}
div#modeToggles li#printMode a {
	background: url(/images/site/icon_printMode.gif) 50% 50% no-repeat;
}
div#zoomTool {
	float: right;
	width: 260px;
	padding-right: 2px;
	padding-left: 20px;
	background: url(/images/site/appDivide.gif) bottom left no-repeat;
	height: 3em;
}
div#zoomTool h3, div#viewToggles h3, div#modeToggles h3 {
	float:left;
	text-align: right;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 3em;
}
div#zoomTool div#area {
	height: 20px;
	width: 200px;
	background:url(/images/site/zoomBar.gif) 0 50% repeat-x;
	float: right;
	position: relative;
	margin-top: 10px;
}
div#zoomTool div#knob {
	height: 20px;
	position: absolute;
	width: 16px;
	background:url(/images/site/zoomKnob.gif) 0 50% no-repeat;
	cursor:pointer;
}	





/*------------------------------------------------------------------
Application SiteMap Styles
------------------------------------------------------------------*/
div.map, div.outline {
	background: #9FD2DF;
	margin: 0;
	clear: both;
	overflow: auto;
	font-family: Arial, sans-serif;
	border-top: 1px solid #bbb;
	width: 100%;
	position: relative;
}
form {
	margin: 3em;
}
fieldset {
	border: 0;
	margin: 0;
}


/*------------------------------------------------------------------
Map View Structure Styles
------------------------------------------------------------------*/

div.map #sitemap {
	margin: 0 auto;
	position: relative;
	left: 10em;
}
div.map ul {
	clear: left;
	display: block;
}
div.map ul ul {
	border-top: 1px solid #000;
	width: auto;
	margin: 2em 0 0 0;
	position: static;
	display: block;

}
div.map ul ul.solo {
	border-top: 0;
}
div.map li {
	float: left;
	list-style: none;
	position: relative;

}
div.map li li {
	margin: -1px 0 0 0;
	overflow: hidden;
}
div.map li div.connectContain {
	padding: 0 5px 3em 5px;
	margin-bottom: -2em;
}

div.map li li div.connectContain {
	padding: 2em 5px 5.5em 5px;
	margin: 0 .3em -3em .3em;
}
div.map li li div.section {
	padding: 2em 5px 4em 5px;
}
div.map li li div.first {
	margin-left: 0;
}
div.map li li div.last {
	margin-right: 0;
}
div.map li div.connectContain div.vLine {
	position: absolute;
	left: 50%;
	width: 0;
	margin-left: -1px;
	top: 0;

}

div.map ul.solo li.root div.connectContain div.vLine div.line {
        height: 13.8em;
}

div.map ul.solo li.root ul div.connectContain div.vLine div.line {
        height: 11.8em;

}
div.map ul.solo li.root ul div.section div.vLine div.line {
        height: 15.7em;
}

div.map li li div.first div.vLine div.line {
	left: -9999em;
	width: 9999em;
	border-right: 1px solid #000;
	background: #9FD2DF;
}
div.map li li div.last div.vLine div.line {
	right: 0;
	left: auto;
	width: 9999em;
	border-right: none;
	border-left: 1px solid #000;
	background: #9FD2DF;
}
div.map li div.connectContain div.vLine div.line {
	position: relative;
	left: 0;
	width: 0;
	border-right: 1px solid #000;
	height: 13.8em;
}
div.map div.pageContain {
	display: block;
	background: #9FD2DF;
	padding: .25em .5em .5em .5em;
	color: #222;
	text-decoration: none;
	margin: 0 auto;
	width: 8.7em;
	height: 10em;
	position: relative;
	z-index: 1000;
	text-align: left;
}



/*------------------------------------------------------------------
Outline View Structure Styles
------------------------------------------------------------------*/
div.outline ul, div.outline ul ul {
	float: none;
	border-left: 1px dotted #444;
	position: relative;
}
div.outline ul#sitemap {
	border: 0;
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 1em 3em;
}
div.outline li {
	list-style: none;
	position: relative;
	clear: left;
	padding-top: 1.6em;
	width: auto;
}
div.outline li li {
	padding: 1.6em 0 0 3.5em;
}
div.outline li div.connectContain {
	position: relative;
}
div.outline li div.connectContain div.vLine {
	top: 0;
	z-index: 0;
}
div.outline li div.vLine div.line {
	position: absolute;
	left: 0;
}
div.outline li li div.vLine div.line {
	left: -3.5em;
}
div.outline li div.last div.vLine div.line, 
div.outline li div.solo div.vLine div.line {
	background: #9FD2DF;
	height: 100em;
	margin-left: -1px;
}

div.outline li div div.vLine div.line {
	position: absolute;
	width: 10em;
	top: 1em;
	border-top: 1px dotted #444;
	background: none;
}
div.outline div.pageContain {
	display: block;
	background: #9FD2DF;
	height: 2.5em;
	position: relative;
	color: #222;
	text-decoration: none;
	z-index: 2;
	width: 20em;
}


/*------------------------------------------------------------------
Inner Page Element Styles
------------------------------------------------------------------*/

input.titleText {
	color: #222;
	border: none;
	outline: none;
}
input.defaultText {
	color: #666;
}
input:focus, input.focus {
	margin-left: 3em;
	z-index: 9999;
	background: #FFE8B6;
	border: 1px solid #666;
}

div.page_meta {
	display: none;
	background: #fff;
	border: 2px solid #999;
	position: absolute;
	padding: 10px;
	z-index: 9999999;
	width: 200px;
	text-align: left;
}
div.page_meta label {
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	margin: 0 0 .3em;
	padding-top: 1em;
	clear: both;
}
div.page_meta input, div.page_meta input:focus, div.page_meta input.focus, div.page_meta textarea {
	width: 190px;
	margin: 0;
	background: #eee;
	border: 2px solid #ddd;
	padding: .2em;
	font-size: 1.1em;
	color: #555;
	font-family: Verdana, sans-serif;
}
div.page_meta textarea {
        height: 6em;
}
div.page_meta input:focus, div.page_meta input.focus, div.page_meta textarea:focus, div.page_meta textarea.focus {
	background: #fff;
	color: #333;
}
div.page_meta a.openUrl {
	position: absolute;
	text-indent: -9999px;
	display: block;
	width: 18px; 
	height: 18px;
	background: url(/images/site/newWin.gif) 50% 50% no-repeat;
	left: 18.3em;
	top: 5.8em;
	z-index: 99999;
}
div.page_meta h4 {
	padding-bottom: .3em;
}
div.page_meta a.metaClose {
	position: absolute;
	top: 0;
	right: 0;
	background: #ddd;
	padding: .5em;
	color: #444;
	font-weight: bold;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	cursor: pointer;
}


/*sorting drop zone state*/
.sortHover {
border: 2px dotted #fff !important;
margin-top: 1em;
background: url(/images/site/dropZone.gif) 50% 50% no-repeat;
}
#sitemap li li img.pageIcon {
cursor: move !important;
}

/*------------------------------------------------------------------
Inner Page Element Styles: Map View
------------------------------------------------------------------*/	
div.map div.pageContain img {
	width: 7.3em;
	height: 8.9em;
	position: absolute;
	top: 0;
	left: 1em;
}
div.map a {
	font-size: 1em;
	cursor: pointer;
}
div.map a.toggleSection {
	text-indent: -9000px;
	margin: 0;
	width: 10px;
	height: 2em;
	display: block;
	float: left;
	cursor: pointer;
}
div.map a.metaToggle {
	position: absolute;
	top: 6em;
	left: 3.5em;
	text-indent: -9000px;
	cursor: pointer;
}
div.map input.titleText, div.map div.safariWipe {
	background: #9FD2DF;
	top: 8em;
        width: 9em;
	font-size: .7em;
	margin-left: -1.8em;
	text-align: center;
	position: absolute;
	z-index: 50000;
	font-weight: bold;
	padding: .1em .2em .3em;
}
div.map div.safariWipe {
	border-top: .4em solid #9FD2DF;
	border-bottom: .8em solid #9FD2DF;
	border-left: .6em solid #9FD2DF;
	border-right: .9em solid #9FD2DF;
   	height: .8em;
   	width: 7.8em;
   	background: none;
}
div.map input:focus, div.map input.focus {
	background: #FFE8B6;
    z-index: 5000;
}

div.map a.deleteThis {
	position: absolute;
	top: 1.4em;
	right: 4.2em;
	text-indent: -9000px;
	width: 0;
	background-position: 0 0;
}
div.map a.deleteThis img {
	width: 1.3em;
	height: 1.3em;
	border: 0;
left: 0;
top: 0;
}
div.map a.metaToggle img {
	width: 1.6em;
	height: 1.6em;
	border: 0;
	left: 0;
	top: 0;
}

div.map a.addPage {
	position: absolute;
	top: 11em;
	left: 50%;
	margin-left: -1.1em;
	width: 0;
	z-index: 100;
}
div.map a.addPage img {
	width: 2.4em;
	height: 2.4em;
	border: 0;
	left: 0;
	top: 0;
}
div.map li li a.addPage {
	top: 13em;
}
div.map li li div.first a.addPage {
	left: 48%;
}
div.map a.toggleSection {
	top: 6em;
	position: absolute;
	left: 2em;
	z-index: 1000;
}
div.map a.toggleSection img {
	width: 1.6em;
	height: 1.6em;
	border: 0;
	left: 0;
}
div.map a.sectionCol {
}
div.editing a.toggleSection, a.sectionCol {
	background-position: 50% 50%;
}







/*------------------------------------------------------------------
Inner Page Element Styles: Outline View
------------------------------------------------------------------*/	

div.outline div.pageContain img {
	width: 2.3em;
	height: 2.8em;
	position: absolute;
	top: -.4em;
	left: -1.1em;
	z-index: 2;
}
div.outline a {
	font-size: 1em;
	cursor: pointer;
	z-index: 2;
}
div.outline input.titleText, div.outline div.safariWipe {
	background: #9FD2DF;
	top: 0;
	font-size: .8em;
	margin-left: .9em;
	text-align: left;
	margin-top: 0;
	font-weight: bold;
	padding: .1em .2em .3em;
	width: 40.8em;
	z-index: 2;
}
div.outline div.safariWipe {
	position: absolute;
	border-top: .4em solid #9FD2DF;
	border-bottom: .8em solid #9FD2DF;
	border-left: .6em solid #9FD2DF;
	border-right: .9em solid #9FD2DF;
   	height: .8em;
   	background: none;
	margin-left: .5em;
	width: 40em;
}
div.outline input:focus, div.map input.focus {
	background: #FFE8B6;
        z-index: 5000;
}
div.outline a.deleteThis {
	position: absolute;
	top: 0;
	left: .05em;
	text-indent: -9000px;
	width: 0;
	background-position: 0 0;
	z-index: 3;
}
div.outline a.deleteThis img {
	width: .8em;
	height: .8em;
	border: 0;
	left: 0;
	top: 0;
}
div.outline a.metaToggle {
	position: absolute;
	top: 1em;
	left: -.7em;
	z-index: 3;
}
div.outline a.metaToggle img {
	width: 1em;
	height: 1em;
	border: 0;
	left: 0;
	top: 0;
}
div.outline li a.addPage {
	position: absolute;
	top: 3.1em;
	left: .6em;
	z-index: 100;
}
div.outline li li a.addPage {
	left: 4.1em;
}
div.outline a.addPage img {
	width: 1.6em;
	height: 1.6em;
	border: 0;
	top: 0;
	right: 0;
}
div.outline a.toggleSection {
	top: .7em;
	position: absolute;
	left: -2.5em;
	z-index: 100;
}
div.outline a.toggleSection img {
	width: 1.5em;
	height: 1.5em;
	border: 0;
	left: 0;
}


div.presentation #sitemap a {
	display: none;
}



/*------------------------------------------------------------------
Footer Styles
------------------------------------------------------------------*/	
#footer {
	padding: 10px 20px 0 20px;
}
body#myMaps #footer {
	clear: both;
	margin-top: 12em;
	border-top: 1px solid #eee;
}
body#myMaps #footer li {
	font-size: 1em;
}
#footer p {
	display: inline;
	font-size: 1.1em;
}
#footer a {
	text-decoration: underline;
}
#footer ul, #footer li {
	display: inline;
}
#footer li {
	font-size: 1em;
	border-left: 1px solid #444;
	padding-left: .6em;
	padding-right: .3em;
}
#footer li.last {
	border: 0;
}



/*------------------------------------------------------------------
Modal Content Styles
------------------------------------------------------------------*/
p#initLoader {
	width: 125px;
	height: 15px;
	background: url(/images/site/loaderAnim.gif) no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -60px;
	margin-top: 100px;
	padding-top: 110px;
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	z-index: 80000;
}
p#alertUser {
	color: #444;
	border: 2px solid #666;
	width: 400px;
	padding: 40px;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left:-200px;
	background: #fff;
	z-index: 80000;
}
p#alertUser strong {
color: red;
}
p#alertUser a {
	text-decoration: underline;
}


div#modalBox {
	width: 500px;
	margin: 100px auto;
	position: relative;
	z-index: 80000;
}
div#mbHeader {
	padding: 0 15px 8px;
	height: 27px;
	background: url(/images/site/bg_modalBox_header.png) 0 top no-repeat;
}
div#mbContain {
	background: url(/images/site/bg_modalBox_bot.png) 0 bottom no-repeat;
	padding: 10px 10px 5px;
}
div#mbContent {
	position: relative;
	max-height: 270px;
	overflow: auto;
}
div#mbFooter {
	padding: 10px 0 18px;
	margin: 20px 15px 0 15px;
	height: 25px;
	border-top: 1px solid #ededed;
}
div#modalBox span.mapOptions {
	display: none;
}
div#mbContent ul, div#mbContent ul li {
	position: static;
	float: none;
	clear: none;
}
div#mbContent ul {
	padding: 1.5em 0;
}
div#mbContent ul.featureOverview {
	padding-top: 0;
}
div#mbContent ul.featureOverview li {
	padding-top: .5em;
padding-left: 0;
background: none;
}
div#mbContent ul.featureOverview li img {
float: left;
margin-right: 5px;
}
div#mbContent h3 {
margin: .8em 15px 0;
font-size: 1.3em;
}
div#mbContent ul li {
	list-style: none;
	font-size: 1.2em;
	position: static;
	font-weight: normal;
	padding-left: 20px;
	padding-bottom: .5em;
	background: url(/images/site/favicon.gif) 0 0 no-repeat;
	margin: .5em 0;
	line-height: 1.2em;
}
div#mbContent  ul li a {
	font-weight: bold;
	text-decoration: underline;
}
div#mbContent textarea, div#mbContent pre {
	width: 405px;
	font-size: 1.5em;
	color: #ddd;
	background: #444;
	height: 150px;
	padding: 15px;
	line-height: 1.4;
	margin: .5em 0 .5em 15px;
	overflow: auto;
}
div#mbContent pre span.jsonLine {
	display: block;
}
div#overlayScreen {
	position: absolute;
	top: 0;
	z-index: 79000;
}
div#mbHeader h2, div#mbContent p, div#mbContent input, div#mbContent label, div#mbContent a, div#mbContent ul {
	display: block;
	margin: .2em 0;
	float: none;
	clear: both;
}
div#mbContent a {
display: inline;
clear: none;
}
div#mbContent ul, div#mbContent p {
	margin: .2em 15px;
	line-height: 1.2em
}
div#mbContent a {
text-decoration: underline;
}
div#mbContent p.choiceExplain {
margin-top: 1em;
font-size: 1.1em;
font-style: italic;
}
div#mbContent label {
	font-size: 1.3em;
	margin: 0 0 .4em 15px;
font-weight: bold;
}
div#mbContent label em {
display: block;
font-size: .8em;
font-weight: normal;
color: #aa0000;
}
div#mbContent input, div#mbContent input:focus, div#mbContent input.focus {
	width: 20em;
	font-size: 1.3em;
	background: #fff;
	border: 2px solid #ddd;
	padding: .2em;
	margin: 0 0 .4em 15px;
}

div#mbHeader h2 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 3em;
	margin-top: .4em;
	color: #555;
}
div#mbHeader a#mbClose {
	position: absolute;
	right: 15px;
	top: 12px;
	text-indent: -9000px;
	width: 13px;
	height: 13px;
	background: url(/images/site/close.png) 0 0 no-repeat;
	cursor: pointer;
}
a#mbCancel {
	float: right;
	background: #eee;
	padding: .4em 1em;
	font-size: 1.3em;
	color: #333;
	border: 1px solid #ddd;
	margin-left: 10px;
	cursor: pointer;
}
a#mbSave, a#saveAndNew, a#sharingToggle, a#sharingToggle_edit, #mbDelete {
	float: right;
	background: #3397d1;
	padding: .4em 1em;
	font-size: 1.3em;
	color: #fff;
	border: 1px solid #0a75bb;
	margin-left: 10px;
	cursor: pointer;
}
a#sharingToggle_edit {
	background: #0a75bb;
	border-color: #043657;
}
a#dontSaveAndNew {
	float: right;
	background: #aaa;
	padding: .4em 1em;
	font-size: 1.3em;
	color: #222;
	border: 1px solid #999;
	margin-left: 10px;
	cursor: pointer;
}


/*print mode elements*/
#printHelper {
display: none;
}


/* ----- clear fix for floats ----- */
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}		
/* hides clearfix from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* end hide from IE-mac */