.page-wrap {
  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
position:relative;
	    width: 100%;
    height: 100%;
	
	font-family:  Verdana;
	color: darkgray;
	
	
	
 }

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

	width: 60%;
	height: 25%;
  -moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */
/* position:absolute; top: 50%;left:calc(0 + 2em);height: 30%;*/
  background: white;
	position: fixed;top:calc( 60% );
	
	font: bold 2em;
	font-size: x-large;
  padding: 1em;
	text-align: right;
}

.main-sidebar {
  -webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  -ms-flex-order: 3;              /* TWEENER - IE 10 */
  -webkit-order: 3;               /* NEW - Chrome */
  order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* Firefox 19- */
  
	border-left-color: darkgrey;
	border-left-width: 2px;
	border-left-style: solid;
	
	
	width:100%;
	height: 25%;
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */

	font-size: small;
	
  background: #ffffff;
	position: fixed;top:calc( 60% );left:60%;
	
}

.page-footer {
  -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  -ms-flex-order: 1;              /* TWEENER - IE 10 */
  -webkit-order: 1;               /* NEW - Chrome */
  order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* Firefox 19- */
/*  height: 10%;                      For OLD syntax, otherwise collapses. */
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;  
	font-family:  Verdana;
	color: lightgray;
	
	text-align: center;
	
/*position:absolute; bottom:0;	*/
  position: fixed; 	bottom: 0; height: 10%; width: calc(100% );
	
  background: #FFFFFF;
}

.page-header {
  -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 5;      /* OLD - Firefox 19- */
  -ms-flex-order: 5;              /* TWEENER - IE 10 */
  -webkit-order: 5;               /* NEW - Chrome */
  order: 5;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* Firefox 19- */
                      /* For OLD syntax, otherwise collapses. */
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
/*  position: absolute; top: 0;width: calc(100% - 5em);*/
	position: fixed; 	top: 0; height: 100%; width: calc(100% );
  background: #FFFFFF;
}

.page-header,
.main-content,
/*.main-sidebar,*/
.page-footer{
  padding: 1em;
}

body {
/*  padding: 2em;*/
  background: #79a693;
	
}
* {

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

.links li {
	padding-left: 1px;
	padding-bottom: 7px;
	list-style-type: none;
	
	
	
	
	
}

.links li .email  {
	background: url(images/email.png) left center no-repeat;
	background-size: 20px 20px;
	padding-left: 26px;
	
	
}

.links li .phone { 
	background: url(images/phone.png) left center no-repeat;
	padding-left: 24px;
	background-size: 18px 18px;
	
}

.links li .linkedin { 
	background: url(images/linkedin.png) left center no-repeat; 
	padding-left: 24px;
	background-size: 18px 18px;
	
}

.links li .web { 
	background: url(images/web.png) left center no-repeat; 
	padding-left: 24px;
	background-size: 18px 18px;
	
}

.links li .webdev { 
	background: url(images/web_dev.png) left center no-repeat; 
	padding-left: 24px;
	background-size: 18px 18px;
	
}

a:link {
  color: darkgray;
	 text-decoration: none;
}

a:hover {
  color: grey;
	font-weight: bold;
	 text-decoration: none;
}

a:visited {
  color: darkgray;
	 text-decoration: none;
}

.ioDateTime{
	font-size: xx-small;
	text-align: right;
	font-family:  Verdana;
}

.ioValue{
	font-size: large;
	text-align: right;
	font-family:  Verdana;
	font-weight: bold;
}

.ioParameter{
	font-size: x-large;
	text-align: left;
	font-family:  Verdana;
	/*font-weight: bold;*/
}	

div.page-data{
	  -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 4;      /* OLD - Firefox 19- */
  -ms-flex-order: 4;              /* TWEENER - IE 10 */
  -webkit-order: 4;               /* NEW - Chrome */
  order: 4;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;               /* Firefox 19- */
                      /* For OLD syntax, otherwise collapses. */
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
/*  position: absolute; top: 0;width: calc(100% - 5em);*/
	position:absolute; ; 	top: 150px; height: 100px; width: calc(100% );
  background: #FFFFFF;
	text-align: right;
	
	width: 100%;
	
	
}

 table.ioTable{
	margin-right: 20px;
	margin-left: auto;
	 
	
}