/*
 * Copyright 2011 Research In Motion Limited.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
 /**
 * Global styles shared by all pages.
 */
body {
	font-family: Calibri, Arial;
	font-size: 100%;
	background-color: #8EB9D9;
}

h1 {
	margin: 0;
	padding-left: 0.5em;
	color: white;
	text-shadow: 1px 1px 1px #666;
	clear: both;
}

h2 {
	margin: 0.25em 0 0 0;
	padding: 0.25em 1em;
	color: #EFEFEF;
	text-shadow: 1px 1px 1px black;
	border: solid 1px #666;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.42, rgb(86,136,222)),
		color-stop(0.71, rgb(135,203,255)),
		color-stop(0.86, rgb(172,220,242))
	);
	clear: both;
}
h2 img {
	float: right;
}

th { 
	white-space: nowrap;
	text-align: left; 
	vertical-align: top;
	font-weight: bold; 
	background-color: #CCC;
	background-color: #66A3D2;
	color: #222;
	padding: 0.25em;
	font-variant: small-caps; 
	font-size: 1.25em; 
}


ul.section 
{
	list-style: none;
	margin: 0 0 0.25em 0;
	padding: 0;
	
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-left: solid 1px #666;
	border-right: solid 1px #666;
	border-bottom: solid 1px #666;

	background-color: white;
	clear: both;
}

ul.section li {
	padding: 0 0.5em;
	clear: both;
	color: #A65F00;
	color: #FF9200;
	color: #66A3D2;
	color: #444;
}
ul.section li a:link, ul.section li a:visited {
	float: left;
	width: 35%;
	padding: 0.5em 1.5em;
	font-weight: bold;
	text-decoration: none;
	color: #739fc2;
}
ul.section li:hover a {
	background-color: #1E2F3B;
	color: white;
	cursor: pointer;
	color: #FF9200;
}
ul.section li:active a {
	color: red;
}

ul.section li.category {
	font-weight: bold;
	border-top: solid 1px #66A3D2;
	border-bottom: solid 1px #66A3D2;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;

	background-color: #0C61A4;
	color: #66A3D2;
	color: #FF9200;
	text-shadow: 1px 1px 1px #666;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
	
background: #4f85bb; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#4f85bb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4f85bb 0%,#4f85bb 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #4f85bb 0%,#4f85bb 100%); /* W3C */
	
}
ul.section li.category h3 {
	display:inline;
	color: #FF9200;
}

.bottom {
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}
.show {
}
.hide {
	display : none;
}

div.demo {
	margin: 0;
	padding: 0;
	border-bottom: solid 1px #666;
	border-left: solid 1px #666;
	border-right: solid 1px #666;
	background-color: white;
	padding: 1em; 
}


code {
	background-color: white;
	font-family: courier;
	border: dashed 1px black;
	display: block;
	padding: 0.5em;
	margin: 0 0.5em;
	font-size: 0.75em;
}

.hide 
{
	visibility: hidden;
}
.show {
	visibility: visible;
}

#pageHeader .back {
	border: solid 1px #666;
	background-color: #AAA;
	color: black;

	display: inline-block;
	font-weight: bold;
	font-size: 1em;
	line-height: 100%;

	padding: 0.5em;
	position: relative;
	text-decoration: none;
	vertical-align: middle;

	-webkit-border-radius: 0.5em;
	
	
	border-left: none !important;
	margin-left: 1.5em;
	padding-left: 0;
	-webkit-border-top-left-radius: 0.15em;
	-webkit-border-bottom-left-radius: 0.15em;

	cursor: pointer;
	
	
background: #cfe7fa; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* W3C */

	color: #EFEFEF;
	text-shadow: 1px 1px 1px black;
	border: solid 1px #666;
	
}
#pageHeader .back:after {
	border: solid 1px #666;
	background-color: #AAA;
	bottom: -1px;
	top: -1px;
	content: '';
	display: block;
	position: absolute;
	text-shadow: none;
	width: 2.10em;
	z-index: -1;

	left: -1em;
	-webkit-transform: rotate(45deg);
	-webkit-border-top-left-radius: 1.1em;
	-webkit-border-bottom-right-radius: 1.1em;
	cursor: pointer;
	
background: #cfe7fa; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* W3C */


}
#pageHeader .home {
	border: solid 1px #666;
	background-color: #AAA;
	color: black;

	display: inline-block;
	font-weight: bold;
	font-size: 1em;
	line-height: 100%;

	padding: 0.5em;
	text-decoration: none;
	vertical-align: middle;

	-webkit-border-radius: 0.5em;

	margin-left: 0.5em;
	cursor: pointer;
	
background: #cfe7fa; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* W3C */

	color: #EFEFEF;
	text-shadow: 1px 1px 1px black;
	border: solid 1px #666;
	
}
#pageFooter {
	margin-top: 1em;
	border-top: solid 1px #999;
	padding-top: 0.25em;
	clear: both;
}


.break {
	clear: both; 
}

.success { 
	color: blue; 
	font-weight: normal; 
}
.error { 
	color: red; 
	font-weight: bold; 
}

.thumbnail { 
	height: 75px; 
	border: 1px solid #000; 
	margin: 10px 5px 0 0; 
}

#legend
{
	font-weight: bold;
	background-color: White;
	padding: 0.25em;
	margin-top: 1em;
	border: solid 1px black;
	border-radius: 5px;
}
#legend ul
{
list-style: none;
}

.tdmid {
	vertical-align: middle;
}
.tdtop {
	vertical-align: top;
}
