/** CSS for visualization player **/

/** purple: #9057c7 or #9055c9 ? **/
/** or gray: #999999 **/

/*********************************************************************************************/
/********************************************************************* Player Globals ********/
/*********************************************************************************************/

#player-content
{
  background: #fff;
}

#player-action-buttons a,
#player-action-buttons .flag-profilefavorite
{
	margin-bottom: 3px;
}
#player-controls * a:hover,
#player-controls * a.active
{
	color: #9057c7 !important;
}

#player-action-buttons .flag-throbber {
	display: none;
}

/********************************************************************* sprite buttons **/

.sprite-button,
#player-action-buttons .flag-profilefavorite
{
	display: block;
	cursor: pointer;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-image: none;
	background-color: #222;
	opacity: .9;
}
.sprite-color-secondary
{
	background-color: #bbb;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}

.player-minimize-bar,
.player-maximize-bar,
.player-close-fullscreen
{
}

.sprite-button:hover,
.sprite-button.active,
#player-action-buttons .flag-profilefavorite:hover
{
	background-color: #9057c7;
}

.sprite-size-normal,
.sprite-size-normal .sprite,
#player-action-buttons .flag-profilefavorite,
#player-action-buttons .flag-profilefavorite a
{ 
	width: 27px; 
	height: 27px; 
}
.sprite-button .alt
{
	display: none;
}
.sprite-button .sprite,
#player-action-buttons .flag-profilefavorite a
{
	display: block;
	background: url(img/player_buttons_sprites.png) -1000px -1000px no-repeat;
}

.launch .sprite										{ background-position: 0 -104px; }
.launch-magnifier .sprite					{ background-position: 0 -157px; }
.fullscreen .sprite								{ background-position: 0 -260px; }
.player-action-share .sprite			{ background-position: 0 -52px; }
.player-action-download .sprite		{ background-position: 0 -78px; }
.player-minimize-bar .sprite 			{ background-position: 0 -182px; }
.player-maximize-bar .sprite 			{ background-position: 0 -208px; }
.player-close-fullscreen .sprite 	{ background-position: 0 -234px; }

.launch.sprite-color-secondary .sprite									{ background-position: -26px -104px; }
.launch-magnifier.sprite-color-secondary .sprite				{ background-position: -26px -157px; }
.fullscreen.sprite-color-secondary .sprite							{ background-position: -26px -260px; }
.player-action-share.sprite-color-secondary .sprite			{ background-position: -26px -52px; }
.player-action-download.sprite-color-secondary .sprite	{ background-position: -26px -78px; }
.player-minimize-bar.sprite-color-secondary .sprite 		{ background-position: -26px -182px; }
.player-maximize-bar.sprite-color-secondary .sprite 		{ background-position: -26px -208px; }
.player-close-fullscreen.sprite-color-secondary .sprite { background-position: -26px -234px; }

#player-action-buttons .flag-profilefavorite a,
#player-action-buttons .flag-action .sprite
{ 
	background-position: 0 0; 
	text-indent: -5000px;
}
#player-action-buttons .flag-profilefavorite a.unflag-action	{ background-position: 0 -27px; }

/********************************************************************* Share box **/

.share-vis .share-social
{
	float: right;
	margin: 38px 0 0 0;
}
.share-vis .share-license
{
	margin: 7px 0;
}

.share-vis 
{
  position: relative;
  margin: 0;
  padding: 10px;
  background-color: white;
  border:3px # solid;
  overflow: auto;
}

.share-vis .close,
#message-overlay .close
{
  cursor: pointer;
  position: absolute;
  right: 20px;
  top:20px;
  color: #9057c7;
  font-weight:bold; 
}
#message-overlay .close
{
	right: 10px;
	top: 10px;
}

.share-vis .share-title,
.share-vis h6
{
  margin:0px;
  margin-top: 5px;
  font-family: Inspira, Arial, sans-serif;
  font-size: 14px;
}
.share-vis .share-title
{
  font-size: 20px;
}
.share-vis h6
{
	margin-top: 5px;
}

#share-link-code,
#share-embed-code,
#share-email-form
{
  font-size: 12px;
  color: #777;
  font-weight: 100;
  padding: 5px;
  background-color: #F9F9F9;
  border: 1px #EAEAEA solid;
  margin-bottom: 15px;
}
.share-vis code
{
	font-family: 'Monaco', Monaco, monospace;
	font-size: 9px !important;
	line-height: 10px !important;
}

.share-vis .helpLink
{
	font-size: 10px;
	color: #aaa;
	font-weight: 100;
	margin-left: 12px;
}

.share-vis #share-embed-size
{
	font-size: 11px;
	float: right;
	margin: -5px -2px 0 0;
}
.share-mode-fullscreen #share-embed-size
{
	margin-right: 35px;
}
.share-vis #share-embed-size input.form-text
{
	padding: 0 2px;
}

#share-link-copy,
#share-embed-copy{
  display: none;
}

.share-email{
  display: block;
  color: #9057c7 !important;
  background: transparent url("http://www.visualizing.org/sites/all/themes/visualizing/images/purpleRightArrow.png") no-repeat 0px 4px;
  margin-top: 10px;
  padding-left: 20px;
  font-size:15px;
  font-family: Inspira;
  font-weight: bold;
}
#share-email-form
{
	font-size: 13px;
}
#share-email-form .form-label
{
	font-size: 11px;
	text-align: right;
	padding-right: 5px;
}
#share-email-form table
{
	margin-bottom: 0;
	width: 98%;
}
#share-email-form table tbody
{
	border-top: none;
}
#share-email-form table td
{
	padding: 1px;
	vertical-align: top;
}
#share-email-form #form-message
{
	font-weight: bold;
}
#share-embed-size input.form-text,
#share-email-form input.form-text,
#share-email-form textarea
{
	background-color: #ffffff;
}
#share-email-form input.form-text
{
	width: 98%;
}
#share-email-form textarea
{
	width: 95%;
}
#share-email-form .instructions
{
	font-size: 10px;
}

/*********************************************************************************************/
/********************************************************************* Embedded Player *******/
/*********************************************************************************************/

.player-embedded
{
  position: relative;
  width: 100%;
	height: 100%;
}
.player-mode-home
{
	margin-right: 0;
}
.overlay
{
  position: absolute;
  height: 100%;
  width: 100%;
}
.player-embedded #player-overlay 
{
  z-index: 10;
}
.player-embedded #share-overlay 
{
  z-index: 20;
  display: none;
}
.player-embedded #message-overlay 
{
  z-index: 30;
  display: none;
}

.player-embedded #player-action-buttons,
.player-embedded #player-controls 
{
  position: absolute;
  right:10px;
}
.player-embedded #player-action-buttons
{
  top:10px;
}
.player-embedded #player-controls 
{
  bottom: 45px;
}

.player-embedded #player-content
{
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
	overflow: hidden;
}

/********************************************************************* share, message overlay **/

.player-embedded #share-overlay,
.player-embedded #message-overlay
{
  background: transparent url(img/translucent-gray.png) repeat;
}
.player-embedded #share-overlay .share-vis,
.player-embedded #message-overlay #message-content
{
	margin: 5%;
	position: relative;
  width: 80%;
  height: 75%;
  overflow: auto;
}

.player-embedded #message-overlay #message-content
{
	background: white;
	padding: 25px 15px;
	height: auto;
	margin: 28% 8%;
	font-size: 13px;
	text-align: center;	
}


/********************************************************************* hover overlay **/

.player-embedded #hover-overlay
{
  position: absolute;
  background: transparent no-repeat 217px 100px;
  display: block;
  width: 100%;
  height: 100%;
}
/*
.player-mode-home #hover-overlay
{
  width: 630px;
  height: 354px;
}
*/

/*
a#hover-overlay:hover{
  background-image: url("http://www.visualizing.org/sites/all/themes/visualizing/images/playVisHoverHome.png");
}
.page-front a#hover-overlay{                           
  background-position: 262px 100px;
}
*/


.player-embedded #player-title-bar 
{
  background-color: #222 !important;
  position: absolute;
  max-width: 395px;
  margin-right: 60px;
  top:10px;
  left:10px;
  opacity:.9;
	padding: 5px 9px 7px 7px;
  border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.player-embedded .project-title h2,
.player-embedded .project-title h2 a,
.player-embedded .project-title h2 a:visited,
.player-embedded .project-byline,
.player-embedded .project-byline a, 
.player-embedded .project-byline a:visited
{
	color: #eee;
}
.player-embedded .project-title h2 a:hover,
.player-embedded .project-byline a:hover
{
	color: #9057c7;
}

.player-embedded .project-title h2{
	height: auto;
  margin: 0px !important;
  padding: 0px !important;
  font-size: 20px !important;
	line-height: 22px;
	font-weight: 100;  
  text-transform: capitalize !important;
  color:#fff;
  background-color: transparent !important;
}
.player-embedded .project-byline {
	margin-top: 3px;
  font-size: 14px !important;
  font-family: Inspira, Arial, sans-serif;
}
.player-embedded .project-byline a,
.player-embedded .project-byline a:visited {
	font-weight: 100;
}

/********************************************************************* Play controls / logo **/

.player-embedded #player-controls {
	bottom: 13px;
	left: 10px;
}
.player-embedded #player-controls div {
	float: left;
	margin-right: 3px;
}
.player-embedded #player-logo a
{
  text-transform: lowercase;
  color:#fff !important;
  font-weight: 100;
  opacity: .9;
  width: auto;
  margin-top:1px;
  height: 28px;
  line-height: 28px;
  font-size: 15px;
  background: #222;
  background-image: none;
  font-family: Inspira;
  position: static;
  text-indent: 0px;
  padding: 5px 10px 4px 10px;
  border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.player-embedded #player-logo a:hover
{
	background-color: #9057c7;
	color: #fff !important;
}

.player-view-fullscreen .fullscreen{
  background-position: 0 -103px;
}


/*********************************************************************************************/
/********************************************************************* Fullscreen Player *****/
/*********************************************************************************************/


body.page-full-screen{
	background: none;
	background-color: #fff;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.player-fullscreen #frame{
  width:100%;
}

.player-fullscreen #frame body{
  background: #fff;
}

.player-fullscreen #player-top{
	min-height: 12px;
  position: relative;
}

.player-fullscreen #player-top .maximized
{
  height: 60px;
}
.player-mode-embedlaunch #player-top .maximized
{
  height: 38px;
}
.player-fullscreen #player-top .maximized-inner
{
	padding: 6px 25px 0 25px;
}
.player-mode-embedlaunch #player-top .maximized-inner
{
	padding: 4px 6px 0 6px;
}

.player-fullscreen #player-top .minimized
{
  height: 12px;
}

.player-fullscreen #player-top,
.player-fullscreen #player-top-drawer,
.player-fullscreen #player-bottom
{
  background: url(img/stripe-bkg.png) repeat;
}

/********************************************************************* header title, byline **/

.player-fullscreen .project-title h2,
.player-fullscreen .project-byline
{
  margin: 0;
  font-family: Inspira, sans-serif, Arial, Helvetica;
}
.player-fullscreen .project-title h2
{
  padding: 0;
  font-size: 20px;
  background: transparent;
  font-weight: 100;
	height: 25px;
	overflow: hidden;
}
.player-mode-embedlaunch .project-title h2
{
	font-size: 14px;
	line-height: 15px;
	height: 16px;
}

.player-fullscreen .project-byline
{
  font-weight: normal;
  font-size: 16px;
}
.player-mode-embedlaunch .project-byline
{
	font-size: 12px;
}
.player-fullscreen .project-byline a
{
	font-weight: 100;
}

.player-fullscreen .project-title a,
.player-fullscreen .project-title a:visited,
.player-fullscreen .project-byline a,
.player-fullscreen .project-byline a:visited
{
  color: #000;
}
.player-fullscreen .project-title a:hover,
.player-fullscreen .project-byline a:hover
{
	color: #9056C7;
}

/********************************************************************* header action buttons **/

.player-fullscreen #player-action-buttons
{
  float: right;
  margin-top: 9px;
}
.player-mode-embedlaunch #player-action-buttons
{
	margin-top: 0;
}

.player-fullscreen #player-action-buttons a,
.player-fullscreen #player-action-buttons .flag-wrapper
{
  cursor: pointer;
  float: left;
  margin-left: 10px;
}
.player-fullscreen #player-action-buttons .flag-wrapper a
{
	margin-left: 0;
}

.player-fullscreen #player-action-buttons .player-minimize-bar
{
  margin-left: 50px;
}
.player-mode-embedlaunch #player-action-buttons .player-minimize-bar
{
  margin-left: 10px;
}

/************** minimized version **/
.player-fullscreen #player-top .minimized
{
	position: absolute;
	top: 0;
	right: 25px;
}
.player-mode-embedlaunch #player-top .minimized
{
	right: 6px;
}
.player-fullscreen #player-top .minimized a.sprite-button
{
  height: 12px;
  float: left;
  margin-left: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.player-fullscreen #player-top .minimized .player-maximize-bar .sprite
{
	background-position: -26px -215px;
	height: 12px;
}
.player-fullscreen #player-top .minimized .player-close-fullscreen .sprite
{
	background-position: -26px -241px;
	height: 12px;
}


.player-fullscreen #small-player-top {
  height: 10px; 
}
.player-fullscreen #small-player-top .buttons{
  top:0px;
}
.player-fullscreen #small-player-top .button.show-hide{
  height: 10px; 
}
.player-fullscreen #small-player-top .show-hide{
  height: 10px; 
}

.player-fullscreen .hidden{
  height:1px !important;
  max-height:1px !important;
}
.player-fullscreen .hidden *{
  display: none;
}


/********************************************************************* header drawer **/

.player-fullscreen #player-top-drawer
{
	display: none;
	height: auto;
	padding: 10px;
	overflow: hidden;
}
.player-fullscreen #player-top-drawer .share-mode-fullscreen
{
	width: auto;
	float: right;
	margin-top: 0;
}
.player-fullscreen #player-top-drawer .share-mode-fullscreen h6,
.player-fullscreen #player-top-drawer .share-mode-fullscreen #share-title,
.player-fullscreen #player-top-drawer .share-mode-fullscreen #share-link-code,
.player-fullscreen #player-top-drawer .share-mode-fullscreen #share-embed-code,
.player-fullscreen #player-top-drawer .share-mode-fullscreen #share-email
{
	width: 45%;
}
.player-fullscreen #player-top-drawer .share-mode-fullscreen .share-social
{
	position: absolute;
	top: 10px;
	right: 50%;
}
.player-fullscreen #player-top-drawer .share-mode-fullscreen #share-email-section
{
	width: 50%;
	float: right;	
	margin-top: 35px;
}

/********************************************************************* footer **/


.player-fullscreen #player-bottom 
{
	position: absolute;
  text-align: right;
  height: 36px;
  width: 100%;
	bottom: 0;
	left: 0px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.player-mode-embedlaunch #player-bottom
{
	height: 26px;
}
.player-fullscreen #player-bottom-inner
{
	padding: 8px 25px;
}
.player-mode-embedlaunch #player-bottom-inner
{
	padding: 4px 6px 0 6px;
}

#ge-logo-small
{
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	overflow: hidden;
	background: url(img/ge-logo-small.png) center center no-repeat;
	color: transparent;
}

/********************************************************************* embedded launch player **/

.player-embedded .player-embedlaunch
{
	border: 1px solid #ddd;
}

/*********************************************************************************************/
/********************************************************************* Multiple embedded *****/
/*********************************************************************************************/

.player-embedded-multiple-page
{
	background: none;
	background-color: #fff;
	padding: 0;
	margin: 0;
}
.player-embedded-multiple
{
	position: relative;
	margin: 5px;
	width: 500px;
	background-color: #fff;
}
.player-embedded-multiple .bottom-bar
{
	position: relative;
}
.player-embedded-multiple .bottom-bar .title-info,
.player-embedded-multiple .bottom-bar .vis-browse
{
	position: absolute;
	height: 70px;
	overflow: hidden;
}

.player-embedded-multiple .bottom-bar .title-info
{
	width: 150px;
	left: 0;	
}
.player-embedded-multiple .bottom-bar .title-info .gallery-icon
{
	float: left;
	margin: 10px 0 0 3px;
}
.player-embedded-multiple .bottom-bar .title-info h3,
.player-embedded-multiple .bottom-bar .title-info .author
{
	margin-left: 38px;
	font-family: Inspira, Arial, sans-serif;
	color: #555;
}
.player-embedded-multiple .bottom-bar .title-info h3 a,
.player-embedded-multiple .bottom-bar .title-info .author a
{
	color: #222;
}
.player-embedded-multiple .bottom-bar .title-info h3 a:hover,
.player-embedded-multiple .bottom-bar .title-info .author a:hover
{
	color: #9056c7;
}
.player-embedded-multiple .bottom-bar .title-info h3
{
	font-size: 20px;
	line-height: 21px;
	margin-top: 0;
	margin-bottom: 5px;
}
.player-embedded-multiple .bottom-bar .title-info .author
{
	font-size: 12px;
	line-height: 12px;
}

.player-embedded-multiple .bottom-bar .vis-browse
{
	max-width: 350px;
	right: 0;	
}
.player-embedded-multiple .bottom-bar .vis-browse .vis
{
	padding-left: 5px;
}
.player-embedded-multiple .bottom-bar .vis-browse .vis a
{
	display: block;
}
.player-embedded-multiple .bottom-bar .vis-browse .vis a.active
{
	margin-top: 10px;
}
.player-embedded-multiple .bottom-bar .vis-browse .vis img
{
	border: 1px solid #ddd;
}
.player-embedded-multiple .bottom-bar .vis-browse .vis img:hover
{
	border-color: #999;
}

/*********************************************************************************************/
/********************************************************************* Download Page *********/
/*********************************************************************************************/

.page-dl .project-thumbnail
{
	float: left; 
	margin-right: 25px;
}