/* color scheme: top (220,71%,77%)=3967c4; button (220;52%,91%)=7098e8; block (220,23%,93%)=b7c9ed */

/* smallest devices */
	.main{
		width: 100%;
		padding-left:8px;  
		padding-right:8px;
	}
	.header{
		width: 100%; 
		margin-top:0px;
	}
	.picture-right{
		width:min(100%, 490px);  /* 490px is width of photo; update it otherwise */
	}
	.address-left{
		margin-top:10px;
		margin-left:12px;
		width:100%;
	    float: left;
	}
	.fullNobullet ul {
		padding-left: 10px;
		padding-right: 10px;
	}
	.info {
		padding-left: 15px;
	}
	.newscontainer{
		float:none;   
		width: 100%;
	}
	.twitter-timeline-container {
		float:none;
		width:100%;
		height:500px;
		overflow:auto;
	}
	#news-and-twitter {
		margin-top: 35px;
	}
	.button-container{
		display:flex;
		flex-flow:column;
		justify-content: flex-start;
		align-items:stretch;
		margin-left:12px;
	}
.coursenumber {display:none}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
   The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media only screen and (max-width: 760px) {
  .menu a:not(:first-child) {display: none;}
	/*.menu .menubutton {display: none;}*/
	.menu a.menuselected {display:block}
	.menu a.icon {
    float: right;
    display: block;
  }
  .menu.responsive {position: relative;}
  .menu.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.blankblockshow{display: none}
	.menu a.menufirst {
		/*background-color: #ebd4ae; 
		color: #585858;*/
	}
}

@media only screen and (min-width: 760px) {
	.picture-right{
	   width: min(calc(100% - 290px), 490px);
	   float: right;		
	}
	.address-left{
/*		margin-top:calc(( (23 * (100vw - 760px)) / (880px - 760px) ) + 10px); */
		margin-top:55px;
		width:280px;
	    float: left;
		padding-left:.5em;
		margin-left:0px;
	}
	.blankblockshow{display: block}
/*	.blankblockshow{display: none} */
	.info { padding-left: 35px; }
	.info .info {padding-left: 20px}
	.menu a.menufirst {
		/*background-color: #6f98e8;
		color: white; */
		background-color: white;
		color: #6f98e8;
	}
	.newscontainer{
		float:left;   
		width: 49%;
	}
	.newsbox{
		height:326px;
	}
	.twitter-timeline-container {
		float:right; 
		width:49%;
		height:326px;
		overflow: auto;
	}
	#news-and-twitter {
		margin-top: 15px;
	}
	.button-container{
		display:flex;
		flex-flow:row nowrap;
		justify-content: space-between;
		gap: 10px;
		margin-left:0px;
	}	
	.coursenumber{display:inherit}
	.picture-body {
		width: 88%;
	}
}
@media only screen and (min-width: 820px) {
	.address-left{
		margin-top:75px;
	}
	.picture-right{
		padding-top:14px;
	}
	.main{
		   width: 820px; /* was 820 */
		   padding-left:24px;  
		   padding-right:24px;
	}
	.header{
			width: 820px; /* was 820 */
   			margin-top:12px;
	}
	.menu{
			margin-left: 12px;
	}
	.fullNobullet ul {
		padding-left: 1em;
		padding-right: .88em;
	}
}

@media only screen and (min-width: 1565px) { /* my laptop is 1266 wide at zoom 100%. 1407 at zoom 90% */
	.newscontainer{float:none;   width: 100%;}
	.twitter-timeline-container {
		position:absolute;
		top:18px;
		left:850px;
		width:285px;
		padding-right:22px;
		height:1662px;
		overflow: auto;
	}
	.newsbox{
		height:auto;
	}
	#news-and-twitter {
		margin-top: 15px;
	}
}

html {overflow-y: scroll;}  /* prevents v-scroll bar from disappearing on short pages, which causes horizontal shift to the column */
@font-face{
	font-family: 'Whitney';
	src: local('Whitney');
}
body { 
	/*font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-family:  Cambria, Georgia; /* national post uses Georgia; Times uses Garamond */
	/*font-family: "Lato Extended","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-family:  Cambria, Georgia; /* national post uses Georgia; Times uses Garamond */
	font-family: 'Whitney SSm A','Whitney SSm B','Open Sans',Arial,sans-serif;
    font-weight: 200;
    -webkit-font-smoothing: antialiased;
	font-smooth:auto;
	margin:0;
	padding:0;
	text-align:center;
	background:#ecf1f9;
}
a:visited    { 
	color: #476db6; /* previously #2e5299; #3B65BA; 3967c4; 365799 */
    text-decoration:underline;
    text-decoration:none;
}
a:link  {
	/*color: #2e5299; */
	color: #476db6;
    text-decoration:underline;
    text-decoration:none;
}
a:link:hover  {
/*	color: #2e5299; */
	text-decoration:underline;
}
a:visited:hover  {
/*	color: #2e5299; */
	text-decoration:underline;
}

.menu {
	background-color: #6f98e8; /* previously: #3967c4; */
	overflow: hidden;
/*	margin-left: 1px;*/
}

.menu a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 16px;
	color: white;
	background-color: #6f98e8;
	font-weight: bold;
	/*font-family: Cambria, Georgia;*/
}

a.menuselected {
	background-color: white;
	color: #6f98e8;
}

a.menufirst {
	/* defined in the media queries above */
}

a.menubutton,a.menubutton:visited {
	color: white;
}
a.menuselected:hover, a.menufirst:hover {
	text-decoration: none;
}

a.menubutton:hover{
	text-decoration: none;
/*	background-color:#B7C9ED;*/
	background-color: #98B2E3;	
/*	color: #3967c4;*/
}

/* Hide the link that should open and close the topnav on small screens */
.menu .icon {
  display: none;
}

/* http://fontawesome.io */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-bars:before {
  content: "\f0c9";
}

p {
	margin:0;
	padding:0;
}

/* note: padding is added to length measurements (at least in browsers); margins aren't */

.main {  /* main frame that contains everything else. Make sure the footer div is inside main but not full so that the white box goes all the way down to the bottom of page */
   box-sizing: border-box;
	background:#ffffff;
   text-align:left;
   padding-top:10px;
   padding-bottom:0px;
   margin-top:0px;
   margin-bottom:20px;
   margin-left:auto;
   margin-right:auto;
   border-bottom:1px solid #c0c0c0;
   border-left:1px solid #c0c0c0;
   border-right:1px solid #c0c0c0;
   font-size:12pt;
}
.header {
   box-sizing: border-box;
   height: auto;
   background:#3967c4;
	background: #6f98e8;
   padding-left:0px;
   padding-right:0px;
   padding-top: 0px;
   padding-bottom: 0px; 
   margin-bottom: 0px;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   font-size:12pt;
}
.topblock {
	display:none;
   background:#3967c4;
   width: 100%;
   height: 1.3em;
   font-size: 14pt;
   padding-top:5px;
   padding-bottom:9px;
   padding-left:0px;
   padding-right:0px;
   margin:0;
   color:#FFFFFF;
   font-weight: bold;
   font-family:  Cambria, Georgia;
}
.address-left {
   box-sizing: border-box;
   position: relative;
   /*width: 254px;*/
   margin-bottom:0px;
   background:#ffffff;
   z-index:2;
}
.addressFirstLine{
   font-size: 14pt;	
}
.picture-right {
   box-sizing: border-box;
   /*width:501px;*/
   margin-top:0px;
   margin-bottom:0px;
   margin-left:0px;
   margin-right:0px;
   background:#ffffff;
   padding-left:0px;
   padding-bottom: 0px; 
   padding-right:0px;
}
.picture-body {
	margin-left:auto;
}
.picture-caption {
	padding-top:-10pt;
	color:silver;
	font-size:6pt;
	font-style:italic;
	float:right;
}
.footer { /* the page needs to end with this, as <p class="footer"> */
    box-sizing: border-box;
	position: relative;
    width: 100%;
    color:#808080;
    text-align:center;
    font-size:7pt;
    font-style:italic;	
    padding-top:10px;
    padding-bottom:0px;
    margin-bottom:0px;
	line-height: 400%;
}
.full { /* text inside the main frame. */
   box-sizing: border-box;
	position: relative;
   float: left;
   width: 100%;
   padding-top:12px;
   padding-bottom:0px;
   padding-left:0;
   padding-right:0;
   margin-top:0px;
   margin-bottom:0px;
   margin-left:0;
   margin-right:0;
   z-index:1;
}
.full-morespace { /* text inside the main frame. */
   box-sizing: border-box;
	position: relative;
   float: left;
   width: 100%;
	line-height: 150%;
   padding-top:16px;
   padding-bottom:0px;
   padding-left:0;
   padding-right:0;
   margin-top:0px;
   margin-bottom:0px;
   margin-left:0;
   margin-right:0;
   z-index:1;
}
.morespace{
	line-height:150%;
}
.fullNobullet { /* text inside the main frame. */
   box-sizing: border-box;
	position: relative;
   float: left;
   width: 100%;
   padding-top:12px;
   padding-bottom:12px;
   padding-left:0;
   padding-right:0;
   margin-top:0px;
   margin-bottom:0px;
   margin-left:0;
   margin-right:0;
   z-index:1;
}
.title {  /* inside Full */
   box-sizing: border-box;
	font-size:18pt;
   font-weight:bold;
   width:calc(100% - 10px);
   padding-bottom:.45em;
}
.subtitle {
   font-size:14pt;
   font-weight:bold;
   width:calc(100% - 10px);
}

.block {
    box-sizing: border-box;
	background:#B7C9ED;
    /*width: 754px; */        /* the negative margins make this 20 bigger than it would be otherwise */
    width: calc(100%+20px);   /* the negative margins make this 20 bigger than it would be otherwise */
	/*height: 35px;*/
    padding-top:8px;
    padding-bottom:8px;
    padding-left:18px;
    padding-right:18px;
    margin:0;
    margin-bottom:10px;
    margin-left:-10px;
    margin-right:-10px;
    color:#454545;
    font-weight:bold;
    font-size:12pt;
    clear:both;
}
.block-collapsible {
	box-sizing: border-box;
	background:#B7C9ED;
	color:#454545;
	width: calc(100%+20px);   /* the negative margins make this 20 bigger than it would be otherwise */
	cursor: pointer;
	border: none;
	text-align: left;
	outline: none;
	/*width: 754px; */        /* the negative margins make this 20 bigger than it would be otherwise */
	/*height: 35px;*/
	padding-top:8px;
	padding-bottom:8px;
	padding-left:18px;
	padding-right:18px;
	margin:15px;
	margin-bottom:10px;
	margin-left:-10px;
	margin-right:-10px;
	font-weight:bold;
	font-size:12pt;
	clear:both;
}
.block-collapsible:hover {
  background-color: #E2E9F5;
}
.block-collapsible:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 150%;
  float: right;
  margin-top:-4.5px;
  margin-left: 5px;
}

.active:after {
  content: '\2013'; /* Unicode character for "minus" sign (-) */
  font-size: 150%;
  float: right;
  margin-top:-4.5px;
  margin-left: 5px;
}
.collapsible-content{
	display:none;
	overflow:hidden;
	margin-bottom:12px;
}

.info {  /* for teaching info box */
}
.info .info a {
	font-size: small;
}
.miniblock {
/*	background:#dfe5f2;*/
	border-style: solid;
	border-width: thin;
    border-color:#CCD8EC; /*hsla(202,60%,90%,1.00);*/
    background-color: #F7F9FC; /*hsla(202,58%,90%,0.20);*/
	color:#555555;
	font-size:10pt;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	float: left;
	border-radius: 2em;
	margin-right:3px;
	margin-bottom:3px;
}
.miniblock:hover {
   background:#B7C9ED;
   background-color: #E2E9F5; /*hsla(202,60%,90%,1.00);*/
   cursor: pointer;
}
.miniblock a:visited {
   color:#555555;
   text-decoration:none;
}
.miniblock a:link {
   color:#555555;
   text-decoration:none;
}
.miniblock a:hover  {
   color:#383838;
	background-color: #E2E9F5; /*hsla(202,60%,90%,1.00);*/
   text-decoration:none;
}
.twohi {
	padding-top:10px;
	padding-bottom:9px;
}
.shadedblock {
   background:#B7C9ED;
   background:#ffffb8;
   background:#ffffb2;
   color:#555555;
   font-size:10pt;
   padding-top:2px;
   padding-bottom:2px;
   text-align:center;
	float:left;	
	border-style: solid;
	border-width: thin;
    border-color:#CCD8EC; /*hsla(202,60%,90%,1.00);*/
	padding-left:8px;
	padding-right:8px;
	border-radius: 2em;
	margin-right:3px;
	margin-bottom:3px;

}
.shadedblock:hover {
   background:#7098e8;
   background:#ffff99;
   background:#ffff8c;
   cursor: pointer;
}
.shadedblock a:visited {
   color:#555555;
   text-decoration:none;
}
.shadedblock a:link {
   color:#555555;
   text-decoration:none;
}
.shadedblock a:hover {
   color:#383838;
   text-decoration:none;
}
.blankblock {
   font-size:10pt;
   padding-top:2px;
   padding-bottom:2px;
   padding-left:5px;
   padding-right:5px;
	float:left;
}
.blankblockshow {
   font-size:10pt;
   padding-top:2px;
   padding-bottom:2px;
   padding-left:5px;
   padding-right:5px;
	float:left;
}
.pubimg {
	border:0;
	width:1em;
	height:1em;
	margin-top:2px;
	margin-bottom:2px;
	margin-right:4px;
	vertical-align:bottom;
}
.fullNobullet ul {
	/*width:740px;*/
	box-sizing: border-box;
	width:100%;
	list-style-type: none;
	margin:0;
	padding:0;
	margin-bottom:6pt;
}
.fullNobullet ul li {
	/*width:740px;*/
	/*box-sizing: border-box;*/
	/*width:100%;*/
	width:100%;
	margin-bottom: 18pt;
}
.fullNobullet ul ul {
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: .5em;
	margin-right: 0em;
	padding-left: .5em;
	padding-right: 2.9em;
	/*width:665px;*/
	box-sizing: border-box;
	width:100%;
}
.fullNobullet ul ul li {
	margin-bottom:0pt;
	/*width:665px;*/
	box-sizing: border-box;
	width:100%;
	background-image:url(images/arrow.png);
	background-position: 0 .25em;
	background-repeat:no-repeat;
	padding:0 0 0 18px;
}
.fullNobullet ul ul li img {
	border:0;
	width:1em;
	height:1em;
	margin-top:2px;
	margin-bottom:2px;
	margin-right:4px;
	vertical-align:bottom;
}
.fullNobullet ul ul ul {
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: .5em;
	padding-left: .5em;
	/*width:625px;*/
	box-sizing: border-box;
	width:100%;
}
.full ul {
	margin-left:1em;   /* otherwise it messes up by inheriting these values from the definition of full */
	padding-left:1em;
	padding-right:49px;
	/*width:705px;*/
	box-sizing: border-box;
	width:100%;
}
.full ul ul {
	/*width:665px;*/
	box-sizing: border-box;
	padding-right:24px;
	width:100%;
}
.full ul ul ul {
	/*width:625px;*/
	box-sizing: border-box;
	width:100%;
	padding-right:24px;
}

.listSpacer {
	/*width:770px;*/
	width:100%;
	margin:0;
	padding:0;
	height:1px;
	margin-top:-8px;
	clear:both;
}

.twitter-timeline-container
{
	/* all in media queries */
}
.newscontainer {
   padding-top:6px;
   padding-bottom:12px;
/*   padding-left:10px;
   padding-right:10px; */
   margin-top:0px;
   margin-bottom:12px;
   margin-left:0;
   margin-right:0;
   z-index:1;
}

.newsbox { /* news box */
   padding-top:0px;
   padding-bottom:0px;
   padding-left:0;
   padding-right:0;
   margin-top:0px;
   margin-bottom:-6px; 
   margin-left:0;
   margin-right:0;
	border-radius:0.5em;
   z-index:2;
   background-color:#ecf1f9;
   border:1px solid #c0c0c0;
   font-size:10pt;
}
.newstitle
{
	background-color:#B7C9ED;
	font-size: 10pt;
	font-weight:bold;
	font-style:italic;
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	margin-left:-1px;
	margin-top:-1px;
	margin-right:-1px;
	z-index:-1;
	padding:2px;
	border:1px solid #c0c0c0;
	border-bottom-style:none;
	padding-left:13.5px;
}
.newsbox ul {
	/*width:740px;*/
	box-sizing: border-box;
	width:100%;
	list-style-type: none;
	margin:0;
	padding:0;
	padding-left: 1em;
	padding-right: 1em;
	margin-bottom:0pt;
}
.newsbox ul li {
	/*width:740px;*/
	box-sizing: border-box;
	width:100%;
	padding-top: 4pt;
	padding-bottom: 4pt;
}
.newsbox ul ul {
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: .5em;
	margin-right: 0em;
	padding-left: .5em;
	padding-top:3pt;
	/*width:710px;*/
	box-sizing: border-box;
	width:100%;	
}
.newsbox ul ul li {
	margin-bottom:0pt;
	/*width:710px;*/
	box-sizing: border-box;
	width:100%;	
	background-image:url(images/arrow-trans.gif);
	background-position: 0 .25em;
	background-repeat:no-repeat;
	padding:0 0 0 18px;
	z-index:3;
}
.newsbox ul ul ul {
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: .5em;
	padding-left: .5em;
	/*width:670px;*/
	box-sizing: border-box;
	width:100%;
}
.course-details {
	margin-left: 2em;
	margin-top: -.4em;
	margin-bottom:.4em;
}
.books-left{
	float:left;
	width:calc(100% - 120px);
}
.books-right{
	float:right;
	width:115px;
}
.borderlesstbl {
	border-collapse: collapse;
	border-spacing: 0;
	border-width: 0;
	background-color: #FFFFFF;
	table-layout: fixed;
	vertical-align: top;
}
.borderlesstbl td {
	padding: 0px;
	padding-top:2px;
	padding-bottom:5px;
	padding-right:3px;
	vertical-align: top;
}
.borderlesstbl td:first-child {
	padding-left: 10px;
	vertical-align: top;
}
.borderlesstbl td:last-child {
	padding-right: 5px;
	vertical-align: top;
}
.borderlesstbl tr{
	vertical-align: top;
}

.fancytbl {
	border-collapse: collapse;
	border-spacing: 0;
	border-width: 0;
	background-color: #FFFFFF;
	table-layout: fixed;
	vertical-align: top;
}
.fancytbl td {
	padding: 0px;
	padding-top:2px;
	padding-bottom:1px;
	vertical-align: top;
}
.fancytbl td:first-child {
	padding-left: 10px;
}
.fancytbl td:last-child {
	padding-right: 5px;
}
.fancytbl tr:first-child {
	color: black;
	font-weight: 700;
	font-style: normal;
	border-left-style: none;
	border-right-style: none;
	border-top: 1.5pt solid windowtext;
	border-bottom: 1.0pt solid windowtext;
	padding-left: 1px;
	padding-right: 1px;
	padding-top: 2px;
	height: 22px;
}
.fancytbl tr{
	vertical-align: top;
}
.shadedrow{
	background-color: #ECF1F9;
}
.fancytbl tr:last-child {
	vertical-align: bottom;
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
	border-bottom: 1.5pt solid windowtext;
	padding-left: 1px;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 5px;
}
.centering {
	text-align: center;
}
.smallfont {
	font-size: small;
}
.tinyfont {
	font-size: x-small;
}
.courses {
	border:0;
	table-layout: fixed;
}
.courses tr {
	line-height: 20px;
}
.courses tr td:first-child {
	font-weight: bold;
	text-align:right;
	white-space: nowrap;
	vertical-align: top;
	padding-right: 8px;
}
.coursenumber {
	font-size: 65%;
	opacity: 0.6;
	font-weight:100;
}
.coursenumber::before {content:"("}
.coursenumber::after {content:")"}
a.ellipse{
	flex-shrink: 1;
	height: 1.3em;
    width: 165px;
	max-width: 250px;
    border-radius: 2em;
	border-width:thin;
	padding-top:.15em;
	padding-left:0.6em;
	padding-bottom:.2em;
	margin-top:.65em;
	text-decoration:none;
	cursor:pointer;
}
/*
ellipse:first-child {
	margin-left:-.4em;
}
ellipse:last-of-type {
	margin-right:0px;
}
*/
a.ellipse:hover{ text-decoration:none; }

a.ellipse-red{
	border-color: #F3DBD9; /* border-color: hsla(5,50%,90%,1.00); */
	border-style: solid;
	background-color: #FDF8F8; /*background-color: hsla(5,50%,90%,0.20);*/
}
a.ellipse-red:hover{
	background-color: #F3DBD9; /* background-color: hsla(5,50%,90%,1.00);*/
}
a.ellipse-green{
    border-color:#D9F3D9; /* hsla(120,50%,90%,1.00); */
	border-style: solid;
    background-color: #F8FDF8; /*hsla(120,50%,90%,0.20);*/
}
a.ellipse-green:hover{
    background-color: #D9F3D9; /*hsla(120,50%,90%,1.00);*/
}
a.ellipse-blue{
    border-color: #D7EAF5; /*hsla(202,60%,90%,1.00);*/
	border-style: solid;
    background-color: #F7FBFD; 
	background-color: hsla(217,52%,95%);
	/*hsla(202,58%,90%,0.20);*/
}
a.ellipse-blue:hover{
    background-color: #D7EAF5; /*hsla(202,60%,90%,1.00);*/
}
a.ellipse-yellow{
    border-color: #F8E9D4; /*hsla(36,70%,90%,1.0);*/
	border-style: solid;
    /*background-color: hsla(36,70%,90%,0.20); */
	background-color: #FEFBF7; /* hsl(34, 78%, 98%);*/
}
a.ellipse-yellow:hover{
    background-color: #F8E9D4; /*border-color: hsla(36,70%,90%,1.0);*/
}
a.ellipse-lblue{
    border-color:#CCD8EC; /*hsla(202,60%,90%,1.00);*/
	border-style: solid;
    background-color: #F7F9FC; /*hsla(202,58%,90%,0.20);*/
}
a.ellipse-lblue:hover{
    background-color: #E2E9F5; /*hsla(202,60%,90%,1.00);*/
}
a.ellipse-smaller{
	font-size: 95%;
	padding-top:.2em;
	padding-bottom:.3em;
}

/*
a.ellipse-red{
    background-color: hsla(5,50%,90%,1.00);
}
a.ellipse-red:hover{
	background-color: hsla(5,50%,90%,.60);
}
a.ellipse-green{
    background-color: hsla(120,50%,90%,1.00);
}
a.ellipse-green:hover{
    background-color: hsla(120,50%,90%,.60);
}
a.ellipse-blue{
    background-color: hsla(202,60%,90%,1.00);
}
a.ellipse-blue:hover{
    background-color: hsla(202,60%,90%,.60);
}
a.ellipse-yellow{
    background-color: hsla(47,85%,90%,1.00);
}
a.ellipse-yellow:hover{
    background-color: hsla(47,85%,90%,.60);
}
*/

/*https://fdossena.com/?p=html5cool/buttons/i.frag
 a.recbutton{
 display:inline-block;
 padding:0.35em 1.2em;
 border:0.1em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 border-radius:0.12em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.2s;
}
a.recbutton:hover{
 color:#000000;
 background-color:#FFFFFF;
}*/
/*@media all and (max-width:30em){
 a.recbutton{
  display:block;
  margin:0.4em auto;
 }
}*/