/*!
layout.css -- css stylesheet used on www.gnu.org

Copyright (C) 2006, 2007, 2008, 2009, 2010, 2011,
   2013, 2014, 2015, 2016 Free Software Foundation

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
*/

/*
   NOTE: Changes to this file will affect the entire site, often in
         unexpected ways. Please mail patches to www-discuss@gnu.org rather
         than commit changes directly.

   NOTE: After modifying this file, please generate the corresponding minified
         version, otherwise the changes won't be visible.

         To generate the minified version of this file, we currently use a free
         program called YUI Compressor and run this command:

         yuicompressor layout.css > layout.min.css
*/


/*** COLORS ***/

/*
Text
   black    normal text, hover on #555 and nav-bars
   white    #navigation
   #999     light gray: text shadow
   #222, #333, #404040, #555: special items
   #777     medium gray: hover special links
   #334683  blue from GNU banner: h1, h2
   #005090  greenish blue: normal links
   #100070  purplish blue: normal visited links, normal hover
   blue     #urgent links
   #171d33  dark blue (from screenshot): #Action h2
   #971611  red from GNU banner: .button link, #join-fsf

Backgrounds
   white    #inner, navbar li.active
   #f0f2f4  light bluish gray: #translations, .emph-box, #outdated,
            .listing, #footer, .toc, lyrics
   #e7e9eb  html
   #d1d4d7  #edu-navbar, #fsf-links, #searcher
   #ddd     gray (looks purplish): #gpl-compat-matrix
   #ccffcc  light green: #gpl-compat-matrix
   #e4ffcc  light yellowish green: #gpl-compat-matrix
   #ffc     very pale yellow: .highlight-para, p.highlight
   #fff898  pale yellow: table headers, .highlight
   #ff3     yellow: #urgent
   #a42e2b  red (slightly darker than the Gnowsys logo): #navigation

Borders
   black, #111, #333, #666: tables
   #999     buttons, hr, unfocused inputs
   #b9bcbf  bluish gray: body, #Action, .highlight-para, .announcement
   #d1d4d7  bluish gray: #translations, #outdated
   #3465a4  blue (slightly lighter than GNU banner): edu-cases ridges
   #6092d0  note
   #334683  focused inputs
   #171d33  dark blue: box-shadow behind buttons
   #6989b6  light blue: border for .big-section h3
*/

/*** Luminosity contrast ratio and color difference ***
   source: http://springmeier.org/www/contrastcalculator/index.php

   Color1       Color 2       contrast       Color
                               ratio      difference
Black-gray
   #000         white          21.3           765
   #000         #ff3           19.6           561
   #222         white          15.91          663
   #222         #c9cccf         9.87          510
   #333         white          12.63          612
   #333         #e7e9eb        10.38          546
   #333         #c9cccf         7.83          459
   #404040      #d1d4d7         6.97          444
   #555         white           7.46          510

Red
   #971611      white           8.61          704
   #971611      #e7e9eb         7.07          638
   #a42e2b      white           6.99          630

Blue from GNU banner
   #334683      white           8.96          494
   #334683      #fff898         8.16          384
   #334683      #e7e9eb         7.36          428
   #334683      #777            2.0           110
   #334683      #555            1.20           76
   #334683      #333            1.41          118
   #334683      black           2.34          271

Blue (urgent)
   #00f         #ff3            8.02          714

Blue links
   #005090      white           8.23          461
   #005090      #e4ffcc         7.64          383
   #005090      #fff898         7.50          351
   #005090      #f0f2f4         7.34          422
   #005090      #ccffcc         7.35          359
   #005090      #777            1.84          103
   #005090      #333            1.53          151
   #005090      black           2.55          304

Purple links
   #100070      white          16.72          653
   #100070      #fff898        15.23          543
   #100070      #ccffcc        14.92          551
   #100070      #777            3.73          245
   #100070      #333            1.32          163
   #100070      black           1.26          112
   #100070      #005090         2.03          112
*/


/*** MAIN DIVS ***/

/*
From top to bottom:
   #searcher + #toplinks             [body-include-1.html]
   #translations                     [body-include-1.html]
   #header (#gnu-banner, #fsf-frame) [body-include-2.html]
   #navigation                       [body-include-2.html]
   (#edu-navigation in a few pages)  [<page>.html]
   #content                          [<page>.html]
   #fsf-links                        [footer-text.html]
   #mission-statement + #backtotop   [footer-text.html]
   #footer                           [<page>.html]
*/


/***  PAGE LAYOUT  ***/

html, body {
   font-size: 1em;
   text-align: left;
   text-decoration: none;
   color: #000;
}
html { background: #e7e9eb; }

/* This specifies the basic width of our web pages.  Don't change it
   without discussion on www-discuss.  The magic 74.92 is for
   consistency with fsf.org.  */
body {
   max-width: 74.92em;
   margin: auto;
   background-color: white;
   border: .1em solid #b9bcbf;
   border-top: 1px solid transparent;
   -moz-box-shadow: 0 0 5px 5px #b9bcbf;
   -webkit-box-shadow: 0 0 5px 5px #b9bcbf;
   -icab-box-shadow: 0 0 5px 5px #b9bcbf;
   -o-box-shadow: 0 0 5px 5px #b9bcbf;
   box-shadow: 0 0 5px 5px #b9bcbf;
}

/** Widths **/

.inner { overflow: hidden; }

#searcher, #translations, #header, #content,
 #mission-statement, #footer {
   padding-left: 3%; padding-right: 3%;
}
#content ul#edu-navigation {
   margin-left: -3.2%; margin-right: -3.2%;
}

/** Backgrounds **/

#searcher, #edu-navigation, #fsf-links {
   background-color: #d1d4d7;
}
#translations, #footer { background-color: #f0f2f4; }

#navigation { background-color: #a42e2b; }

/** Fonts **/

#searcher, #toplinks, #translations, #header,
 #navigation, #edu-navigation,
 #fsf-links { font-family: "FreeSans", sans-serif; }


/*** BASIC ELEMENTS ***/

/** Size and positioning **/

p, pre, li, dt, dd, code, address { line-height: 1.3em; }

/* These headers are appropriate for templated pages with div#content, but
   generally too big for a few non-templated pages that use layout.css.
   Another set of headers will have to be defined for those. */
h1 { font-size: 2.4em; margin-bottom: 1.1em; }
h2 { font-size: 2.0em; margin-bottom: 1.1em; }
h3 { font-size: 1.5em; margin: 1em 0 .80em 0; }
h4 { font-size: 1.2em; margin: 1em 0 .83em 0; }
h5 { font-size: 1.1em; margin: 1em 0 .91em 0; }
h6 { margin: 1em 0; }

p, pre { margin-top: 1em; }   /* In combo.css: margin-bottom:1em. */
address { margin-bottom: 1em; }

ul, ol, blockquote {
   margin-left: 1.5%; margin-right: 1.5%; /* In combo.css: margin:1em. */
}
/* Lists of underlined links are difficult to read. The top margin
   gives a little more spacing between entries. */
ol li { margin: 1em 0 0 1em; }
ul li, ul ol li { margin: .5em 0 0 1em; }
ul li p, ul li pre, ul ul li, ul li blockquote, table li {
   margin-top: .3em; margin-bottom: 0;
}
ul ul, ol ul, table ul { margin: 0 1.5%; }

/* Separate description lists from preceding text */
dl { margin: 1.5em 0 0 0; }
/* separate the "term" from subsequent "description" */
dt { margin: 1em 0; }
/* separate the "description" from subsequent list item
   when the final <dd> child is an anonymous box */
dl dd { margin: 1em 3% 1.5em 3%; }

small { font-size: .9em; }

/** Style **/

h1, h2 { color: #334683; text-shadow: #999 1px 1px 0; }
/* The default color (black) is too dark for large text in
   bold font. */
h3, h4 { color: #333; }
h5, h6, dt { color: #222; }

a[href] { color: #005090; }
a[href]:visited { color: #100070; }
a[href]:active, a[href]:hover {
   color: #100070;
   text-decoration: none;
}

ul li { list-style: square; }
ul ul li, ol ul li { list-style: circle; }

blockquote { font-style: italic; }
blockquote i, blockquote em, blockquote cite,
 em i, em cite, cite i, cite em { font-style: normal; }

acronym, abbr { text-decoration: none; } /* border-bottom in combo.css */
pre { overflow: auto; }


/*** SIMPLE CLASSES ***/

.center, .c { text-align: center; }
.nocenter{ text-align: left; }

.underline { text-decoration: underline; }
.nounderline { text-decoration: none; }

.big { font-size: 1.3em; padding: .3em 0; }

.inline-list li { display: inline }
.no-bullet li { list-style: none; }

.no-display { display: none; }


/*** SEPARATOR ***/

/* For license-list.html, but could be used elsewhere. */
hr.separator {
   display: block;
   height: .3em;
   margin-bottom: 1.2em;
   color: #999;
   background-color: #999;
   border: none;
}


/*** FORMS ***/

form input { font-family: inherit; }
form input[type="text"] {
   padding: .2em;
   margin: 0;
   color: #555;
   background: white;
   border: .1em solid #c9cccf;
}
form input[type="submit"] {
   padding: .2em .4em;
   margin: 0;
   color: #333;
   background: #e7e9eb;
   border: .1em solid #c9cccf;
}
form input[type="text"]:focus {
   color: #333;
   border: .1em solid #334683;
}
form input[type="text"]:focus + input[type="submit"] {
   border: .1em solid #334683;
}
form input[type="submit"]:hover {
   cursor: pointer;
}


/*** BUTTONS ***/

.button a, .button a:visited {
   color: #971611;
   text-decoration: none;
}
.button a:hover {
   color: #777;
}
.small {
   font-size: 1.6em;
   background-color: #e7e9eb;
}


/*** SPECIAL BORDERS ***/

#searcher input[type="text"], #searcher input[type="submit"],
 #fssbox input[type="text"] {
   border-radius: .3em;
   -moz-border-radius: .3em;
   -khtml-border-radius: .3em;
   -webkit-border-radius: .3em;
   -opera-border-radius: .3em;
}
#join-fsf a, #fssbox input[type="submit"] {
   box-shadow: 0 .15em #171d33;
   -moz-box-shadow: 0 .15em #171d33;
   -webkit-box-shadow: 0 .15em #171d33;
   -icab-box-shadow: 0 .15em #171d33;
   -o-box-shadow: 0 .15em #171d33;
   border-radius: 1em;
   -moz-border-radius: 1em;
   -khtml-border-radius: 1em;
   -webkit-border-radius: 1em;
   -opera-border-radius: 1em;
}


/*** RETURN LINKS ***/

.back, #backtotop {
   text-align: right;
   line-height: 1.5em;
   font-weight: bold;
   margin: 1.5em 2%;
}
.back a, .back a:visited,
 #backtotop a, #backtotop a:visited { color: #333; }
.back a:hover,
 #backtotop a:hover { color: #777; }

#backtotop {
   margin: 0 5% 2em;
}


/*** BIG SECTION HEADERS ***/

div.big-section {
   float: left;
}
div.big-section h3 {
   font-size: 1.8em;
   padding: .2em 0;
   margin: 1.3em .3em .6em 0 ;
   color: black;
   border-top: .2em solid #6989b6;
   border-bottom: .2em solid #6989b6;
}
div.big-subsection {
   margin-top: 1.3em;
   margin-bottom: 2em;
}
div.big-subsection h4 {
   clear: both;
   display: inline;
   font-size: 1.5em;
   margin-right: .3em;
   color: black;
}


/*** ANCHOR ***/

/* This is used in pages of lists, such as gnu-linux.faq.html,
   to give readers a hint that they can link directly to a given item.
   We make it less obtrusive than the item heading it follows.  */
.anchor-reference-id { font-size: 80%; font-weight: normal; }

span.anchor-reference-id a { color: #333; }
span.anchor-reference-id a[href]:hover { color: #777; }


/*** NON-FLOATING INSETS AND HIGHLIGHTED STUFF ***/

.emph-box {
   padding: .5em 1.2em;
   background-color: #f0f2f4;
   border: 1px solid #c9cccf;
}
.emph-box p { font-size: .9em }
.emph-box h4 {
   text-align: center;
   font-size: 1.5em;
}
.highlight, .highlight-para {
   clear: both;
   margin-bottom: 1em;
   color: black;
}
.highlight {
/* Please do not add borders. This style is applied to an in-line tag. */
   padding: .2em .5em;
   background-color: #fff898;
   border: 0;
}
.highlight-para {
   padding: 0 1.2em;
   background-color: #ffc;
   border: 2px solid #b9bcbf;
}
.lyrics {
   background-color: #f0f2f4; font-style: italic; width: 25em;
   padding: 2em; border: 2px solid #e7e9eb;
   margin-left: 2em; margin-right: 2em;
}

/* Announcements */
div.announcement {
   font-size: 1.1em; font-weight: bold;
   padding: 0 1em;
   margin: 1.5em 0;
   color: #333;
   border-left: .5em solid #b9bcbf;
}
div.announcement blockquote {
   margin-left: 0; margin-right: 0;
}

/* Note about Free Software Free Society */
blockquote#fsfs p { padding: .3em 0; }

/* the urgent div should be enabled when we have something urgent to
   appear on every page - these typically come from johns, peterb or rms
   at the fsf */
#urgent {
   text-align: center;
   font-size: .9em; font-weight: bold;
   line-height: 2.6em;
   color: black;
   background-color: #ff3;
   border-bottom: .3em solid #333;
}
#urgent a, #urgent a:visited {
   color: blue;
}
#urgent a:hover { color: #777; }

/* For the note saying the page is a translation. */
.trans-disclaimer {
   text-align: center;
   font-weight: bold;
   font-style: italic;
   margin-bottom: 0;
   margin-top: 1.2em;
}
.trans-disclaimer a,
.trans-disclaimer a:visited { color: #005090; }
.trans-disclaimer a:hover { color: #777; }

/* For outdated translations  */
#outdated {
   text-align: center;
   padding: .7em 3%;
   margin: .3em -3.2%;
   background-color: #f0f2f4;
   border-bottom: .2em solid #d1d4d7;
}
#outdated p {
   margin: 0.2em 0;
}
#outdated a:visited { color: #005090; }
#outdated a:hover { color: #777; }

/* For translators notes */
.translators-notes {
   clear: left;
   font-size: .9em;
   margin-top: 2em;
}
.translators-notes hr { margin-bottom: 1em; }
.translators-notes ol li { margin: .5em 1.1em; }


/*** FLOATING NOTES ***/

.note {
   clear: right;
   float: right;
   text-align: center;
   font-style: normal;
   width: 20em; max-width: 90%;
   padding: 0;
   margin: .3em 1em 1em 1em;
   border: .15em dotted #6092d0;
}
.note p {
   font-size: 1.1em;
   line-height: 1.4em;
   padding: 0 1em;
   margin: 1em 0;
}
.note strong { font-size: 1.2em; }


/*** TABLES OF CONTENTS ***/

/* Common definitions */
div.summary, div.toc {
   padding: .4em 1.5em .5em 1.5em;
   background: #f0f2f4;
}
div.summary ul li ul { margin: 0 3%; }

div.summary h3, div.toc h3,
 div.summary h4, div.toc h4 {
   text-align: center;
}
div.summary h3, div.toc h3 {
   font-size: 1.2em;
   margin-top: 1em;
}
div.summary h4, div.toc h4 {
   font-size: 1.1em;
}

/* Small tables of contents */
div.summary {
   clear: right;
   float: right;
   width: 20em; max-width: 90%;
   margin: .3em 0 1em 0;
   border-left: 1.5em solid white;
}
/* Big tables of contents */
div.toc { max-width: 45em; margin: 2.5em auto 2em auto; }

@media (max-width: 46em) {
   div.summary {
      float: none; width: 30em; max-width: 80%;
      margin: 2.5em auto 2em auto;
      border: none;
   }
}


/*** IMAGES ***/

.imgright { float: right; margin: .2em 0 1em 1.5em; }
.imgleft  { float: left;  margin: .2em 1.5em 1em 0; }

/* For pictures with/without legend. */
.narrow { width: 15em; }
.medium { width: 20em; }
.wide   { width: 27em; }
.pict { max-width: 100%; margin: 1em auto; }
.pict img { width: 100%; }
.pict p {
   text-align: center;
   font-style: italic;
   margin-top: .5em;
}

@media (min-width: 43em) {
   .pict.narrow {
       float:right; margin: .2em 0 1em 1.5em;
   }
}
@media (min-width: 48em) {
   .pict.medium {
       float:right; margin: .2em 0 1em 1.5em;
   }
}
@media (min-width: 55em) {
   .pict.wide {
       float:right; margin: .2em 0 1em 1.5em;
   }
}

/* This will be removed as soon as pages that use .photo
   are updated to .pict. */
.photo {
   float: right;
   width: 30em; max-width: 100%;
   margin: .3em 0 1em 0;
}
.photo img, .photo p {
   width: 94%;
   padding: 0 6%;
}
.photo img.recessed { width: 90%; }


/*** LISTINGS ***/

.listing,
.stx table {
   /* The default table for document listings. Contains name, document types,
   modification times etc in a file-browser-like fashion */
   border-collapse: collapse;
   border: 1px solid #666666;
   margin: 1em 0em 1em 0em;
}

.listing th,
.stx table th {
   background: #fff898;
   color: black;
   font-weight: bold
   border: 1px solid #666666;
   font-weight: normal;
   padding: .7em;
}

.listing td a { display: block; }
.listing .top {
   border-top: 1px solid #666666;
   text-align: right
   padding: 0em 0em 1em 0em;
}

.listing .odd {
   /*every second line should be shaded */
   background-color: transparent;
}
.listing .even {
   background-color: #f0f2f4;
}
.listing .listingCheckbox {
   text-align: center;
}
.listing td,
.stx table td {
   border: 1px solid #666666;
   padding: 1em;
   text-align: center;
   line-height: 1.3em
}
.listing img {
   vertical-align: middle;
}
.listing {
   width: 100%;
   display: block;
   overflow: auto;
   padding: .1em;
   margin: auto;
}


/*** TOP LINKS ***/

#toplinks {
   float: left;
   /* For NetSurf 1.2, and maybe a few other browsers. */
   padding: .5em 2em .3em;
}
/* For standard browsers. */
@media (min-width: 0) {
   #toplinks { padding: .5em 3% .3em; }
}
#toplinks a, #toplinks a:visited {
   white-space: nowrap;
   /* the next line is a workaround for Midori 0.5.8 */
   display: inline-block;
   font-weight: bold;
   font-size: .9em;
   color: #404040;
   text-decoration: none;
   margin-right: 1em;
}
#toplinks a:hover { color: #777; }


/*** SEARCHER ***/

#searcher {
   display: block;
   text-align: right;
   font-size: .9em;
   font-weight: bold;
   padding-top: .3em; padding-bottom: .3em;
}


/*** TRANSLATION LIST ***/

#translations {
   clear: both;
   font-size: .9em;
   text-align: left;
   border-bottom: .2em solid #d1d4d7;
}
#translations p {
   line-height: 1.2em;
   padding: .3em 0;
   margin: 0;
}
#translations span {
   white-space: nowrap;
   font-size: .9em;
   margin-right: .5em;
}
#translations span a, #translations span a:visited {
   color: #222; text-decoration: none;
}
/* Highlight the link to the original page */
#translations span.original {
   font-size: 1em; font-weight: bold;
}
#translations span.original a,
#translations span.original a:visited {
   color: #334683;
}
#translations a:hover,
#translations span.original a:hover {
   color: #777;
}


/** FSF frame **/

#fsf-frame {
   float: right;
   font-size: .9em;
   text-align: center;
   line-height: 1.3em;
   width: auto;
   padding: 0;
   margin: 1em 0;
}
#fsf-frame a, #fsf-frame a:visited {
   font-size: 1.1em;
   font-weight: bold;
   text-decoration: none;
}
#fsf-frame p { padding: 0; margin: 0; }
#fsf-frame hr { display: none; }

#join-fsf {
   padding: .4em 0;
}
#join-fsf a, #join-fsf a:visited {
   padding: .3em 1em;
   color: #971611;
   background: #e7e9eb;
}

#fssbox {
   padding: 0;
   margin-top: 1.3em;
}
#fssbox a, #fssbox a:visited {
   color: #334683;
}
#fssbox form p { margin-top: .2em; }
#fssbox input {
   font-weight: bold;
}
#fsf-frame a:hover { color: #777; }


/** GNU banner **/

#gnu-banner {
   font-size: 1.8em;
   font-weight: bold;
   line-height: 1.3em;
   padding-top: 1.1em;
}
#gnu-banner img {
   float: left;
   height: 2.4em;
   margin: 0 .15em;
   position: relative; bottom: .4em;
}
#gnu-banner a {
   color: #334683; text-decoration: none;
}
#gnu-banner a strong {
   font-size: 1.4em;
   color: #971611;
}
#fsf-support {
   font-size: .9em;
   font-weight: bold;
   font-style: italic;
   padding: .5em 0;
   margin: 0;
   color: #555;
}
#fsf-support a, #fsf-support a:visited { color: #555; }
#fsf-support a:hover { color: black; }

@media (max-width: 40em) {
   #gnu-banner { clear: both }
}


/*** NAVIGATION BARS ***/

#navigation, #fsf-links { clear: both; }

/* line-height is defined here for NetSurf 1.2.
   No effect in NetSurf 2.9 or Firefox. */
#navigation ul, #fsf-links ul, ul#edu-navigation {
   text-align: center;
   font-size: 0.9em;
   line-height: 1.7em;
   padding: .15em 0;
   margin-top: 0; margin-bottom: 0;
}
#navigation li, ul#edu-navigation li, #fsf-links li {
   white-space: nowrap;
   display: inline;
   display: inline-block;
   line-height: 1.5em;
   font-family: "sans-serif", sans-serif;
   font-weight: bold;
   padding-top: .1em;
   margin: .1em .4em;
}

/* Mock border to avoid size change when a link becomes active */
#navigation li { border-bottom: .15em solid #a42e2b; }
ul#edu-navigation li { border-bottom: .15em solid #d1d4d7; }
#fsf-links li { padding-bottom: .15em; }

 /* For Firefox (can't set line-height when "a" is displayed inline) */
#navigation a, ul#edu-navigation a, #fsf-links a {
   display: inline-block;
   padding-top: .1em;
}

#navigation, #navigation a, #navigation a:visited { color: white; }
#edu-navigation, #edu-navigation a, ul#edu-navigation a:visited,
 #fsf-links a, #fsf-links li a:visited { color: #222; }

#navigation li.active {
   font-style: italic;
   border-bottom: .15em solid white;
}
ul#edu-navigation li.active,
 ul#edu-navigation li.current {
   font-style: italic;
   border-bottom: .15em solid #a42e2b;
}
#navigation li a, ul#edu-navigation li a, #fsf-links li a,
 #navigation li.active a:hover,
 ul#edu-navigation li.active a:hover {
   text-decoration: none;
}
#navigation a:hover, ul#edu-navigation a:hover,
 #fsf-links a:hover { text-decoration: underline; }


/*** CONTENT ***/

#content { margin-bottom: 2.5em; }


/*** MISSION STATEMENT ***/

#mission-statement {
   font-size: 0.9em;
   margin-top: 2em; margin-bottom: 2em;
}
#mission-statement blockquote {
   font-weight: bold;
   margin: 0;
}
#mission-statement img {
   float: left;
   height: 2em;
   margin: .3em .5em;
}


/*** FOOTER ***/

#footer {
   font-size: .9em;
   padding-top: 1.5em; padding-bottom: 1.5em;
   color: #333;
   border-top: 1px solid #c9cccf;
}
#footer p, #bottom-notes { margin: 0; }

.unprintable { margin-bottom: .7em; }

.translators-credits { margin: .7em 0; }

#footer p.unprintable, #generic p { margin-top: .7em; }


/*** EDUCATION ***/

/* Breadcrumbs */
.edu-breadcrumb {
   font-size: .9em;
   font-weight: bold;
   padding-top: .4em;
   margin-top: 0;
   color: #333;
}
.edu-breadcrumb a,
.edu-breadcrumb a:visited {
   color: #334683;
   text-decoration: none;
}
.edu-breadcrumb a:hover {
   color: #777;
}

/* Subsections of /education "Case Studies" */
.edu-cases {
   border-top: 5px ridge #3465a4;
   border-bottom: 5px ridge #3465a4;
   padding: 1.5em 0;
   margin: 2em 4%;
}

/* make h3 for edu-cases look like h4 for other pages */
.edu-cases h3 {
   font-size: 1.3em;
   margin: 0; margin-bottom: 1em;
}
.edu-cases ul, .edu-cases ol {
   padding: 0 4%;
}