html,body{ 
	margin:		0; 
	padding:	0; 
    font-family:      HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Setup the h element sizes since all browser inherited CSS has been reset... */
h1 {
	display: block;
    font-size: 2em;
    font-weight: bold;
}

h2 {
	display: block;
    font-size: 1.5em;
    font-weight: bold;
}

h3 {
	display: block;
    font-size: 1.17em;
	line-height: 1.5;
    font-weight: bold;
	margin-bottom:10px;
}

h4 {
	display: block;
    font-size: 1em;
    font-weight: bold;
	color:	grey;
	margin-bottom: 3px;

}

h5 {
	display: block;
    font-size: 0.83em;
    font-weight: normal;
	color:			  grey;
}

h5 {
	display: block;
    font-size: 0.67em;
    font-weight: bold;
}


p {
	color:			  grey;
	margin-bottom:	10px;
}

label {
    margin-right:     15px;
}

textarea {
  resize: none;
  overflow:hidden;
  border:solid 2px #8c9199;
  text-align:center;
  background-color:white;
  color:#7f7f7f;  
  position: relative;
  z-index: 200;

}


/* Some sprite image handling... */
#usflag {
    width: 90px;
    height: 100px;
    background: url(../images/flags-sprite.gif) -546px 115px;
	zoom: 0.5;
}
	
#ukflag {
    width: 90px;
    height: 100px;
    background: url(../images/flags-sprite.gif) -456px 115px;
	zoom: 0.5;
}
	
#sgflag {
    width: 90px;
    height: 95px;
    background: url(../images/flags-sprite.gif) -726px 230px;
	zoom: 0.5;
}

#cnflag {
    width: 90px;
    height: 100px;
    background: url(../images/flags-sprite.gif) -546px 460px;
	zoom: 0.5;
}

#timestamp {
	height: 1em;
	width: 13em;
}

.tick {
	//display: none;
}

.winner img { 
   border:solid 2px #8c9199;
   //width: 110px;
   //height: 55px;
   width: 70%;
   height: 70%;
   max-width: 110px;
   
}

/* for debugging/design */
//div {
//   border:solid 1px #8c9199;
//}

/* control the max width of the doc contents */
.doc-header {
    padding:	5px;
    width:		99%;
	max-width:	1200px;
	min-width:	355px;
    margin:		auto;
    color:		#3d3d3d;
	position:	relative;
	line-height: 150%;
}

/* doc-body min-width was 550px */

.doc-body {
    padding:	0px;
    width:		100%;
	max-width:	1200px;
	min-width:	355px;
    color:		#3d3d3d;
	position:	relative;
	background-color: #f2f2f2;
	border:		4px solid #00c895;
}

.doc-footer {
	padding: 	5px;
	min-width:	355px;
    color:		#3d3d3d;
	position:	relative;
	border:		4px solid grey;
	line-height: 1.5;
}

/* Whatever iframe its been used in, do not go to the edge and trigger scrollbars */
.doc-body-embedded {
    padding:	0px;
    width:		99%;
	min-width:	355px;
    color:		#3d3d3d;
	position:	relative;
	background-color: #f2f2f2;
	border:		4px solid #00c895;
}


.doc-width {
	padding:	0px;
    width:		99%;
	max-width:	1200px;
	margin: 0 auto;
}

.banner {
    color:            white;
    background-color: #474747;
    padding:          1px;
}

.banner-interior {
}

.banner-heading {
    font-weight:      bold;
    font-size:        90%;
    margin:           5px 10px -10px 15px;
    display:          inline-block;
    vertical-align:   top;
}

.banner-footer {
    font-weight:      bold;
    font-size:        100%;
    display:          inline-block;
	position:			absolute;
    vertical-align:   top;
	overflow:		  hidden;
	height:			  20px;
	width:			   100%;
	background-color: #474747;
	border:			  none;
	padding: 0;
	margin:	0;
}


.banner-logo img {
    width:            103px;
    height:           30px;
    margin-left:      10px;
	margin-top:		  20px;
}

/* warning shown if there are connectivity issues */
.warning {
            padding: 5px; 
            border: 1px solid black; 
            background-color: #ff8;
}

.button-error {
    color:            white;
    background:       rgb(221, 66, 66);
}


/* style of the drawing canvas */
#canvas{
	position:	absolute;
	width:		99.5%;
	height:		99%;
	z-index: 100;
	padding: 4px;
	overflow-y: hidden;
}


.chart-body {
    padding:	0px;
    width:		100%;	
	max-width:	1200px;
	min-width:	355px;
    color:		#3d3d3d;
	position:	relative;
	background-color: #f2f2f2;
	border:		4px solid #00c895;
}


.chart-and-doughnut-row {
	
}


.chart-inner-container {
    padding:	3px;
	padding-bottom: 0px;
    width:		80%;
    color:		#3d3d3d;
	position:	relative;
}

.doughnut-inner-container {
    padding:	3px;
	padding-bottom: 0px;
	padding-right: 10px;
    width:		15%;
    color:		#3d3d3d;
	position:	relative;
	float: 		right;
}

.charts-legend-row {
	height:		50px;
	width:		80%;
	margin:		auto;
	//border:		2px solid grey;
}

.chart-legend-aws {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;

	border:		3px solid rgba(255, 153, 0, 1.0);
	text-align:	center;
	float:		left;

}

.chart-legend-azure {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	border:		3px solid rgba(0, 114, 197, 1.0);
	text-align:	center;
	float:		left;

}

.chart-legend-google {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	border:		3px solid rgba(219, 68, 55, 1.0);
	text-align:	center;
	float:		left;	
}

.chart-legend-alibaba {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	border:		3px solid rgba(55, 60, 65, 1.0);
	text-align:	center;
	float:		left;
	
}

.chart-legend-tencent {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	border:		3px solid rgba(0, 114, 197, 1.0);
	text-align:	center;
	float:		left;

}

.chart-legend-huawei {
	height:		30px;
	width:		21%;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	border:		3px solid rgba(219, 68, 55, 1.0);
	text-align:	center;
	float:		left;	
}

.replay-summary-box-done {
	width:		90%;
	margin:		auto;
	padding:	5px;
	border:		2px solid grey;
	margin-bottom:	5px;
	overflow:	hidden;	/* make the div grow with content */
}

.replay-summary-box-updated {
	width:		90%;
	margin:		auto;
	padding:	5px;
	border:		3px solid #00c895;
	margin-bottom:	5px;
	overflow:	hidden;	/* make the div grow with content */
}

.replay-summary-row {
	width:		100%;
	margin:		auto;
	overflow:	hidden;	
}

.replay-summary-winner-label-column {
	width:		30%;
	max-width:	150px;
	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;
	text-align:	center;
	float:		left;
	position:	relative;
}

.replay-summary-winner-img-column {
	height:		45px;
	width:		30%;
	max-width:	150px;

	margin:		0 auto;
	margin-right:	2px;
	margin-left:	2px;

	border:		2px solid grey;
	text-align:	center;
	float:		left;
	position:	relative;
	background-color:	white;
}

.replay-window-label {
	width:		100%;
	text-align:	right;
}

/* style of the charts canvas */
#ukResultsChart {
	padding: 4px;
	overflow-y: hidden;
}

#usResultsChart {
	padding: 4px;
	overflow-y: hidden;
}

#sgResultsChart {
	padding: 4px;
	overflow-y: hidden;
}

/* Image size determined by the surrounding div */
img {
    max-width: 100%;
    max-height: 100%;
}


/* divs for row and column behaviour */
.column {
    float: left;
    padding: 0px;
	position: relative;
}

.left {
	width: 25%;
	height:	100%;
	padding: 0px;
	margin: 0px;
	position: relative;
}

.right {
  width: 74%;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.left-CN {
	width: 35%;
	height:	100%;
	padding: 0px;
	margin: 0px;
	position: relative;
}

.right-CN {
  width: 64%;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.left-pane {
	width: 70%;
	padding: 0px;
	margin: 0px;
	position: relative;

}

.right-pane {
	padding: 0px;
	line-height: 150%;
	position: relative;
	float: right;
	width: 28%;
}

.links-box {
	position: relative;
    border:4px solid grey;
	padding:	5px;
	height: 20%;
}

.right-pane p {

}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.row {
  margin:	0px;
  padding:	0px;
}

.mrow {
  height: 100%;
  overflow: hidden;
  margin:	0px;
  padding:	0px;
}

@media (max-width: 800px) {
  .left-pane { width: 100%; }
  .right-pane { float: left; width: 100%; margin-top: 10px;}
  .left { width: 33% }
  .right { width: 62% }
}


/* Behaviour and style of various div classes */

.cloud { 
   height:100%;
   width:30%;
   float:left;
   text-align:center;
   position: relative;
}

.cloudUK { 
   height:100%;
   width:30%;
   float:left;
   text-align:center;
   position: relative;
}

.cloudUS { 
   height:100%;
   width:30%;
   float:left;
   text-align:center;
   position: relative;
}

.cloudSG { 
   height:100%;
   width:30%;
   float:left;
   text-align:center;
   position: relative;
}

.cloudEurope { 
   height:100%;
   width:45%;
   //max-width: 200px;
   float:left;
   text-align:center;
   position: relative;
}

.cloudChina { 
   height:100%;
   width:45%;
   //max-width: 200px;

   float:left;
   text-align:center;
   position: relative;
}

.cloudEurope a {
	color: grey;
	text-decoration: none;
}

.cloudChina a {
	color: grey;
	text-decoration: none;
}


.cloudUK p{
   //font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.cloudUS p{
   //font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.cloudSG p{
   //font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.cloudSG p{
   //font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.cloudEurope p{
   font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.cloudChina p{
   font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;
}

.onprem-image-div p{
   //font-weight: bold;
   margin-bottom:	0px;
   z-index: 200;
   position: relative;

}

.cloud textarea{
   position: relative;
   z-index: 200;
}

.winners-div { 
   height:50%;
   width: 100%;
   float:left;
   text-align:left;
   padding:	5px;
}

.onprem-spacer-div { 
   display: block;
   overflow: hidden;
   height:	110px;
   width: 100%;
}

.onprem-div {
   height: 50%;
   width: 100%;
   float:left;
   text-align:center;
}

.onprem-image-div {
   max-width: 70%;
   text-align:center;
   margin:0 auto;
   position: relative;
}

.logo-image-div {
   text-align:center;
   height: 40px;
   width: 80%;
   margin:0 auto;
}

.cloud-image-div {
   text-align:center;
   width: 80%;
   margin:0 auto;
   position: relative;
   z-index: 50;
}

.cloud-spacer-div { 
   display: block;
   overflow: hidden;
   height:20%;
   width: 100%;
}

.bus-image-div {
   text-align:center;
   width: 50%;
   margin:0 auto;
   z-index: 900;
   position: absolute;
   top: 55%;
   left: 30%;
}


.uk-sol-bus-image-div {
   text-align:center;
   width: 70%;
   margin:0 auto;
   z-index: 500;
   position: absolute;
   top: 5%;
   left: 15%;
   z-index: 1;
}


/* Responsive layout - forget the flags if no space for them */
//@media (max-width: 1000px) {
  //.flag-sprite { display: none; }
  //#timestamp { height:2em; width:8em; }
//}

/********************************************************/