/* Flashcard Style
--------------------------------------------------------------------------------
   Copyright 2010 Unbound Medicine, Inc.
-------------------------------------------------------------------------------- */
/* 
colors:
=========================================
bilious green - 6EAC2C 
mint green - CFFFD2 
sea foam green - 99BFA2
edit orange - DB5312
========================================= */

div.main#grasp {
  background: none;
  background-color: #c0c0c0;
}

div#flashcards {
  min-height: 450px;
}

div#flashcards h2 {
  position: relative;
  margin: 15px 0 0 8px;
  padding: 0;
  padding-bottom: 3px;
  line-height: 18px;
/*  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;*/
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  color: #005078;
}

div#flashcards h2 p {
  color: #666;
  margin: 0;
}

/* jquery overrides */
.ui-widget-header {
  border: none;
}
.ui-widget-content {
  padding: 0;
}

div.ui-dialog-titlebar span.ui-dialog-title
{
  float: left;
  font-family: Helvetica;
  font-size: 12px;
  line-height: 14px;
}



/* Profile
========================================= */
#profile {
  height: 280px;
}

#profile h2 {
  position: relative;
  margin: 0 0 0 8px;
  padding: 0;
  padding-bottom: 3px;
  line-height: 18px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #005078
}

#profile h2 p {
  color: #666;
  margin: 0;
}


/* Explanatory text and Messaging Areas
========================================= */
div#welcome h3 {
  margin: 0 0 10px 0;
  border-bottom: 1px dashed #666;
}
a.welcome-button {
  background-color: #999;
  border: 2px solid #666;
  color: #666;
  cursor: pointer;
  font-size: 22px;
  line-height: 50px;
  font-weight: bold;
  height: 50px;
  margin: 50px 0 0 0;
  padding: 0;
  width: 200px;
  float: left;
  text-decoration: none;
  text-align: center;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
}
a.welcome-button#welcome-find {
  margin-left: 135px;
  margin-right: 30px;
}
/* Explanatory text and Messaging Areas
========================================= */
p.message-box {
  font-family: verdana;
  font-size: 10px;
  margin: 5px 0;
  color: red;
}
p.message-box#searchMessage {
  margin: 5px 0;
}

p.explanation {
  color: #666;
  font-family:Helvetica;
  font-size: 12px;
  line-height: 19px;
  margin: 0 0 5px 8px;
}
p.explanation.welcome {
  margin-top: 40px;
}
p.explanation.bold {
  font-weight: bold;
  margin-top: 10px;
}
p.explanation a {
  cursor: pointer; 
}

p#search-explanation {
  line-height: 12px;
  position: absolute;
  right: 0;
  top: 2px;
  width: 300px;
  color: #336699;
  font-size: 10px;
  font-family: Helvetica;
  font-style: italic;
}


/* Edit Deck & Cards Dialog
========================================= */

div.manage-deck {
  margin-bottom: 20px;  
}

h3.manageDeckName {
  font-family: arial;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  margin: 0 0 15px 0;
  padding-bottom: 0;
  padding-top: 0;
  color: #003465;
}

p#edit-deck-message-box {
  margin-left: 15px;
}

a#update-deck, a#delete-deck{
  float: right;
  margin: 0;
  width: 100px;
}
a#make-public, a#make-private {
  margin: 0;
  width: 100px;
}

a#update-deck {
/*  position: relative;
  right: 0px;*/
}
a#delete-deck {
  margin-top: 15px;
  width: 120px;
}
a#make-public, a#make-private {
  width: 120px;
  margin: 10px;
}

table.manageCardsList {
  margin: -14px 0 20px 12px;
  border-collapse: collapse;
  border-bottom: 1px solid #666;
  background-color: #666;
  width: 290px;
  font-family: verdana;
}
table.manageCardsList th {
  background-color: #fff;
  font-size: 8px;
  font-color: #666;
  text-align: center;  
}
table.manageCardsList tr {
  border-bottom: 1px solid #fff;
}
table.manageCardsList tr.light-row {
  background-color: #e2ecf4;
}
table.manageCardsList tr.dark-row {
  background-color: #CCDFEA;
}
table.manageCardsList td {
  font-size: 10px;
  padding: 7px;
  vertical-align: middle;
}
table.manageCardsList td.questionCell {
  width: 265px;
}

a.remove, a.preview {
  display: block;
  height: 27px;
  width: 27px;
  background-repeat: no-repeat;
  cursor: pointer;
}
a.preview { background-image: url(../images/edit.png) }
a.remove { background-image: url(../images/delete.png) }

/* Public and My Decks Lists
========================================= */
#closeCreateDeckDialog
{
	width:100px;
	position:absolute;
	right:0;
	top:35px;
	width:100px;
}



div#deck-catalog-wrapper {
  padding: 10px 20px 20px 20px;
}
div#deckCatalog {
  min-height: 300px;
  position: relative;
}

ul.deckList {
  clear: left;
	margin: 0 0 15px 10px;
	padding: 0;
	list-style: none;
}
ul.deckList li {
  position: relative;
  margin: 5px 0 5px 48px;
  padding: 5px 0 5px 0;
  border-bottom: 1px dotted #666;
}

ul.deckList li img.deckType {
  position: absolute;
  top: 7px;
  left: -38px;
}

/* Deck Information
========================================= */
div.deckInfo {
  float: left;
  position: relative;
  width: 505px;
}
div.deckInfo#public-deck-info {
  width: 505px;
}
.decks-table.browse-decks div.deckInfo {
  width: 405px;
}
p.deckDescription {
  clear: left;
  color: #757575;
  float: left;
  font-family: Helvetica;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  margin: 6px 0 6px 0;
  width: 390px;
}
.decks-table li span.more-description {
  display: none;
  float: left;
  font-family: Helvetica;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
}
.decks-table li span.show-more-description {
  display: block;
  float: right;
  }
.decks-table li span.show-more-description a {
  cursor: pointer;
  font-family: Helvetica;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
}

p.deckCreator {
  color: #757575;
  float: left;
  font-size: 12px;
  font-family: Helvetica;
  font-weight: normal;
  line-height: 14px;
  text-align: left;
  width: 116px;
  margin: 22px 0 0 0;
}
p.deckCreator#deck-creator-public {
  left: 415px;
  top: 8px;
}
p.deckManage {
  clear: left;
  float: left;
  margin: 0;
  position: relative;
}
div.deckName {
  color: #1a1a1a;
  cursor: pointer;
  display:block;
  font-family: Helvetica;
  font-size: 15px;
  font-weight: bold;
  height:18px;
}

p.deckName-mydecks {
  color: #1a1a1a;
  float: left;
  font-family: Helvetica;
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
}
.decks-table.browse-decks p.deckName-mydecks {
  cursor: pointer;
  }

.decks-table li span.public-badge, .decks-table li span.private-badge {
  background-color: #e6e6e6;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.);
  color: #707070;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 10px;
  font-family: Helvetica;
  height: 15px;
  line-height: 15px;
  margin: 1px 0 0 8px;
  min-height: 15px;
  padding: 0 8px;
  text-align: center;
  text-decoration: none;
}
.decks-table li span.public-badge {
  background-color: #25893d;
  color: #fff;  
  text-shadow: none;
  }

a.remove-study-deck {
  color: #666;
  cursor: pointer;
}

/* Deck Preview
========================================= */

span.deckName:hover
{
	color:#4cb33c;
	text-decoration:underline;
}


div.ui-dialog.preview-dialog {
  padding: 0;
  background: transparent;
}
div.ui-dialog.preview-dialog.ui-corner-all {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
div.ui-dialog.preview-dialog div.ui-dialog-titlebar.ui-widget-header {
  display: none;
}

div.deck-preview {
  color: #444;
  padding: 5px;
  margin: 0;
  font-size:11px;
  font-family: Helvetica;
  width: 300px;
}
.deck-preview p.preview-cardcount {
  color: #999;
}
.deck-preview p {
  margin: 2px 0;
}
.deck-preview ul {
  margin: 8px 0 0 20px;
}
.decks-table li.deck-preview-card {
  border-bottom: 1px dotted #444;
  margin: 5px 0 5px 0px;
  min-height: inherit;
  padding: 0;
  height: auto;
  line-height: normal;
  list-style-type: none;
  list-style-position: outside;
}
.decks-table.browse-decks li.deck-preview-card {
  width: auto;
}

/* Deck Action - Study, Stats, etc
========================================= */
div.deckActions {
  float: left;
  width: 264px;
}
div.deckActions#public-deck-actions {
  width: 80px;
}
div.deckActions a:hover {
  cursor: pointer;
}

.btn {
  background-image: url(../images/shade.png); 
  background-position: bottom; 
  border-radius: 6px;
  display: block;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: verdana;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 20px;
  height: 20px;
  border-width: 1px;
  border-style: solid;
}

.btnlarge {
  background-image: url(../images/shade.png); 
  background-position: bottom; 
  border-radius: 6px;
  display: block;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: verdana;
  font-size: 12px;
  letter-spacing: 0.1em;
  height: 25px;
  line-height: 23px;
  border-width: 1px;
  border-style: solid;
}

/*.btn.blue { background-color: #0A697B; color: #ffffff; }*/
.btn.blue { background-color: #56A3E1; color: #ffffff; }
.btn.blue:hover { background-color: #16B1CC; }
.btn.blue.selected { background-color: #56A3E1; cursor: default; }

.btnlarge.blue { background-color: #56A3E1; color: #ffffff; }
.btnlarge.blue:hover { background-color: #16B1CC; }

.btn.gray { background-color: #ffffff; border-color: #999999; color: #403b39; }
.btn.gray:hover { background-color: #AFBEC8; border-color: #666666; color: #ffffff; }
.btn.gray.selected { background-color: #AFBEC8; cursor: default; }

.btnlarge.gray { background-color: #ffffff; border-color: #999999; color: #403b39; }
.btnlarge.gray:hover { background-color: #AFBEC8; border-color: #666666; color: #ffffff; }

.btn.grayadd { background-color: #ffffff; border-color: #FFFFFF; color: #666666;}
.btn.grayadd:hover { background-color: #ffffff; border-color: #FFFFFF; color: #666666;}


a.study {
  float: right;
  margin: 12px 30px 0 0;
  width: 70px;
}

a.add-cards {
  float: right;
  margin: 12px 30px 0 0;
  width: 70px;
}

a.in-my-decks {
  display: block;
  position: absolute;
  top: 30px;
  right: 20px;
  height: 32px;
  width: 32px;
  background-image: url(../images/checkbox_checked_20x20.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

div#my-decks {
  background-color: #fff;
  border: 1px solid #cbcfd4;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
  min-height: 500px;
  padding: 20px;
  position: relative;
}

div#my-decks h1 {
  background-image: url(../images/grasp-logo-trans.png);
/*  background-image: url(../images/grasp_logo_suggestion_2.png);*/
  background-repeat: no-repeat;
/*  background-position: bottom left;*/
/*   border-bottom: 1px solid #666;  */
  color: #999;
  font-family: verdana;
  font-size: 26px;
  height: 68px;
  line-height: 35px;
  margin: 0;
  padding: 0;
  position: relative;
}

a#edit-profile-link {
  display: block;
  position: absolute;
  right: 25px;
  top: 88px;
  color: #999;
  cursor: pointer;
/*  font-style: italic;*/
  font-family: verdana;
  font-size: 10px;
  text-decoration: none;
  letter-spacing: 0.030em;
}
a#edit-profile-link:hover {
  text-decoration: underline;
}

a#create-deck, a#add-deck {
  display: block;
  position: absolute;
  bottom: 8px;
  right: 130px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a#add-deck {
  right: 0;
}

a.add-to-list {
  display: block;
  position: absolute;
  top: 30px;
  right: 20px;
  height: 32px;
  width: 32px;
  background-image: url(../images/checkbox_20x20.png);
  background-repeat: no-repeat;
}

a.remove-from-list {
  background-image: url(../images/remove.png);
  background-repeat: no-repeat;
  background-position: 0 2px;
  color: #000;
  cursor: pointer;
  display: block;
  font-family: Helvetica;
  font-size: 12px;
  float: left;
  height: 14px;
  line-height: 14px;
  padding-left: 14px;
  width: 60px;
  text-decoration: none;
}

a.edit-deck {
  background-image: url(../images/edit.gif);
  background-repeat: no-repeat;
  color: #000;
  cursor: pointer;
  display: block;
  font-family: Helvetica;
  font-size: 12px;
  float: left;
  height: 14px;
  line-height: 14px;
  margin: 0;
  padding-left: 14px;
  text-decoration: none;
  width: 40px;
}

a.add-cards-link {
  background-image: url(../images/add.gif);
  background-repeat: no-repeat;
  background-position: left center;
  color: #000;
  cursor: pointer;
  display: block;
  font-family: Helvetica;
  font-size: 12px;
  float: left;
  height: 14px;
  line-height: 14px;
  margin: 0;
  padding-left: 14px;
  text-decoration: none;
  width: 70px;
}

a.stats {
  display: block;
  margin: 0;
  padding: 0;
  text-decoration: none;
  float: left;
  font-family: Helvetica;
  font-size: 14px;
  line-height: 14px;
  margin-top: 22px;
  width: 100px;
  text-align: left;
}
div.deckActions a.stats {
  color: #009900;
}
a.stats div {
  color: #009900;
  font-size: 14px;
}

/* Subscribe and Unsubscribe buttons */
a.subscribe, a.unsubscribe {
  position: absolute;
  top: 12px;
  right: 19px;
  height: 32px;
  width: 15px;
  background-image: url(../images/icon_not_on_mobile.png);
  background-repeat: no-repeat;
  background-position: top center;
}
a.unsubscribe {
  background-image: url(../images/icon_on_mobile.png);
  background-repeat: no-repeat;
}


/* Deck Cardbox Statistics
========================================= */
div.ui-dialog.stats-dialog {
  padding: 0;
  background: transparent;
}
div.ui-dialog.stats-dialog.ui-corner-all {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
div.ui-dialog.stats-dialog div.ui-dialog-titlebar.ui-widget-header {
  display: none;
}

div.cardbox-stats {
  position: relative;
  border: 2px solid #009900;
  background-color: #e3ece3;
  height: 185px;
  width: 290px;
  padding: 5px;
  margin: 0;
  font-family: verdana;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
p.cardbox-summary {
  color: #999;
  font-family: verdana;
  font-size: 12px;
  margin: 5px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px dotted #666;
  width: 285px;
}

p.cardbox-desc {
  color: #999;
  font-family: verdana;
  font-size: 9px;
  width: 285px;
  position: relative;
  clear: left;
  vertical-align: middle;
}
	
span#num-cards {
  position: absolute;
  top: 10px;
  right: 10px;
  
}

div.stats-bucket {
  position: relative;
  background-position: top left;
  background-repeat: no-repeat;
  float: left;
  height: 70px;
  margin: 0 8px 0 12px;
  width: 50px;
}

div.stats-bucket.empty-deck {
  background-image: url(../images/deck_000.png);
  background-color: #e3ece3;
}
div.stats-bucket.tiny-deck {
  background-image: url(../images/deck_025.png);
  background-color: #e3ece3;
}
div.stats-bucket.small-deck {
  background-image: url(../images/deck_050.png);
  background-color: #e3ece3;
}
div.stats-bucket.medium-deck {
  background-image: url(../images/deck_075.png);
  background-color: #e3ece3;
}
div.stats-bucket.large-deck {
  background-image: url(../images/deck_100.png);
  background-color: #e3ece3;
}
div.stats-bucket.empty-box {
  background-image: url(../images/deck_comp_000.png);
  background-color: #e3ece3;
}
div.stats-bucket.tiny-box {
  background-image: url(../images/deck_comp_025.png);
}
div.stats-bucket.small-box {
  background-image: url(../images/deck_comp_050.png);
  background-color: #e3ece3;
}
div.stats-bucket.medium-box {
  background-image: url(../images/deck_comp_075.png);
  background-color: #e3ece3;
}
div.stats-bucket.large-box {
  background-image: url(../images/deck_comp_100.png);
  background-color: #e3ece3;
}

span.bucket-desc {
  position: absolute;
  bottom: 8px;
  width: 50px;
  text-align: center;
  font-size:11px;
}

div.compartment {
	position: relative;
	float: left;
	width: 120px;
	min-height: 70px;
	margin: 15px 25px 5px 4px;
	padding: 0;
	border: 1px dotted #003465;
	font-size: 12px;
}
div.compartment img.flashcardNext {
	position: absolute;
	top: 20px;
	right: -30px;
}
div.compartment#compartment1 {
	background-color: #4BB2C5;
	#background-color: #FF0000;
}
div.compartment#compartment2 {
	background-color: #EAA228;
	#background-color: #FF6103;
}
div.compartment#compartment3 {
	background-color: #C5B47F;
	#background-color: #FCB514;
}
div.compartment#compartment4 {
	background-color: #579575;
}
div.compartment p {
	padding: 15px 10px 0 10px;
}
div.compartment p.flashcardCount {
	padding: 5px;
	background-color: #ffffff;
	font-style: italic;
	font-weight: bold;
}
div.compartment p.learnedMessage {
	text-align: center;
	font-size: 16px;
}

/* Deck searching
==================================================*/
div#publicDeckSearch {
  float: left;
  clear: right;
  margin: 0 0 0 0;
  padding-bottom: 10px;
}
div#publicDeckSearch h3 {
  color:#336699;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 10px 0;
}
div#publicDeckSearch form {
  display: inline;
}
div#publicDeckSearch input#searchTerm {
  /*width: 225px;*/
/*
  background-image:url(txt_input_background_search_27x27.png);
  background-repeat:repeat;
*/
  height:25px;
  width:290px;
  border: 1px solid #cccccc;
  line-height:25px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:normal;
  padding-left:5px;
  background-color:#f7f7df;
  
}

a#search-submit {
  width: 80px;
  position: absolute;
  top: 22px;
  left: 300px;
}

a#next, a#previous {
  width: 100px;
  float: right;
}
a#previous {
  float: left;
  margin-left: 5px;
}
a#finished {
  clear: right;
  float: right;
  margin-top: 8px;
  width: 100px;
}
div#deckListNavigation {
  clear: left;
  margin: 0 0 0 52px;
  position: relative;
  height: 75px;
}
p#search-summary {
  font-size: 10px;
  font-family: verdana;
  color: #666;
  position: absolute;
  font-style: italic;
  left: 285px;
  top: 0;
  height: 12px;
}

a#see-all-decks {
  cursor: pointer;
  font-family: verdana;
  font-size: 11px;
  color: #005078;
  text-decoration:underline;
}
a#see-all-decks:hover {
  color: #0099cc;
  text-decoration:underline;
}

/* Deck sorting list - sort by name, creator, etc.
==================================================*/
div.deck-sorting-list {
  position: relative;
/*  float: left;*/
  clear: left;
  margin: 35px 0 3px 10px;
  padding-bottom: 4px;
  color: #666;
  border-bottom: 1px dotted #666;
  font-family: verdana;
  font-size: 11px;
}
div.deck-sorting-list a {
  cursor: pointer;
  color: #005078;
  font-size: 11px;
}
div.deck-sorting-list a:hover {
  color: #0099cc;
}
span#current-sort, span#current-sort-order {
  display: none;
}

a#progressSort {
  display: block;
  position: absolute;
  top: 1px;
  right: 150px;
}
a#creatorNameSort {
  display: block;
  position: absolute;
  top: 1px;
  right: 270px;
}
a#creatorNameSortPublic {
  display: block;
  position: absolute;
  top: 1px;
  right: 174px;
}
span#add-to-list-header {
  display: block;
  position: absolute;
  top: 1px;
  right: 10px;
  font-size: 11px;
  color: #666;
}
a.screenNameLink {
  cursor: pointer;
  color: #005078;
}
a.screenNameLink:hover {
  color: #0099cc;
}
a#ownedSort {
  cursor: pointer;
  display: block;
  font-family: Helvetica;
  font-size: 0.75em;
  margin-top: -30px;
  padding-top: 5px;
}

/* 
	alert dialogs
	========================================= 
*/
div.ui-dialog.info-dialog,
div.ui-dialog.warning-dialog,
div.ui-dialog.confirm-dialog
{
  background: #fff;
  border: 1px solid #999;
}
div.ui-dialog.info-dialog,
div.ui-dialog.warning-dialog,
div.ui-dialog.confirm-dialog
{
  padding: 0;
}

div.ui-dialog.info-dialog.ui-corner-all,
div.ui-dialog.warning-dialog.ui-corner-all,
div.ui-dialog.confirm-dialog.ui-corner-all
{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

div.ui-dialog.info-dialog div.ui-dialog-titlebar.ui-widget-header,
div.ui-dialog.warning-dialog div.ui-dialog-titlebar.ui-widget-header,
div.ui-dialog.confirm-dialog div.ui-dialog-titlebar.ui-widget-header
{
  background:#4B88C5;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.warning-dialog .ui-dialog, 
.warning-dialog .ui-dialog-content 
{
	background-image: url(../images/dialog-warning.png); 
	background-repeat: no-repeat;	
	background-position:15px 18px;
	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
  	border-radius: 10px;
}

.confirm-dialog .ui-dialog, 
.confirm-dialog .ui-dialog-content 
{
	background-image: url(../images/dialog-confirm.png); 
	background-repeat: no-repeat;	
	background-position:15px 15px;
	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
  	border-radius: 10px;
}

.info-message, .warning-message, .error-message, .success-message {
	background-image: url(../images/success.png); 
	background-repeat: no-repeat;	
	background-position: 15px 18px;
	-webkit-border-radius: 10px;
 	-moz-border-radius: 10px;
	border-radius: 10px;
  height: 150px;
}
.warning-message {
	background-image: url(../images/warning.png); 
  }
.error-message {
	background-image: url(../images/error.png); 
  }
.info-message p, .warning-message p, .error-message p, .success-message p {
  font-family: Helvetica;
  font-size: 14px;
  line-height: 19px;
  margin: 30px 10px 0 80px;
}

.msgDialog {
  z-index: 7000;
}
.msgDialog a.btn {
  background-color: #808080;
  color: #ffffff;
  cursor: pointer;
  display: block;
  float:right;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  letter-spacing: 0.01em;
  margin-left:10px;
  margin-top:20px;
  text-align: center;
  text-decoration: none;
  width: 90px;
}

.msgDialog a.btn#private {
  width: 120px;
}
.msgDialog a.btn#public {
  width: 120px;
}

.msgDialog h2.dialogTitle
{
  font-family: verdana;
	font-size: 12px;
 	margin: 10px 10px 0 65px;
 	padding: 0;
  line-height: 12px;
}
.msgDialog p.message
{
  font-family: verdana;
  font-size: 11px;
	margin: 5px 5px 0 65px;
}

 .warning-dialog .ui-dialog-titlebar,
 .confirm-dialog .ui-dialog-titlebar,
 .info-dialog .ui-dialog-titlebar
 {
 	display:none;
 }

/* Author Profile
==================================================*/

textarea#author-bio
{
  height:132px;
  padding-top: 5px;
}

a#author-profile-button {
  float: right;
  width: 135px;
  margin: 0 15px 10px 0;
}

/** slideshow dialog **/
 .slideshow 
{ 
  position: relative; 
  background: #fafafa; 
  width: 535px; 
  height: 300px; 
  border: 1px solid #D5D5D5; 
  margin-bottom: 20px;
}

.slideshow-welcome 
{ 
  position: relative; 
  background: transparent; 
  width: 650px;
  height: 300px; 
  margin-bottom: 20px;
}

.slideshow-welcome div
{ 
  position: absolute; 
  top: 3px; 
  left: 3px; 
  z-index: 10; 
  background: transparent;
}

.slideshow div
{ 
  position: absolute; 
  top: 3px; 
  left: 3px; 
  z-index: 10; 
  background: #fff;
}

ul.recentlist 
{ 
  position: absolute;
  bottom: 25px;
  left: 180px; 
  list-style: none; 
  z-index: 20;
}

ul.recentlist-welcome 
{ 
  list-style: none;
  z-index: 20;
/*  float:left;*/
  margin: 0;
  padding: 0;
}

ul.recentlist li, ul.recentlist-welcome li 
{ 
  display: inline;
}

ul.recentlist li a, ul.recentlist li a:visited 
{ 
  display: block; 
  float: left; 
  background: #e5e5e5; 
  padding: 4px 8px; 
  margin-right: 0px;
  color: #000; 
  text-decoration: none; 
  cursor: pointer;
}

ul.recentlist li a:hover, ul.recentlist li a:visited:hover 
{ 
  background: #666; color: #fff; 
}

ul.recentlist li a.current 
{ 
  background: #56A3E1;
  color: #fff; 
}

/*
ul.recentlist-welcome li a.current 
{ 
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px;
  z-index:1;
}*/

ul.recentlist-welcome li a.current#butSlide1
  {background-image: url(../images/button-demo-nav-slide1-hover.png);}
ul.recentlist-welcome li a.current#butSlide2
  {background-image: url(../images/button-demo-nav-slide2-hover.png);}
ul.recentlist-welcome li a.current#butSlide3
  {background-image: url(../images/button-demo-nav-slide3-hover.png);}
ul.recentlist-welcome li a.current#butSlide4
  {background-image: url(../images/button-demo-nav-slide4-hover.png);}


/** 
*  TUTORIAL
*    previous/next/nav buttons 
**/

.tutorial-nav {
  position: relative; 
  background: transparent; 
  width: 190px;
  height: 75px; 
  margin-bottom: 20px;
}

span.tutorial-prev
{	
  background-image: url(../images/button-demo-nav-back.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 38px;
  float: left; 
  margin-right: 0px; 
}

span.tutorial-prev:hover
{	
  background-image: url(../images/button-demo-nav-back-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 38px;
  float: left; 
  margin-right: 0px;
  cursor: pointer;
}

a.tutorial-next
{	
  background-image: url(../images/button-demo-nav-slide5.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 39px;
  float: left; 
  margin-right: 0px; 
}

a.tutorial-next:hover
{	
  background-image: url(../images/button-demo-nav-slide5-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 39px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide1.nocurrent
{
   background-image: url(../images/button-demo-nav-slide1.png);  
}

a#butSlide2.nocurrent
{
   background-image: url(../images/button-demo-nav-slide2.png);  
}

a#butSlide3.nocurrent
{
   background-image: url(../images/button-demo-nav-slide3.png);  
}

a#butSlide4.nocurrent
{
   background-image: url(../images/button-demo-nav-slide4.png);  
}

a#butSlide1
{	
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide1:hover
{	
  background-image: url(../images/button-demo-nav-slide1-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide2
{	
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide2:hover
{	
  background-image: url(../images/button-demo-nav-slide2-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide3
{	
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide3:hover
{	
  background-image: url(../images/button-demo-nav-slide3-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide4
{	
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

a#butSlide4:hover
{	
  background-image: url(../images/button-demo-nav-slide4-hover.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 26px;
  float: left; 
  margin-right: 0px; 
}

.tutorial-next
{	
  background-image: url(../images/button-demo-nav-slide5.png);
  background-repeat: no-repeat;
  height: 54px;
  width: 39px;
}

.tutorial-prev a:hover
{	
  background-image: url(../images/button-demo-nav-back-hover.png);
  background-repeat: no-repeat;
  height: 55px;
  width: 160px;
  position: relative;
  z-index: 109; 
}

.tutorial-nav a:hover, .tutorial-nav a:hover
{
	cursor: pointer;
	text-decoration:underline; 
}

/**
*  WELCOME screen
**/
.welcomeContainer {
  width: 752px;
  background-color: #c0c0c0;
  border: none;
  background: transparent;
  margin: 0 auto;
}

div.welcome-right {
  float: none;
  width: 650px;
  height: 350px;
  background: transparent;
}

.welcomeScreen {
  height: 600px;
  background-image:url('../images/grasp-intro-background-tile.jpg');
  background-repeat:repeat-x;
  border: none;
  text-align:center;
}

.slide {
	width: 752px;
	background: transparent;
}

#showLogo {
  background-image: url(../images/grasp-logo-trans.png);
  background-repeat: no-repeat;
  height: 70px;
  width: 180px;
  position: absolute; 
  top: 23px; 
  right: 23px;
  z-index: 110;
}

#showDefinition {
  background-image: url(../images/definition.png);
  background-repeat: no-repeat;
  height: 200px;
  position: absolute; 
  top: 23px; 
  right: 10px;
  z-index: 109; 
}

/* slide 2 */
#showPic2 {
  background-image: url(../images/image-build.png);
  background-repeat: no-repeat;
  height: 375px;
  width: 300px;
  position: absolute;
  top: 23px; 
  left: 450px;
  z-index: 109; 
}

#showText2 {
  background-image: url(../images/h2-build.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 75px;
  position: absolute;
  top: 96px; 
  left: 32px;
  z-index: 109; 
}

#showDesc2 {
  background-image: url(../images/h3-build.png);
  background-repeat: no-repeat;
  height: 100px;
  width: 425px;
  position: absolute;
  top: 167px; 
  left: 32px;
  z-index: 109; 
}

/* slide 3 */
#showPic3 {
  background-image: url(../images/image-study.png);
  background-repeat: no-repeat;
  height: 375px;
  width: 300px;
  position: absolute;
  top: 23px; 
  left: 450px;
  z-index: 109; 
}

#showText3 {
  background-image: url(../images/h2-study.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 125px;
  position: absolute;
  top: 96px; 
  left: 32px;
  z-index: 109; 
}

#showDesc3 {
  background-image: url(../images/h3-study.png);
  background-repeat: no-repeat;
  height: 105px;
  width: 425px;
  position: absolute;
  top: 167px; 
  left: 32px;
  z-index: 109; 
}

/* slide 4 */
#showPic4 {
  background-image: url(../images/image-share.png);
  background-repeat: no-repeat;
  height: 375px;
  width: 400px;
  position: absolute;
  top: 23px; 
  left: 410px;
  z-index: 109; 
}

#showText4 {
  background-image: url(../images/h2-share.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 200px;
  position: absolute;
  top: 96px; 
  left: 32px;
  z-index: 109; 
}

#showDesc4 {
  background-image: url(../images/h3-share.png);
  background-repeat: no-repeat;
  height: 100px;
  width: 425px;
  position: absolute;
  top: 167px; 
  left: 32px;
  z-index: 109; 
}

/* slide 5 */
#showPic5 {
  background-image: url(../images/image-wrap.png);
  background-repeat: no-repeat;
  height: 395px;
  width: 300px;
  position: absolute;
  top: 23px; 
  left: 450px;
  z-index: 109; 
}

#showText5 {
  background-image: url(../images/h2-wrap.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 200px;
  position: absolute;
  top: 63px; 
  left: 211px;
}

#showDesc5 {
  background-image: url(../images/h3-wrap.png);
  background-repeat: no-repeat;
  height: 100px;
  width: 450px;
  position: absolute;
  top: 167px; 
  left: 32px;
  z-index: 109; 
}

.showButton5 {
  background-image: url(../images/button-get-started.png);
  background-repeat: no-repeat;
  height: 55px;
  width: 160px;
  position: absolute;
  top: 234px; 
  left: 236px;
  z-index: 109; 
}

.skip {
  font-family: verdana;
  font-size: 10px;
  color: #FFFFFF;
}

a#skip {
  z-index: 20;
  margin-left: -5px;
}

.skip a:hover {
  cursor: pointer;
}

/* Add Cards Tutorial Styles
==================================================*/
div#search-tutorial {
  background-image: url(../images/top-center.png);
  background-repeat: no-repeat;
  border: none;
  height: 160px;
  width: 245px;
  position: absolute;
  top: 55px;
  right: 0;
  z-index: 1000;
}

div#result-tutorial {
  background-image: url(../images/left-middle.png);
  background-repeat: no-repeat;
  border: none;
  height: 138px;
  left: 220px;
  position: absolute;
  top: -50px;
  width: 266px;
  z-index: 1000;
}

div#issue-tutorial {
  background-image: url(../images/right-top.png);
  background-repeat: no-repeat;
  border: none;
  height: 138px;
  left: -270px;
  position: absolute;
  top: 0;
  width: 266px;
  z-index: 1000;
}

p.tutorial-text {
	color: #993300;
	font-family: verdana;
	font-size: 15px;
	font-weight: bold;
	line-height: 26px;
	position: relative;
	width: 200px;
}

/*needed a slightly smaller width*/
p.tutorial-text-narrow {
	color: #993300;
	font-family: verdana;
	font-size: 15px;
	font-weight: bold;
	line-height: 26px;
	width: 200px;
	margin: 5px 0 0 5px;
}

div#search-tutorial p.tutorial-text {
  margin: 45px 0 0 25px;
  width: 200px;
}
div#result-tutorial p.tutorial-text {
  margin: 10px 0 0 50px;
  width: 200px;
}
div#issue-tutorial p.tutorial-text {
  margin-left: -10px;
  width: 200px;
}


div.ui-dialog.unbound-dialog {
/*
  background-image: url(../images/header_fade_blue_80x80.png);
  background-repeat: repeat-x;
  background-position: 0 24px;
*/
  background-color: #ffffff;
  border: 1px solid #336699;
  font-family: Helvetica;
  font-size: 12px;
}
div.ui-dialog.unbound-dialog {
  padding: 0;
}
div.ui-dialog.unbound-dialog.ui-corner-all {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
/*
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
*/
}
div.ui-dialog.unbound-dialog div.ui-dialog-titlebar.ui-widget-header {
/*
  background-image: url(../images/title_bar_bevel_27x27.png);
  background-color: #4B88C5;
*/
  background-color: #003465;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
  color: #ffffff;
  padding: 8px 5px;
  text-indent: 5px;
  font-family: Helvetica;
  font-size: 12px;
  line-height: 14px;
}

/* used for labels and h4's */
.dialog-subheader {
  color: #006699;
  display: block;
  font-family: Helvetica;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  margin: 0;
  padding: 0;
  clear: right;
}

/* used for dialog introductory text */
.dialog-explanation {
  color: #336699;
  font-family: Helvetica;
  font-size: 12px;
  line-height: 14px;
  margin: 3px 0 20px 0;
}

/* used for paragraph descriptions */
.dialog-description {
  margin: 5px 0 5px 15px;
  color: #666666;
  font-family: Helvetica;
  font-size: 12px;
  line-height: 14px;
  width: 281px;
}

.dialog-input {
/*
  background-image: url(txt_input_background_search_27x27.png);
  background-repeat: repeat;
*/
  height: 30px;
  width: 281px;
  border: 1px solid #cccccc;
  line-height: 30px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding-left: 5px;
  background-color: #f7f7df;
  margin: 5px 0 15px 15px;
}
textarea.dialog-input {
  padding-top: 5px;
  line-height: 18px;
  height: 132px;
}
textarea#description{
  height: 132px;
}

a#add-cards {
  margin: 10px;
  width: 100px; 
}

/* Create Decks
========================================= */

a#create-submit {
/*   float: right; */
  width: 125px;
  margin: 0 15px 10px 0;
}

#eulaLink
{
  display: block;
  margin-bottom: 10px;
  font-family:verdana;
  font-size: 11px;
  margin-left:15px;
}

#eulaCheck
{
	margin-right:5px;
	margin-left:0px;
	height:15px;
	width:30px;
}

/* Add cards tutorial
========================================= */

#addCardsStep1 {
  background-image: url(../images/add-card-dialogue-find-topic.png);
  background-repeat: no-repeat;
  position: relative;
  height: 80px;
  width: 260px;
  margin: 25px 0 25px 0;
  margin-left:auto; 
  margin-right:auto;
}

#addCardsStep2 {
  background-image: url(../images/add-card-dialogue-add-card.png);
  background-repeat: no-repeat;
  position: relative;
  height: 107px;
  width: 168px;
  margin: 25px 0 25px 0;
  margin-left:auto; 
  margin-right:auto;
}

#addCardsOK {
  float: right;
  position: relative;
  width: 100px;
}

#txt1 {
	width:200px;
	margin-left:50px;
}

#cancelButton {
  position: absolute;
  bottom: 70px;
  right: 60px;
  width: 70px;
}

#private {
  bottom: 70px;
  position: absolute;
  right: 190px;
  width: 75px;
  }

#public {
  bottom: 70px;
  position: absolute;
  right: 190px;
  width: 70px;
  }

#remove-card {
  bottom: 70px;
  position: absolute;
  right: 190px;
  width: 70px;
  }

#okButton {
  bottom: 70px;
  right: 190px;
  position: absolute;
  width: auto;
  }

#ok-button {
  bottom: 70px;
  right: 80px;
  position: absolute;
  width: 50px;
  }

#study-button {
  bottom: 70px;
  position: absolute;
  right: 190px;
  width: 70px;
  }

.blue-fade {
  background-image: url(../images/header_fade_blue_80x80.png);
  background-repeat: repeat-x;
  background-color: #ffffff;
  border: 1px solid #336699;
}
span.warning
{
	color:red;
}

p.explanation-small
{
	color:#666666;
	font-family:Helvetica;
	font-size:11px;
	line-height:14px;
	margin:10px 10px 5px 12px;
}

div#nav
{
	font-family:verdana,arial,helvetica,sans-serif;
}

.decks-table {
  box-shadow:inset 0 -1px 0 #fff, 0 1px 2px rgba(0,0,0,.1);
  -webkit-box-shadow:inset 0 -1px 0 #fff, 0 1px 2px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 -1px 0 #fff, 0 1px 2px rgba(0,0,0,.1);
  background-color: #fff;
  border: 1px solid #d9dbe0;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  color: #999ca3;
  float: left;
  margin: 30px 0 10px 0;
  padding: 0;
  text-shadow: 0 1px 0 #fff;
  width: 955px;
  }
.decks-table.browse-decks {
  margin-top: 10px;
  width: 755px;
  }

.decks-table li {
  border-bottom: 1px solid #d9dbe0;
  float: left;
  line-height: 30px;
  list-style-type: none;
  min-height: 30px;
  padding: 18px 0;
  position: relative;
  width: 955px;
}
.decks-table.browse-decks li {
  width: 755px;
  }
.decks-table li span {
  font-family: helvetica;
  font-size: 14px;
  float: left;
  line-height: 30px;
  min-height: 30px;
}
.decks-table li.header {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  height: 30px;
  line-height: 30px;
  padding: 0;
  width: 955px;
  z-index: auto;
}
.decks-table.browse-decks li.header {
  width: 755px;
}
.decks-table li.header span {
  background: #fafafa; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 40%, #f1f2f2 95%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#ffffff), color-stop(95%,#f1f2f2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 40%,#f1f2f2 95%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 40%,#f1f2f2 95%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #ffffff 40%,#f1f2f2 95%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f2f2',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #ffffff 40%,#f1f2f2 95%); /* W3C */
/*   border-right: 1px solid #d9dbe0; */
  cursor: pointer;
  font-family: helvetica;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  text-align: left;
}


.decks-table li span.status {
  padding: 0;
  width: 70px;
}
.decks-table li.header span.status {
  border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
}
.decks-table li span.status.created {
  background-image: url(../images/circle_dark.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.decks-table li span.status.subscribed {
  background-image: url(../images/circle_light.png);
  background-position: center center;
  background-repeat: no-repeat;
}

.decks-table li.header span.title {
  width: 505px;
}
.decks-table.browse-decks li.header span.title {
  width: 405px;
}
.decks-table li.header span.creator {
  width: 116px;
}
.decks-table li.header span.complete {
  width: 100px;
}
.decks-table li.header span.study {
  border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  width: 164px;
}
.decks-table li span a {
  color: #999ca3;
  cursor: pointer;
  float: right;
  font-family: helvetica;
  font-size: 14px;
  line-height: 18px;
  position: relative;
  text-decoration: none;
}

.decks-table li span img {
  position: absolute;
  top: 6px;
  left: 10px; 
}


#ajax-loading-progress {
  display: none;
  position: absolute;
  top: 58px;
  left: 90px;
  width: 213px;
}


.grasp-tutorial {
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #c5c5c5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#c5c5c5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#c5c5c5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#c5c5c5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#c5c5c5 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#c5c5c5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c5c5c5',GradientType=0 ); /* IE6-9 */
}
.document-text.wide.grasp-tutorial {
  padding-top: 35px;
  width: 700px;
}

.grasp-tutorial-slides {
  height: 400px;
  position: relative;
}
.grasp-tutorial-slide {
  height: 300px;
}
.slide-text {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #323232;
  float: left;
  font-family: helvetica;
  font-size: 28px;
  height: inherit;
  line-height: 32px;
  padding-left: 3%;
  width: 47%;
}
#slide1 .slide-text {
  background-image: url(../images/grasp_intro_slide1.png);
  background-size: auto;
  width: 94%;
}
#slide2 .slide-text {
  background-image: url(../images/grasp_intro_slide2_logo.png);
  background-position: left top;
  background-size: auto;
  height: 170px;
  padding-top: 130px;
}
#slide3 .slide-text {
  background-image: url(../images/grasp_intro_slide3_logo.png);
  background-position: left top;
  background-size: auto;
  height: 170px;
  padding-top: 130px;
}
#slide4 .slide-text {
  background-image: url(../images/grasp_intro_slide4_logo.png);
  background-position: left top;
  background-size: auto;
  height: 170px;
  padding-top: 130px;
}
#slide5 .slide-text {
  background-image: url(../images/grasp_intro_slide5_logo.png);
  background-position: left top;
  background-size: auto;
  font-size: 36px;
  height: 170px;
  line-height: 45px;
  padding-top: 130px;
}
.slide-graphic {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  height: inherit;
  width: 50%;
}
#slide1 .slide-graphic {
  background-image: url(../images/grasp_intro_slide5_graphic.png);
}
#slide2 .slide-graphic {
  background-image: url(../images/grasp_intro_slide2_graphic.png);
}
#slide3 .slide-graphic {
  background-image: url(../images/grasp_intro_slide3_graphic.png);
}
#slide4 .slide-graphic {
  background-image: url(../images/grasp_intro_slide4_graphic.png);
}
#slide5 .slide-graphic {
  background-image: url(../images/grasp_intro_slide5_graphic.png);
}

.tutorial-navigation {
  background: #afafaf; /* Old browsers */
  background: -moz-linear-gradient(top,  #afafaf 0%, #6c6c6c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afafaf), color-stop(100%,#6c6c6c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #afafaf 0%,#6c6c6c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#6c6c6c',GradientType=0 ); /* IE6-9 */
  border: 1px solid #4d4d4d;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  height: 40px;
/*   position: absolute; */
  text-shadow: 0 -1px 0 #4d4d4d;
/*   bottom: 10px; */
  margin: 30px auto 0 auto;
  width: 240px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.1);
}

.tutorial-navigation li {
  border-right: 1px solid #4d4d4d;
  color: #fff;
  cursor: pointer;
  float: left;
  font-family: helvetica;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-shadow: 0 -1px 0 #4d4d4d;
  width: 39px;
}
.tutorial-navigation li:hover {
  background: #7f7f7f; /* Old browsers */
  background: -moz-linear-gradient(top,  #7f7f7f 0%, #353535 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#353535)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #7f7f7f 0%,#353535 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#353535',GradientType=0 ); /* IE6-9 */
}

.tutorial-navigation li.current-slide {
  background: #7f7f7f; /* Old browsers */
  background: -moz-linear-gradient(top,  #7f7f7f 0%, #353535 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#353535)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #7f7f7f 0%,#353535 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#353535',GradientType=0 ); /* IE6-9 */
}
#previous-slide {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
}
#next-slide {
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  -moz-border-radius-topright: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  border: none;
  width: 40px;
}
#next-slide img, #previous-slide img {
  margin-top: 2px;
}

#skip-overview {
  color: #3041aa;
  display: block;
  font-family: helvetica;
  font-size: 0.65em;
  font-style: normal;
  margin: 50px auto 0 auto;
  width: 98px;
}

#grasp-get-started {
  color: #fff;
  border: 1px solid #4d4d4d;
  display: block;
  font-family: helvetica;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  margin: 30px auto 0 auto;
  padding: 0;
  width: 240px;
}
#grasp-get-started img {
  margin-left: 10px;
}

.dark-grey {
  background: #afafaf; /* Old browsers */
  background: -moz-linear-gradient(top,  #afafaf 0%, #6c6c6c 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afafaf), color-stop(100%,#6c6c6c)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #afafaf 0%,#6c6c6c 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #afafaf 0%,#6c6c6c 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#6c6c6c',GradientType=0 ); /* IE6-9 */
  text-shadow: 0 -1px 0 #4d4d4d;
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.1);
}

.dark-grey:hover {
  background: #7f7f7f; /* Old browsers */
  background: -moz-linear-gradient(top,  #7f7f7f 0%, #353535 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#353535)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #7f7f7f 0%,#353535 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #7f7f7f 0%,#353535 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#353535',GradientType=0 ); /* IE6-9 */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.1);
}

#add-cards-tutorial {
  border: 2px solid #003465;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  clear: left;
  color: #444;
  display: none;
  float: right;
  font-family: helvetica;
  margin: 10px 4%;
  min-height: 300px;
  padding: 15px 3%;
  position: relative;
  width: 50%;
}
#add-cards-tutorial img {
  position: absolute;
  right: 37px;
  top: -11px;  
}
#add-cards-tutorial h3 {
  border-bottom: 1px solid #444;
  font-size: 1.0em;
}
#add-cards-tutorial h4 {
  color: #000;
  font-size: 0.75em;
  margin: 15px auto;
}
#add-cards-tutorial p {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 225px;
  margin: 0 auto;
  max-width: 320px;
}
#act-step-one {
  background-image: url(../images/grasp_tutorial_1.png);
  background-size: auto;
}
#act-step-two {
  background-image: url(../images/grasp_tutorial_2.png);
}
#act-step-three {
  background-image: url(../images/grasp_tutorial_3.png);
  background-size: auto;
}
#act-step-four {
  background-image: url(../images/grasp_tutorial_4.png);
}
#act-step-five {
  background-image: url(../images/grasp_tutorial_5.png);
}