@import "scss/_allvariables"; /*start here and set the default values for all the variables*/
/* Important note: unlike some older Xerte themes this part of this default theme has been developed using sass and scss files */
/*You should not edit the editorstyles.css file directly or change values directly unless you wish to override something*/
/*Use SASS and the files in the scss folder name _allvariables.scss to start any customisation*/
//***define the Editor Style Colors esc[n]***/
//***define the colors used in the new styles for the styles menu***/
$esc1: $brightcolor;
$esc2: $accent1;
$esc3: $contrastcolor;
$esc4: $accent2;
$esc5: $darkestcolor;
$esc6: $accent3;

//set the default size of the list menu items e.g. for the Styles menu
//no real need for this to mirror the size on the page in the list menu
.cke_panel_listItem {
  font-size: 12pt;
}

//*****editor styles*****/
//****common styles for panels***//
@mixin panel {
  // font-family:$mainfonts;
  border-radius:$smallroundedcorners;
  display:table;
  padding:10px;
  font-style:normal;
}
//****common styles for highlights***//
@mixin highlight{
  font-family:$mainfonts;
  background: #fff;
  display: table;
  font-weight: lighter;
  margin-bottom: 7px;
  margin-top: 5px;
  padding: 10px;
  border-left: 5px solid;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
//****common styles for blockquotes***//
@mixin blockquote{
  font: 400 14px/24px $secondaryfonts;
  border-left: 10px solid;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C" "\201D";
}
@mixin beforeblockquote {
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
@mixin afterblockquote{
  content: close-quote;
  font-size: 4rem;
  line-height: .1em;
  margin-left: .1em;
  vertical-align: -.6em;
}
//*****panels*****/
.panel1{
  @include panel;
  background-color:$esc1;
  color:$whiteorlightest;
}
.panel1 a{
  color:white;
  text-decoration:underline;
}
.panel2 {
  @include panel;
  background-color:$esc2;
  color:$whiteorlightest;
}
.panel2 a{
  color:white;
  text-decoration:underline;
}
.panel3 {
  @include panel;
  background-color:$esc3;
  color:$whiteorlightest;
}
.panel3 a{
  color:white;
  text-decoration:underline;
}
.panel4 {
  @include panel;
  background-color:$esc4;
  color:$whiteorlightest;
}
.panel4 a{
  color:white;
  text-decoration:underline;
}
.panel5 {
  @include panel;
  background-color:$esc5;
  color:$whiteorlightest;
  display:table;
}
.panel5 a{
  color:white;
  text-decoration:underline;
}
.panel6 {
  @include panel;
  background-color:$esc6;
  color:$whiteorlightest;
}
.panel6 a{
  color:white;
  text-decoration:underline;
}

//*****highlights*****/
.highlight1 {
  @include highlight;
  //color: $esc1;
  border-color: $esc1;
}
.highlight2 {
  @include highlight;
  //color: $esc2;
  border-color: $esc2;
}
.highlight3 {
  @include highlight;
  //color: $esc3;
  border-color: $esc3;
}
.highlight4 {
  @include highlight;
  //color: $esc4;
  border-color: $esc4;
}
.highlight5 {
  @include highlight;
  //color: $esc5;
  border-color: $esc5;
}
.highlight6 {
  @include highlight;
  //color: $esc6;
  border-color: $esc6;
}
//***default gray blockquote***/
blockquote {
  @include blockquote;
  background: #f9f9f9;
  border-color:#ccc;
}
blockquote:before {
  @include beforeblockquote;
  color: #ccc;
}
blockquote p {
  display: inline;
}
blockquote:after {
  @include afterblockquote;
  color:#ccc;
}
.bq1{
  border-color:$esc1;
}
.bq1:after {
  @include afterblockquote;
  color:$esc1;
}
.bq1:before {
  @include beforeblockquote;
  color:$esc1;
}
.bq2{
  border-color:$esc2;
}
.bq2:after {
  @include afterblockquote;
  color:$esc2;
}
.bq2:before {
  @include beforeblockquote;
  color:$esc2;
}
.bq3{
  border-color:$esc3;
}
.bq3:after {
  @include afterblockquote;
  color:$esc3;
}
.bq3:before {
  @include beforeblockquote;
  color:$esc3;
}
.bq4{
  border-color:$esc4;
}
.bq4:after {
  @include afterblockquote;
  color:$esc4;
}
.bq4:before {
  @include beforeblockquote;
  color:$esc4;
}
.bq5{
  border-color:$esc5;
}
.bq5:after {
  @include afterblockquote;
  color:$esc5;
}
.bq5:before {
  @include beforeblockquote;
  color:$esc5;
}
.bq6{
  border-color:$esc6;
}
.bq6:after {
  @include afterblockquote;
  color:$esc6;
}
.bq6:before {
  @include beforeblockquote;
  color:$esc6;
}

//*****speech bubbles******//
.speech-bubble1 {
  position: relative;
  background: $esc1;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-left:1em;
  display: inline-block;
}

.speech-bubble1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-right-color: $esc1;
  border-left: 0;
  border-bottom: 0;
  margin-top: -0.609em;
  margin-left: -1.219em;
}

.speech-bubble2 {
  position: relative;
  background: $esc2;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-right:1em;
  display: inline-block;
}

.speech-bubble2:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-left-color: $esc2;
  border-right: 0;
  border-bottom: 0;
  margin-top: -0.609em;
  margin-right: -1.219em;
}
.speech-bubble3 {
  position: relative;
  background: $esc3;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-left:1em;
  display: inline-block;
}

.speech-bubble3:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-right-color: $esc3;
  border-left: 0;
  border-top: 0;
  margin-top: -0.609em;
  margin-left: -1.219em;
}
.speech-bubble4 {
  position: relative;
  background: $esc4;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-right:1em;
  display: inline-block;
}

.speech-bubble4:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-left-color: $esc4;
  border-right: 0;
  border-top: 0;
  margin-top: -0.609em;
  margin-right: -1.219em;
}
.speech-bubble5 {
  position: relative;
  background: $esc5;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-left:1em;
  display: inline-block;
}
.speech-bubble5:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-top-color: $esc5;
  border-bottom: 0;
  border-right: 0;
  margin-left: -0.609em;
  margin-bottom: -1.219em;
}
.speech-bubble6 {
  position: relative;
  background: $esc6;
  border-radius: .4em;
  padding:.4em;
  color:white;
  margin-right:1em;
  display: inline-block;
}

.speech-bubble6:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 1.219em solid transparent;
  border-top-color: $esc6;
  border-bottom: 0;
  border-left: 0;
  margin-left: -0.609em;
  margin-bottom: -1.219em;
}
//***make links in speech bubbles white and underlined by default***//
.speech-bubble1 a, .speech-bubble2 a, .speech-bubble3 a, .speech-bubble4 a, .speech-bubble5 a, .speech-bubble6 a{
  color:white;
  text-decoration:underline;
}
q {
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
  color:#333;
  display:block;
  padding:10px;
}

cite {
  font-family:$secondaryfonts;
  font-size:14px;
  font-style:normal;
  /*font-weight:400;
  margin-left:20px;*/
  padding:10px;
}