/* stylesheet for demo and examples */

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700italic,700);
body {
margin: 0;
padding: 0;
border: 0;
background: #25201e;
color: #d9d6d5;
font-family: arial, sans-serif;
font-size: 1em;
line-height: 1.4em;
text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
}
a {
color: inherit;
text-decoration: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
hr {
display: block;
height: 0;
border: 0;
border-top: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
margin: 1em 0;
padding: 0;
}
h1, h2, h3, p {
margin-bottom: 1em;
}
h1, h2 {
font-family: 'Lobster Two', georgia, serif;
line-height: 1em;
font-weight: 700;
}
h2 {
font-size: 4em;
}
header, #navigation-menu, #content, footer {
position: relative;
}
header, footer {
padding: 1em 3em;
text-shadow: none;
}
header h1 {
color: #e6842c;
font-size: 1.4em;
font-style: italic;
}
nav ul, nav ol, nav li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation-menu {
position: fixed;
top: 2em;
right: 3em;
left: auto;
bottom: auto;
z-index: 9;
text-shadow: none;
font-size: 0.85em;
}
#navigation-menu ul {
overflow: hidden;
background: #564a44;
background: rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navigation-menu li {
margin: 3px;
}
#navigation-menu a {
display: block;
padding: 0.2em 0.6em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navigation-menu a:hover, #navigation-menu a.mPS2id-highlight {
background: #e6842c;
color: #fff;
}
#content section {
min-height: 900px;
text-shadow: -1px -1px 0 rgba(0,0,0,0.65);
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
box-shadow: 0 -1px 0 rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
background: #362f2d;
background: rgb(107,95,89);
background: -moz-radial-gradient(center, ellipse cover, rgba(107,95,89,1) 0%, rgba(54,47,45,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(107,95,89,1)), color-stop(100%, rgba(54,47,45,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(107,95,89,1) 0%, rgba(54,47,45,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(107,95,89,1) 0%, rgba(54,47,45,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(107,95,89,1) 0%, rgba(54,47,45,1) 100%);
background: radial-gradient(ellipse at center, rgba(107,95,89,1) 0%, rgba(54,47,45,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b5f59', endColorstr='#362f2d', GradientType=1 );
color: #d9d6d5;
}
#content section:nth-child(3n+2) {
text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow: 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
background: #c6b6a4;
background: rgb(239,231,220);
background: -moz-radial-gradient(center, ellipse cover, rgba(239,231,220,1) 0%, rgba(198,182,164,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(239,231,220,1)), color-stop(100%, rgba(198,182,164,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(239,231,220,1) 0%, rgba(198,182,164,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(239,231,220,1) 0%, rgba(198,182,164,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(239,231,220,1) 0%, rgba(198,182,164,1) 100%);
background: radial-gradient(ellipse at center, rgba(239,231,220,1) 0%, rgba(198,182,164,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efe7dc', endColorstr='#c6b6a4', GradientType=1 );
color: #25201e;
}
#content section:nth-child(3n+3) {
text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow: 0 -1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
background: #94cbce;
background: rgb(214,251,252);
background: -moz-radial-gradient(center, ellipse cover, rgba(214,251,252,1) 0%, rgba(148,203,206,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(214,251,252,1)), color-stop(100%, rgba(148,203,206,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(214,251,252,1) 0%, rgba(148,203,206,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(214,251,252,1) 0%, rgba(148,203,206,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(214,251,252,1) 0%, rgba(148,203,206,1) 100%);
background: radial-gradient(ellipse at center, rgba(214,251,252,1) 0%, rgba(148,203,206,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6fbfc', endColorstr='#94cbce', GradientType=1 );
color: #25201e;
}
.content {
padding: 1em 3em;
}
.content hr + a, .content hr + a + a {
margin-right: 2em;
}
.mPS2id-target .content h2:first-child:after {
display: inline-block;
position: relative;
vertical-align: middle;
content: "Current target class: mPS2id-target";
margin-left: 1em;
font-size: 0.25em;
line-height: 1.4em;
font-style: italic;
opacity: 0.7;
width: 180px;
font-family: arial, sans-serif;
font-weight: normal;
}
.ie8 .mPS2id-target .content h2:first-child:after {
font-size: 0.95em;
}
header, .content, footer {
padding-right: 150px;
}
.horizontal-layout {
width: 700%;
}
.horizontal-layout header h1 {
display: none;
}
.horizontal-layout #navigation-menu {
right: auto;
left: 3em;
top: 4em;
}
.horizontal-layout #content {
overflow: hidden;
}
.horizontal-layout #content section {
width: 14.285%;
float: left;
min-height: 480px;
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), -1px 0 0 rgba(0,0,0,0.6);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), -1px 0 0 rgba(0,0,0,0.6);
}
.horizontal-layout #content section:nth-child(3n+2), .horizontal-layout #content section:nth-child(3n+3) {
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), -1px 0 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(255,255,255,0.5);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), -1px 0 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(255,255,255,0.5);
}
.horizontal-layout .content h2 {
position: relative;
padding-bottom: 50px;
}
.horizontal-layout .content h2 + p {
margin-top: -50px;
}
.horizontal-layout .mPS2id-target .content h2:first-child:after {
display: block;
position: absolute;
width: 100%;
height: 50px;
margin-left: 0;
}
.horizontal-layout header > *, .horizontal-layout footer > * {
width: 10%;
}
.horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer {
padding-left: 150px;
padding-right: 3em;
}
.auto-layout {
width: 6200px;
height: 6200px;
}
.auto-layout header h1 {
margin-left: 150px;
}
.auto-layout #navigation-menu {
right: auto;
left: 2em;
}
.auto-layout #content {
height: 100%;
}
.auto-layout #content section {
position: absolute;
min-height: 600px;
width: 600px;
top: 0;
left: 0;
margin-left: 3em;
-webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.auto-layout #content section#section-2 {
top: 0;
left: 1800px;
}
.auto-layout #content section#section-3 {
top: 1200px;
left: 900px;
}
.auto-layout #content section#section-4 {
top: 1200px;
left: 2700px;
}
.auto-layout #content section#section-5 {
top: 2400px;
left: 1800px;
}
.auto-layout #content section#section-6 {
top: 2400px;
left: 3600px;
}
.auto-layout #content section#section-7 {
top: 3600px;
left: 2700px;
}
.auto-layout .content {
padding-left: 150px;
padding-right: 3em;
}
 @media only screen and (min-width: 1140px) {
header, .content, footer,  .horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer,  .auto-layout .content {
padding-right: 3em;
padding-left: 3em;
}
.horizontal-layout header h1 {
display: block;
}
.auto-layout header h1 {
margin-left: 0;
}
#navigation-menu {
font-size: 1em;
top: 1.55em;
}
.horizontal-layout #navigation-menu, .auto-layout #navigation-menu {
right: 3em;
left: auto;
top: 1.55em;
}
#navigation-menu ul {
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
}
#navigation-menu li {
float: left;
margin: 3px 5px;
}
#navigation-menu a {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
}