/* -------------------------------------
*
*	MAIN PRESENTATION APPEARANCE
*	Last major update 04/02/2013
*
----------------------------------------*/

body {
    font-family:'Gill Sans MT', Verdana, tahoma, sans-serif;
    font-size:1em;
}

/* -------------- REVEAL PRESENTATION SPECIFIC -------*/

/*-- PROGRESS BAR ---*/
.reveal .progress  {
    /*border-top:1px dotted orange;*/
}

.reveal .progress span {
    background:#7FFF00;
}


/*-- CONTROLS --- */
.reveal .controls {
    background:url('../img/controls.png') no-repeat center center;
}

/*-- STANDARD BACKGROUND ---*/
.reveal .state-background {
    background:url('../img/R_shaded.png') bottom right repeat-x;	
}

/*-- TEXT ALIGN ----*/	
.no-transforms .slides,
.reveal .slides  {
    text-align:left;
}	

/*------- READSOFT STYLE ----*/


/*-- TYPOGRAPHY ---- */
.reveal ::selection,
::selection {
    background: #FFAA00;
    color: #fff;
    text-shadow: none;
}

.reveal h1, 
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
    font-family:'Gill Sans Light','Gill Sans MT', Verdana, sans-serif;
    background:none;
    white-space:nowrap;
    text-transform:capitalize;
}

.reveal h1 {
    font-weight:normal;		
    font-size:3em;
    color:#000;
    margin-bottom:40pt;
}

.reveal h2 {
    color: #0060A9;
    font-size: 1.5em;
    font-weight: bold;
    margin:36px 0 12px 0;
}

.reveal h3 {
    font-size:1.2em;
    font-weight:bold;
    color:#6886b2;
    border-bottom:1px solid #ddd;
    margin:24px 0 6px 0;
}
.reveal h3.intro {
    background: #6886B2;
    color: white;
    padding: 8px;
    border-radius: 10px;
}

.reveal h4 {
    font-size:1.1em;
    color:#4d6c99;
    margin:10px 0 5px 0;
}	

.reveal p {
    font-size:1em;
    color:#333;
    padding:5px 10px;	
}
.reveal li b,
.reveal p b {
    font-weight:bold;
}

.reveal p:before {
    font-weight:bold;
    color:#acdcff;
}

.reveal blockquote {
    font-weight:bold;
    line-height:144%;
    font-size:1.5em;
    letter-spacing:0.05em;
    background:#0099CC;
    border-radius:10px;
    border:2px solid #acdcff;
    color:#ffffff;
    text-shadow:1px 1px #acdcff;
    padding:1em;
}
/*	.reveal blockquote:before {content: '\201C';}.reveal blockquote:after {	content: '\201D';}	*/

.reveal blockquote a {
    color:#FFFFFF;
}

.reveal blockquote a:hover {
    color:#7FFF00;
}

/* LINKS */
.reveal a, .reveal a:visited {
    color:#B6316C;
    text-decoration:none;
}

.reveal li a.roll,
.reveal li a.roll:visited,
ol.list-awesome-numbered li a span {
    color:#6996AD;
    vertical-align:text-bottom;
    line-height:1.5;
}

reveal li a.roll:hover,
ol.list-awesome-numbered li a:hover span,
.reveal a:hover {
    color:#1874CD;
}

.reveal a, .reveal a :hover {
    -webkit-transition: color .2s ease-in;
}
.reveal p.p-help-link {
    text-align:right;
    width:100%;
    cursor:pointer;
}
.reveal p.p-help-link:after {
    content:"\2192";
}

.reveal a.source {
    color:#0099CC;
    text-decoration:none;
}



/* Grey text */
.greytext {
    color:#999999;
}


/* TIP */
.reveal p.tip {
    margin-left:60px;
    margin-top:19px;
}

.reveal p.tip:before {
    content:"!";
    font-weight:bold;
    color:#ffffff;
    vertical-align:middle;
    font-family:"Courier New", Courier, monospace;
    margin-left:-50px;
    display:inline-block;
    font-size:28px;
    width:30px;
    height:28px;
    border-radius:50%;
    color:white;
    text-shadow:1px 1px black;
    text-align:center;
    top:-2px;
    left:-10px;
    position:relative;
    padding:0;
    box-shadow:1px 3px 5px #545454;
}

.tip:before {background:#1874CD;}

span.calculation {
    font-family:courier;
    color:#878787;
    font-size:0.9em;
}

/* Bold blue text */
.reveal .bluespans span,
p span.intro,
ul.list-awesome-feature li span,
ol.list-awesome-numbered li span {
    color:#0060A9;
    font-weight:bold;
}



/*-- LISTS  -----------------------------*/

/* Standard Lists */
.reveal ul,
.reveal ol {
    padding:10px 40px;
    line-height:190%;
}

.reveal ul {
    list-style-image:url('../img/bullet.png');
}


/* Awesome lists */
ul.list-awesome-feature,
ol.list-awesome-numbered {
    counter-reset:liAweCnt;
    list-style-type:none;
    list-style-image:none;
}

ol.list-awesome-numbered {
    margin-left:30px;
}

ol.list-awesome-numbered li:before {
    /*background set in gradientBluebox */
    counter-increment:liAweCnt;
    content:counter(liAweCnt);
    margin-left:-50px;
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:50%;
    color:white;
    text-shadow:1px 1px black;
    text-align:center;
    top:6px;
    left:-20px;
    position:relative;
    padding:0;
    box-shadow:1px 3px 5px #545454;
}

ol.list-awesome-numbered li {
    margin: 20px 0;
}

ul.list-awesome-feature li  {
    line-height:140%;
    margin: 0.5em 0;
    /*text-indent:-45px;*/
}
ul.list-awesome-feature li.indent {
    text-indent:-45px;
    margin-left:45px;
}

ul.list-awesome-feature li  img {
    height:40px;
    position:relative;
    left:-30px;
    top:15px;
    margin:0;
}


/* AWESOME  LIST ---*/
.reveal ul.list-awesome-check ul,
.reveal ul.list-awesome-check {
    list-style-type:none;
    list-style-image:none;
    color:#555;
}

.reveal ul.list-awesome-check ul li:before, 
.reveal ul.list-awesome-check li:before {
    content: "\2713";
    color:green;
    margin:0 1.3em 0 -2em;
}

.reveal ul.list-awesome-check li {
    line-height:175%;
}

/*Awesome Sublist*/
.reveal ul.list-awesome-check ul li:before {
    color:#4E78A0;
}
.reveal ul.list-awesome-check ul li {
    line-height:125%;
    font-size:0.8em;
    font-style:italic;
}

/*-- Minus list ---*/	
.reveal ul.list-minus {
    list-style-type:none;
    list-style-image:none;
    color:#555;
}

.reveal ul.list-minus li:before {
    content:  "\00F7";
    color:red;
    margin:0 1.3em 0 -2em;
    font-size:1.2em;
    font-weight:bold;
}

.reveal ul.list-minus li {
    line-height:175%;
}


/* Questionlist --*/	
.reveal ul.list-question {
    list-style-type:none;
    list-style-image:none;
    color:#333;
}

.reveal ul.list-question li:before {
    content:  "?";
    font-weight:bold;
    background:orange;
    left:-30px;
    top:-3px;
    border:1px solid #C76114;
    display:inline-block;
    width:33px;
    height:33px;
    border-radius:50%;
    color:white;
    text-shadow:1px 1px black;
    text-align:center;
    position:relative;
    padding:0;
    box-shadow:1px 3px 5px #545454;
}

.reveal ul.list-question li {
    margin:1em 0;
    line-height:127%;
}


/*-- TABLES ---*/

.reveal table {
    text-align:left;
    border-collapse:collapse;
}

.reveal 	table th {
    background:#1F497D;
    color:#fff;
    border:3px solid #fff;
    padding:6px 10px;
    white-space:nowrap;
    font-weight:normal;	
}

.reveal table td {
    font-size:smaller;
    border:3px solid #fff;
    background:#DEDFE0;
    padding:6px 10px;
}

.reveal table td.highlight {
    background:#A6D785;
    color:#003300;
}



/* IMAGES ------------------------*/

img {
    cursor:pointer;
}

img.smallimage {
    width:400px;
    float:left;
    margin:10px;
    border:2px solid #acdcff;
}

.image-container-multiple {
    min-height:500px;
}

.image-container-multiple img {
    margin:0 10px;
    height:200px;
    float:left;
    background:#222222;
    padding:10px;
    border-radius:7px;
}

#fade,
#imagecontainer {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:10002;
}

#fade {
    background:black;
}

.overlayImage {
    background:#ffffff;
    margin:20px;
    z-index:10004;
    border:10px solid white;

}


#fade {
    animation:fadeBlack 1s;
    -moz-animation:fadeBlack 1s; /* Firefox */
    -webkit-animation:fadeBlack 1s; /* Safari and Chrome */
    -o-animation:fadeBlack 1s; /* Opera */	
}


.module-image-skewed,
.status-image-skewed {
    -webkit-transform:skew(19deg,-3deg);
    box-shadow:-5px 7px 10px #006fc0;

}

.module-image-skewed {
    width:133px;
    position:relative;
    top:27px;
    left:-70px;
    border-radius:15px;
}
.status-image-skewed {
    float:right;
    width:40px;
    border-radius:6px;
}

/* A major iframe popup */
#flow-popup {
    position:fixed;
    top:0;
    z-index:9997;
    width:100%;
    height:100%;
    visibility:hidden;
    opacity:0;
    -webkit-transition:opacity .3s ease-in;
    -moz-transition:opacity .3s ease-in;
}

#flow-popup img[title="Close"] {
    position:absolute;left:1.5%;top:1%;z-index:9999;
}

#flow-popup iframe {
    width:95%;
    height:92%;
    position:absolute;
    left:2.5%;
    top:2.5%;
    z-index:9998;
    border:5px solid black;
    border-radius:11px;
    box-shadow:-4px 5px 7px #222222;
}



/* ---------- STATES ------------ */
/* -- Report --*/
.report .state-background {
    background-color: white;
}

/* -- Firstpage --*/
.firstpage .state-background {
    background-color:black;
    background-image:none;
}

/* -- last page --*/
.end .state-background {
    background-color: #1e5799;
}

/*-- Separator --*/
.slide-separator .state-background {
    background-color:#19467F;
    background-image:none;
    background-repeat:no-repeat;

}
.easy-process .state-background {
    background-image:url("../img/process_easy.png");
    background-color:#ffffff;
    background-size: 100% auto;
    background-repeat:no-repeat;
}


.slide-separator h1 {
    color:#ffffff;
}

.slide-separator h2 {
    color:#ffffff;
}


/* -- Exercise task --*/
.exercise .state-background {	
    background-color: #f2f5f6;
}

.techdraw .state-background {
    background-color: #f6f8f9;
}

h3.exercise:before {
    content:"";
    display:inline-block;
    height:30px;
    width:30px;
    margin-right:20px;
    background:url("../img/task.png");
    background-repeat:no-repeat;
}


/*-- Table of contents -------------------*/
.tableOfContents .state-background  {
    background-color:white;
}

.tableOfContents ol.toc	 {
    border-left:2px solid #acdcff;
}
.tableOfContents li {
    font-size:1.4em;
    line-height:2em;
    margin-left:2em;
}

/* -- Sales point --------------------*/
.usp .state-background {
    background-color: #ffd154;

}

/* -- Strong Message -----------*/
.quote-slide .state-background {
    background-color:#4F9DD6;
    background-image:url("../img/flow_main.png");
    background-size: 100% auto;
    background-repeat:no-repeat;
}

/* Vertical slide first --*/
.slide-vertical-headline .state-background {
    background-color:#4F9DD6;
}
.slide-vertical-headline h1 {
    text-align:center;
}

.slide-vertical-headline h1:after {
    content:"\2193";
    display:block;
    width:40px;
    margin:0 auto;
    font-family:verdana;
    font-weight:bold;
}

/* Comparison silver bullet -----*/
.compare-silver-bullet .state-background {
    /*background-color:#eee;*/
}


/* BIG WHITE BLING TEXT */
/*.firstpage h1,
.end h1 {
        color:#ffffff;
        font-family:impact;
        letter-spacing:0.2em;
        text-align:center;
}*/
.slide-vertical-headline h1,
.firstpage h1,
.end h1,
.usp p,
.quote-slide p {
    font-family:impact;
    font-size:2.6em;
    line-height:1.2em;
    color:#FF7722;
    color:#FFFFFF;
    letter-spacing:0.02em;
    text-shadow: -3px 1px 4px #AA6600;
    white-space:pre-wrap;
}
.slide-vertical-headline h1,
.quote-slide p {
    text-shadow: -3px 1px 4px #1a4a6e;
}


.usp p strong {text-shadow: -3px 1px 4px #AA6600;}
.firstpage h1,
.end h1 {
    text-shadow: -3px 1px 4px #104E8B;
    text-align:center;
}


/* CODE  */

.reveal code {
    font-size:0.8em;
    font-family:courier;
    line-height:1.25em;		
}



/*-- HELP CONTAINER ------------ */

#help-container {
    opacity:0.2;
    position:absolute;
    z-index:66;
    height:250px;
    width:400px;
    left:30%;
    top:30%;
    background:white;
    border-radius:8px;
    resize:both;
    box-shadow: 0px 3px 12px #000000;
    padding:10px;

    -moz-transition: opacity .4s linear, background 0.8s;
    -ms-transition: opacity .4s linear, background 0.8s;
    -o-transition: opacity .4s linear, background 0.8s;
    -webkit-transition: opacity .4s linear, background 0.8s;
}
#help-container:hover {
    opacity:1;
}
#help-container #help-close {	
    right:-15px;
    top:-15px;
    background-color:#000000;
    border-radius:50%;
    z-index:67;
    cursor:pointer;
    border:5px solid white;
}


#help-container #help-close,
#help-container #help-close:before {
    height:28px;
    width:28px;
    position:absolute;
    display:block;
}

#help-container #help-close:before {
    content:"X";
    color:#878777;
    font-family:verdana;
    font-weight:bold;
    font-size:18px;
    padding:5px 7px;
}
#help-container #help-close:hover {
    background-color:#545454;
}
#help-container #help-close:hover:before {
    color:#ffffff;
}

/* --- ANIMATION ---------------------------------------------*/	
@keyframes fadeBlack {
    0%   {opacity:0;color:#333;}
    100% {opacity:1;color:#fff;}
}

@-moz-keyframes fadeBlack {
    0%   {opacity:0;color:#333;}
    100% {opacity:1;color:#fff;}
}

@-webkit-keyframes fadeBlack {
    0%   {opacity:0;color:#333;}
    100% {opacity:1;color:#fff;}
}

@-o-keyframes fadeBlack {
    0%   {opacity:0;color:#333;}
    100% {opacity:1;color:#fff;}
}

/* -- FEATURE SLIDES ----*/
.reveal .slides > section.featureSlide,
.reveal .slides > section.featureSlide > section
{
    width:100%;
    height:100%;
    padding:0;
}

div#featureslides {
    max-width:90%;
    width:90%;
    height:80%;
    left:50%;

}

.featureSlide h2 {
    margin-top:0;
}

.feature-container-benefits {
    position:absolute;
    right:0;
    width:30%;
    background:#edeedd;
    top:0;
    box-shadow: 0px 4px 16px #666666;
    border-radius:10px;
    height:100%;
    resize:both;

}

.feature-container-benefits ul  {
    list-style-type:none;
    list-style-image:none;
    color:#555;

}

.feature-container-benefits ul li:before {
    content:  "\2713";
    color:#FCB514;
    margin:0 1.3em 0 -2em;
}


.feature-container-benefits li {
    line-height:175%;
    display:block;
    font-size:0.7em;	
    color:#333;
    color:#ffffff;
}

.feature-container-description {
    position:absolute;
    width:70%;
    left:0;
}

.feature-container-description p {
    padding:10px;
}

.feature-container-images {
    position:absolute;
    bottom:0;
    width:100%;
}
.feature-container-images img {
    height:100px;
    padding:10px;
    background:black;
}
.feature-container-audience {
    position:absolute;
    right:0;
    bottom:0;
    width:30%;
    padding:10px;
    background:black;
}

.feature-container-audience ul {
    font-size:0.7em;
    text-align:right;
}
.feature-container-audience ul li {
    line-height:110%;
    color:white;
}
.feature-container-audience ul li:before {
}


/* IMAGES VIA BACKGROUND */
.main_flow {
    position:absolute;
    top:100%;
    height:100%;
    background:url("../img/flow_main.png") left bottom no-repeat;
    width:100%;
    z-index:30;
    background-size: 100% auto;
}


/*------------- BURST TITLE ANIMATION */

h1.burst { 
    text-align: center;
    color: white;
    text-transform: uppercase;
    padding: 1px;		  
    font-weight: 100;
    position: relative;		  
    -webkit-animation: comein 1.5s 1 ease-in-out forwards;
    -moz-animation: comein 1.5s 1 ease-in-out forwards;
    letter-spacing: 30px;
}

@-webkit-keyframes comein {
    0% { letter-spacing: 60px; }
    70% { letter-spacing: 10px; }
    100% { letter-spacing: 20px; }
}

@-moz-keyframes comein {
    0% { letter-spacing: 60px; }
    70% { letter-spacing: 10px; }
    100% { letter-spacing: 20px;  }
}



/*------- BOXES */

/* Horizontal box list */
ul.box-list-horizontal {
    list-style-type:none;
    list-style-image:none;
    color:#ffffff;
    padding:0;
    margin:0;
    /* FIXING INLINE GAP */
    font-size:0;
}
ul.box-list-horizontal li {
    display:block;
    float:left;
    padding:3px 0px 10px 0;
    border-left:1px solid #ffffff;
    border:none;
    background-color:#231F20;
    width:25%;
    height:100px;
    overflow:hidden;
    font-size:14px;
    margin:0;
    line-height:20px;
    border-bottom:1px solid #545454;
    text-align:left;
}

ul.box-list-horizontal li.box-headline {
    width:100%;
    border:none;
    height:24px;
    text-align:center;
    padding:2px 0;
}

.box-headline {
    background:#231F20;
}

ul.box-list-horizontal > li.box-small {
    height:50px;
    width:20%;
}

ul.box-list-horizontal li * {
    position:fixed;
}

ul.box-list-horizontal li > span {
    display:block;
    padding:8px 24px;
    max-width:20%;
    letter-spacing:0.05em;
}

ul.box-list-horizontal li > span:first-child {
    float:left;
    margin-top:37px;
    width: 0; 
    height: 0;
    z-index:999999;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #ffffff;
    padding:0;
}
ul.box-list-horizontal li.box-small > span:first-child {
    margin-top:10%;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ffffff;
}

ul.box-list-horizontal li.box-no-arrow > span:first-child {border-left-color: transparent;}
ul.box-list-horizontal > li.box-first {border-radius:0 0 0px 12px;}
ul.box-list-horizontal > li.box-last {border-radius:0 0 12px 0px;}

ul.box-list-horizontal img {
    position:relative;
    top:63%;
    left:78%;
    width:40px;
    border-radius:10px;
    border:1px solid #044577;
}

/* Hover fun */
ul.box-list-horizontal:hover > li {
    opacity:0.6;
}

ul.box-list-horizontal:hover > li:hover {
    opacity:1;
    cursor:pointer;
    border-top-color:orange;
}

ul.box-list-horizontal:hover > li:hover span {
    border-left-color:orange;
}


/* Box hover Transition */
ul.box-list-horizontal,
ul.box-list-horizontal li,
ul.box-list-horizontal:hover > li,
ul.box-list-horizontal:hover > li:hover,
ul.box-list-horizontal:hover > li:hover span
{
    -moz-transition: opacity .2s ease-in, border-left-color .2s ease-in;
    -ms-transition: opacity .2s ease-in, border-left-color .2s ease-in;
    -o-transition: opacity .2s ease-in, border-left-color .2s ease-in;
    -webkit-transition: opacity .2s ease-in, border-left-color .2s ease-in;
}

/* Vertical box container */
.box-display {}
.box-display > div {width:100%;margin:6px 0;}
.box-display div.box {padding:3px 0px 10px 0;border-radius:9px;border:none;background-color:#0D4F8B;}
.arrow-container {text-align:center;}
.arrow-up, .arrow-left,	.arrow-right, .arrow-down {position:relative;display:inline-block;width:0;height:0;z-index:999999;}
.box-display .arrow-up {border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #999999;}
.box-display .arrow-down {border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #999999;}
.box-display .arrow-right {border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid #ffffff;}
.box-display .arrow-left {border-top: 20px solid transparent;border-bottom: 20px solid transparent; border-right:20px solid green;}


/* Box text*/
.box-display div.box > span {
    display:block;
    color:#ffffff;
    font-size:0.8em;
    padding:1px 6px;
}

.box-display div.box > span:first-child {
    font-weight:bold;
    font-size:1em;
    margin-left:0;
}

.box-display-horizontal div.box > span:first-child,
.box-display-horizontal div.box > span {
    font-size:0.7em;
    font-weight:normal;
    padding:3px 17px;
    line-height:113%;
    float:left;
}

.box-display .small-text {
    min-height:10px;
    text-align:center;
    margin:0;
    font-size:0.6em;
}

.box-display .small-text span {
    white-space:nowrap;
    font-style:italics;
    color:#999999;
}

.box-display .small-text span:after {
    content:" /";
}

.box-display .small-text span:last-child:after {
    content:"";
}



/* LAYOUT ------------------*/	

/* Inner slides for layout */

section .slide-inner-right,
section .slide-inner-left {
    width:50%;
    float:left;
}

section .slide-inner-left {}	
section .slide-inner-right {}






/*------- GRADIENTS */

.blueGradient {
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(30,87,153,1) 0%, rgba(59,144,214,1) 39%, rgba(79,147,198,1) 71%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(39%,rgba(59,144,214,1)), color-stop(71%,rgba(79,147,198,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(30,87,153,1) 0%,rgba(59,144,214,1) 39%,rgba(79,147,198,1) 71%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(30,87,153,1) 0%,rgba(59,144,214,1) 39%,rgba(79,147,198,1) 71%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(30,87,153,1) 0%,rgba(59,144,214,1) 39%,rgba(79,147,198,1) 71%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(30,87,153,1) 0%,rgba(59,144,214,1) 39%,rgba(79,147,198,1) 71%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.gradientRed {
    background: #6d0019;
    background: -moz-linear-gradient(45deg,  #6d0019 0%, #8f0222 56%, #a90329 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329));
    background: -webkit-linear-gradient(45deg,  #6d0019 0%,#8f0222 56%,#a90329 100%);
    background: -o-linear-gradient(45deg,  #6d0019 0%,#8f0222 56%,#a90329 100%);
    background: -ms-linear-gradient(45deg,  #6d0019 0%,#8f0222 56%,#a90329 100%);
    background: linear-gradient(45deg,  #6d0019 0%,#8f0222 56%,#a90329 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=1 );
}

.gradientGreen {
    background: #61c419;
    background: -moz-linear-gradient(45deg,  #61c419 16%, #b4e391 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(16%,#61c419), color-stop(100%,#b4e391));
    background: -webkit-linear-gradient(45deg,  #61c419 16%,#b4e391 100%);
    background: -o-linear-gradient(45deg,  #61c419 16%,#b4e391 100%);
    background: -ms-linear-gradient(45deg,  #61c419 16%,#b4e391 100%);
    background: linear-gradient(45deg,  #61c419 16%,#b4e391 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61c419', endColorstr='#b4e391',GradientType=1 );
}

.gradientLimeLTR {
    background: #e5e5a9;
    background: -moz-linear-gradient(left,  #e5e5a9 0%, #a9d31d 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e5e5a9), color-stop(100%,#a9d31d));
    background: -webkit-linear-gradient(left,  #e5e5a9 0%,#a9d31d 100%);
    background: -o-linear-gradient(left,  #e5e5a9 0%,#a9d31d 100%);
    background: -ms-linear-gradient(left,  #e5e5a9 0%,#a9d31d 100%);
    background: linear-gradient(to right,  #e5e5a9 0%,#a9d31d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5a9', endColorstr='#a9d31d',GradientType=1 );
}

.gradientLimeRTL {
    background: #a9d31d;
    background: -moz-linear-gradient(left,  #a9d31d 0%, #e5e5a9 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a9d31d), color-stop(100%,#e5e5a9));
    background: -webkit-linear-gradient(left,  #a9d31d 0%,#e5e5a9 100%);
    background: -o-linear-gradient(left,  #a9d31d 0%,#e5e5a9 100%);
    background: -ms-linear-gradient(left,  #a9d31d 0%,#e5e5a9 100%);
    background: linear-gradient(to right,  #a9d31d 0%,#e5e5a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9d31d', endColorstr='#e5e5a9',GradientType=1 );
}

ol.list-awesome-numbered li:before,
.gradientBlueBox {
    background: #044577;
    background: -moz-linear-gradient(45deg,  #044577 1%, #0081c6 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#044577), color-stop(100%,#0081c6));
    background: -webkit-linear-gradient(45deg,  #044577 1%,#0081c6 100%);
    background: -o-linear-gradient(45deg,  #044577 1%,#0081c6 100%);
    background: -ms-linear-gradient(45deg,  #044577 1%,#0081c6 100%);
    background: linear-gradient(45deg,  #044577 1%,#0081c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#044577', endColorstr='#0081c6',GradientType=1 );
}









/*---------------------------------------------*
 *
 *    MENU TOP SIDE ANIMATED
 *      TODO THIS IS A COPY
 *---------------------------------------------*/

html {overflow-x:hidden;}
html {overflow-y:hidden;}
html, 
body {    
    width: 100%;
    height: 100%;
}

.reveal {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    background: #FFFFFF;
    font-size: 1.4em;
}

/* Shown menu */
.show-menu .menu-wrap {
    opacity: 1;
}

.show-menu .reveal,
.show-menu .menu-button {
    -webkit-transform: translate(300px,70px);
    transform: translateX(300px) translateY(70px);
}

/* Move menu - move with pixels for IE7 and IE8 */
.move-menu .reveal
.move-menu .menu-button {
    top: 70px;
    left: 300px;
}


/* Menu Button */
.menu-button {
    position: fixed;
    z-index: 1000;
    padding: 0.4em;
    height:7em;
    width: 5em;
    color: white;
    background: #177bc0;
    background: transparent;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    cursor: pointer;
    border: 0;
    margin:0.2em;
}
.menu-button:hover {
    background: none;
}
.menu-button:focus {
    outline: none;
}

.menu-button img {
    height: 4em;
    margin:5%;

}

.menu-button img.icon-active {
    transition-duration: .5s;
    transform: rotate(145deg);
}

/* Menu */
.menu-wrap {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity .5s;
    height: 100%;
    min-width: 100%;
    background: #F1F0EE;
    background: #E5E5E5;
}


.menu-top  {
    width: 100%;
    border-bottom: 1px solid transparent;
    height: 69px;
    padding: 0;
    margin: 0;
    white-space:nowrap;
}

.menu-top fieldset {
    display: inline-block;
    height: 60px;
    padding: 0;
}

.menu-side {
    border-right: 1px solid transparent;
    z-index: 10002;
}

.menu-top fieldset,
.menu-side {
    width: 300px;
}


.menu-top .document-actions {
    position: absolute;
    display: inline-block;
    height: 60px;
    top: 20px;
}

.menu-top .document-actions button {
    height: 30px;
    margin: 10px;
    padding: 5px 1em;;
}

.menu-side a {
    display: block;
    padding: 1.2em;
    border-bottom: 1px solid #efefef;
}

.menu-side a:first-child {

}

.document-actions label {
    padding-right: 0.5em;
    font-size:0.7em;
}

.document-actions input, .document-actions select {
    height: 22px;
    margin-right: 9px;
    border-radius: 4px;
    height: 1.8em;
    width: 70px;

}

/* MENU SIDE */

.menu-side a
{
    color:#333;
    text-decoration:none;
    display:block;
    padding:4px 0 4px 20px;
    text-transform:capitalize;
    border-bottom:1px solid #e2e2e2;
    border-top:1px solid #FFFFFF;
    overflow:hidden;
    height:16px;
    background: #F6F6F6;
}

.menu-side a:hover
{
    background:#FFFFFF;;
    border-top-color:#565656;
    border-bottom-color:#454545;
    height:100px;
    position:relative;
    color: #000000;
    transition: color .1s linear;
}

.menu-side a,
.menu-side a:hover,
.menu-side a:hover span
{
    -moz-transition: height .2s linear, visibility .2s, opacity .2s linear, background-color 0.8s;
    -ms-transition: height .2s linear, visibility .2s, opacity .2s linear, background-color 0.8s;
    -o-transition: height .2s linear, visibility .2s, opacity .2s linear, background-color 0.8s;
    -webkit-transition: height .2s linear, visibility .2s, opacity .2s linear, background-color 0.8s;

}
.menu-side a:active
{
    outline:none;
}

.menu-side a span
{
    visibility:hidden;
    opacity:0;
    line-height:1.4em;
    padding:0 4px 0 0;
    left:13px;
    font-weight:normal;
    color: #736c5e;
    padding-top:8px;
    display:block;
    text-transform:none;
    font-size: 0.9em;
    font-family: verdana;
}

.menu-side a:hover span
{
    border-top: 1px dotted #bdb8ae;
    opacity:1;
    display:block;
    visibility:visible;
}

.menu-side a.collapseLink,
.menu-side .collapseLink:visited 
{
    border-bottom:1px solid #2977b0;
    border-top:1px solid #a1cae9;
    color:white;
    text-indent: 0.6em;
    letter-spacing:0.05em;
    background-color:#4F9DD6;
    background-image: url("../img/expand_right.png");
    background-repeat: no-repeat;
    background-position: 3px 5px;
    background-size:15px;
}

.menu-side a.collapseLink.active {
    background-image: url("../img/expand_down.png");
}

.menu-side .collapseLink:hover 
{
    background-color:#78b4e0;
    height:16px;
}

.menu-side span.error
{
    font-style:normal;
    color:red;
    display:block;
    padding:10px;
    z-index:2;
}



/* SEARCH FIELD */

fieldset {
    border:0;
    position: relative;    
    margin: 0;

}

fieldset input
{
    left: 0.8em;
    background:#FFFFFF;
    border-radius: 7px 0 0 7px;
    padding: 4px 0.5em;
    margin: 0;
    width:228px;
    border:1px solid #AAAAAA;
    height: 20px;
    border-right: 0;
    position: absolute;
    top: 0.8em;;

}

fieldset input, fieldset button {
    position: relative;
    top: 10px;
    left: 15px;
}

fieldset input:focus, button:focus {
    outline:0;
}


.search-button, .search-button:hover
{
    background-image: url('../img/button/btn_search.png');
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    background-size: 18px;
    background-position: center center;
    border-radius: 0 7px 7px 0;
    border: 1px solid #AAAAAA;
    margin: 0;
    padding:4px;
    display: inline-block;
    position: absolute;
    left: 248px;
    border-left: 0;

}


.menu-side #contentgenerator {

    position : absolute;
    overflow-y: auto;
    width: 300px;
    height: 95%; /* TODO ENSURE FIT FOR SCROLL */


}


/*----------------
 * TABS 
 -----------------*/

.tabBar {
    height: 20px;
    width: 100%;
    background: #efefef;
    border-bottom: 2px solid #CFCFCF;
}

.tabBar a {
    text-decoration: none;
    background: #e5e5e5;
    border-right: 1px solid #CCC;
    border-left: 1px solid #F7f7f7;
    color: #777;
    height: 20px;
    line-height: 20px;
    padding: 0.3em 16px;  
    cursor: pointer;
    text-shadow: -1px 1px 0 #fafafa;
    font-size: 9pt;
}

.tabBar a:hover {
    background: white;
    color: orange;
}


.tabBar a.active {
    background: orange;
    color: white;
    text-shadow: none;
}