/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Responsive layout */

/* Computer display - screen width >= 1024  */
.oneTwelfth	{float: left;margin: 0 2%;width: 4.33%;}	/* 1/12 */
.oneSixth {float: left;margin: 0 2%;width: 12.66%;}		/* 2/12 */
.oneFourth {float: left;margin: 0 2%;width: 21%;}		/* 3/12 */
.oneThird {float: left;margin: 0 2%;width: 29.33%;}		/* 4/12 */
.fiveTwelfth {float: left;margin: 0 2%;width: 37.66%;}	/* 5/12 */
.oneHalf {float: left;margin: 0 2%;width: 46%;}			/* 6/12 */
.sevenTwelfth {float: left;margin: 0 2%;width: 54.33%;}	/* 7/12 */
.twoThird {float: left;margin: 0 2%;width: 62.66%;}		/* 8/12 */
.threeFourth {float: left;margin: 0 2%;width: 71%;}		/* 9/12 */
.fiveSixth {float: left;margin: 0 2%;width: 79.33%;}	/* 10/12 */
.elevenTwelfth {float: left;margin: 0 2%;width: 87.66%;}/* 11/12 */
.one {margin: 0 2%;width: 96%;}							/* 12/12 */

/* small phone, iPhone and small tablet - screen width from 320px up to 767px */
@media only screen and (max-width:767px) { 
	.row {margin: 0 !important}
	.oneTwelfth,
	.oneSixth,
	.oneFourth,
	.oneThird,
	.fiveTwelfth,
	.oneHalf,
	.sevenTwelfth,
	.twoThird,
	.threeFourth,
	.fiveSixth,
	.elevenTwelfth,
	.one {float: none;margin-bottom: 30px;width: 96%;}
}

/* Clearfix */

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {content: " ";display: table;}
.clearfix:after,
.row:after {clear: both}
.clearfix,
.row {zoom: 1; /* For IE 6/7 (trigger hasLayout) */}
.clear {font-size: 0;clear: both;}
.row { margin-bottom: 30px }


/* Typohgraphy */

h1, h2, h3, h4, h5, h6, p {color: #CCC;font-family: Georgia, "Times New Roman", Times, serif;margin: 0 0 10px 0;}
h1 {font-size: 24px;line-height: 32px;}
h2 {font-size: 18px;line-height: 26px;}
h3 {font-size: 16px;font-weight: bold;line-height: 20px;}
h4 {font-size: 14px;line-height: 20px;font-weight: bold;}
h5 {font-size: 12px;line-height: 16px;font-weight: bold;}
h6 {font-size: 10px;line-height: 14px;}
p {color: #CCC;font-family: Arial, Helvetica, sans-serif;font-size: 12px;line-height: 1.5;text-align: justify;}
b {font-weight:bold;}
b.highlighted { color: #0191FA }

h1.ribbon {background: url(images/title_rightBackground.png) no-repeat top right;color: #DDD;float: left;
	font: bold 14px Georgia, "Times New Roman", Times, serif;left:-2%;padding: 9px 14px 34px 35px;
    position: relative;text-shadow: 1px -1px #002d4a;}
h1 span {background: url(images/title_leftBackground.png) no-repeat top left;height: 44px;left: -7px;position: absolute;top: 0;
	width: 7px;}

/* Links */

a {background-color: #005CAB;color: #FFF;font: normal 12px Arial, Helvetica, sans-serif;padding: 1px 5px;text-decoration: none;
	-moz-border-radius: 2px; 	/* FF1+ */
	-webkit-border-radius: 2px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
    border-radius: 2px; 		/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	
	/* Safari 3.2+, Chrome */
	-webkit-transition-property: background-color, color;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: linear;
	/* Firefox 4-15 */
	-moz-transition-property: background-color, color;-moz-transition-duration: 0.2s;-moz-transition-timing-function: linear;
	/* Opera 10.5–12.00 */
	-o-transition-property: background-color, color;-o-transition-duration: 0.2s;-o-transition-timing-function: linear;
	/* Firefox 16+, Opera 12.50+ */
	transition-property: background-color, color;transition-duration: 0.2s;transition-timing-function: linear;
}
a:hover {background-color: #FFF;color: #111;}
a[target="_blank"] {background: #005CAB url(images/externalLink_icon.png) no-repeat center right;padding-right: 17px;}
a[target="_blank"]:hover {background: #FFF url(images/externalLink_hoverIcon.png) no-repeat center right}
a.highlightedLink {float: right;margin-top: 10px;}

/* Buttons */
button::-moz-focus-inner {border: 0;padding: 0;}
button {border: 0;display: inline-block;margin: 0;overflow: visible;padding: 0;text-decoration: none;width: auto;}
button.bigButton, button.smallButton {background-color: #244386;border: 1px solid #11295C;border-top-color: #244386;
	border-bottom: 3px solid #11295C;color: #DDD;cursor: pointer;font: normal 12px Georgia, "Times New Roman", Times, serif;
	padding: 6px 20px;text-shadow: 1px -1px #001134;white-space: nowrap;
	
	-moz-box-shadow:  0px 1px 2px 0px #000;		/* FF3.5+ */
	-webkit-box-shadow: 0px 1px 2px 0px #000; 	/* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: 0px 1px 2px 0px #000; 	/* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
		  
	-moz-border-radius: 5px; 	/* FF1+ */
	-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
          border-radius: 5px; 	/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	
	/* Safari 3.2+, Chrome */
	-webkit-transition-property: background-color, border;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: linear;
	/* Firefox 4-15 */
	-moz-transition-property: background-color, border;-moz-transition-duration: 0.2s;-moz-transition-timing-function: linear;
	/* Opera 10.5–12.00 */
	-o-transition-property: background-color, border;-o-transition-duration: 0.2s;-o-transition-timing-function: linear;
	/* Firefox 16+, Opera 12.50+ */
	transition-property: background-color, border;transition-duration: 0.2s;transition-timing-function: linear;
}
button.smallButton {border-bottom-width: 2px;float: right;font: normal 12px Arial, Helvetica, sans-serif;padding: 1px 5px;margin-top: 14px;
	-moz-border-radius: 4px; /* FF1+ */
	-webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
          border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
}
button.bigButton:hover, button.smallButton:hover {background-color: #3256A5;border-color: #1A336B;border-top-color: #3256A5;}
button.bigButton:active {text-shadow: 1px 1px #001134, 2px 2px #001134;}
button.smallButton:active {border-bottom-width: 1px;padding-bottom: 2px;text-shadow: 1px 1px #001134;}

/* Lists */

ul.basic, 
.result {
	background-color: #222;
	color:#CCC;
	font: normal 12px Arial, Helvetica, sans-serif;
	margin-bottom: 15px;
	padding: 7px 15px;
	-moz-border-radius: 3px;	/* FF1+ */
	-webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
          border-radius: 3px; 	/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
}
	ul.basic li {margin-top: 5px}
	ul.basic > li:first-child {margin-top:0}

/* Table of contents */
ul.tableOfContents {display: inline-block}
	ul.tableOfContents li {color: #888}
	ul.tableOfContents > li {list-style: inside decimal}
		ul.tableOfContents li a {background: none;color: #CCC;font-weight: bold;}
		ul.tableOfContents li a:hover {color: #0092FD;text-decoration: underline;}
	ul.tableOfContents ul {background: url(images/list_verticalLine.png) repeat-y top left;margin-left: 30px;}
		ul.tableOfContents ul ul {margin-left: 5px}
		ul.tableOfContents ul li {background: url(images/list_horizontalLine.png) no-repeat left 7px;padding-left: 10px;list-style:none outside}	/* Outside has to be specified for IE7*/
		ul.tableOfContents ul li:last-child {background: #222 url(images/list_lastNode.png) no-repeat left top}

ul.noBullets li {list-style: none outside}

/* Changelog */
ul.changelog,
ul.legend {margin-bottom: 25px}
ul.changelog li,
ul.legend li {color: #CCC;font: normal 12px/1.5 Georgia, "Times New Roman", Times, serif;padding: 5px 0 5px 25px;}
ul.changelog.new li {background: url(images/new_icon.png) no-repeat left 8px}
ul.changelog.changed li {background: url(images/changed_icon.png) no-repeat left 8px}
ul.changelog.fixed li {background: url(images/fixedBug_icon.png) no-repeat left 7px}
ul.changelog.removed li {background: url(images/removed_icon.png) no-repeat left 8px}
/* Legend of changelog */
ul.legend {
	background: url(images/hr_noShadow.png) repeat-x top left;
	padding-top: 10px;
}
ul.legend li {
	display: inline;
	margin-left: 25px;
	padding-left: 20px;
}
ul.legend li:first-child {margin-left: 0}
ul.legend li.new{background: url(images/new_icon.png) no-repeat left 6px}
ul.legend li.updated{background: url(images/changed_icon.png) no-repeat left 6px}
ul.legend li.fixed{background: url(images/fixedBug_icon.png) no-repeat left 5px}
ul.legend li.removed{background: url(images/removed_icon.png) no-repeat left 6px}

/* Table list and basic list without background */
ul.rectangleBullets li,
.table ul > li {background: url(images/tableBullet.png) no-repeat -10px 5px;color: #CCC;margin-top:5px;padding-left: 10px;}
ul.rectangleBullets li {font: normal 12px Arial, Helvetica, sans-serif}
ul.rectangleBullets li:first-child,
.table ul > li:first-child {margin-top:0}

/* Used in options and API */
.result ul {min-height: 15px;max-height: 150px;overflow: auto;}


body {background-color:#000;}

.wrapper {margin: 0 auto;max-width: 1000px;position: relative;padding: 50px 20px;}

	.page {background-color: #111;padding: 30px 0;position: relative;
		-webkit-border-radius: 7px;	/* Safari 3-4, iOS 1-3.2, Android =1.6 */
		-moz-border-radius: 7px;	/* FF1+ */
		border-radius: 7px;			/* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
	}

		hr {background: url(images/hr.png) repeat-x top left;border: 0;height: 32px;margin: 0;width: 100%;}
		/* IE7 hack to remove border */
		*+html hr {background-image: url(images/hr_ie7.png);height: 128px;zoom: 25%;}

		.logo a {background: none;margin: 0;padding: 0;}
		.version {background-color: #005CAB;border: 1px solid #004C8E;color: #FFF;float: left;font: normal 12px Arial, Helvetica, sans-serif;
			left: 160px;padding: 2px 7px 1px 6px;position: absolute;text-shadow: 1px -1px #002d4a;top: 35px;
			
			-moz-box-shadow: inset 0px 1px 0px 0px #0173c4;		/* FF3.5+ */
			-webkit-box-shadow: inset 0px 1px 0px 0px #0173c4; 	/* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
				  box-shadow: inset 0px 1px 0px 0px #0173c4; 	/* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
			
			-moz-border-radius: 4px; 	/* FF1+ */
			-webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
				  border-radius: 4px; 	/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
		}

		/* Navigation */
		
		ul.topNav {float: right;list-style: none;margin-top: 20px;}
			ul.topNav li {display: inline;float: left;margin-left: 15px;position: relative;}
				ul.topNav li a {background-color: #111;border: 1px solid #111;color: #AAA;display: block;
					font: normal 14px Georgia, "Times New Roman", Times, serif;padding: 6px 14px;text-decoration: none;
					-webkit-transition-property: none;	/* Safari 3.2+, Chrome */
					-moz-transition-property: none;		/* Firefox 4-15 */
					-o-transition-property: none;		/* Opera 10.5–12.00 */
					transition-property: none;			/* Firefox 16+, Opera 12.50+ */
				}
				ul.topNav li a:hover,
				ul.topNav li a.active {background-color: #005CAB;border: 1px solid #004C8E;color: #FFF;text-shadow: 1px -1px #002d4a;
					-moz-box-shadow: inset 0px 1px 0px 0px #0173c4;		/* FF3.5+ */
					-webkit-box-shadow: inset 0px 1px 0px 0px #0173c4; 	/* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
						  box-shadow: inset 0px 1px 0px 0px #0173c4; 	/* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
					-moz-border-radius: 4px;	/* FF1+ */
					-webkit-border-radius: 4px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
						  border-radius: 4px; 	/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
				}

		/* Breadcrumbs */
		
		ul.breadcrumbs { margin-bottom: 10px }
			ul.breadcrumbs li {display: inline;float: left;position: relative;}
			ul.breadcrumbs li:first-child {margin-right: 4px}
				ul.breadcrumbs li img {vertical-align: middle}
				ul.breadcrumbs li a, ul.breadcrumbs li.active {background: none;border: none;color: #CCC;
					font: bold 12px Arial, Helvetica, sans-serif;text-shadow: none;}
				ul.breadcrumbs li.active {color: #AAA;cursor: default;padding: 2px 5px;}
				ul.breadcrumbs li:first-child a {background: url(images/homeSmall_icon.png) no-repeat left center;padding-right: 4px;}
				ul.breadcrumbs li a:hover {color: #0191FA}
				ul.breadcrumbs li:first-child a:hover {background: url(images/homeSmall_hoverIcon.png) no-repeat left center}
				
		/* Demos preview */
		
		a.demoPreviewImgLink {background: url(images/ajax-loader.gif) no-repeat center center;border: 3px solid #333;display: block;
			line-height: 0;margin-bottom: 15px;
			padding: 0;position: relative;
			-moz-border-radius: 0; 		/* FF1+ */
			-webkit-border-radius: 0; 	/* Saf3-4, iOS 1-3.2, Android =1.6 */
			border-radius: 0; 			/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
			-webkit-transition: border 0.2s linear;	/* Safari 3.2+, Chrome */
				-moz-transition: border 0.2s linear;		/* Firefox 4-15 */
				-o-transition: border 0.2s linear;			/* Opera 10.5–12.00 */
				transition: border 0.2s linear;			/* Firefox 16+, Opera 12.50+ */
		}
		a.demoPreviewImgLink:hover {border-color: #666}
			a.demoPreviewImgLink img {width: 100%}
			a.demoPreviewImgLink span {background: url(images/zoomIcon.png) no-repeat center center;bottom: 0;left: 0;position: absolute;right: 0;top: 0;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	/* IE 8 */
				-moz-opacity: 0;
				-khtml-opacity: 0;	/* Safari 1.x */
				opacity: 0;
				-webkit-transition: opacity 0.2s linear;	/* Safari 3.2+, Chrome */
				-moz-transition: opacity 0.2s linear;		/* Firefox 4-15 */
				-o-transition: opacity 0.2s linear;			/* Opera 10.5–12.00 */
				transition: opacity 0.2s linear;			/* Firefox 16+, Opera 12.50+ */
			}
			a.demoPreviewImgLink:hover span {
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";	/* IE 8 */
				-moz-opacity: 0.8;
				-khtml-opacity: 0.8;	/* Safari 1.x */
				opacity: 0.8;
			}
		
		/* Prettyprint icons panel */
		
		.prettyprintWrapper {margin-bottom: 15px;position: relative;}
			.prettyprintWrapper .prettyfierIcons {position: absolute;top: 8px;right: 15px;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	/* IE 8 */
				-moz-opacity: 0;
				-khtml-opacity: 0;	/* Safari 1.x */
				opacity: 0;
				-webkit-transition: opacity 0.5s linear;	/* Safari 3.2+, Chrome */
				-moz-transition: opacity 0.5s linear;		/* Firefox 4-15 */
				-o-transition: opacity 0.5s linear;			/* Opera 10.5–12.00 */
				transition: opacity 0.5s linear;			/* Firefox 16+, Opera 12.50+ */
			}
			.prettyprintWrapper:hover .prettyfierIcons {
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	/* IE 8 */
				-moz-opacity: 1;
				-khtml-opacity: 1;	/* Safari 1.x */
				opacity: 1;
			}
				.prettyprintWrapper .prettyfierIcons img:first-child {margin-right: 5px}
				.prettyprintWrapper .prettyfierIcons span.iconDescription {color: #C0C0C0;
					font: normal 11px Georgia, "Times New Roman", Times, serif;position: absolute;right: 110%;top: 2px;white-space: nowrap;}
		
		/* Table */
		
		.table {color: #CCC}
			.table .tHeader {background-color: #0b0b0b;color: #FFF;font: bold 14px Arial, Helvetica, sans-serif;padding: 25px 0;}
			.table .tBody {color: #CCC;font: normal 12px Arial, Helvetica, sans-serif;line-height: 1.5;}
				.table .tRow {border-top: 1px dotted #333;padding: 20px 0;}
				.table .tRow:first-child {border-top: none}
					.table .tRow .trCell:first-child {font-weight:bold}
						.moreInfoPanel {margin: 15px 1.6% 0 0;text-align: right;}
							.moreInfoPanel span.infoSticker {background-color: #333;color: #FFF;
								font: normal 12px Arial, Helvetica, sans-serif;margin-right: 15px;padding: 1px 5px;
								-moz-border-radius: 2px;	/* FF1+ */
								-webkit-border-radius: 2px; /* Saf3-4, iOS 1-3.2, Android =1.6 */
								border-radius: 2px; 		/* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
							}
				.table .groupTitle {background-color: #222;color: #FFF;font: bold 14px Georgia, "Times New Roman", Times, serif;
					margin-top: 50px;padding: 15px;}
				.table .groupTitle:first-child {margin-top: 0}
				.table .groupTitle:first-letter { text-transform: uppercase }
		
		/* Versions menu */
		a.versionsMenuItem {margin-left: 10px;padding: 5px 10px;}
		a.versionsMenuItem.active {background-color: #FFF;color: #111;}

/* Others */
#responsiveSticker {left: 0;position: fixed;top: 0;z-index: 2;}
.noMargin {margin-bottom: 0}
.marginBottom {margin-bottom: 25px !important}
.center {text-align: center}
.right {text-align: right}
.additionalInfo {font-style: italic;letter-spacing: 2px;margin: 20px 0 0;text-align: center;}
.highlightArrow {left: 14px;position: absolute;top:99%;}
#versionsDropDown {display: none}

/* iPad - screen width from 768px up to 1023px */
@media only screen and (min-width:768px) and (max-width:1023px) { 
	/* Navigation */
	ul.topNav li {margin-left: 5px}
		ul.topNav li a {padding:6px 5px}
}

/* Small tablet - screen width from 480px up to 767px */
@media only screen and (min-width:480px) and (max-width:767px) { 
	.wrapper {padding: 0}
	/* Navigation */
	ul.topNav {float: none}
		ul.topNav li {display: block;float: none;margin-left: 0;}
			ul.topNav li a {text-align: center}
	
	#versionsDropDown {display: inline}
	.versionsMenuItem {display: none}
			
	/* Table */
	.table .tHeader {padding: 5px 0}
		.table .tHeader .thCell {line-height: 2;margin-bottom: 0;}
	.table .tRow .trCell {margin-bottom: 0}
	.table .tRow .trCell:first-child {font-size: 16px;}
}

/* small phone, iPhone - screen width up to 479px */
@media only screen and (max-width:479px) { 
	.wrapper {padding: 0}
	/* Navigation */
	ul.topNav {float: none}
		ul.topNav li {display: block;float: none;margin-left: 0;}
			ul.topNav li a {text-align: center}
			
	#versionsDropDown {display: inline}
	.versionsMenuItem {display: none}
	
	/* More info panel in options table */
	.moreInfoPanel {margin-right:0}
		.moreInfoPanel span.infoSticker {margin-right: 0;margin-left: 15px;}
		.moreInfoPanel a {display: block;margin: 5px 0;text-align: center;}
	
	/* Table */
	.table .tHeader {padding: 5px 0}
		.table .tHeader .thCell {line-height: 2;margin-bottom: 0;}
	.table .tRow .trCell {margin-bottom: 0}
	.table .tRow .trCell:first-child {font-size: 16px;}
}