/*
 * General style
 */

h1  { font-size: x-large; }

h2  { font-size: large; }

h3  { font-size: medium; }

strong  { color: #990000; }


/*
 * Page body
 */

#body
{
	position: absolute;

	left: 0px;
	top: 89px;
	right: 0px;
	bottom: 17px;

	margin: 10px;
}


/*
 * Sidebar
 */

#sidebar
{
	position: absolute;

	left: 0px;
	top: 0px;
	bottom: 0px;

	padding-top: 20px;
	padding-bottom: 20px;
	
	background-image: url(sidebar_background.png);
	background-repeat: repeat-y;
}

.SidebarHidden
{
	width: 0px;

	padding-left: 20px;
	padding-right: 0px;

	overflow: hidden;

	background-position: 10px 0px;
}

.SidebarVisible
{
	width: 210px;

	padding-left: 25px;
	padding-right: 25px;

	overflow: auto;

	background-position: 250px 0px;
}

#sidebar_toggle
{
	position: absolute;
	
	top: 3px;
	right: 5px;

	font-size: large;
	font-weight: bold;

	cursor: pointer;
}

#sidebar_toggle:hover
{
	color: red;
	cursor: pointer;
}


/*
 * Page header
 */

#header
{ 
	position: absolute;
	
	left: 0px;
	top: 0px;
	right: 0px;
}


/*
 * Main menu
 */

ul#main_menu
{
	position: absolute;

	left: 0px;
	top: 60px;
	right: 0px;
}


/*
 * Footer
 */

#footer
{
	position: absolute;

	left: 0px;
	right: 0px;
	bottom: 0px;
}


/*
 * Map style
 */

#map
{
	position: absolute;

	left: 250px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	
	background-color: #cbced5;
}

/* For some bizairre reason the image is having an top offset of 6px which results
 * in a displacement of the slider on the zoombar. Setting top to -6px solves this
 * issue. However it should not be neccessary in the first place!
 */
img[src="http://openlayers.org/api/img/slider.png"],
img[src="/scripts/img/slider.png"]
	{ top: -6px; }


/*
 * Public Transport map legend
 */

dl.MapKey > dt
{
	display: block;

	float: left;
	clear: left;

	width: 30px;

	overflow: hidden;

	border: 1px solid black;

	margin-left: 0px;
	margin-right: 15px;
	margin-top: 0px;
	margin-bottom: 5px;

	padding: 0px;
}

dl.MapKey > dd
{
	display: block;

	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 5px;

	padding-left: 0px;
	padding-right: 0px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.Train
{
	color: #ffcf00;
	background-color: #ffcf00;
}

.SuburbanTrain
{
	color: #00ff00;
	background-color: #00ff00;
}

.Tram
{
	color: #0000ff;
	background-color: #0000ff;
}

.Underground
{
	color: #000088;
	background-color: #000088;
}

.Bus
{
	color: #ff0000;
	background-color: #ff0000;
}

.Ferry
{
	color: #880088;
	background-color: #880088;
}

.RailTrack
{
	color: #606000;
	background-color: #606000;
}

.NationalCycleRoute
{
	color: #ff0000;
	background-color: #ff0000;
}

.RegionalCycleRoute
{
	color: #28c9ff;
	background-color: #28c9ff;
}

.LocalCycleRoute
{
	color: #0000ff;
	background-color: #0000ff;
}

.GrittingHighPriority
{
	color: #ff0000;
	background-color: #ff0000;
}

.GrittingMediumPriority
{
	color: #0000ff;
	background-color: #0000ff;
}

.GrittingLowPriority
{
	color: #9999ff;
	background-color: #9999ff;
}

.GritBin
{
	vertical-align: middle;
	text-align: center;
	border-color: transparent !important;
}

/*
 * OpenStreetbugs popup style
 */

.olFramedCloudPopupContent
{
	max-width: 380px;

	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 5px;

	overflow: auto;

	font-size: small;
}


.olFramedCloudPopupContent h1
{
	margin-top: 0px;
	margin-bottom: 7px;

	font-size: medium;
}

.olFramedCloudPopupContent p
{
	margin-top: 5px;
	margin-bottom: 0px;
}

.olFramedCloudPopupContent p.Comment
{
	margin-top: 5px;
	margin-left: 15px;
}

.olFramedCloudPopupContent p.Note
{
	margin-top: 7px;
	padding-top: 3px;

	border-top: solid 1px gray;

	font-size: x-small;
}

.olFramedCloudPopupContent form+p
{
	margin-top: 15px;
	padding-top: 10px;

	border-top: solid 1px gray;
}


.olFramedCloudPopupContent ul
{
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 0px;

	border-top: solid 1px gray;

	text-align: center;
}

.olFramedCloudPopupContent ul li
{
	display: inline;

	margin-left: 8px;
	margin-right: 8px;

	padding: 0px;
}

.olFramedCloudPopupContent form
{
	margin-top: 10px;
	margin-bottom: 0px;
}

.olFramedCloudPopupContent form.NewComment
{
	padding-top: 5px;

	border-top: solid 1px gray;
}

.olFramedCloudPopupContent form div
{
	margin-top: 5px;
	margin-left: 15px;
	margin-right: 15px;
}

.olFramedCloudPopupContent form div.FormFooter
{
	margin-top: 15px;
	margin-bottom: 0px;
	text-align: center;
}

.olFramedCloudPopupContent span.InputLabel
{
	display: inline-block;

	min-width: 110px;
	margin-right: 10px;
}

.olFramedCloudPopupContent input[type=text]
	{ min-width: 190px; }

.olFramedCloudPopupContent input[type=button]
{
	min-width: 75px;

	margin-left: 3px;
	margin-right: 3px;
}