/* Current color scheme:
      Dark Green  #0B7317
	  Dark Blue   #0B1773
	  Gray Text   #666666
	  Tab background color   #BOADF5  gray blue
*/

/* for older browsers that don't know HTML5 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:     block;
}

body {
/* use a Google Font as first choice */
font-family: 'Angkor', helvetica, arial, sans-serif; */
font-size:   medium;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Quattrocento', helvetica, arial, sans-serif;
color:       #233168;        /* dark blue */
}

h1 {
font-size:  150%;
margin:     0px 0px 0px 0px;
font-weight: 800;
}

h2 {
margin:     10px 0px 0px 0px;
}

p, 
header h2,
li {
font-family: 'Angkor', helvetica, arial, sans-serif;
}

/* add shadow and radius to all images */
img {
border-radius:      7px;  
-moz-box-shadow:    5px 5px 15px #9EA0DB;
-webkit-box-shadow: 5px 5px 15px #9EA0DB;
box-shadow:         5px 5px 15px #9EA0DB;
margin:             0px 20px 20px 0px;
border:             1px white solid;
}


/* = = = = = = = = = = = = = = = =
Set up background image to fill any screen
http://css-tricks.com/perfect-full-page-background-image/
*/
img.bg {
/* Set rules to fill background */
min-height:   100%;
min-width:    1024px;
/* Set up proportionate scaling */
width:        100%;
height:       auto;
/* Set up positioning */
position:     fixed;
top:          0;
left:         0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
left: 50%;
margin-left: -512px;   /* 50% */
        }
}

/* = = = = = = = = = = = = = = = = */
.gradient-bg {
   /* CSS3 Gradients - http://css-tricks.com/css3-gradients/ */
   /* fallback/image non-cover color */
   background-color: #EEE; 
   /* fallback image */
   background-image: url(images/fallback-gradient.png); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#EEE, #9EA0DB); /* light gray to blue */
   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#9EA0DB));
   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#EEE, #9EA0DB); 
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#EEE, #9EA0DB);
}

#frame {
border:      1px #000060 solid;
width:       800px;
background:  #EEEEFF;
margin:      20px auto 20px auto;
border-radius: 5px;

}

header {
margin:    20px 20px 20px 20px;  
border:    1px #DDD solid;
height:    150px;
}

header img{
float:         left;
margin:        10px 20px 0px 10px;
border-radius: 7px;
}

header h1 {
margin:     50px 0px 0px 0px;  /* vertically center with photo */
}

header h2 {
font-size:   110%;
font-weight: 100;
}

nav {
font-family: 'Angkor', 'Quattrocento', helvetica, arial, sans-serif;;
font-size:   1em;
margin:      20px 20px 10px 0px;
float:       left;
padding:     0px 0px 0px 0px;
width:       160px; 
}

nav ul {
list-style:  none;  /* remove bullets */
padding:     0px;
margin:      0px;
}

nav li {
/* float:       left; */ /* make horizontal */
margin:       0px  0.15em;
line-height:  1.75em;
padding:      5px 5px 5px 10px;
}
nav li a{
display:         block;
color:           #233168;        /* dark blue */
text-decoration: none;
}

nav li a:hover {
border:            1px #999 solid;
/* add a little animation to the choice */
border-radius:     4px;
background-color:  #DDD;
font-weight:       800;
}

article {
width:       90%;
margin:      0px 20px 0px 20px;
padding:     10px 20px 0px 20px;
}

ul.narrow {
margin:      0px 0px 0px 250px;  /* move bullets into paragraph */
}


iframe {
margin:      20px 0px 20px 0px;
border:      1px #777 solid;
width:       520px;
}

footer {
font-size:   .75em;
margin:      20px;  
padding:     20px;
border:      1px #DDD solid;
text-align:  center;
clear:       both;
}



.paperCurl {
/* http://blogs.sitepointstatic.com/examples/tech/css3-paper-curl/index.html */
position:         relative;
/* width:            500px; */
/* padding:          0px 20px 0px 20px; */
/* margin:           0 auto; */
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow:    0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow:         0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.paperCurl:before, .paperCurl:after
{
position: absolute;
width:              40%;
height:             10px;
content:            ' ';
left:               12px;
bottom:             12px;
background:         transparent;
/* fold over, give shadow and put at bottom of box
   using pseudo-elements for all major browsers */
-webkit-transform:  skew(-5deg) rotate(-5deg);
-moz-transform:     skew(-5deg) rotate(-5deg);
-ms-transform:      skew(-5deg) rotate(-5deg);
-o-transform:       skew(-5deg) rotate(-5deg);
transform:          skew(-5deg) rotate(-5deg);
/* add shadowing */
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-moz-box-shadow:    0 6px 12px rgba(0, 0, 0, 0.7);
box-shadow:         0 6px 12px rgba(0, 0, 0, 0.7);
 /* move behind 'paper' to only show shadow */
z-index:            -1;                    
}

.paperCurl:after
{
left:              auto;
right:             12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform:    skew(5deg) rotate(5deg);
-ms-transform:     skew(5deg) rotate(5deg);
-o-transform:      skew(5deg) rotate(5deg);
transform:         skew(5deg) rotate(5deg);
}