/*----------------------------------------------------------------------------------------------
Name:   watchee.css
Author: mr@marcelruff.info
Background grey: #e6e6e6
Background blue: #377CB1  Decimal: 55 124 177
FgColor  orange: #ee7d13   Decimal: 238 125 19
class="xy"  --> .xy
id="xy"     --> #xy
----------------------------------------------------------------------------------------------*/

/*
   Transparent png IE5 support: http://www.twinhelix.com/css/iepngfix/
   Unfortunately Firefox reports 'behavior' to be unknown in error console
   So probably in future we need to use .gif instead of .png
*/
/* This breaks google maps: */
/*img, div { behavior: url(iepngfix/iepngfix.htc) }*/
/* You can include into html directly (if no googlemaps and qooxdoo is invloved:
  <style type="text/css">img, div { behavior: url(iepngfix/iepngfix.htc) }</style>
*/


/* +-- General HTML Definitions --+ */
html,
body {
	margin: 0px;
	padding: 0px;
}

body {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #02253a;
	font-size: 1em; 
	line-height: 1.3em;
	background: url(images/bkg_page.gif) repeat-x;
}

table.listTable {
   border-width: 0px;
   width: 100%;
}

/* +-- Modules --+ */
.fl					{float: left;}
.fr					{float: right;}
.clear 			{line-height:1px; margin: 0px; padding: 0px; clear: both;}
.inline			{display: inline;}
.pointer		{cursor: pointer;}
.iframe			{background-image: none;}


/* homepage start */
#page {
	position: relative;
	left: 50%;
	width: 970px; height: 100%;
	margin: 0px;
	margin-left: -485px;
}

#header {
	width: 100%; height: 75px;
	margin-bottom: 70px;
}

#footer {
	width: 100%; height: 25px;
	background: url(images/bkg_footer.gif);
	padding-top: 5px;
}

iframe.footer {
	width: 100%; height: 25px;
	margin: 0px;
	border: none;
  border-style: hidden;
  margin: 0;
  padding: 0;
  /*overflow: hidden; *Disable scrollbars. Set to "scroll" to enable*/
  border-style: hidden;
}

.footerNav {
	margin: 0px 10px;
}

.footerNav:hover {
	text-decoration: none;
	color: #ff7c00;
}

#globalNav {
	margin: 0px 20px;
}

#globalNav a {
	display: block;
	width: 100px; height: 42px;
	float: left;
	font-size: 1em;
	font-weight: normal;
	text-align: center;
	padding-top: 28px;
	border-left: 1px solid #929090;
	background: url(images/bkg_button_header.gif) no-repeat;
}

#globalNav a.last {
	border-right: 1px solid #929090;
}

#globalNav a:hover,
#globalNav a.on {
	text-decoration: none;
	color: #ff7c00;
	background: url(images/bkg_button_header_on.gif) no-repeat;
}

#navigation {
	margin-top: 30px;
	margin-right: 70px;
	width: 200px;
	float:left;
	text-align: right;
}

#navigation div {
	margin-bottom: 30px;
	padding: 3px;
}

#navigation a {
	display: block;
	height: 25px;
	font-size: 0.8em;
	padding: 0px 10px;
	margin: 0px;
	color: #81879C;
	background: url(images/bkg_navi-button.gif) bottom right;
}

#navigation a:hover,
#navigation a.on {
	text-decoration: none;
	color: #6D1F80;
	background: url(images/bkg_navi-button_on.gif) bottom right no-repeat;
}

#content {
	float: left;
	width: 600px;
}


.banner {
	background: url(images/bkg_banner.jpg) no-repeat; 
	width: 250px; 
	height: 290px;
	text-align: center;
	padding: 10px;
}

.banner .xl {font-size:1.1em; font-weight:bold;}
.banner .l {font-size:1.1em; font-weight:normal;}
.banner .m {font-size:0.8em; font-weight:bold;}
.banner .s {font-size:0.8em; font-weight:normal;}

span.header {
   color: #ee7d13;
   font-size: x-large;
   font-weight: bold;
   font-style: italic;
   margin-left: 10px;
}
span.code {
   font-style: italic;
   font-family: Courier;
}
div.header {
   border: 1px solid blue;
   padding: 0px;
   margin: 0px;
   height: 1px;
}

p.index, td.index {
   text-align: left;
   vertical-align:top;
   padding: 0px;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: 10px;
   margin-right: 10px;
}
a:link.indexlink { text-decoration:none; color: #ee7d13; font-size: medium; font-weight: bold; }
a:visited.indexlink { text-decoration:none; color: #ee7d13; font-size: medium; font-weight: bold; }
a:hover.indexlink { text-decoration:underline; color: #ee7d13; font-size: medium; font-weight: bold }


ul.mainFeatures {
   list-style-image: url(../images/watchee_list_14.png);
}
li.mainFeatures {
   margin: 16px;
}

div.main {
   background-color: #e6e6e6;
   margin: 6px;
   border-style: hidden;
}
div.roundedLogoContainer {
   background-color: #377CB1;
   position: relative;
   border-style: hidden;
   margin: 6px;
   margin-bottom: 12px;
}
div.roundedContainer {
   background-color: #dadada;
   position: relative;
   border-style: hidden;
   margin: 6px;
}
div.mainContainer {
   position: relative;
   border-style: hidden;
   margin: 6px;
}
p.intro {
   margin: 8px;
}
p.faqHead {
   margin: 8px;
   font-style: italic;
}
p.faqBody {
   margin: 8px;
}

div#mainLeft {
   /*border: 1px solid red;*/
   padding-right: 30px;
   padding-top: 32px;
   padding-bottom: 40px;
   float: left;
   position: relative; /*IE6 workaround*/
}
div#mainRight {
   float: left;
   position: relative; /*IE6 workaround*/
}
.clear {
   clear: both;
   line-height: 1px;
   font-size: 1px;
   height: 1px;
}
img.j2meScreen {
   border: none;
   margin-top: 50px;
   margin-left: 20px;
}
@media all { /* fallback includes '@media screen' (normal browser) */
   img.mainRight {
      background-image: url(../images/watcheeIntro_280.png);
      border: solid;
      width: 305px;
      height: 280px;
   }
}
@media handheld { /* mobile devices, pda */
   div#mainLeft {
      /*border: 1px solid red;*/
      border: none;
      padding-right: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      float: left;
   }
   img.mainRight {
      background-image: url(../images/watcheeIntro_100.png);
      border: none;
      width: 100px;
      height: 92px;
   }
   li.mainFeatures {
      margin: 2px;
   }
}
img.goto {
   border: none;
   width:20px;
   height:30px;
}
a:link.mainlink { text-decoration:none; color: #AA0707; font-size: medium; }
a:visited.mainlink { text-decoration:none; color: #220707; font-size: medium; }
a:hover.mainlink { text-decoration:underline; color: #220707; font-size: medium; }

p.errorText {
   padding: 2px;
   margin:2px;
   background-color: #FF0000;
   font-size: 14px;
   text-align: left;
}
/* homepage end */


p.head, td.head {
   padding-top: 4px;
   padding-bottom: 4px;
   background-color: #E0E0E0;
   font-weight: bold;
   text-align: center;
   vertical-align:middle;
}
p.listLabel, td.listLabel {
   padding: 1px;
   margin:1px;
   background-color: #CCCCCC;
   font-size: 12px;
   text-align: left;
}
td.listButton {
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   padding-right: 0px;
   background-color: #CCCCCC;
   font-size: 14px;
   text-align: left;
}
p.listValue, td.listValue {
   padding-left: 2px;
   padding-right: 2px;
   background-color: #F9F9F5;
   font-size: 12px;
   text-align: left;
}
.sideend {
   color: #aaaaaa;
   font-size: small;
}
span.sideend {
   padding-top: 4px;
   padding-left: 8px;
   margin-right: 20px;
   vertical-align:middle;
}

a:link { text-decoration:none; color: #aaaaaa; font-size: small; }
a:visited { text-decoration:none; color: #aaaaaa; font-size: small; }
a:hover { text-decoration:underline; color: #aaaaaa; font-size: small; }

/**
 * XSMS display for info window in google map
 */
th.xsmsMapLabel, td.xsmsMapLabel, th.gpsMapLabel, td.gpsMapLabel {
    background-color: #888888;
    color: white;
    font-size: 12px;
}
/**
 * XSMS display for info window in google map
 */
td.xsmsMapValue, td.gpsMapValue, td.xsmsMapBody {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #CCCCCC;
    text-align: left;
    font-size: 11px;
}
/**
 * XSMS display for info window in google map
 */
td.xsmsMapValue {
  text-align: center;
}