assets__dgtd-13k15/css/theme/source/osi.scss

/**
 * OSI theme for reveal.js.
 *
 */


// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------



// Include theme-specific fonts
@font-face {
	font-family: 'League Gothic';
	src: url('../../lib/font/league_gothic-webfont.eot');
	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');

	font-weight: normal;
	font-style: normal;
}


@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url('../../lib/font/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url('../../lib/font/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url('../../lib/font/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../../lib/font/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}


@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

// CUSTOM
$inverseColor: #e7d6c3;
$shadowLight: 0 0 6px rgba(0,0,0,.2);
$blueGray: #647a8e;
$redTile: #ca3b28;
$red: #d2533a;
$green: #5a9b47;
$orange: #ff8a00;
$titleFont: 'League Gothic';
$gray: #899594;
$defaultFontSize: 28px;

// Override theme settings (see ../template/settings.scss)
$mainColor: #333;
$headingColor: #333;
$headingTextShadow: none;
$backgroundColor: #e9f6fb;
$linkColor: #ff8a00;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $blueGray;
$heading1TextShadow: none;
$h1Size: 3.2em;

// Background generator
@mixin bodyBackground() {
	@include radial-gradient( #ecf4fb, rgba(255,255,255,1) );
}

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------




/*********************************************
 * CUSTOM
 *********************************************/

 
.reveal {
	letter-spacing: 0em;
}
 
.reveal p {
	margin-bottom: 0.6em;
}

.reveal .slides section {
  font-size: $defaultFontSize;
}
 
.reveal .slides {
	width: 1024px;
}
 
.reveal .custom.inverse {
	color: $inverseColor;
}

.reveal h1 {
	font-size: $h1Size;
}

.reveal h4 {
	font-size: 1.05em;
}

.reveal h1,
.reveal h2,
.reveal h3 {
	color: $blueGray;
}

.reveal h1.chapter {
	color: $orange;
	margin-top: 0.8em;
	padding: 10px;
}

.reveal .release-date {
	color: $blueGray;
}

.reveal .right {
        text-align: right;
        width: 100%;
}

.reveal .left {
        text-align: left;
        width: 100%;
}

.reveal .name{
	margin-top: 1.5em;
}

.footer {
	bottom: 40px;
	left: 30px;
	position: fixed;
	width: 100%;
	z-index: 0;
}

.reveal .footnote,
.reveal .note {
        bottom: 10px;
        color: $gray;
	display: inline-block;
        font-size: 45%;
	margin-left: auto;
	margin-right: auto;
        position: relative;
        text-align: center;
	width: 80%;
}

.reveal .note {
        color: $blueGray;
}

.reveal .illustration img,
.reveal .diagramme img {
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        max-height: 65%;
        max-width: 65%;
}

.reveal .reference img {
	float: left;
        max-width: 98%;
}

.reveal td.reference {
	color: $gray;
        font-size: 70%;
        font-style: italic;
        width: 25%;
}

.reveal .illustration-full img,
.reveal .diagramme-full img {
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
        margin: 0;
        max-height: 85%;
        max-width: 85%;
        padding: 0;
}

.reveal .slides section.full,
.reveal section.full img {
        margin: 0;
        padding: 0;
}

p.caption {
        font-size: 60%;
        font-style: italic;
}

.reveal code {
        box-shadow: $shadowLight;
        font-size: .75em;
        font-family: monospace;
        line-height: 1.2em;
        margin: 0 0.35em;
        padding: 0 .15em;
        word-wrap: break-word;
}

.reveal .high {
        color: $orange;
}

.reveal code.high {
        background-color: $orange;
        color: white;
}

.reveal .codeblock {
        display: block;
        font-size: .55em;
        margin: 0.15em 0 0.15em 1em;
        max-height: 495px;
        overflow: auto;
        padding: 0.3em 0.5em;
}


.reveal .ab {
        display: block;
        font-size: .6em;
        margin: 0.15em 0 0.15em 1em;
        max-height: 495px;
        overflow: auto;
        padding: 0.3em 0.5em;
}

.reveal blockquote {
        background: rgba(255,255,255,.05);
        box-shadow: none;
        color: $blueGray;
        line-height: 1.5em;
        margin: auto;
        padding: auto;
        font-style: italic;
        width: 100%;
}

.reveal blockquote.quote-small {
        background: rgba(255,255,255,.05);
        box-shadow: none;
        color: $blueGray;
        font-size: 0.8em;
        line-height: 1.2em;
        margin: auto auto 0.8em auto;
        padding: auto;
        font-style: italic;
        width: 100%;
}

.reveal .quoteinverse {
        background-color: $blueGray;
        color: white;
        padding: 0 0.15em;
}

.reveal .quote-underline {
        border-bottom: solid 5px $blueGray;
}

.reveal ol,
.reveal ul {
	list-style-type: none;
	margin: 0 0 0.85em 1.5em;
}

.reveal li {
	margin-bottom: 0.6em;
}

.reveal li ul {
	margin-top: 0.6em;
}

.reveal ol li:before,
.reveal ul li:before {
        color: $orange;
	content: "● ";
}

.reveal ul ul ul,
.reveal ul ul {
	list-style-type: none;
}

.reveal ul ul li:before {
        color: $orange;
	content: "– ";
}

.reveal ul ul ul li:before {
        color: $blueGray;
	content: "· ";
}

.reveal ul ul ul li {
	line-height: 1;
	margin: 0 auto;
	padding: 0 auto;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
	margin-left: 1.5em;
}

.reveal ul,
.reveal ol {
	text-indent: -0.7em;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
	text-indent: -0.6em;
}

.reveal blockquote li {
	margin-bottom: 0.7em;
}

.reveal blockquote ol li:before,
.reveal blockquote ul li:before {
        color: $blueGray;
	content: "";
}

.reveal blockquote ul ul ul,
.reveal blockquote ul ul {
	list-style-type: circle;
}

.reveal blockquote ul ul ul li:before,
.reveal blockquote ul ul li:before {
        color: $blueGray;
	content: "";
}

.reveal blockquote ul ul,
.reveal blockquote ul ol,
.reveal blockquote ol ol,
.reveal blockquote ol ul {
	margin-left: auto;
}

.reveal .highlight {
        background-color: $orange;
        border-radius: 0.4em;
        color: white;
        font-size: 0.75em;
        margin-left: 1em;
        padding: 0.1em 0.3em;
}

.reveal .highlight:before {
	content: "→ ";
}

.reveal table {
        margin-bottom: 1em;
        margin-top: 1.2em;
        width: 100%;
        
        tr.third td {
          width: 33%;
        }
        
        tr.half td {
          width: 50%;
        }
        
        .table-title {
          border-bottom: 15px solid rgba(255,255,255,0);
          color: $redTile;
          font-size: 110%;
        }
        
        .table-description {
          border-bottom: 10px solid rgba(255,255,255,0);
          font-size: 90%;
        }
        
        .table-extra {
          color: $green;
          font-size: 75%;
          &:before {
	    content: "➤ ";
          }
        }
}

.reveal p.theme-name {
	color: $blueGray;
	font-family: $titleFont;
	font-size: 1.2em;
	float: left;
	margin-top: 0.5em;
        text-align: left;
        text-transform: uppercase;
}

.reveal table.new {
  font-size: 0.8em;
  line-height: 1.35;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  width: 100%;
}

.reveal .new th {
  color: $blueGray;
  font-family: $titleFont;
  text-transform: uppercase;
  width: 12%;
}

.reveal .new td:before {
        color: $orange;
	content: "· ";
}

.reveal .two-columns-left {
  float: left;
  margin: auto 0;
  width: 47.5%;
}

.reveal .two-columns-right {
  float: right;
  margin: auto 0;
  width: 47.5%;
}

.reveal .compare-table {
  border-collapse: collapse;
  line-height: 1.1;
  margin-top: 1em;
  padding: 0.4em;
  width: 100%;
}

.reveal .compare-table tr.first-row {
  padding-bottom: 1em;
}

.reveal .cms-table th,
.reveal .compare-table th {
  width: 16%;
}

.reveal .compare-table td {
  width: 28%;
}

.reveal .compare-table thead {
  font-size: 0.75em;
}

.reveal .compare-table.six thead {
  color: $blueGray;
}

.reveal .compare-table.seven thead {
  color: $green;
}

.reveal .compare-table.eight thead {
  color: $red;
}

.reveal .compare-table tbody {
  border-top: 5px solid rgba(255,255,255,0);
  font-size: 0.65em;
}

.reveal .compare-table thead th {
  font-family: $titleFont;
  font-size: 1.2em;
  position: relative;
  top: 0.2em;
  text-transform: uppercase;
}

.reveal section img.cover-img {
  background: none;
  border: none;
  box-shadow: none;
  margin: 0;
}

.reveal div.cover-osi {
  color: $blueGray;
  position: relative;
  top: 2em;
}

.reveal div.cover-osi h3 {
  color: $blueGray;
}

.reveal .downer {
  margin-top: 1.5em;
}

.reveal h3.people {
  margin-top: 0.8em;
}

.reveal table.people {
  font-size: 0.75em;
  line-height: 1;
  margin: 1em 0 1.7em 0;
  
  tr {
    width: 100%;
  }
  
  td {
    border-bottom: 5px solid rgba(255,255,255,0);
    margin: 0;
    padding: 0;
    width: 306px;
  }
  
  .td-middle {
    border-left: 15px solid rgba(255,255,255,0);
    border-right: 15px solid rgba(255,255,255,0);
  }
  
  img {
    max-width: 306px;
  }
  
}

.reveal .blue {
  color: $blueGray;
}

.reveal .orange {
  color: $orange;
}

.reveal .lowercase {
  text-transform: none;
}

.reveal div.programme {
  margin: 1em auto;
}

#page.main {
  font-family: 'lato', sans-serif;
  font-size: 1.4em;
  height: 100%;
  line-height: 1.2;
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  position: relative;
  text-align: center;
  div.content-wrapper {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 80%;
    max-width: 80%;
    min-height: 20%;
    min-width: 20%;
    overflow: auto;
    position: absolute;
    right: 0;
    resize: both;
    top: 0;
  }
  a {
    color: #ff8a00;
    text-decoration: none;
    -webkit-transition: color .15s ease;
    -moz-transition: color .15s ease;
    -ms-transition: color .15s ease;
    -o-transition: color .15s ease;
    transition: color .15s ease;
    &:hover {
      color: #ffb966;
    }
  }
  h1, h2, h3 {
    color: #647a8e;
    font-family: "League Gothic", Impact, sans-serif;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  #header {
    padding-bottom: 15px;
    padding-top: 10px;
  }
  #footer {
    bottom: 0;
    font-size: 0.65em;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    position: fixed;
    width: 100%;
    p {
      color: #969696;
      text-align: center;
    }
  } 
}