/************************/
/*  css nachtstadtplan  */
/*                      */
/* written and composed */
/*  by markus erdmann   */
/*   2008 esense gmbh   */
/*                      */
/************************/

/********* main wrapper *********/

body {
font-family:Verdana, Arial, Sun-Regular, 'sans-serif';
font-size:small;
line-height:100%;
overflow-y:auto;
font-weight:normal;
background:#bdbfce url(../pics/bg-body.jpg) 0 0 repeat-x;
cursor:default;
}

#pageContainer {
width:100%;
height:700px;
float:left;
background-color:transparent;
clear:both;
}

#pageWrapper {
position:relative;
width:90%;
min-width:900px;
max-width:1400px;
margin:0px 5% 0px 5%;
float:left;
display:block;
}

a {
outline:none;
outline-width:0;
outline-style:none;
color:#bababa;
}

a:hover {
color:yellow;
}

/********* containers and content *********/

/********* header *********/

#header {
position:relative;
top:0px;
left:0px;
width:100%;
height:100px;
float:left;
display:block;
background-color:transparent;
margin:0px;
z-index:20000; /* important for nav */
}

.logoBasel {
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
z-index:30000;
margin:0px 0px -100px 0px;
}

.logoBasel a {
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
background:transparent url(../pics/basel.gif) 0 0 no-repeat;
}

.logoNsp {
position:absolute;
top:0px;
right:0px;
width:364px;
height:78px;
float:right;
z-index:30000;
margin:0px 0px -100px 0px;
}

.logoNsp a {
position:absolute;
top:0px;
left:0px;
width:214px;
height:18px;
background:transparent url(../pics/nsp-logo.gif) 0 0 no-repeat;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
color:#222;
padding:40px 0px 0px 150px;
}

.logoNsp a:hover {
color:yellow;
}

/********* main-navigation button *********/

#topNavWrapper {
position:relative;
top:76px;
left:20px;
z-index:40000;
}

.topNavButton,
.topNavButton:hover {
position:relative;
width:124px;
height:24px;
background:transparent url(../pics/button-off.gif) 0 0 no-repeat;
color:yellow;
text-align:center;
text-transform:uppercase;
font-size:10px;
padding:3px 0px 1px 0px;
}

/********* main-navigation dropdown *********/

.scrollNav {
position:relative;
top:-28px;
left:0px;
float:left;
width:248px;
height:auto;
background:transparent url(../pics/drop-frame-top.gif) 0 0 no-repeat;
padding:0px;
margin:0px;
cursor:pointer;
}

.scrollNavContainer {
position:relative;
top:33px;
left:0px;
float:left;
width:248px;
background-color:transparent;
height:auto;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
cursor:default;
}

.scrollNavContent {
position:relative;
top:0px;
left:0px;
float:left;
width:248px;
height:auto;
background:transparent url(../pics/drop-frame-bottom.gif) bottom left no-repeat;
padding:0px 0px 20px 0px;
margin:5px 0px 0px 0px;
}

.scrollNav .anchorLink {
font-size:9px;
text-transform:uppercase;
line-height:9px;
padding:1px 10px 2px 10px;
margin:0px 12px -1px 13px;
color:#dedede;
border-bottom:1px solid #344b57;
border-top:1px solid #344b57;
}

.scrollNav .anchorLink:hover {
color:white;
background-color:#444447;
}

.scrollNav .anchorLink span {
color:#455c68;
}

.scrollNav .anchorLink:hover span {
color:#bcbcbc;
}

/********* main-navigation content *********/

.scrollNavMap {
position:relative;
top:-28px;
left:0px;
float:left;
width:375px;
height:auto;
background:transparent url(../pics/drop-frame-map-top.gif) 0 0 no-repeat;
padding:0px;
margin:0px;
cursor:pointer;
}

.scrollNavContainerMap {
position:relative;
top:33px;
left:0px;
float:left;
width:375px;
background-color:transparent;
height:auto;
padding:0px 0px 0px 0px;
margin:5px 0px 0px 0px;
}

.scrollNavContentMap {
position:relative;
top:0px;
left:0px;
float:left;
width:333px;
height:auto;
min-height:150px;
background:transparent url(../pics/drop-frame-map-bottom.gif) bottom left no-repeat;
padding:0px 20px 20px 20px;
margin:0px 0px 0px 0px;
}

.miniMap {
width:333px;
height:333px;
background:transparent url(../pics/map-preview.gif) 0 0 no-repeat;
cursor:default;
}

/********* admin adress edit *********/

.adminNav {
position:relative;
top:0px;
left:0px;
width:100%;
display:block;
}

.adminNav .locationNav {
float:left;
width:80%;
z-index:10000;
padding:10px 0px 10px 60px;
background-color:transparent;
}

.adminNav .locationNav p {
color:yellow;
text-transform:uppercase;
font-size:10px;
}

#topNavLevel1 ul {
width:100%;
display:block;
clear:both;
margin:0px 0px 5px 0px;
}

#topNavLevel1 ul li {
float:left;
margin:0px 0px 5px 0px;
width:auto;
}

#topNavLevel1 ul li a {
font-size:10px;
line-height:9px;
text-transform:uppercase;
text-decoration:none;
color:#dedede;
width:auto;
padding:0px  20px 2px 0px;
}

#topNavLevel1  a:hover {
color:yellow;
}

#topNavLevel1 li.closed.trail a,
#topNavLevel1 li.active.closed a,
#topNavLevel1 li.active.leaf a,
#topNavLevel1 li.active.leaf strong a {
color:yellow;
}

#topNavLevel2 {
width:100%;
display:block;
}

#topNavLevel2 ul li {
width:auto;
float:left;
padding:0px 20px 3px 0px;
}

#topNavLevel2 a {
font-size:10px;
line-height:9px;
text-transform:uppercase;
text-decoration:none;
color:#dedede;
}

#topNavLevel2  a:hover {
color:yellow;
}

#topNavLevel2 li.active.leaf a,
#topNavLevel2 li.active.leaf strong a {
color:yellow;
}


/********* map container *********/

#mapContainer {
position:relative;
width:100%;
height:100%;
float:left;
margin:0px;
z-index:10000;
}

.mapContent {
position:relative;
width:100%;
height:600px;
float:left;
display:block;
background-color:#5f7c8a;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

.mapContainerTop {
position:relative;
margin:0px 0px -10px 0px;
width:100%;
height:10px;
background:transparent url(../pics/top-left.gif) top left no-repeat;
float:left;
z-index:100;
}

.mapContainerTopRight {
position:relative;
width:10px;
height:10px;
background:transparent url(../pics/top-right.gif) top left no-repeat;
float:right;
margin:0px 0px 0px 0px;
left:2px;
}

.mapContainerBottom {
position:relative;
top:0px;
left:0px;
width:100%;
height:10px;
background:transparent url(../pics/bottom-left.gif) bottom left no-repeat;
float:left;
margin:-10px 0px 0px 0px;
}

.mapContainerBottomRight {
position:relative;
width:10px;
height:10px;
background:transparent url(../pics/bottom-right.gif) bottom left no-repeat;
float:right;
left:2px;
}

/********* map content *********/

#fxScrollContentInner {
background:transparent url(../pics/map/1map-mali-4-3.gif) 0 0 no-repeat;
}

.mapImageGrid {
position:absolute;
margin:0px;
padding:0px;
width:500px;
height:400px;
background-color:transparent;
}

.mapImageMover {
position:absolute;
margin:0px;
padding:0px;
width:3000px;
height:3000px;
background:transparent url(../pics/map/big-trans.gif) 0 0 no-repeat;
}

.image1 {
background:transparent url(../pics/map/nsp-01.gif) 0 0 no-repeat;
}

.image2 {
background:transparent url(../pics/map/nsp-02.gif) 0 0 no-repeat;
}

.image3 {
background:transparent url(../pics/map/nsp-03.gif) 0 0 no-repeat;
}

.image4 {
background:transparent url(../pics/map/nsp-04.gif) 0 0 no-repeat;
}

.image5 {
background:transparent url(../pics/map/nsp-05.gif) 0 0 no-repeat;
}

.image6 {
background:transparent url(../pics/map/nsp-06.gif) 0 0 no-repeat;
}

.image7 {
background:transparent url(../pics/map/nsp-07.gif) 0 0 no-repeat;
}

.image8 {
background:transparent url(../pics/map/nsp-08.gif) 0 0 no-repeat;
}

.image9 {
background:transparent url(../pics/map/nsp-09.gif) 0 0 no-repeat;
}

.image10 {
background:transparent url(../pics/map/nsp-10.gif) 0 0 no-repeat;
}

.image11 {
background:transparent url(../pics/map/nsp-11.gif) 0 0 no-repeat;
}

.image12 {
background:transparent url(../pics/map/nsp-12.gif) 0 0 no-repeat;
}

.image13 {
background:transparent url(../pics/map/nsp-13.gif) 0 0 no-repeat;
}

.image14 {
background:transparent url(../pics/map/nsp-14.gif) 0 0 no-repeat;
}

.image15 {
background:transparent url(../pics/map/nsp-15.gif) 0 0 no-repeat;
}

.image16 {
background:transparent url(../pics/map/nsp-16.gif) 0 0 no-repeat;
}

.image17 {
background:transparent url(../pics/map/nsp-17.gif) 0 0 no-repeat;
}

.image18 {
background:transparent url(../pics/map/nsp-18.gif) 0 0 no-repeat;
}

.image19 {
background:transparent url(../pics/map/nsp-19.gif) 0 0 no-repeat;
}

.image20 {
background:transparent url(../pics/map/nsp-20.gif) 0 0 no-repeat;
}

.image21 {
background:transparent url(../pics/map/nsp-21.gif) 0 0 no-repeat;
}

.image22 {
background:transparent url(../pics/map/nsp-22.gif) 0 0 no-repeat;
}

.image23 {
background:transparent url(../pics/map/nsp-23.gif) 0 0 no-repeat;
}

.image24 {
background:transparent url(../pics/map/nsp-24.gif) 0 0 no-repeat;
}

#fxScrollContentInner a,
#fxScrollContentInner a:visited,
#fxScrollContentInner a:active,
#fxScrollContentInner a:hover {
display:block;
text-decoration:none;
outline:none;
outline-style:none;
outline-width:0;
}

.scrolling-content {
margin:0px 0px 0px 0px;
}

.scrolling-content p {
padding:0px 2px 0px 2px;
margin:0px 0px 0px 18px;
font-size:10px;
line-height:12px;
text-transform:uppercase;
}

.anchorLink {
cursor:pointer;
}

div.hidden {
visibility:hidden;
display:none;
}

div.visible {
visibility:visible;
display:block;
}

.descr {
margin:0px 0px 0px 18px;
cursor:default;
width:250px;
height:auto;
padding:5px 5px 5px 5px;
}

.descr div h2 {
background:none;
border:none;
font-weight:bold;
font-size:14px;
line-height:18px;
border-bottom:1px dotted #5f7c8a;
text-transform:uppercase;
text-align:center;
color:black;
float:left;
font-weight:bold;
padding:0px 0px 3px 0px;
margin:0px 0px 3px 0px;
display:block;
width:250px;
}

.descr div p a {
background:none;
border:none;
padding:0px;
margin:0px;
font-weight:bold;
font-size:10px;
text-transform:uppercase;
color:darkred;
float:left;
line-height:18px;
}

.descr div p a:hover {
color:black;
}

.descr div p{
background:none;
border:none;
padding:0px 0px 12px 0px;
margin:0px;
font-weight:normal;
font-size:10px;
line-height:12px;
color:black;
display:block;
width:100%;
clear:both;
}

/********* categories colors and arrows *********/

/**** yellow ****/

.gelbobenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-11px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gelb-l-up.png) 0 0 no-repeat;
}

.gelbuntenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:2px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gelb-l-down.png) 0 0 no-repeat;
}

.gelbzentriertlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-3px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gelb-c-l.png) 0 0 no-repeat;
}

.gelbobenzentriert {
float:left;
padding:0px 0px 0px 0px;
margin:-18px -30px 0px 30px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gelb-c-up.png) 0 0 no-repeat;
}

.gelb {
background-color:#e7e70f;
}

.gelbFont {
color:#e7e70f;
}

/**** green ****/

.gruenobenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-11px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gruen-l-up.png) 0 0 no-repeat;
}

.gruenuntenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:2px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gruen-l-down.png) 0 0 no-repeat;
}

.gruenzentriertlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-3px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gruen-c-l.png) 0 0 no-repeat;
}

.gruenobenzentriert {
float:left;
padding:0px 0px 0px 0px;
margin:-18px -30px 0px 30px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/gruen-c-up.png) 0 0 no-repeat;
}

.gruen {
background-color:#3bd66e;
}

.gruenFont {
color:#3bd66e;
}

/**** orange ****/

.orangeobenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-11px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/orange-l-up.png) 0 0 no-repeat;
}

.orangeuntenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:2px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/orange-l-down.png) 0 0 no-repeat;
}

.orangezentriertlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-3px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/orange-c-l.png) 0 0 no-repeat;
}

.orangeobenzentriert {
float:left;
padding:0px 0px 0px 0px;
margin:-18px -30px 0px 30px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/orange-c-up.png) 0 0 no-repeat;
}

.orange {
background-color:#ffa13d;
}

.orangeFont {
color:#ffa13d;
}

/**** rot ****/

.rotobenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-11px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/rot-l-up.png) 0 0 no-repeat;
}

.rotuntenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:2px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/rot-l-down.png) 0 0 no-repeat;
}

.rotzentriertlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-3px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/rot-c-l.png) 0 0 no-repeat;
}

.rotobenzentriert {
float:left;
padding:0px 0px 0px 0px;
margin:-18px -30px 0px 30px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/rot-c-up.png) 0 0 no-repeat;
}

.rot {
background-color:#df7c2c;
}

.rotFont {
color:#df7c2c;
}

/**** blau ****/

.blauobenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-11px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/blau-l-up.png) 0 0 no-repeat;
}

.blauuntenlinks {
float:left;
padding:0px 0px 0px 0px;
margin:2px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/blau-l-down.png) 0 0 no-repeat;
}

.blauzentriertlinks {
float:left;
padding:0px 0px 0px 0px;
margin:-3px 0px 0px 0px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/blau-c-l.png) 0 0 no-repeat;
}

.blauobenzentriert {
float:left;
padding:0px 0px 0px 0px;
margin:-18px -30px 0px 30px;
width:18px;
height:20px;
background:transparent url(../pics/arrows/blau-c-up.png) 0 0 no-repeat;
}

.blau {
background-color:#92beea;
}

.blauFont {
color:#92beea;
}

/********* footer *********/

#footer {
position:relative;
top:0px;
left:0px;
width:900px;
height:100px;
display:block;
background-color:transparent;
margin:0px auto 0px auto;
}

#footerContent {
position:relative;
top:10px;
width:90%;
height:auto;
width:900px;
margin:0px 5% 0px 5%;
float:left;
display:block;
}

.sponsor,
.sponsor a {
position:relative;
width:auto;
height:50px;
float:left;
margin:0px;
padding:0px 10px 0px 0px;
}

/********* city poins *********/

.pointInMap {
position:relative;
font-size:8px;
text-transform:uppercase;
line-height:8px;
padding:0px;
color:#dedede;
letter-spacing:1px;
cursor:pointer;
width:70px;
}

.pointInMap:hover {
color:yellow;
}

#grossbasel {
position:relative;
top:200px;
left:60px;
}

#kleinbasel {
position:relative;
top:140px;
left:170px;
}

#stjohann {
position:relative;
top:100px;
left:30px;
}

#wettstein {
position:relative;
top:150px;
left:170px;
}

#stalban {
position:relative;
top:190px;
left:160px;
}

#gellert {
position:relative;
top:200px;
left:210px;
}

#kleinhueningen {
position:relative;
top:30px;
left:120px;
}

#breite {
position:relative;
top:155px;
left:210px;
}

#steine {
position:relative;
top:150px;
left:100px;
}

#sbb {
position:relative;
top:200px;
left:100px;
}

#gundeli {
position:relative;
top:220px;
left:120px;
}

/********* block and clear *********/

.blockAdmin {
position:relative;
top:0px;
left:0px;
width:100%;
height:24px;
float:left;
clear:both;
z-index:40000;
}

.clear {
width:100%;
height:0;
visibility:hidden;
z-index:1;
line-height:0;
display:block;
clear:both;
}

/********* grid *********/
.gridEntry {
width:200px;
height:200px;
position:absolute;
}

/********* end of css *********/