body {margin: 0px; padding: 0px; color: #333; font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 10px; line-height: 1.7em;	background-image: url(../images/wrapper.jpg);	background-color: #36aae9; background-position: top; background-repeat: repeat-x;}

a, a:link, a:visited {color: #1683a3; text-decoration: none;}
a:hover {text-decoration: underline;}

p {margin: 0 0 10px 0; padding: 0;}
img {border: none;}

h1, h2, h3, h4, h5, h6 {color: #333; font-weight: normal}
h1 {font-size: 34px; margin: 0 0 30px 0; padding: 5px 0;}
h2 {font-size: 26px; margin: 0 0 30px 0; padding: 0;}
h3 {font-size: 21px; margin: 0 0 25px; padding: 0;}
h4 {font-size: 18px; margin: 0 0 15px; padding: 0;}
h5 {font-size: 16px; margin: 0 0 10px; padding: 0;}
h6 {font-size: 14px; margin: 0 0 5px; padding: 0;}

.cleaner {clear: both}

a.more {padding: 0 14px 0 0; color: #1683a3; font-weight: bold; background: url(../images/more.png) no-repeat right;}
a.more:hover {text-decoration: none;}

.float_l {float: left}
.float_r {float: right}

.image_wrapper {display: inline-block; border: 1px solid #999; padding: 4px; background: none; margin-bottom: 5px}
.image_fl {float: left; margin: 3px 15px 0 0}
.image_fr {float: right; margin: 3px 0 0 15px}

#body_wrapper {width: 100%; background: url(../images/body.jpg) top center no-repeat}

#wrapper {width: 960px;	padding: 0 30px; margin: 0 auto}

#header {position: relative; width: 900px; height: 70px; padding: 0 30px; background: url(../images/header.jpg) no-repeat top center}

#site_title a {display: block; position: relative; padding: 20px 0 0 0;	font-size: 24px; color: #fff;	font-weight: normal; text-decoration: none}
#site_title a span {position: absolute; display: block;	left: 200px; top: 30px;	font-size: 12px; color: #000;}

#menu {position: relative; width: 900px; height: 61px; padding: 0 30px; background: url(../images/menu.jpg) no-repeat top center}
#menu ul {margin: 0; padding: 3px 0 0 0; list-style: none}
#menu ul li {padding: 0; margin: 0; display: inline}
#menu ul li a {float: left; display: block; width: 120px; height: 30px; padding: 6px 0 0 0; margin-right: 1px; font-size: 14px; color: #333; text-decoration: none; font-weight: bold; text-align: center; outline: none;}
#menu ul li a:hover, #menu ul .current {color: #fff; background: url(../images/menu_hover.jpg) no-repeat}

#main {width: 860px; padding: 50px 50px 25px; background: url(../images/content_top.png) top center no-repeat}
#main_base {width: 960px; background: url(../images/content.png) repeat-y center}
#main_bottom {width: 960px; height: 10px; background: url(../images/content_bottom.png) top center no-repeat}

#footer {width: 900px; padding: 30px 30px; color: #fff; text-align: center; background: url(../images/footer.jpg) bottom center no-repeat}
#footer a {color: #fff}

.form-row{clear: both; padding: 0.5em;}

#tclose {width: 30px; height: 30px; cursor: pointer; background: url(../images/close.png) no-repeat}
#tclose:hover {background-position: 0 -30px}

#error {background: #ff6969; color: #fff; text-shadow: 1px 1px #cf5454; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background: #2ea125; color: #fff; text-shadow: 1px 1px #1b6116; border-right: 1px solid #000; border-bottom: 1px solid #000; padding: 10; -moz-border-radius: 0; border-radius: 0}
#bluemask {background: #4195aa}
#frameless {padding: 0}
#frameless .tclose {left: 6px}

.poshtip {}

.lightgrey {background-color: #eee;}

.hotspot {color: #900; padding-bottom: 1px; border-bottom: 1px dotted #900; cursor: pointer}

.settings-button:hover, .pressed {cursor: pointer; background-image: url(../images/icon-cog.png);}

.totals_footer {font-weight: bold; color: #ba55d3}

/* Following needed to make sure Google's autocomplete appears ontop of modals, otherwise zIndex will draw autocomplte list behind the modal dialog... */
.pac-container{z-index: 100000;}

sup {vertical-align: super; font-size: smaller;}

.wispa-remote-stream-video
{
	background-color: black;
	object-fit: contain;
}
.wispa-local-stream-video
{
	background-color: black;
	position: absolute;
	right: 5px;
	bottom: 5px;
}

/* WebRTC stuff...*/
section, header, footer {padding: 5px 20px;}

.make-center {text-align: center;}

@media all and (max-width: 620px)
{
  button, input {display: block; margin: 5px 10px;}
}

@media all and (max-width: 500px)
{
  h1 {font-size: 18px;}
}

@media screen and (orientation:portrait) and (min-width: 350px)
{
  .header {position: fixed!important; border-bottom: 1px solid white!important; box-shadow: rgb(84, 145, 208) 0px 1px 0px 0px!important;}
}

@media all and (max-width: 900px)
{
  .no-mobile
  {
    display: none!important;
    opacity: 0!important;
    visibility: hidden!important;
    z-index: -1!important;
    width: 0!important;
    height: 0!important;
    overflow: hidden!important;
    border: 0!important;
    box-shadow: none!important;
  }
}

.myPanelHeader {height: 42px; vertical-align: top;}