@import url( mapObjects.css );

v\:* {
	behavior:url(#default#VML);
}

/* TAGS */

body {
	padding: 0px;
    margin: 0px;
 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;  
	color: #a0a0a0;
}

h1, h2, h3 {
    font-weight: normal;
    clear: both;
}

h1, h2 {
    font-size: 20px;
    line-height: 24px;
    margin: -4px 0 15px 0;
	color: #000000;
}

h2 {
	color: #A6AE00;	
}

h3 {
    font-size: 14px;  
    line-height: 20px;
    margin: -2px 0px 10px 0px; 
	color: #A6AE00;	
}

form,
ul,
.section,
.propertiesTable {
    margin: 0 0 16px 0;
    clear: left;
}



p {
    /*letter-spacing: 0.1px;*/
    line-height: 16px;
	color: #000000;
    margin: 0 0 8px 0;
}

.arrowLink,
a {
	font-weight: bold;
	text-decoration:none;
	color: #379AD5;
}

.arrowLink:hover,
a:hover {
	background-color: #379AD5;
	color: #FFFFFF;
}

a.plain:hover {
	background-color: transparent;
}

tbody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #a0a0a0;
}

td {
	vertical-align: top;
}

form {
	padding: 0px;
}

ul {
	padding: 0px;
	list-style: none;
	list-style-position: outside;
    margin: 0 0 16px 0;
}

ul.bullet {
	list-style: square inside;
}

li {
	margin: 0px;
	padding: 0px;
}

a img {
	border: 0px;
}

a:hover img {
	border: 0px;
}

.code {
	border: 1px solid #EFEFEF;
	padding: 10px;
	margin: 5px 0;
	color: #555;
}

/* TODO form elements */

textarea,
input,
input[type='text'],
input[type='password'] {
	font-size: inherit;
	padding: 1px;
	margin: 0px;
}

textarea,
input[type='text'],
input[type='password'] {
	border: 1px solid #a0a0a0;
}

input[type='file'] {
    padding: 0px;
    margin: 3px 0px;
    font-size:11px;
    cursor: pointer;
}

input[type='button'] {
    margin: 0px;
    padding: 3px;
    cursor: pointer;
    background-color: #FFF;
    border: 1px solid #379AD5;
	color: #379AD5;
	font-size: 11px;
}

input[type='button']:hover {
    background-color: #379AD5;
	color: #FFF;
}

input[type='radio']{
	position: relative;
	padding: 0px;
	margin: 2px 3px;
	width: 15px;
	border: 0px solid #333;
	vertical-align: text-bottom;
}

input[type='submit'] {
	display: block;
    margin: 3px 0px;
    padding: 3px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #379AD5;
	color: #379AD5;
}

input[type='submit']:hover {
    background-color: #379AD5;
	color: #FFF;
}

input[type='checkbox'] {
    font-size:11px;
    cursor: pointer;
}

.spacedInput{
	display: block;
	margin: 4px 0;
}
/* GENERAL CLASSES */

.link, .triggerBold, .trigger, .menu, .help, .tag, .arrow {
	color:#379AD5;
	cursor: pointer;
}

.blueText{
	color:#379AD5;
	font-weight: bold;
}

.link, .arrow {
	font-weight: bold;
}

.triggerBold, .trigger, .tag, .help, .arrow {
	font-weight: normal;
	padding: 1px;
}

.menu {
	padding:0 2px 0 2px;
	margin:0 3px 0 3px;
	vertical-align: top;
}

/* TODO this does not work in IE 6 !!! (generally no support for pseudo-classes) -> behaviour */
.link:focus,
.link:hover,
.arrow:focus,
.arrow:hover,
.menu:focus,
.menu:hover,
.trigger:focus,
.triggerBold:focus,
.triggerBold-hover,
.triggerBold:hover,
.trigger-hover,
.trigger:hover {
	color:#FFFFFF;
	background-color: #379AD5;
}

.triggerBold-hover, .trigger-hover{
	padding: 2px 4px;
}

.meta {
	color: #a0a0a0;
}

.info {
	color: black;
}

.m5 {
	-moz-user-select: none;
	margin-left: 5px;
	margin-right: 5px;
}

.mr5 {
	margin: 0 5px 0 0;
	-moz-user-select: none;
}

.ml5 {
	margin: 0 0 0 5px;
	-moz-user-select: none;
}

.reference {
	font-weight: bolder;
	-moz-user-select: none;
}

.unselectable {
	-moz-user-select: none;
}

.aquaBar {
	position:relative;
	width: 100%;
	clear: both;
	background-image: url(images/aqua.gif);
	background-repeat: repeat-x;
	border-width: 1px 0 1px 0;
	border-style: solid;
	border-top-color: #DCDCDC;
	border-bottom-color: #CCC;
	height: 23px;
	line-height: 21px;
	z-index: 100;
}

.triggerBold{
	font-weight: bold !important;
}

.triggerBold:hover{
	font-weight: bold !important;
}

.aquaBar .trigger {
	color: #A0A0A0;
}

.aquaBar .trigger:focus,
.aquaBar .trigger:hover,
.aquaBar .trigger.hover {
	color: #379AD5;
	background-color: transparent;
}

.barShadow{
	position: absolute;
	width: 100%;
	height: 2px;
	background: transparent url(images/shadow.png) repeat-x;  
	z-index:3;
	overflow: hidden;
}


/* LAYOUT */


/* GENERAL LAYOUT */

.main {
    width: 100%;
    height: 100%;
    min-width: 800px;
}

#mainTeaser {
	position: absolute;
	top: 130px;
	left: 0px;
	width: 100%;
	z-index: 99;
	cursor: pointer;
}

#mainTeaser h1 {
	opacity:0.8;
	font-size: 90px;
	color: #ffffff;
	text-align: center;
	line-height: 70px;
}

#mainTeaserTags {
	opacity:0.9;
	font-size: 28px;
	color: #ffffff;
	text-align: center;
}

#mainTeaserTags span {
	padding: 0 5px 0 5px;
}

#mainTeaserTags span:hover {
	text-decoration: underline;
}

.barContent,
.content,
.contentLoading,
.header {
    position: relative;
    width: 760px;
    margin: 0px auto;
}

.contentLoading{
	height: 30px; /*Fixes an firefox bug*/
}

.barContent .separator {
	position: absolute;
	display: block;
	right: 0;
}

.header {
	height: 55px;
}

.logo {
    position: absolute;
    top: 13px;
    left: 0px;
    height: 30px;
	cursor:pointer;
}

.mainContentArea{
	position: relative;
	clear: both;
}

.content {
	clear: both;
	/**/
	z-index: 2;
	min-height: 180px;
}

.subH1,
.subH2,
.subH3 {
	margin-top: -14px;
	margin-bottom: 11px;
}

.subH3 {
	margin-top: -10px;
	margin-bottom: 12px;
}

.aboveH1,
.aboveH2 {
	margin-bottom: 6px;
	margin-top: -3px;
}

.aboveH3 {
	margin-bottom: 2px;
	margin-top: -3px;
}

.layout2columns,
.layoutMainRight {
	width:100%;
	clear: both;
}

.layout2columns .column1 {
	width: 500px;
	padding-right: 20px;
}

.layout2columns .column2 {
	width: 240px;
}

.layoutMainRight .column1 {
	width: 240px;
	padding-right: 20px;
}

.layoutMainRight .column2 {
	width: 480px;
}

.layout2columns .column2 h3{
	color: #a0a0a0;
}

.layout2columns .column2 p,
.layout2columns .column2 .section,
.layout2columns .column2 .propertiesTable {
    margin: 0 0 20px 0;
}

.propertiesTable {
	width: 100%;
}

.propertiesTable td {
	height: 16px;
	vertical-align: middle;
}

.propertiesTable input {
	margin: 2px 0 2px 0;
	width: 100%;
}

.propertiesTable input[type='radio'],
.propertiesTable input[type='checkbox']
 {
	width: 15px;
}

.propertiesTable .shortButton {
	float: right;
	margin: 4px 0px;
}



table .label {
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
}

table .info {
	width: 100%;
}

.mainFooter {
	position: relative;
	clear: both;
	padding: 10px 8px 0 8px;
	width: 760px;
	margin: 35px auto 30px auto;
	
	background-image: url(images/dotsHorizontal.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

.mainFooter h3 {
	margin: 0 0 4px 0;
}

.mainFooter .meta a {
	padding: 0 2px 0 2px;
	margin: 0 3px 0 3px;
	font-weight: normal;
	text-decoration: underline;
}

.mainFooter .meta a:hover, .mainFooter .meta a:focus {
	text-decoration: none;
}	

.mainFooter .meta a.version {
	padding: 0px;
	margin: 0px;
}

.mainFooterBoxes {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

.mainFooterBoxes a {
	font-weight: normal;
	line-height: 16px;
}

.mainFooterBox, .mainFooterFirstBox {
	float: left;
	margin: 0 0 -200px 15px;
	padding: 1px 13px 200px 13px;
	background-image: url(images/dotsVertical.gif);
	background-position: left top;
	background-repeat: repeat-y;
}
.mainFooterFirstBox {
	margin: 0 0 0 0;
	padding: 0 13px 0 0;
	background-image: none;	
}

.mainFooterBox ul, .mainFooterFirstBox ul {
	margin: 0 0 6px 0;
	padding: 0;
}

.mainFooter .meta {
	clear: both;
	margin-top: 16px;
}

.sepLine {
	position: relative;
	clear: both;
	margin: 0px 0px 15px 0px;
	width: 100%;
	font-size: 0px;
	line-height: 0px;
	height: 1px;
	
	background-image: url(images/dotsHorizontal.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

.sepLineBottom {
	position: relative;
	clear: both;
	margin: 0px 0px 10px 0px;
	width: 100%;
	background-image: url(images/dotsHorizontal.gif);
	background-position: left bottom;
	background-repeat: repeat-x;
}

/* MAIN TEMPLATE */


.login {
	position: absolute;
    right: 0px;
    bottom: 0px;
    height: 44px;
	text-align: right;
	overflow: visible;
	width: 600px;
}

.loginText {
	margin: 0px 10px 0px 10px;
}

.login span,
.login input {
	line-height: 21px;
	vertical-align: middle;
}

.login .link {
	margin: 0 6px 0 6px;
	text-decoration: underline;
	font-weight: normal;
}
.login .link:hover {
	text-decoration: none;
}

#logout_button {
	cursor: pointer;
	margin: 0 0 0 3px;
	text-decoration: underline;
}
#logout_button:hover {
	color: white;
	text-decoration: none;
	background-color: #379AD5;
}

.login img {
	height: 24px;
	width: 24px;
	margin: 0 0 3px 7px;
	vertical-align: middle;
}

.toggleableMap {
	position: relative;
}

.barLeft {
	position: absolute;
	border-right: 1px solid #DDD; 
	width: 10px; 
	height: 23px;
	z-index: 999;
	top:1px;
}

/* TODO: unify with class "minimizer" ? */
.minimizeBar {
	cursor: pointer;
	position: absolute;
	top: 0px;
	width: 10px;
	height: 23px;
	background-image: url(images/minimize.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;	
}

.minimizeBar:hover,
.minimizeBar.hover {
	background-image: url(images/minimize_h.gif);
	background-color: #379AD5;
}

.mapWrapper {
    position: relative;
    width: 100%;
	height: auto; /*300px;*/
	overflow: hidden;
}


/* MAP */


.toolBarContainer {
	float: left;
}

.toolBarContainer img {
	vertical-align: middle;
}

#mapViewPanel {
	float: right;
	text-align: right;
	/* vertical-align: middle; */
}

.mapSearch {
	vertical-align: middle;
	line-height: 11px;
	margin-top: -1px;
	width:131px;
	height:13px;
}

.zoom-in,
.zooom-in,
.zoom-out,
.zooom-out,
.zoom-to-world,
.zoombox,
.toggle-map-objects-on,
.toggle-map-objects-off,
.make-view,
.menuarrow,
.zoomboxActive,
.mapBarButton
{
    float: left;
    cursor: pointer;
    height: 23px; 
    width: 20px;
}

.zooom-in{
    width: 30px;
    background-image: url(images/zooomIn.gif);
}

.zooom-in:hover,
.zooom-in.hover {
    background-image: url(images/zooomIn_h.gif);
}

.zooom-out{
    width: 30px;
    background-image: url(images/zooomOut.gif);
}

.zooom-out:hover,
.zooom-out.hover {
    background-image: url(images/zooomOut_h.gif);
}

.zoom-to-world{
    width: 30px;
    background-image: url(images/zoomToWorld.gif);
}

.zoom-to-world:hover,
.zoom-to-world.hover {
    background-image: url(images/zoomToWorld_h.gif);
}

.zoom-in{
    background-image: url(images/zoomIn.gif);
}

.zoom-in:hover,
.zoom-in.hover {
    background-image: url(images/zoomIn_h.gif);
}

.zoom-out{
    background-image: url(images/zoomOut.gif);
}

.zoom-out:hover,
.zoom-out.hover {
    background-image: url(images/zoomOut_h.gif);
}

.zoombox {
    width: 25px;
    background-image: url(images/zoombox.gif);
}

.zoombox:hover,
.zoombox.hover {
    background-image: url(images/zoombox_h.gif);
}

.zoomboxActive {
	width: 25px;
    background-image: url(images/zoombox_h.gif);
	background-color: #EFEFEF;
}

.make-view {
    width: 30px;
    background-image: url(images/snapshot.gif);
}

.make-view:hover,
.make-view.hover {
    background-image: url(images/snapshot_h.gif);
}

.toggle-map-objects-on {
    width: 30px;
    background-image: url(images/mapitemsOn.gif);
}

.toggle-map-objects-on:hover,
.toggle-map-objects-on.hover {
    background-image: url(images/mapitemsOn_h.gif);
}

.toggle-map-objects-off {
    width: 30px;
    background-image: url(images/mapitemsOff.gif);
}

.toggle-map-objects-off:hover,
.toggle-map-objects-off.hover {
    background-image: url(images/mapitemsOff_h.gif);
}

.menuarrow {
    width: 9px;
	margin-left:0px;
	margin-right: 2px;
	background-image: url(images/snapshotsDropDown.gif);
}

.menuarrow:hover,
.menuarrow.hover {
    background-image: url(images/snapshotsDropDown_h.gif);
}

.snapshotMenu {
	border: 1px solid #C9C9C9;
	background-color: white;
	z-index: 999999;
	opacity: 0.95;
	padding: 1px;
}

.snapshotMenuList {
	margin: 0px;
	padding: 0px;
	width: 150px;
}

.snapshotMenuItem {
	height: 15px; 
	margin:0px;
	clear:both;
	padding: 4px;
	vertical-align: middle;
	cursor: pointer;
	color: #379AD5;
}

.snapshotMenuItem:hover span,
.snapshotMenuItem:hover,
.snapshotMenuItem.hover {
	color: #FFF;
	background-color: #379AD5;
}

.snapshotMenuItem:hover a,
.snapshotMenuItem.hover a {
	color: #FFF;
}

.gmap {
	position: relative;
	height: 245px;
	background-color: #eeeeee;
}


.barRight{
	float: right;
	width: 12px; 
	height: 23px;
}

.barRight img {
	display: block;
}
.barRight .top {
	background-color: white;
	margin-left: 1px;
	margin-bottom: 1px;
}

.mapstatus{
	display: block; 
	position:absolute; 
	z-index:1; 
	top: 25px; 
	right: 0px;
	width: 240px;
	padding: 0px; 
}

.mapShadow{
	left: 1px;
	position: absolute;
	z-index:99; 
}

.mapstatusTab{
	z-index:9; 
	left: 4px;
	width: 200px;
	overflow: visible;
	position: relative;
	top: 0px;
	height: 13px;
	background-color: #FFF;
	border-bottom: 1px solid #C9C9C9; 
	/* cursor: pointer; */
}

.mapstatusContent{
	position:relative;
	padding: 5px 10px 6px 10px;
	border-left: 1px solid #C9C9C9; 
	 border-bottom: 1px solid #C9C9C9; 
	 color:#379AD5; 
	 background-color: #FFF;
}

.mapstatusLeft{
	position: absolute;
	background-image: url(images/mapitems/mapContextTab.gif);
	width: 5px;
	height: 14px;
	top: 0px;
	left: -4px;
}

.mapstatusRight {
	position: absolute;
	background-image: url(images/mapitems/mapContextTabRight.gif);
	width: 14px;
	height: 14px;
	top: 0px;
	right: -13px;
}

.mapstatusContent h3 {
	color: #000000;
}


/* PATH */


.decreaseHeight,
.increaseHeight {
	cursor: pointer;
	width: 12px;
	height: 11px;
	background-repeat: no-repeat;
	background-position: -2px 0px;
	overflow: hidden;
}

.decreaseHeight {
	background-image: url(images/decreaseHeight.gif);
}

.decreaseHeight:hover{
	background-image: url(images/decreaseHeight_h.gif);
	background-color: #379AD5;
}

.increaseHeight {
	background-image: url(images/increaseHeight.gif);
}

.increaseHeight:hover{
	background-image: url(images/increaseHeight_h.gif);
	background-color: #379AD5;
}

.path {
	font-size: 12px;
	vertical-align: middle;
	line-height: 21px;
	z-index: 1;
}

.subnavi {
	text-align: right;
	font-size: 12px;
}

.subnavi,
.path,
.subnavi img,
.path img,
.subnavi span,
.path span,
.subnavi a,
.path a{
	-moz-user-select: none;
}

.path img, .subnavi img {
	vertical-align: middle;
}

.path a, .subnavi a {
	padding:0 2px 0 2px;
	color:#379AD5;
	font-weight: bold;
}

.path a:focus,
.path a:hover,
.subnavi a:focus,
.subnavi a:hover {
	color:#FFFFFF;
	background-color: #379AD5;
}


/* =============================== MORE OR LESS CLEANED UP UNTIL HERE ===================================*/

.inlineImage{
	vertical-align:middle;
}

#registrationTable input {
	width:180px;
	height:14px;
	float: right;
}

#registrationTable input[type='checkbox'] {
	width:20px;
	height:14px;
	float: none;
}

.inputNotes{
	padding-left: 10px;
}

/* CONTENT */


.step1 {
	width: 167px;
	padding-right: 5px;
	background-image:url(images/dotsVertical.gif);
	background-position:right top;
	background-repeat:repeat-y;
}
.step1 div {
	padding:9px 15px 0 15px;
}
.step2 {
	width:167px;
	padding-right: 5px;
}
.step2 img {
	margin-left:5px;
}
.step2 div {
	padding:9px 15px 0 15px;
}
.step3 {
	width:167px;
	background-image:url(images/dotsVertical.gif);
	background-position:left top;
	background-repeat:repeat-y;
}
.step3 img {
	margin-left:6px;
}
.step3 div {
	padding:9px 15px 0 16px;
}

/* box */

.box {
	width: 240px;
	background-image:url(images/boxBackground2.gif);
	background-position:right top;
	background-repeat:repeat-y;
	background-color:#EEEEEE;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
}

.boxHeader {
	font-size:14px;
	line-height:24px;
	height:25px;
	background-image:url(images/boxHeader2.gif);
	background-position:right top;
	background-repeat:no-repeat;
}

.boxHeaderTitle{
	float: left;
	margin-left: 7px;
	color: #379AD5;
	width: 90%;
	cursor: pointer;
}

.boxHeaderTitle:hover{
	font-weight: bold;
}

.boxHeader img {
	margin-right:10px;
	float:left;
}

.boxContent {
	position: relative;
	background-image:url(images/boxContentBackground2.gif);
	background-position:left top;
	background-repeat:repeat-y;
	border-bottom: 1px solid #C9C9C9;
	padding:0px;
}

.cornerBottomLeft {
	position: absolute;
	font-size:0px;
	line-height:0px;
	bottom:-1px;
	left:0px;
	width:5px;
	height:5px;
	background-image:url(images/cornerBottomLeft.gif);
	background-repeat:no-repeat;
	background-position:left top;
}

.cornerBottomRight {
	position: absolute;
	font-size:0px;
	line-height:0px;
	bottom:-1px;
	right:0px;
	width:10px;
	height:10px;
	background-image:url(images/cornerBottomRight.gif);
	background-repeat:no-repeat;
	background-position:left top;
}
.cornerTopLeft {
	position: absolute;
	font-size:0px;
	line-height:0px;
	top:-1px;
	left:0px;
	width:5px;
	height:5px;
	background-image:url(images/cornerTopLeft.gif);
	background-repeat:no-repeat;
	background-position:left top;
}
.cornerTopRight {
	position: absolute;
	font-size:0px;
	line-height:0px;
	top:-1px;
	right:0px;
	width:5px;
	height:5px;
	background-image:url(images/cornerTopRight.gif);
	background-repeat:no-repeat;
	background-position:left top;
}

.registration {
	height:160px;
	padding: 15px 15px 0 15px;
}

.formField {
	text-align:right;
}

.submitButton {
	margin-right:25px;
	margin-top:1px;
}

/*
login button
style="font-size:11px; padding: 0 3px 1px 3px; margin: 0px;" 
*/

/***** userpage *****/

.user {
	width:100%;
}

.stories {
	width:132px;
}

.storiesColumn {
	width:133px;
}

.tabList{
	margin: 0px;
	padding: 0px;
	background-image: none;
}

.tab,
.tab-selected {
	cursor: pointer;
	float:left;
	padding:0 10px 0 0;
	background-color:#FFFFFF;
	height:25px;
	text-align:center;
	font-size:14px;
	color:#707070;
	z-index:99;
	position:relative;
	background-image:url(images/tabRight.gif);
	background-position:right top;
	background-repeat:no-repeat;
	line-height:24px;
	border-bottom: 0px solid #FFF;
	margin-bottom:-1px;
	overflow: hidden;
}

.tabLeftIcon{
	float:left;
	height:25px;
	width: 5px;
	margin-right: 5px;
}

.tab-selected .tabLeftIcon{
	background-image:url(images/tabLeft.gif);
}

.tab {
	background-image:url(images/tabDarkRight.gif);
	background-position:right top;
	background-repeat:no-repeat;
}

.tab .tabLeftIcon{
	background-image:url(images/tabDarkLeft_first.gif);
}

.tab img {
	float:left;
	margin-right:5px;
}

.tabSubnavi {
	clear:both;
	width:100%;
	height:20px;
	background-image:url(images/tabSubnavi.gif);
	background-position:right;
	background-repeat:no-repeat;
	z-index:0;
	position:relative;
	border-left:1px solid #DCDCDC;
}

.tabSubnaviLinks {
	margin-left:5px;
}

.tabSubnaviLinkContainer{
	float: left; 
	margin-top: 3px;
}

.tabSubnaviLinkContainerRight{
	float: right;
	margin-top: 3px;
	margin-right: 5px;
}

.tabSubnavi a, .tabSubnavi img {
	float:left;
}

.tabContent {
	position: relative;
	height: 300px;
	width:100%;
	background-color:#EEEEEE;
	border-bottom:1px solid #C9C9C9;
	border-right:1px solid #C9C9C9;
	background-image:url(images/boxContentBackground2.gif);
	background-position:left top;
	background-repeat:repeat-y;
}

.gloss {
	border-top:1px #F7F7F7 solid;
	border-left:1px #F7F7F7 solid;
	margin-left:1px;
	padding:0px;
}

.story {
	width:80px;
	height:114px;
	background-image:url(images/story.gif);
	background-repeat:no-repeat;
	background-position:left top;
	margin-bottom:5px;
}

.story img {
	margin:1px 0 0 4px;
}

.storyTitle {
	color:#000000;
	font-weight:bold;
	text-align:right;
	margin:5px 9px 0 0;
}

.inbox {
	width:611px;
}

.inboxColumn {
	width:611px;
	padding-left:15px;
}

.fullTabSystem {
	width:100%;
}

.tabLink{
	text-align:center;
	color: #707070;
	background-image: none;
	-moz-user-select: none;
}

.tabLink:focus,
.tabLink:hover {
	color: #379AD5;
}

/* *** NEW icons work in progress *** */

.icon {
	float:left;
	position:relative;
	width:62px;
	height:89px;
	margin: 0 5px 0 0;
	background-color: #FFF;
	border: 1px solid #C9C9C9;
	cursor: pointer;
}
.icon:hover {
	border: 1px solid #AAA;
}

.icon .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
}

.icon .indicator {
	position: absolute;
	display: none;
}

.icon .decorator {
	position: absolute;
	top: -2px;
	right: -2px;
	background-image: url(images/image_corner_white.gif);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
}

.icon .sub {
	position: absolute;
	display: none;
}

.icon .label {
	position:absolute;
	font-size: 10px;
	left: 8px;
	bottom: 2px;
	padding: 0;
	white-space: normal;
	color:#000000;
	font-weight:bold;
	-moz-user-select: none;
	width: 56px;
	height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iconStory {
	width: 64px;
	height: 91px;
	border: none;
}
.iconStory:hover {
	border: none;
}
.iconStory .image {
	width: 64px;
	height: 91px;
	background-image: url(images/storyIconLayer1.png);
	background-repeat: no-repeat;
	background-position: top left;
}
.iconStory .decorator {
	top: 0;
	left: 0;
	width: 64px;
	height: 91px;
	background-image: url(images/storyIconLayer2_bgWhite.png);
	background-repeat: no-repeat;
	background-position: top left;
}
.iconStory .label {
	left: 4px;
	bottom: 8px;
	text-align: right;
}

.iconImage .image {
	background-image: url(images/image-60.gif);
}

.iconPost .image {
	background-image: url(images/post-60.gif);
}

.iconAudio .image {
	background-image: url(images/audio-60.gif);
}

.iconVideo .image {
	background-image: url(images/video-60.gif);
}

/* *** END NEW icons work in progress *** */

/* *** TODO --start replace old lists and icon styles *** */

/* Lists and Icons */
.Story-Icon-75, 
.Map-Icon-75, 
.Snapshot-Icon-75, 
.Picture-Icon-75, 
.Post-Icon-75, 
.Audio-Icon-75, 
.User-Icon-75, 
.FeedItem-Icon-75, 
.Snapshot-Icon-75, 
.Route-Icon-75, 
.Marker-Icon-75,
.Video-Icon-75  {
	cursor: pointer;
	float:left;
	margin: 0px;
	position:relative;
	width:75px;
	height:106px;
	border: 1px solid #C9C9C9;
	margin-right: 5px;
}

.Snapshot-Icon-75,
.Map-Icon-75, 
.Picture-Icon-75, 
.Post-Icon-75, 
.Audio-Icon-75, 
.User-Icon-75, 
.FeedItem-Icon-75, 
.Snapshot-Icon-75, 
.Route-Icon-75, 
.Marker-Icon-75,
.Video-Icon-75 {
	background-color: #FFF;
	background-image: none !important; /*keep this here*/
}

.iconTitle {
	position:absolute;
	font-size: 10px;
	left: 8px;
	bottom: 6px;
	color:#000000;
	font-weight:bold;
	-moz-user-select: none;
	width: 67px;
	overflow: hidden;
}

.Story-Icon-75 .iconTitle {
	bottom: 14px;
	right: 5px;
	text-align: right;
	left: auto;
}

.Story-Icon-75{
	background-image: url(images/story.gif);
	background-repeat:no-repeat;
	background-position:left top;
	width: 80px !important;
	height: 114px  !important;
	border: 0px solid #FFF;
}

.Story-Icon-75:hover {
	border: 0px solid #FFF !important;
}

.Story-Icon-75 .iconCorner{
	display: none;
}

.Story-Icon-75 .bgIcon{
	top: 1px;
	left: 4px;
	width: 75px;
	height: 75px;
}


.Map-Icon-75 .iconCorner{
	display: none;
}

.Map-Icon-75 .bgIcon{
	background-image: url(images/map-75_default.gif);
	width: 75px;
	height: 75px;
}

.User-Icon-75{
	background-image: url(images/userIcon.gif);
	width: 75px !important;
	height: 106px  !important;
}

.Picture-Icon-75 .bgIcon{
	background-image: url(images/image-75.gif);
	width: 75px;
	height: 75px;
}

.Video-Icon-75 .bgIcon{
	background-image: url(images/video-75.gif);
	width: 75px;
	height: 75px;
}

.Audio-Icon-75 .bgIcon{
	background-image: url(images/audio-75.gif);
	width: 75px;
	height: 75px;
}

.Snapshot-Icon-75 .bgIcon{
	background-image: url(images/view-75.gif);
	width: 75px;
	height: 75px;
}

.Post-Icon-75 .bgIcon{
	background-image: url(images/post-75.gif);
	width: 75px;
	height: 75px;
}

.FeedItem-Icon-75 .bgIcon{
	background-image: url(images/rss-75.gif);
	width: 75px;
	height: 75px;
}

.Marker-Icon-75 .bgIcon{
	background-image: url(images/imagemarker-75.gif);
	width: 75px;
	height: 75px;
}

.Route-Icon-75 .bgIcon{
	background-image: url(images/trail-75.gif);
	width: 75px;
	height: 75px;
}

.Story-Icon-75:hover, 
.Snapshot-Icon-75:hover, 
.Picture-Icon-75:hover, 
.User-Icon-75:hover,
.Post-Icon-75:hover, 
.Audio-Icon-75:hover, 
.FeedItem-Icon-75:hover, 
.Route-Icon-75:hover, 
.Marker-Icon-75:hover,
.Marker-Icon-75:hover,
.Video-Icon-75:hover {
	border: 1px solid #AAA;
}

.Snapshot-Icon-75 .iconImage, 
.Picture-Icon-75 .iconImage, 
.Post-Icon-75 .iconImage, 
.Audio-Icon-75 .iconImage, 
.User-Icon-75 .iconImage, 
.FeedItem-Icon-75 .iconImage, 
.Snapshot-Icon-75 .iconImage, 
.Route-Icon-75 .iconImage, 
.Marker-Icon-75 .iconImage,
.Video-Icon-75 .iconImage {
	width: 75px;
	height: 75px;
	background-position: center center;
	background-repeat: no-repeat;
}

.iconImage60 {
	width: 60px;
	height: 60px;
	background-position: center center;
	background-repeat: no-repeat;
}

/*============================================*/

.Story-Icon-60, 
.Picture-Icon-60, 
.Post-Icon-60, 
.Audio-Icon-60, 
.FeedItem-Icon-60, 
.Route-Icon-60, 
.Marker-Icon-60,
.Video-Icon-60 {
	float:left;
	margin:0 10px 10px 0;
	position:relative;
	width:77px;
	height:106px;
	background-color: #FFF;
	border: 1px solid #C9C9C9;
}

.Story-Icon-60:hover, 
.Picture-Icon-60:hover, 
.Post-Icon-60:hover, 
.Audio-Icon-60:hover, 
.FeedItem-Icon-60:hover, 
.Route-Icon-60:hover, 
.Marker-Icon-60:hover,
.Video-Icon-60:hover {
	border: 1px solid #AAA;
}

.Story-Icon-60{
	background-image: url(images/story.gif);
	background-repeat:no-repeat;
	background-position:left top;
	width: 80px !important;
	height: 114px  !important;
	border: 0px solid #FFF;
}

.Story-Icon-60:hover{
	border: 0px solid #FFF !important;
}

.Picture-Icon-60 .bgIcon{
	background-image: url(images/image-60.gif);
	width: 60px;
	height: 60px;
}

.Video-Icon-60 .bgIcon{
	background-image: url(images/image-60.gif);
	width: 60px;
	height: 60px;
}

.Post-Icon-60 .bgIcon{
	background-image: url(images/post-60.gif);
	width: 60px;
	height: 60px;
}

.Audio-Icon-60 .bgIcon{
	background-image: url(images/audio-60.gif);
	width: 60px;
	height: 60px;
}

.FeedItem-Icon-60 .bgIcon{
	background-image: url(images/rss-60.gif);
	width: 60px;
	height: 60px;
}

.Marker-Icon-60 .bgIcon{
	background-image: url(images/imagemarker-60.gif);
	width: 60px;
	height: 60px;
}

.Route-Icon-60 .bgIcon{
	background-image: url(images/trail-60.gif);
	width: 60px;
	height: 60px;
}

.markerListIcon,
.lineListIcon {
	cursor: pointer;
    float: left;
    background-repeat: no-repeat;
	margin: 0px;
	z-index: 9999;
}

.markerListIcon{
    background-image: url(images/textmarker_grey.gif);
    width: 20px;
    height: 20px;
}

.markerListIcon:hover,
.markerListIcon.hover {
	background-image: url(images/textmarker_grey_h.gif);
}


.lineListIcon{
    background-image: url(images/list_line.gif);
    margin-left: 7px;
    width: 7px;
    height: 17px;
}

.lineListIcon:hover,
.lineListIcon.hover {
	background-image: url(images/list_line_over.gif);
}


.imageListIcon{
    float: left;
    background-image: url(images/image_path.gif);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.storyMapObjsList .postListIcon,
.storyMapObjsList .audioListIcon,
.storyMapObjsList .imageListIcon{
	margin: -1px 0 0 4px; 
	float: left; 
	position: relative; 
	z-index: 9999;
}

.postListIcon{
    float: left;
    background-image: url(images/post_path.gif);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.audioListIcon{
    float: left;
    background-image: url(images/audio_path.gif);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}


/*================================================*/

.storyList .draggable-active{
	border: 0px solid #000 !important;
	background-image: url(images/story_h.gif);
	background-repeat:no-repeat;
	background-position:left top;
}

.bgIcon{
	position: relative;
	overflow: hidden;
	background-repeat:no-repeat;
	background-position:left top;
}

.listTitle{
	position:absolute;
	font-size: 10px;
	bottom: 0px;
	left: 0px;
	padding: 0 0 7px 5px;
	color:#000000;
	font-weight:bold;
	-moz-user-select: none;
}

.iconCorner,
.iconCornerWhite {
	width:10px;
	height:10px;
	z-index:99999;
	position:absolute;
	right:-2px;
	top:-2px;
	background-image:url(images/image_corner.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

.draggable-active .iconCorner{
	background-image:url(images/image_corner_h.gif);
}

.selectedScrollItem .iconCorner{
	background-image:url(images/image_corner_h.gif);
}

.whiteBgList .iconCorner {
	background-image:url(images/image_corner_white.gif);
}

/* *** TODO --end of old lists and icons *** */

/* not categorized yet */

.thumbList{
	margin: 0px;
	padding: 8px;
	overflow: auto;
	height: 240px;
	position: relative;
}

.thumbList ul{
	padding: 0px;
	margin: 0px;
}

.thumbList li{
	position: relative;
	margin: 5px;
	padding: 0px;
	width: 75px;
	height: 106px;
}


/* Main Menu */

.mainMenuLink-selected{
	cursor: default;
	color:	#A0A0A0;
	text-decoration: none;
	-moz-user-select: none;
	
}
.mainMenuLink{
	cursor: pointer;
	color:	#379AD5;
	text-decoration: none;
	-moz-user-select: none;
}

/* Scroll Slot */

.scrollableSlotWrapper{
	height: 125px;
}

.scrollList {
	position: relative;
	width: 2400px; 
	height: 85px; 
	padding: 0px;
	top: 13px; /* dont move this back to the margin below, since it does not work in IE*/
	margin: 0 0 0 24px !important; /* ul margin is set above, so always override */
}

.scrollList .draggable-active{
	border: 2px solid #379AD5 !important;
}

.scrollList li{
	cursor: pointer;
	position: relative;
	float: left;
	padding: 0px;
	margin-right: 3px;
	width: 60px;
	height: 85px;
	background-color: #FFFFFF;
	border: 1px solid #A0A0A0;
	
}

.scrollPreviewSlot{
	margin-top: 5px;
	width: 240px;
	height: 125px;
	left: 0px;
	position: relative;
	overflow: hidden;
}

.scrollBackward {
	cursor: pointer;
	position: absolute;
	left: 0px;
	top: 3px;
	width: 21px;
	height: 107px;
	background-image: url(images/scrollBackward.gif);
	z-index: 99;
}

.scrollBackward:hover{
	background-image: url(images/scrollBackward_h.gif);
}

.scrollForward{
	cursor: pointer;	
	position: absolute;
	right: 0px;
	top: 3px;
	width: 21px;
	height: 107px;
	background-image: url(images/scrollForward.gif);
	z-index: 99;
}

.scrollForward:hover{
	background-image: url(images/scrollForward_h.gif);
}

.scrollIndex{
	position: absolute;
	bottom: 3px;
	left: 100px;
	color: #777;
	-moz-user-select: none;
}

.selectedScrollItem{
	border: 2px solid #379AD5 !important;
	margin-top:-1px;
}

.selectedScrollItem .listTitle{
	color: #379AD5;
	font-weight: bold;
}

.tagList .deleteInline{
	/* background-position: 0px 2px; */ /* sylvester: is this needed by IE? */
}

.tagList,
.column2 .tagList {
	background-color: transparent;
	border: 0px solid #ddd;
	margin: 0 0 4px 0;
	padding: 0px;
	list-style-position: inside;
}

.tagList li {
	list-style-image: url(images/tag_inline.gif);  
}

.blogScreen h3 {
	color: #000000;
}

.infoBox, .borderBox, .exportBox {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.layout2columns .column2 .borderBox,
.layout2columns .column2 .infoBox {
	margin-bottom: 25px;
}

.layout2columns .column2 .borderBox{
	width: 238px;
}

.borderBox, .exportBox {
	background-color:#ffffff;
	border-top: 1px solid #d7d7d7;
	border-left: 1px solid #d7d7d7;
	border-right: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;
	overflow: visible;  /* this is needed for corners ! */
	background-image: url("images/borderBoxShadow.gif");
	background-position: bottom;
	background-repeat: repeat-x;
}

.infoBox {
	background-color:#eeeeee;
	font-size: 14px;
	line-height: 20px;
	overflow: hidden;
}


.exportBox {
	margin: 9px 0 0 0;
	padding: 9px 0 7px 0px;
}

.exportBoxContainer {
	padding: 0 0 0 8px;
}

.infoBox h1,
.infoBox h2 {
	padding: 0px;
	margin: 0px;
}

.infoBox h2 {
	color: #A6AE00;
}

.borderBox h3 {
	color: #A6AE00;
	margin-bottom: 5px;
}

.borderBox h2 {
	color: #379AD5;
}

.borderBox h2.small {
	display: inline;
	font-size: 14px;
	line-height: 16px;
	clear: none;
}

.infoBox.userMessage {
	background-image: url(images/inlineMessageGradient.gif);
	background-repeat: repeat-x;
	background-position: 0% 100%;	
}

.infoBox.publishManager {
	font-size: 11px;
	line-height: 14px;
}

.infoBoxContent {
	padding: 9px;
}

.infoBoxContentBigPadding {
	padding: 18px;
}

.borderBox .infoBoxContent {
	padding-top: 12px;
	padding-left: 10px;
}

.exportBox ul {
	list-style-type: none;
	margin: 0 9px 0 9px;
	padding: 0;
}

.exportBox ul li {
	margin: 3px 0 3px 0;
}

.exportBox a {
	font-weight: normal;
	text-decoration: none;
	background-color: transparent;
}
.exportBox a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #379AD5;
	background-color: transparent;
}

.exportBox a img {
	vertical-align: middle;
	margin-right: 6px;
}

.infoBox .closeButton {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 11px;
	height: 11px;
	background-image: url(images/closeInlineMessage.gif);
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
}

.infoBox .closeButton:hover,
.infoBox .closeButton.hover {
	background-image: url(images/closeInlineMessage_h.gif);
}

.startBoxContent {
	padding: 9px;
	cursor: pointer;
	line-height: 0px;
	font-size: 0px;
}

/* CORNERS FOR BOXES */


.topRightCorner,
.bottomRightCorner,
.topLeftCorner,
.bottomLeftCorner {
	position: absolute; 
	overflow: hidden;
	width: 5px; 
	height: 5px;
	font-size: 0;
}

.topRightCorner {
	top:0px; 
	right: 0px;
	background-image: url(images/white_top_right_corner_small.gif);
}

.bottomRightCorner {
	bottom:0px; 
	right: 0px;
	background-image: url(images/white_bottom_right_corner_small.gif);
}

.topLeftCorner {
	top:0px; 
	left: 0px;
	background-image: url(images/white_top_left_corner_small.gif);
}

.bottomLeftCorner {
	left:0px; 
	bottom: 0px;
	background-image: url(images/white_bottom_left_corner_small.gif);
}


.borderBox .topRightCorner, .exportBox .topRightCorner {
	background-image: url(images/corner_top_right_border.gif);
	margin: -1px -1px 0 0;
}

.borderBox .bottomRightCorner, .exportBox .bottomRightCorner {
	background-image: url(images/corner_bottom_right_border.gif);
	margin: 0 -1px -1px 0;
}

.borderBox .topLeftCorner {
	background-image: url(images/corner_top_left_border.gif);
	margin: -1px 0 0 -1px;
}

.borderBox .bottomLeftCorner, .exportBox .bottomLeftCorner {
	background-image: url(images/corner_bottom_left_border.gif);
	margin: 0 0 -1px -1px;
}

.exportBox .topLeftCorner {
	background-image: url(images/export_box_corner_top_left.gif);
	width: 20px;
	height: 22px;
	margin: -9px 0 0 -8px;
}

/* this box hack is for boxes inside borderboxes - corenrs and margin must be set correctly ! */

.boxHack .topRightCorner {
	background-image: url(images/white_top_right_corner_small.gif) !important;
	margin: 0px !important;
}

.boxHack .bottomRightCorner {
	background-image: url(images/white_bottom_right_corner_small.gif) !important;
	margin: 0px !important;
}

.boxHack .topLeftCorner {
	background-image: url(images/white_top_left_corner_small.gif) !important;
	margin: 0px !important;
}

.boxHack .bottomLeftCorner {
	background-image: url(images/white_bottom_left_corner_small.gif) !important;
	margin: 0px !important;
}

.boxHack .infoBoxContent {
	padding: 9px !important;
}


.inset .topRightCorner {
	background-image: url(images/white_bottom_left_corner_small.gif);
	margin: 0 -5px 0 0;
}

.inset .bottomRightCorner {
	background-image: url(images/white_top_left_corner_small.gif);
	margin: 0 -5px 0 0;
}

.inset .rightSide {
	position: absolute;
	right: -5px;
	top: 5px;
	bottom: 5px;
	width: 5px;
	background-color: #ffffff;
	margin: 0px;
}

.borderBox .largeButton {
	margin:0 0 10px 0;
	cursor: pointer;
}

.introScreen {
	position: relative;
	height: 200px;
}

.introScreen .borderBox {
	position: absolute;
	top: 0px;
	left: 0px; 
	width:180px;
	height: 178px; 
}
/* TABLE ROWS */

.rowedList {
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: auto;
	overflow-x: hidden;
}

.rowedList .evenRow{
	cursor: pointer;
	background-color: #F7F7F7;
	border: 0px;
	margin: 0px;
	padding: 0px;
	background-image:url(images/dotsHorizontal.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
}

.rowedList .oddRow.draggable-active,
.rowedList .evenRow.draggable-active{
	background-color: #DEEAFE !important;
	border: 0px solid #FFF !important;
}

.rowedList .evenRow:hover{
	background-color: #E6E6E6;
}

.rowedList .oddRow{
	cursor: pointer;
	background-color: #EEE;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	background-image:url(images/dotsHorizontal.gif);
	background-position:left bottom;
	background-repeat:repeat-x;
}

.rowedList td,
.rowedList img,
.rowedList span{
	vertical-align: middle;
}

tr.evenRow td,
tr.oddRow td{
	padding: 4px;
}





.rowedList .oddRow:hover{
	background-color: #E6E6E6;
}

.markerList td{
	vertical-align: middle;
}

.mediaList .draggable-active {
	border: 2px solid #379AD5 !important;
	margin-top: -1px;
	margin-left: -1px;
	background-image: url(images/story_h.gif);
	background-color: #FFF !important; 
}

.trashCan{
	width: 200px;
	margin: 4px;
}

.itemIsPlacedStatic,
.itemIsPlaced {
	cursor: pointer;
	position: absolute;
	bottom: 3px;
	right: 3px;
	background-image: url(images/textmarker_grey.gif);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    
}

.itemIsPlaced:hover,
.itemIsPlaced.hover {
	background-image: url(images/textmarker_grey_h.gif);
}

.itemOnLine {
	cursor: pointer;
	position: absolute;
	bottom: 3px;
	right: 3px;
	background-image: url(images/line_grey.gif);
    background-repeat: no-repeat;
    width: 21px;
    height: 20px;
    
}

.itemOnLine:hover,
.itemOnLine.hover {
	background-image: url(images/line_grey_h.gif);
}


/* Buttons */
.submit,
.cancel{
	cursor: pointer;   
	width: 15px;
    height: 15px;
    float: right;
    border: 0px;
	margin: 4px;
	background-repeat: no-repeat;
}

.cancel {
    background-image: url(images/cancel.gif);  
}

.cancel:hover {
    background-image: url(images/cancel_h.gif);
}

.submit {
    background-image: url(images/ok.gif);
}

.submit:hover {
    background-image: url(images/ok_h.gif);
}

.shortButton {
	background-position: 0px 0px;
	background-repeat:no-repeat;
	background-image:url(images/button_small.gif);
	width: 50px;
	height:21px;
	cursor:pointer;
	text-align: center;
	line-height: 21px;
	margin: -2px 0 0 0;
	font-size: 11px ! important;
	color: #a0a0a0 ! important;
}

.shortButton:hover {
	color: #379AD5 ! important;
	background-image:url(images/button_small_h.gif);
}

.longButton { 
	position: relative;
	height:21px;
	line-height: 21px;
	width: 120px;
	background-image:url(images/button_long_left.gif);
	background-position:left top;
	background-repeat:no-repeat;
	cursor:pointer;
	text-align:center;
	margin: -2px 2px 0 0;
}

.longButton .rightPart {
	position: absolute;
	right: -2px;
	top: 0px;
	height:21px;
	width: 2px;
	background-image:url(images/button_long_right.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

.longButton:hover {
	color: #379AD5 ! important;
	background-image:url(images/button_long_left_h.gif);
}

.longButton:hover .rightPart {
	color: #379AD5 ! important;
	background-image:url(images/button_long_right_h.gif);
}

/* special case for button layout */

.areaSelect .shortButton,
.browseSearchBox .shortButton {
	background-image:url(images/button_small_noshadow.gif);
}

.areaSelect .shortButton:hover,
.browseSearchBox .shortButton:hover {
	background-image:url(images/button_small_noshadow_h.gif);
}

.browseSearchBox .shortButton,
.browseResultsSearchBox .shortButton {
	margin-left: 6px;
}

.areaSelect .shortButton {
	float: left;
	margin-right: 6px;
}

.login .shortButton,
.dialogOptions .shortButton,
.wikiField .shortButton {
	float: right;
	margin-left: 6px;
}

.wikiField .shortButton {
	margin-top: 3px;
}

.wikiField {
	margin-bottom: 30px;
}

.wikiField .help{
	float: left;
	font-size: 11px;
}

.dialogOptions {
	margin-top:10px;
}

.arrowNext,
.arrowPrev {
	width: 4px;
	height: 7px;
	overflow: hidden;
}

.arrowNext{
	background-image: url(images/arrowNext.gif);
	float: right;
}

.arrowPrev{
	background-image: url(images/arrowPrev.gif);
	float: left;
}


.loading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#A0A0A0;
	margin: auto auto;
	
	margin: 15px;
}

.loading img {
	vertical-align:middle;
	padding-right:7px;
}

.pathLoader{
	margin: 20px auto;
	width: 200px;
	height: 40px;
}


.trashcanOver,
.trashcan {
	cursor: pointer;
	position: absolute;
	right: 10px;
	bottom: 5px;
	width: 24px;
	height: 24px;
	background-image: url(images/trash.gif);
	background-repeat: no-repeat;	
}

.trashcanOver {
	background-image: url(images/trash_h.gif);
}

.trashcan12Over,
.trashcan12{
	cursor: pointer;
	position: absolute;
	right: 20px;
	bottom: 5px;
	width: 12px;
	height: 12px;
	background-image: url(images/trash-12-grey.gif);
	background-repeat: no-repeat;	
	overflow: hidden;
}

.trashcan12Over{
	background-image: url(images/trash-12-grey_h.gif);
}

.postText {
	clear: both;
	margin: 0 0 16px 0;
	padding: 0px;
	font-size: 12px;
	color: #000000;
}

.commentText{
	clear: both;
	margin: 2px 0px 2px 0px;
	padding: 0px;
	font-size: 11px;
	color: black;
}
 
.contentSection {
	clear: both;
	margin: 0px 0px;
	padding: 0px;
}

.emptySlot{
	width: 90%;
	height: 100%;
	padding: 5%;
	text-align: center;
	background-color: #EFEFEF;
}

.date{
	color: #3595D2;
}

.commentHeader {
	color: #A6AE00;
	font-size: 14px;
	font-weight: bold;
}

.listLine{
	cursor: pointer;
	position: absolute;
	top: -11px;
	left: 7px;
	width: 20px;
	height: 17px;
	background-color: transparent; 
	background-image: url(images/list_line.gif);
	background-repeat: no-repeat;
	background-position: 8px 0;
}

.listLine:hover{
	background-image: url(images/list_line_over.gif);
}

.error{
	color:#FF0000;
	font-weight: bold;
	font-size: 12px;
}

.imageUploadList{
	border: 1px solid #BBB; 
	padding: 4px;
	margin: 2px 0px 4px 0px;
}

.imageUploadList li{
	padding: 1px;
}

.moveUp:hover,
.moveDown:hover{
	background-color: #999;
}

.moveUp,
.moveDown{
	border: 1px solid #999;
	font-size: 11px;
}

.storyMapObjsList{
	height: 26px; 
	position: relative; 
	clear:both;
	padding: 0px;
	vertical-align: top;
	width: 100%;
	z-index: 1;
}

.sortIcons {
	right: 10px; 
	position: absolute;
	width:11px;
	height:21px;
	margin: auto 0;
	top: 0px;
	bottom: 0px;
}
.sortIcons a {
	display:block;
	width:11px;
}
.sortUp {
	position:absolute;
	left:0;
	top:0;
	width: 11px;
	height: 11px;
	background: url(images/sortUp.gif) left top no-repeat;
	overflow: hidden;
}

.sortUp:hover {
	background: url(images/sortUp_h.gif) left top no-repeat;
	height: 11px;
	overflow: hidden;
}

.sortDown {
	position:absolute;
	left:0;
	top:11px;
	background:url(images/sortDown.gif) left bottom no-repeat;
	height:11px;
	width: 11px;
	overflow: hidden;
}

.sortDown:hover {
	background:url(images/sortDown_h.gif) left top no-repeat;
	height:11px;
	overflow: hidden;
}

.statusPanel {
	float:left;
	background-color: #EFEFEF;
	padding: 3px;
	margin-left: 10px;
}

/* STATUS BAR */

.statusWarning,
.statusError,
.statusMessage,
.statusInfo,
.statusDebug,
.uploadIcon,
.statusException{
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	width:15px;
	height:15px;
	margin: 5px;
}


.statusMessage{
	background-image: url(images/cancel.gif);
}

.statusWarning{
	background-image: url(images/cancel_h.gif);
}

.statusError{
	background-image: url(images/cancel_red.gif);
}


.statusInfo{
	background-image: url(images/cancel.gif);
}

.statusDebug{
	background-image: url(images/cancel_h.gif);
}

.statusException{
	background-image: url(images/cancel_red.gif);
}

.progressMessage{
	width: 300px;
	padding: 5px;
}

.progressMessage h3{
	padding: 2px 0;
	margin: 2px 0;
}


.statusBar { 
	position: fixed; 
	left: 0px; 
	bottom: 0px;
	width: 100%;
	z-index: 99999;
	text-align:left;
}

.statusPlugin {
	z-index: 99999;
}

.statusPlugin .pluginHeader {
	height: 18px;
	background-color: white;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	margin-bottom: -1px;
	line-height: 18px;
	/*padding-top: 2px;*/
	z-index: 99999;
}

.statusPlugin .pluginBody {
	display: none;
	background-color: #eeeeee;
	border-top: 1px solid #f7f7f7;
	margin-top: 1px;
}

.statusPlugin.expanded .pluginBody {
	display: block;
}

.statusContent{
    position: relative;
    width: 704px;
    margin: 0px auto;
}

.loggerContent{
    position: relative;
    width: 99%;
    margin: 0px auto;
    height: 300px;
}

.loggerContent>div{
	height: 280px !important;
}

.pluginBody .statusContent {
	padding: 10px 28px 10px 28px;
	max-height: 80px;
	overflow: auto;
}

.pluginHeader .statusContent {
	padding: 0px 28px 0px 28px;
}

.statusIcon {
	position: absolute;
	top: 3px;
	left: 11px;
	width: 12px;
	height: 12px;
	overflow: hidden;
}

.statusHeaderDelimiter {
	position: absolute;
	top: -1px;
	left: 0px;
	height: 20px;
	width: 1px;
	background-image: url(images/separator_small.gif);
}

.statusHeaderDelimiter.right {
	right: 1px;
	left: auto;
}

.statusBodyDelimiter {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 2px;
	background-image: url(images/statusBar/bodyborder.gif);
	background-repeat: repeat-y;
	background-position: 0px 0px;
}

.statusBodyDelimiter.right {
	right: 0px;
	left: auto;
}

.buttonPanel {
	position: absolute;
	right: 11px;
	top: 0px;
	height:20px;
	width: 80px;
}

.statusCloseButton,
.statusMinButton,
.statusMaxButton {
	display: block;
	width: 12px;
	height: 12px;
	margin-top: 3px;
	float: right;
	cursor: pointer;
	margin-left: 2px;
	background-repeat: no-repeat;
	overflow: hidden;
}

.statusCloseButton{
	background-image: url(images/statusBar/status_close.gif);
}

.statusMinButton{
	background-image: url(images/statusBar/status_min.gif);
}

.statusMaxButton{
	background-image: url(images/statusBar/status_max.gif);
}

.collapsed .statusMinButton {
	display: none;
}

.expanded .statusMaxButton {
	display: none;
}

.statusCloseButton:hover{
	background-image: url(images/statusBar/status_close_h.gif);
}

.statusMinButton:hover{
	background-image: url(images/statusBar/status_min_h.gif);
}

.statusMaxButton:hover{
	background-image: url(images/statusBar/status_max_h.gif);
}



#fixedDialogPane {
	position: fixed; 
	left: 0px; 
	top: 0px; 
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.uploadIcon{
	background-image: url(icons/refresh_16.png);
}

.loadingBar{
	height: 20px;
	border: 1px solid #379AD5;
	width: 100%;
	margin: 5px 0;
}

.progressBarContent{
	background-image: url(images/progressBlue.png);
	background-repeat: repeat-x;
	height: 100%;
	width: 0%; 
}

.progressBarStatus,
.progressBar{
	position: relative;
	height: 12px;
	padding: 0px;
	background-image: url(images/progressGrey.png);
	background-repeat: repeat-x;
	overflow: hidden;
}

.progressBarStatus {
	position: absolute;
	top: 3px;
	left: 140px;
	width: 200px;
}

.infoBar{
	margin: 10px 0;	
}

.areaSelect{
	border: 1px solid #000;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 10px;
	left: 10px;
	cursor: pointer;
}

.areaSelect .corner{
	border: 1px solid #000;
	width: 7px;
	height: 7px;
	position: absolute;
	overflow: hidden;
}

.innerAreaBorder{
	width: 5px;
	height: 5px;
	position: absolute;
	border: 1px solid #EFEFEF;
	overflow: hidden;
}

.areaSelect .message{
	border: 0px solid #000;
	width: 200px;
	height: 20px;
	position: absolute;
	left: 0px;
	bottom:-30px;
}

.areaSelect .leftTop{
	left:-5px; 
	top: -5px;
	cursor: nw-resize;
}

.areaSelect .leftBottom{
	left: -5px;
	bottom:-5px;
	cursor: ne-resize;
}

.areaSelect .rightTop{
	right:-5px;
	top: -5px;
	cursor: ne-resize;
}

.areaSelect .rightBottom{
	right: -5px;
	bottom:-5px;
	cursor: nw-resize;
}

#uploadForm {
	position: relative;
	width: 250px;
}

.remove {
	color: #379AD5;
	cursor: pointer;
}

.remove:hover .removeX {
	text-decoration: underline;
}

.loading-init{
	background-image: url(images/loading-init.gif);
	position: absolute;
	width: 400px;
	height: 12px;
	top: 0px;
	left: 0px;
}


.cropImageLoading{
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	background-color: #FFF;
	opacity: .95;
	z-index: 99999;
}


/* TUTORIALS */

.contentNavi {
	width:100%;
	margin-bottom:20px;
}
.contentNavi a img {
	border:0;
}
.contentNavi .column1 {
	width:520px;
}
.contentNavi .column1 img {
	margin-right:16px;
}
.tutorialTable {
	width:100%;
	margin-top:20px;
}
.tutorialTable td {
	padding-bottom:15px;
}
.tutorialTable .column1 {
	width:240px;
}
.tutorialTable .column1 img {
	/*border: 1px solid #eeeeee;*/
}
.tutorialTable .column2 {
	width:720px;
	padding-left:20px;
	padding-right: 20px;
}
.tutorialTable .column2 h3 {
	margin-top:0;
	font-size: 18px;
}

.rollOverDetector{
	opacity: .5;
	position: absolute;
	z-index: 100;
}

.profileImageIcon{
	width: 48px;
	height: 48px;
	background-image: url(images/buddy.gif);
	background-repeat: no-repeat;
}





.unpublished{
	color: #FF0000;
	cursor: pointer;
}

.published{
	color: #00CC00;
	cursor: pointer;
}


.help {
	padding-left: 18px;
	position: relative;
	background-image: url(images/help.gif);
	background-repeat: no-repeat;
	background-position: 1px 0px;
	z-index: 9999999999999;
	cursor: pointer;
	min-height: 12px;
	margin-top: 4px;
}

.help:hover{
	background-image: url(images/help_h.gif);
}

.helpHover{
	z-index: 101;
	position: absolute;
	display: none;
	bottom: 11px;
	left: 11px;
	border: 1px solid #DDD;
	background-color: #FFF;
	font-size: 12px;
	padding: 10px;
	width: 300px;
}

.emptySlotText {
	margin: auto;
	text-align:center;
}

.emptySlotText h2 {
	color: #A0A0A0;
	padding: 0px;
	margin: 100px 0px 0px 0px;
}

.emptySlotText h3 {
	color: #A0A0A0;
	font-size: 14px;
	line-height: 20px;
	padding: 0px;
	margin: 0px;
}

.userMessage {
	color: black;
}

.editable, .promo {
	cursor: pointer;
}

.editable:hover, .promo:hover {
	color: #379AD5;
}

.promo h2 {
	color: #379AD5;
}

.promo:hover {
	background-color: #379AD5;
	color: #ffffff;
}

.promo:hover h2,
.promo:hover .tag {
	color: inherit;
}

.emptyFieldBox {
	color: #A0A0A0;
	text-align:center;
}

.emptyFieldBox h2 {
	color: inherit;
}

.dummyclass {
	margin: 10px;
}
 
.textField {
	width:80px;
	height:13px;
	overflow: hidden;
}

.imageLink {
	background-color: transparent;
	color: #FFFFFF !important;
}

.imageLink:hover {
	background-color: transparent;
	color: #FFFFFF !important;
}

.minimizer{
	cursor: pointer;
	float: left;
	width: 15px;
	height: 25px;
	background-image: url(images/minimizeBox.gif);
}

.minimizer:hover,
.minimizer.hover {
	background-image: url(images/minimizeBox_h.gif);
}

/* MISC CLASSES */


.mediumFont{
	font-size: 13px;
}

.imageContainer{
    position: relative;
}

.placed {
    position: absolute;
    z-index: 30;
    background-image: url(icons/placeIt.png);
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    right: 10px;
    bottom: 10px;
    border: 0px solid #999;
}

.pointIcon{
    float: right;
    background-image: url(images/dragMarker_h.gif);
    background-repeat: no-repeat;
    width: 31px;
    height: 31px;
    cursor: pointer;
	border: 0px solid #fff !important;
}

.pointIcon:hover{
	border: 1px solid #EFEFEF;
}

.isPlaced{
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0px;
    right: 0px;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    background-color: #EFEFEF;
    background-image: url(icons/placed.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.boxLink {
    border: 1px solid #C7D4E4;
    padding:2px;
    margin: 1px;
    text-decoration: none;
    background-color: #EFF3F7;
    color: #7B92AE;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
}

.date{
    color: #777;
    font-size: 11px;
    clear: both;
}

.input-big {
	margin: 0px;
	padding: 3px !important;
	font-size: 13px !important;
	width: 250px;
}

.mediumTextArea{
	width: 300px;
	height: 150px;
	margin: 5px 0;
}

.featuredStories {
	position: absolute;
	left:0px;
	width: 497px;
	height: 140px;
	background-color:#DEE066;
}

.browseSearchBox {
	position: absolute;
	width: 202px;
	height: 90px;
	padding:25px 20px;
	right: 0px;
	background-color:#DEE066;
}

.browseResultsSearchBox {
	background-color:#EFEFEF;
	padding: 13px 15px 8px 15px;
	margin: 0px 0px 20px;
	position: relative;
}

.browseSearchBox h3,
.browseResultsSearchBox h3 {
	font-size: 16px;
	color: #000;
}
 
.browseSearchInput {
	width: 140px;
	height: 13px;
	padding: 3px;
}

.browseSearchOptions {
	color: #000;
	margin-top: 6px;
}

.newTag{
    height: 25px; 
    margin: 5px;    
    border: 1px solid #BBB;  
    background-color: #DDD; 
    font-size: 10px;
}

.tagName{
    padding: 2px; 
    margin: 5px;    
}

/* File Upload */
 
.borderedList{
    border: 1px solid #CCC;
    background-color: #DEDEDE;  
    padding: 2px; 
    margin: 5px;
}

.borderedList li{
    font-size: 11px; 
}

.uploadButton{
    height: 25px; 
    margin: 5px;    
    border: 1px solid #BBB;  
    background-color: #DDD; 
    font-size: 10px;
}


/* CommentManager */

.commentManager{
    margin-top: 20px;  
    clear: both;  
    float: left;
    width: 100%;
    max-width: 400px;
    min-width: 200px;
}

.commentManager ul li{
    padding: 0px;
    margin-bottom: 10px;  
    width: 100%;
}

.commentManager ul {
    padding: 0px;
    margin: 0px;
}

.newComment{
	float: none;
	clear: both;
    display: block;
    width: 100%;
    padding: 1px;
    margin: 40px 0;
}

.newComment textarea,
.newComment input{
    width: 99%;
    float: left;
    clear: left;
    margin: 4px 0;
}

.newComment textarea{
    height: 200px;
}

.newComment .button{
    float: right;
    clear: both;
    margin: 4px 0;
    border: 1px solid #DDD;
    background-color: #FFFFFF;
    cursor: pointer;
    padding: 3px;
}

/* Slot */

.slot {
    position: relative;
    margin: 5px;
    margin-bottom: 30px;
    display: block;
    background-color: #EFEFEF;
}

.slot h1{
     border-bottom:solid 1px #D1D7DE;
     font-size: 16px;
     font-weight: bold;
     width: 96%;
     margin: 0px;
     padding: 0 2%;
     display: block;
}

#slotMenu{
    position: absolute;
    right: 0px;
    width: 200px;
    margin: 0px;
    padding: 0px;
    background: transparent;
    
}

#slotMenu li{
    position: relative;
    float: right;
    height: 15px;
    display: inline;
    margin: 0 2px;
    padding: 1px 7px;
    background-color: #EFEFEF;
    cursor: pointer;
    border: 1px solid #AAA;
}

.slotFooter{
    width: 100%;
    /*margin: 0 2%;*/
    height: 35px;
    text-align: center;
    font-size: 11px;
}

.slotFooter .nextPage,
.slotFooter .prevPage{
    position: absolute;
    cursor: pointer;
    text-decoration: underline;
    color: #000000;
}

.slotFooter .nextPage{
    right: 10px;
    margin-right: 10px;
}

.slotFooter .prevPage{
    left: 10px;
    margin-left: 10px;
}


/* Tabsystem */


.tabPage,
.tabSystem ul li{
    border: 1px solid #CCC; 
}

.tabPage{
    position: relative;
    float: left; 
    width: 500px; 
    background-color: #FAFAFA; 
    border-top: 0px solid #CCC;
}

.closedTabSystem .tabPage{
	display: none;
}

.tabSystem ul {
    position: relative;
    top: -1px;
    clear: both;
    left: 3px;
}

.tabSystem ul li{
    top: -5px;
    display: block;
    float: left;
    padding: 3px 7px; 
    margin: 0px 5px; 
    background-color: #EFEFEF;
    border-bottom: 2px solid #AAA;
    cursor: pointer;
    border-top: 1px solid #CCC;
}

.tab, .tab-selected {
	margin-right: -1px;
}


.templateContainer{
    margin: 5px;
}


/* AutoComplete */
.autocomplete input,
.autocomplete .shortButton{
	float: left;
}

.autoCompleteOutput {
	position: absolute;
	background-color: #ffffff;
	border: 1px solid #c9c9c9;
	min-width: 100px;
	z-index: 99;
}

.autoCompleteHighlight {
	color: white;
	background-color: #777;
	cursor: pointer;
}

.autoCompleteEntry {
	cursor: pointer;
}

.autoCompleteEntry:hover {
	color: white;
	background-color: #999;
}

/* Behaviors */

.toggleContainer {
	border:1px solid #DDD; 
	padding: 1px;
	margin: 0 0 20px 0;	
}

.toggleController {
	cursor: pointer; 
	padding: 3px;
	border:1px solid #DDD; 
	background-color: #EFEFEF;
}

/* Drag And Drop */

.dragProxy { 
    position: absolute;
    color: #333333;
    background-color: #ffffaa;
    border: 1px solid #999999;
    /*opacity: 0.7;*/
    font-size: 10px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 3px;
    z-index: 9999;
}

.draggable,
.draggable-active {
    z-index: 555;
    cursor: pointer;
    border: 1px solid #379AD5;
}

.draggable:hover {
    border: 1px solid #AAAAAA;
}

.draggable-active {
    z-index: 999999;
    border: 1px solid #379AD5 !important;
}

.dropZone-indicateCantAccept,
.dropZone-indicateAccept,
.dropZone-showAccept,
.dropZone-showCantAccept,
.dropZone {
    float: left;
    position: relative;
    margin: 0px;
    padding: 0px; 
}

.dropZoneHover {
    position: absolute;
    height: 15px;
    top: 0px;
    right: 0px;
    display: none;
    z-index: 99999;
    text-align: right;
    
}

.dropZoneMessage{
        padding: 3px 8px;
        position: relative;
        background-color: #5F3333;
        font-size: 10px;
        font-weight: bold;
        text-align: right;
        color: #FFFFFF;
}

.dropZone-indicateAccept {
    border: 1px solid #55AA55 !important;
    margin: 0px;   
    padding: 0px;   
}

.dropZone-showAccept {
    border: 1px solid #00FF00 !important;  
    margin: 0px; 
    padding: 0px; 
}

.dropZone-showCantAccept {
    cursor: help;
    margin: 0px; 
    padding: 0px; 
}

.dropZone-showAccept .dropZoneHover,
.dropZone-showCantAccept .dropZoneHover {
    display: none;
}

.dropZone-showAccept .dropZoneMessage {
    background-color: #00FF00;
}

.dropZone-showCantAccept .dropZoneMessage {
    background-color: #FF0000;
}

/* Data Fields */

.message{
    margin-top: 3px;
    float: left;
    color: #FF0000;
    font-size: 12px;
    color: #888;
}

.menuBar{
    float: right;
    height: 20px;
    padding: 3px 0px;
}

.editableField{
	color: #000000;
    overflow: hidden;
    min-height: 14px;
    min-width: 50px;
    cursor: pointer;
}

.editableField:hover{
	color: #ffffff;
    background-color: #379AD5;
    /* padding: 2px;
    margin: -2px; */
}

.noneditableField{
    min-height: 14px;
    clear: left;
}


/* Hover Message */

.textInputNormal{
    font-family: Helvetiva, Arial, sans-serif;
	font-size: inherit;
	width: 100%;
	height: 200px;
}

.inputFieldNormal{
	font-family: Helvetiva, Arial, sans-serif;
	width: 100%;
	font-size: inherit;
}

/* Dialog */


.dialog, .tip {
	position: absolute;
	z-index: 999999;
	
	width: auto;
	
	min-width: 100px;

	padding-top: 10px;
	padding-bottom: 0px;
	
	background-color: #eeeeee;
	
	visibility: hidden;
}

.mapDialog {
	background-color: #eeeeee;
	position: relative;
	margin-top: 40px;
}




.tip {
	background-color: white;
	opacity: 0.95;
}

#dialogtopleft {
	position: absolute;
	top: -31px;
	left: -19px;

	width: 19px;
	height: 31px;

	background-color: transparent;
}

#dialogtitlebar{
	position: absolute;
	top: -31px;
	left: 0px;

	width: 100%;
	height: 31px;

	background-color: transparent;
	
	font-size: 12px;
	font-weight: bold;
}

#dialogtitlebartext{
	position: absolute;
	top: -31px;
	left: 0px;

	width: 100%;
	height: 31px;

	background-color: transparent;
	
	font-size: 12px;
	color: #A6AE00;
	padding-top: 10px;
}

.tip #dialogtitlebartext {
	top: -25px;
}


#dialogtopright{
	position: absolute;
	top: -31px;
	right: -19px;

	width: 19px;
	height: 31px;

	background-color: transparent;
}

#dialogleft {
	position: absolute;
	top: 0px;
	left: -19px;

	width: 19px;
	height: 100%;

	background-color: transparent;
}

#dialogright {
	position: absolute;
	top: 0px;
	right: -19px;
	
	width: 19px;
	height: 100%;

	background-color: transparent;
}

#dialogbottomleft{
	position: absolute;
	bottom: -19px;
	left: -19px;

	width: 19px;
	height: 19px;

	background-color: transparent;
}

#dialogbottom{
	position: absolute;
	bottom: -19px;
	left: 0px;

	width: 100%;
	height: 19px;

	background-color: transparent;
}

#dialogbottomright{
	position: absolute;
	bottom: -19px;
	right: -19px;

	width: 19px;
	height: 19px;

	background-color: transparent;
}

#dialogtoparrow{
	display: none;
	position: absolute;
	right: 50px;
	top: -52px;
	
	height: 26px;
	width: 39px;

	background-color: transparent;
}

#dialogbottomarrow{
	display: none;
	position: absolute;
	right: 50px;
	bottom: -36px;
	
	height: 26px;
	width: 39px;

	background-color: transparent;
}

#dialogrightarrow{
	display: none;
	position: absolute;
	top: 50px;
	right: -36px;
	
	height: 39px;
	width: 26px;

	background-color: transparent;
}

#dialogleftarrow{
	display: none;
	position: absolute;
	top: 50px;
	left: -35px;
	
	width: 26px;
	height: 39px;

	background-color: transparent;
}

#dialogclosebutton {
	width: 11px;
	height: 11px;
	background-image: url("images/dialog/close.gif");
	background-repeat: no-repeat;
	
	position: absolute;
	top: -19px;
	right: -4px;
	cursor: pointer;
	
	background-color: transparent;
	
	z-index: 999;
}


.closebutton {
	width: 11px;
	height: 11px;
	background-image: url("images/dialog/close.gif");
	background-repeat: no-repeat;
}

#dialogclosebutton:hover {
	background-image: url("images/dialog/close_h.gif");
}

.closebutton:hover,
.closebutton.hover {
	background-image: url("images/dialog/close_h.gif");
}

/* DATE PICKER */

.datePickerContainer {
	border:1px solid #C9C9C9;
}

.daysOfMonth td {
	width:27px;
	height:15px;
	text-align:center;
}

.adjacentMonthDay {
	background:#DCDCDC;
	color:#A0A0A0;
}

.monthDayName {
	background:white;
	font-weight:bold;

}

.monthDay {
	color:#379AD5;
	background:white;
	
}

.adjacentMonthDay a,
.monthDay a {
	display:block;
	width:100%;
	height:100%;
	line-height:14px;
}

.adjacentMonthDay a:hover,
.monthDay a:hover {
	background:#379AD5;
	color:#FFFFFF;
}

.selected {
	background:#379AD5;
	color:#FFFFFF;
}

.datePicker .inputTime {
	width:20px;
	font-size:12px;
	padding:3px 0 1px 0;
	margin:0;
	margin-right:4px;
}

.datePicker .inputTime {
	margin-top:-1px;
	margin-bottom:-1px;
	padding:2px 0 1px 0;
}

.timeSortIcons {
	float: left;
	width:11px;
	height:21px;
	position:relative;
}
.timeSortIcons a {
	display:block;
	width:11px;
}

.removeTag {
	background-image: url(images/removeTag.gif);
	background-repeat: no-repeat;
	float:left;
	cursor: pointer;
	margin: 8px 3px 0px 0px;
	height: 9px;
	width: 9px;
}

.removeTag:hover,
.removeTag.hover {
	background-image: url(images/removeTag_h.gif);
}

.zoomBox {
     position: absolute;
     display: none;
	 border: 1px double black;
	 
	 top:0px;
	 left: 0px;
	 width: 400px;
	 height: 300px;
	 z-index: 1;
	 
	 overflow: hidden;
	 
	 cursor: pointer;
}

.zoomBoxInner {
     position: absolute;
     background-color: white;
	 
	 top:0px;
	 left: 0px;
	 width: 100%;
	 height: 100%;
	 z-index: 1;
	 
	 opacity: 0.1;
}

.minimizeWrapper {
     position: absolute;
	 background-color: #444444;
	 width: 150px;
	 height: 150px;
	 z-index:123;
}

/* this is the message displayed for loading */

#hoverMessage{
    background-color: #FFFFFF;
    border: 1px solid #BBB;
    position: absolute;
    margin: auto;
    padding: 10px;
    top: 48%;
    left: 46%;
    z-index: 9998;
    text-align: center;
    
}

.deleteInline,
.delete {
	width: 12px;
	height: 12px;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;
	background-image: url(images/delete.gif);
}

.deleteInline{
	width: 12px;
	height: 12px;
	margin: 3px 0 0 4px;
	display: inline;
}

.deleteInline:hover,
.delete:hover,
.delete.hover {
	background-image: url(images/delete_h.gif);
}

.rowedList .delete {
	position: absolute;
	right: 20px;
	top: 7px;
}

.inset {
	position: absolute;
	top: 30px;
	left: 0px;
	background-color: #ffffff;
	padding: 5px 15px 5px 10px;
}

.inset h2 {
	margin-bottom: 0px;
}

.inset h3 {
	margin-bottom: 0px;
}

.inset p {
	font-size: 12px;
	margin-bottom: 0px;
}

.topicPic {
	width: 162px;
	height: 160px;
	overflow: hidden;

}

.storyPic {
	width: 354px;
	height: 160px;
	overflow: hidden;

}

.startNavLeft,
.startNavRight {
	position: absolute;
	bottom: 16px;
	width: 13px;
	height: 13px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.startNavLeft {
	left: 20px;
	background-image: url(images/startNavLeft.gif);
}

.startNavRight {
	right: 20px;
	background-image: url(images/startNavRight.gif);
}

.mapTeaser {
	position: absolute;
	z-index: 999999;
	top: 23px;
	xleft: 0px;
	width: 100%;
	height: 110px;
	text-align: center;
	color: #ffffff;
	margin: 0 auto 0 auto;
}

.mapTeaser h1 {
	margin-top: 50px;
	margin-bottom: 10px;
	font-size: 48px;
	color: inherit;
	line-height: 100%;
}

.mapTeaser .tag {
	font-size: 24px;
	color: inherit;
	margin: 0 5px 0 5px;
}

.mapTeaser .tag:hover {
	color: inherit;
	text-decoration: underline;
}

.loadedFlickrImage,
.loadedFlickrImageSelected{
	float: left;
	background-color: #379AD5;
	padding: 5px;
	margin: 3px;
	width: 75px;
	height: 75px;
	overflow: hidden;
}

.loadedFlickrImage{
	background-color: #EFEFEF;
}

.importServiceList{
	margin: 20px 25px;
}

.importServiceList li{
	list-style-type: disc; 
	font-size: 18px;
}



.importServiceList a{
	font-size: 18px;
}

.flickrStoreConfirmation {
	display: none;
	width: 200px; 
	height: 100px; 
	left: 256px; 
	top: 37%; 
	position: absolute; 
	margin: auto auto; 
	padding: 10px;
	background-color: #FFFFFF;
	border: 1px solid #A6AE00;
	z-index: 9999;
}

.buttonBar{
	margin-top: 30px;
	height: 20px;
}

.buttonBar .longButton,
.buttonBar .shortButton{
	float: right;
	margin-right: 5px;
}

#serverOfflineNotification,
#sessionExpirationNotification{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999999;
	display: none;
	top: 0px;
	left: 0px;
}


.sessionExpirationNotification,
.serverOfflineNotification{
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0.70;
	background-color: #000;
	z-index: 99999999;
	top: 0px;
	left: 0px;
	filter: Alpha(opacity=70);
}

.messageBox{
	position: relative;
	width: 400px;
	height: 200px;
	top: 30%;
	margin: auto auto;
	padding: 10px;
	background-color: #EFEFEF;
	z-index: 999999999;
}

.messageBox .message{
	background-color: #FFF;
	width: 100%;
	height: 100%;
	margin: 0px;
}

.paginationIndex,
.pagination{
	xposition: relative;
	width: 240px;
	margin: 0 auto;
	text-align: center;
}

.paginationIndex{
	width: 60px;
}

/* pagesLink */

.pagesLink {
	padding:0 2px 0 2px;
	color: #379AD5;
	text-decoration:underline;
}

.pagesLink:focus,
.pagesLink:hover {
	color:#FFFFFF;
	background-color: #379AD5;
	text-decoration:none;
}

.pages {
	clear:both;
	border-top:1px solid #DCDCDC;
	padding-top:5px;
	text-align: center;
}

.prevPageNav {
	background-repeat: no-repeat;
	background-position: center left;
	background-image: url(images/arrowPrev.gif);
	padding-left: 10px;
	margin-left: 5px;
	float: left;
	z-index: 1;
}

.nextPageNav {
	background-repeat: no-repeat;
	background-position: center right;
	background-image: url(images/arrowNext.gif);
	padding-right: 10px;
	margin-right: 5px;
	float: right;
	z-index: 1;
}

.pages span {
	margin:0 2px 0 2px;
}

.amount {
	padding: 0px;
	margin: 2px;
	line-height:16px;
}


.storyControlSlot{
	width: 212px;
	height: 70px;
	left: 0px;
	position: relative;
	overflow: hidden;
	padding: 14px 14px 11px 14px;
}

.storyControlSlot img.prev {
	margin: 0 0 0 0;
}
.storyControlSlot img.next {
	margin: 0 0 0 1px;
}

.storyControlSlot input {
	margin: 8px 0 0 0;
}

.path .item, .path .inner {
	display: block;
	float: left;
}
.path .item .icon {
	vertical-align: top;
}

.path .item {
	vertical-align: middle;
}

.path .inner {
	height: 21px;
	margin: 1px 0 0 6px;
	background-color: #eaeaea;
}
.path .inner a, .path .inner span {
	display: block;
	float: left;
}

.arrowLink,
.path .inner a, .path .inner span,
.menuBox span,
.menuBox a {
	line-height: 15px;
	font-weight: normal;
	height: 15px;
	margin: 3px 2px 0 2px;
	padding: 0 2px 0 15px;
	background-position: 4px 3px;
	background-repeat: no-repeat;
}
.arrow {
	padding: 0 2px 0 12px;
	background-position: 2px 1px;
	background-repeat: no-repeat;
}
.path .inner a, .menuBox a, .menuBox span, .arrow {
	background-image: url(images/arrow_crop.gif);
}

.arrowLink {
	font-weight: bold;
	background-image: url(images/arrow_crop.gif);
	cursor: pointer;
}

.menuBox span,
.menuBox a {
	background-position: 4px 2px;
}
.path .inner a:hover, .arrowLink:hover, .menuBox span:hover, .menuBox a:hover, .arrow:hover {
	background-image: url(images/arrow_crop_h.gif);
}
.path .inner span {
	background-image: url(images/arrow_selected_crop.gif);
	background-position: 4px 4px;
}

.path .bracket {
	vertical-align: middle;
	margin: 0 6px 0 6px;
}
.path .mainMenuLink {
	vertical-align: middle;
}

.path .inner .bracket, .path .inner .bracketClose {
	display: block;
	float: left;
	margin: 0;
}
.path .inner .bracketClose {
	margin: 0 0 0 2px;
}

.menuBox {
	position: absolute;
	margin: 5px 0 6px 11px;
	background-color: transparent;
	overflow: visible;  /* this is needed for corners ! */
	padding: 0;
	min-width: 136px;
	top: 24px;
}
.menuBox ul {
	margin: 0; 
	padding: 1px 0 1px 0;
	background-color: #eeeeee;
}

.menuBox li {
	line-height: 15px;
	margin-bottom: 3px;
}
.menuTopLeft, .menuTopRight,
.menuBottomRight, .menuBottomLeft,
.menuTop, .menuBottom, .menuRight, .menuLeft {
	position: absolute;
	background-color: transparent;
}
.menuTopLeft {
	top: -6px;
	left: -5px;
}
.menuTopRight {
	top: -6px;
	right: -7px;
}
.menuBottomLeft {
	bottom: -6px;
	left: -5px;
}
.menuBottomRight {
	bottom: -6px;
	right: -7px;
}
.menuTop {
	top: -6px;
	left: 0;
	width: 100%;
	height: 6px;
}
.menuBottom {
	bottom: -6px;
	left: 0;
	width: 100%;
	height: 6px;
}
.menuRight {
	top: 0;
	right: -7px;
	width: 7px;
	height: 100%;
}
.menuLeft {
	top: 0;
	left: -5px;
	width: 5px;
	height: 100%;
}

.largeButton {
	width: 160px;
	height: 46px;
	line-height: 46px;
	background-image: url(images/button_large.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-align: center;
	color: #379AD5;
	font-size: 20px;
	cursor: pointer;
}
.largeButton:hover {
	background-image: url(images/button_large_h.gif);
}

.mapAdditionDialog{
	width: 300px;  
	height: 240px;
}

.dialogList{
	width: 300px;
	height: 180px;
	border: 1px solid #D2D2D2;
	border-left: 1px solid #DCDCDC;
	border-right: 1px solid #DCDCDC;
	border-bottom: 1px solid #FFF;
	background-color: #E5E5E5;
	overflow: auto;
	x-overflow: hidden;
}

.addToDialogListItem{
	margin: 2px 5px;
	padding: 2px;
	color: #379AD5;
	font-size: 14px;
	cursor: pointer;
}

.addToDialogListItem:hover span,
.addToDialogListItem:hover{
	background-color: #379AD5;
	color: #FFF;
}

.addToDialogListItem span{
	vertical-align: middle;
}
.addToDialogListItem img{
	vertical-align: middle;
}

.loadingBarMap,
.loadingBarPage{
	font-size: 12px; 
	top: -2px; 
	position: absolute; 
	right: 0px; 
	width: 90px; 
	height: 18px; 
}

.loadingBarPage{
	border: 1px solid #DCDCDC; 
	background-color: #F7F7F7;
	padding: 4px;
}

.loadingBarMap{
	position: absolute;
	right: 0px;
	top: 2px;
	border: 0px solid #FFF;
	z-index: 2;
	height: 26px;
}

.loadingBarMapBg{
	background-color: #FFF;
	opacity:0.95;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

.loadingBarMap span,
.loadingBarMap img,
.loadingBarPage span,
.loadingBarPage img{
	vertical-align: middle;
	margin: 0 5px;
	line-height: 14px;
}

.verticalSep{
	padding: 0 2px;
	margin: 0 2px;
}

.editAndPlace{
	overflow: auto;
	width: 100%;
	height: 375px;
	background-color: #EFEFEF;
	padding: 15px;
}

.editPlaceListItem{
	float: left;
	margin-right: 15px;
	height: 178px;
	width: 500px;
}

.editPlaceListItem .textInputNormal{
	height: 170px;
}

.goBackNote{
	height: 30px; 
	font-size: 14px;
}

.featureItemRight{
	position: absolute; 
	right: 24px; 
	bottom: 20px;
	background-image: url(images/startNavRight.gif);
	width: 13px;
	height: 13px;
}

.featureItemRight:hover{
	background-image: url(images/startNavRight_h.gif);
}

.featureItemLeft{
	position: absolute; 
	left: 24px; 
	bottom: 20px;
	background-image: url(images/startNavLeft.gif);
	width: 13px;
	height: 13px;
}
.featureItemLeft:hover{
	background-image: url(images/startNavLeft_h.gif);
}

.prevBig,
.nextBig{
	height: 46px;
	width: 104px;
	cursor: pointer;
	margin: auto;
	position: relative;
}

.nextBig{
	background-image: url(images/button_next_big.gif);
}

.nextBig:hover{
	background-image: url(images/button_next_big_h.gif);
}

.prevBig{
	background-image: url(images/button_prev_big.gif);
}

.prevBig:hover{
	background-image: url(images/button_prev_big_h.gif);
}

.mapContext{
	padding: 10px 5px 3px 5px;
	vertical-align: middle;
}

.mapContext span,
.mapContext a,
.mapContext p,
.mapContext img{
	vertical-align: middle;
}

.postHeader{
	color: #777; 
	font-weight: bold;
	font-size: 12px;
}

.postHeader td{
	border-bottom: 1px solid #BBB;
}

.groupPostRowOdd td,
.groupPostRowEven td{
	height:26px;
	vertical-align: middle;
	border-bottom: 1px solid #DDD; 
	padding: 3px;
	cursor: pointer;
}

.groupPostRowOdd td{
	background-color: #F3F3F3;
}

.groupPostRowEven:hover td,
.groupPostRowOdd:hover td{
	background-color: #EFEFEF;
}



.groupPostRowOdd span,
.groupPostRowOdd img,
.groupPostRowEven span,
.groupPostRowEven img{
	vertical-align: middle;
}

.bigToSmallIcon{
	width: 48px; 
	height: 48px; 
	overflow: hidden;
}

.bigToSmallIcon img{
	position: relative;
	top: -13px;
	left: -13px;
}

.Map48{
	background-image: url(images/map-48.gif);
}

.Group48{
	background-image: url(images/group-48.gif);
}

.new{
	vertical-align: top;
	position: relative;
	top: -2px;
	left: -3px;
}

.mediumBox{
	width: 300px; 
}


.changeOrder{
	position: relative;
}

.changeOrder li{
	padding: 0pt; 
	overflow: hidden; 
	cursor: move; 
	position: relative; 
	float: left; 
	width: 150px; 
	height: 150px; 
	text-align: center; 
	opacity: 1; 
	z-index: auto; 
	top: 0px; 
	left: 0px;
}