/*
 index.css
 demos

 Created by SHarper on 2011-12-21.
 Copyright 2011 SHarper. All rights reserved.
 */

 /***** HEADER CSS NOT REQUIRED FOR DEMO *****/

#safe-ribbon a{
  z-index: 2000;
  background:#E98300;
  color:#fff;
  text-decoration:none;
  font-family:arial, sans-serif;
  text-align:center;
  font-weight:bold;
  padding:5px 40px;
  font-size:1rem;
  line-height:2rem;
  position:relative;
  transition:0.5s;
}

#safe-ribbon a:hover{
  background:#DA7B00;
  color:#fff;
}


#safe-ribbon a::before,#safe-ribbon a::after{
  content:"";
  width:100%;
  display:block;
  position:absolute;
  top:1px;
  left:0;
  height:1px;
  background:#ffffff;
}

#safe-ribbon a::after{
  bottom:1px;
  top:auto;
}

@media screen and (min-width:767px){
  #safe-ribbon{
    position:absolute;
    display:block;
    top:0;
    right:0;
    width:200px;
    overflow:hidden;
    height:200px;
  }
  #safe-ribbon a{
    width:200px;
    position:absolute;
    top:60px;
    right:-60px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    box-shadow:0px 1px 4px rgba(0,0,0,0.8);
  }
}


body {
  padding-top: 60px;
  font-family: verdana;
}

@media (max-width: 980px) {
  body{
    padding-top: 0;
  }
}

.brand{
  color: #ffffff !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}


.navbar-inner {
  background-color: #7AB800;
  background-image: none;
}

/**** End of Header CSS ****/

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	color: black;
}

b {
	font-size: 110%;
}

em {
	color: red;
}

h1 {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	color: white;
	background-color: #E98300;
	font-weight: bold;
	padding: 1px 5px 1px 5px;
}

/*
 The mapwrapper contains the map and the floating request panel
*/

#mapwrapper {
	width: 100%;
	height: 70%;
	z-index: 1;
}

#map_canvas {
	height: 70%;
	bottom: 1px;
	left: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 1px;
	top: 40px;
}

#mapBingMaps, #mapArcGISServer, #mapOpenLayers{
	width: 99.9%;
	height: 70%;
	bottom: 1px;
	left: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 1px;
	top: 1px;
}

/*
 The request panel where you set 
 the parameters for the translation
*/
#request_form {
	top: 45px;
	margin: 5px;
	text-align: left;
	position: absolute;
	width: 350px; /*Width of left column*/
	z-index: 100;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: white;
	min-height: 402px;
	box-shadow: 10px 10px 5px #888;
}

#request_form h1:first-child{
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
}

#draw-tools {
	padding-bottom: 20px;
}

#draw-tools button {
	margin: 15px 10px 0px 23px;
	width: 130px;
}

#fmeForm {
	padding-left: 10px;
	padding-top: 10px;
	font-weight: bold;
}
#fmeForm element {
	color: #202020;
	font-weight: normal;
}
#fmeForm input {
	padding-left: 8px;
}

#fmeForm input:last-child {
	margin: 4px 0px 9px 70px;
	width: 200px;
}

#fmeForm input[type="checkbox"] {
	margin:0px 10px;
	vertical-align: middle;
	display: inline;
	clear:left;
}

#parameters br{
	clear:both;
}

#parameters div label {
	display:inline-block;
	vertical-align:middle;
	margin: 5px 30px 5px 0px;
	font-weight: normal;
	font-size: 16px;
	line-height: 16px;
	position: inherit;
	clear:left;
	width:80%;
}

.input-customSize {
	width: 95%;
}

.fmes-form-component{
	display: block;
	margin: 0px 0px 10px 0px;
}

.fmes-form-component select{
	width: 95%;
}

/*
 * The bottom footer containing the translation results and
 * query.
 */
#footer {
	min-height: 28%;
	clear: left;
	width: 100%;
	text-align: left;
	margin-top:50px;
}

#footer a {
	color: blue;
}


#results-panel{
	margin: 0px 10px 5px 5px;	
	-moz-border-radius: 8px;
	border-radius: 8px;
	float: right;
	box-shadow: 5px 5px 5px #888;
	min-height: 200px;
	height: 30%;
	width: 400px;
	border-bottom-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
    border-left:1px solid #E0E0E0 ;
}

#results-panel h1 {
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
}

#results-panel #results{
	overflow: auto;
    height: 170px;
    padding: 3px;

}

#results-panel #results p {
	text-align: left;
	color: 	#404040;
}


#query-panel {
	height: 30%;	
	min-height: 200px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	text-align: left;
	word-wrap: break-word;
	margin-right: 420px;
	margin-left: 5px;	
	color: #404040;
	box-shadow: 5px 5px 5px #888;
    border-left:1px solid #E0E0E0;
}
#query-panel h1 {
	border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
}
#query-panel-results {
	overflow: auto;
    height: 170px;
    padding-left: 5px;
}

.error h2{
	color: red;
	font-weight: bold;
}

.success h2{
	color: #339900;
	font-weight: bold;
}