/* Social Share Styles */

@font-face {
	font-family:'FontAwesome';
	src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.eot?v=4.5.0');
	src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
	font-weight:normal;
	font-style:normal;
}

.socialShare{
    display:inline-block;
}
.socialShare>span.title{
	display:none;
}
.socialShare>a{
    display:inline-block;
    background-repeat:no-repeat;
    background-position: center center;
    text-indent:-5000px;
    vertical-align:-25%;
    opacity:1;
	text-decoration:none;
}
.socialShare>a:hover{
    opacity:.75;
}
.socialShare>a:hover{
    opacity:1;
}
.size16{
    height:16px;
    font-size:10px;
    line-height:16px;
}
.size16>a{
    height:16px;
    width:16px;
    overflow:hidden;
    margin-left:3px;
}
.size24{
    height:24px;
    font-size: 24px;
    line-height:24px;
}
.size24>a{
    height: 32px;
    width: 32px;
    overflow:hidden;
    margin-left:3px;
}
.size32{
    height:32px;
    font-size:24px;
    line-height:32px;
}
.size32>a{
    height:32px;
    width:32px;
    overflow:hidden;
    margin-left:3px;
}
.size48{
    height:48px;
    font-size:32px;
    line-height:48px;
}
.size48>a{
    height:48px;
    width:48px;
    overflow:hidden;
    margin-left:3px;
}
.socialShare>a{
    text-indent:-5000px;
    background-image:none;
    color: #bbbbbb;
    padding:0px;
    background-color:#666;
    background-color:rgba(0,0,0,.25);
    border-radius:3px;
    position:relative;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
	-
    transition: all .2s ease-in-out;
}
.socialShare>a:hover{
	color:#000;
	background-color:rgba(255,255,255,.75);
}

.socialShare>a:before {
	display:none;
}
.socialShare>a:before {
	content:"";
	font-family: FontAwesome;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	opacity:.75;
	position:absolute;
	display:block;
	font-size:.75em;
	left:50%;
	top:50%;
	text-indent:0px;
	padding:5px;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.socialShare>a:hover:before {
	opacity:1;
}
.socialShare>a.twitterShare:before {
	content: "\f099";
}
.socialShare>a.tumblrShare:before {
	content: "\f173";
}
.socialShare>a.stumbleuponShare:before {
	content: "\f1a4";
}
.socialShare>a.redditShare:before {
	content: "\f281";
}
.socialShare>a.pinterestShare:before {
	content: "\f231";
}
.socialShare>a.linkedinShare:before {
	content: "\f0e1";
}
.socialShare>a.googleplusShare:before {
	content: "\f0d5";
}
.socialShare>a.instagramShare:before {
	content: "\f16d";
}
.socialShare>a.youtubeShare:before {
	content: "\f16a";
}
.socialShare>a.facebookShare:before {
	content: "\f09a";
}
.socialShare>a.emailShare:before {
	content: "\f0e0";
}
.socialShare>a.diggShare:before {
	content: "\f1a6";
}

/* Custom style for colored hovers, add 'coloredhover' or 'colored' class to parent */
.coloredhover .socialShare>a:hover, .colored .socialShare>a{
	color:#fff;
}
.coloredhover .socialShare>a.facebookShare:hover, .colored .socialShare>a.facebookShare{
	background-color:#3B5998 !important;
}
.coloredhover .socialShare>a.googleplusShare:hover, .colored .socialShare>a.googleplusShare{
    background-color:#D34836 !important;
}
.coloredhover .socialShare>a.instagramShare:hover, .colored .socialShare>a.instagramShare{
    background-color:#D34836 !important;
}
.coloredhover .socialShare>a.youtubeShare:hover, .colored .socialShare>a.youtubeShare{
    background-color:#D34836 !important;
}
.coloredhover .socialShare>a.twitterShare:hover, .colored .socialShare>a.twitterShare{
    background-color:#00aced !important;
}
.coloredhover .socialShare>a.linkedinShare:hover, .colored .socialShare>a.linkedinShare{
    background-color:#2768A8 !important;
}
.coloredhover .socialShare>a.tumblrShare:hover, .colored .socialShare>a.tumblrShare{
    background-color:#2c4762 !important;
}
.coloredhover .socialShare>a.diggShare:hover, .colored .socialShare>a.diggShare{
    background-color:#000000 !important;
}
.coloredhover .socialShare>a.redditShare:hover, .colored .socialShare>a.redditShare{
    background-color:#F3723F !important;
}
.coloredhover .socialShare>a.stumbleuponShare:hover, .colored .socialShare>a.stumbleuponShare{
    background-color:#EF4916 !important;
}
.coloredhover .socialShare>a.pinterestShare:hover, .colored .socialShare>a.pinterestShare{
    background-color:#cb2027 !important;
}
.coloredhover .socialShare>a.emailShare:hover, .colored .socialShare>a.emailShare{
    background-color:#ff6600 !important;
}

/* Custom style for rounded look, add 'rounded' class to parent */

.rounded .socialShare>a{
	padding:5px;
	border-radius:100px;
}


/* Custom style for zoom in logos, add 'zoomed' class to parent */

.zoomed .socialShare>a:before{
	font-size:1.25em;
}

/* Custom style for button styled share element, add 'button' class to parent */

.button .socialShare{
	border-radius:5px;
	background: #dedee3;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlZGVlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYmNjZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #dedee3 0%, #ffffff 50%, #cbccd0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedee3), color-stop(50%,#ffffff), color-stop(100%,#cbccd0));
	background: -webkit-linear-gradient(top,  #dedee3 0%,#ffffff 50%,#cbccd0 100%);
	background: -o-linear-gradient(top,  #dedee3 0%,#ffffff 50%,#cbccd0 100%);
	background: -ms-linear-gradient(top,  #dedee3 0%,#ffffff 50%,#cbccd0 100%);
	background: linear-gradient(to bottom,  #dedee3 0%,#ffffff 50%,#cbccd0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedee3', endColorstr='#cbccd0',GradientType=0 );
	padding-left:.5em;
	color:#666;
	color:rgba(0,0,0,.4);
	overflow:hidden;
	box-shadow:1px 1px 3px rgba(0,0,0,.25);
	text-shadow:1px 1px 3px rgba(255,255,255,1);
}
.button .socialShare>a{
	margin-left:0;
	border-radius:0;
	border-left:1px #ccc solid;
	border-left:1px rgba(0,0,0,.15) solid;
	background-color:transparent;
	color:#666;
	color:rgba(0,0,0,.5);
	float:left;
}
.button .socialShare>span.title{
	float:left;
	margin-right:.5em;
	font-size:.7em;
	display:inline;
	text-transform:lowercase;
	font-weight:bold;
}
.button .socialShare>a:hover{
	text-shadow:none;
}
.button .socialShare>a:first-child{
	margin-left:.5em;
}

/* Custom style for button styled share element, add 'button' class to parent */
.names .socialShare>a{
	text-indent:30px;
	width:auto;
	padding-left:0px;
	padding-right:10px;
	font-size:.75em;
}
.names .socialShare>a:before{
	left:0;
	top:0;
	-webkit-transform:translate(0,0);
	-moz-transform:translate(0,0);
	-ms-transform:translate(0,0);
	transform:translate(0,0);
	width:20px;
	text-align:center;
	font-size:1em;
	line-height:1em;
}

/* END: Social Share Styles */

/***********Library page styling, not for use in implemenation****************/
.example {
    text-align: center;
    width: 60%;
    margin: 20px auto;
}