/* ========================================================================= */
/* global */

/* This is for old-browser html5 compatibility */
header, section, footer, aside, nav, main, article, figure {
   display: block;
}

/* Needed for IE */
a, img {
   border: none;
   outline: none
}

* {
   margin: 0;
   padding: 0;
}

body {
   text-align: center;
   font-family: 'Shadows Into Light Two', Verdana, Arial, Helvetica, sans-serif;
   font-size: 150%;
   color: #617BFF;
   background: url('../img/canvas.jpg');
   background-repeat: repeat;
}

a:link {
   color: #617BFF;
   font-weight: bold;
   text-decoration: none;
}

a:visited {
   color: #617BFF;
   font-weight: bold;
   text-decoration: none;
}

a:hover {
   background-color: #FF84D6;
}

a:active {
   background-color: #FF84D6;
}

h1 {
   font-size: 2.0em;
   margin-bottom: 15px;
}

p {
   font-size: 1.3em;
   line-height: 1.2;
   margin-bottom: 15px;
}

ul {
   margin-right: 5px;
}

ul li {
   list-style: none;
   margin-bottom: 5px;
}

/* ========================================================================= */
/* wraps both columns */
.wrap {
   text-align: left;
   width: 100%;
   max-width: 1200px;
   min-width: 360px;
}

/* ========================================================================= */
/* For the banner, which is shown at the top of all pages */
img#logo {
   display: block;
   margin: 5px auto 50px auto;
   width: 60%;
   border: 5px solid #FFFFFF;
   border-radius: 5px;
   box-shadow: 5px 5px 10px #222222;
}

a#header:link {
   background-color: initial;
}

a#header:visited {
   background-color: initial;
}

a#header:hover {
   background-color: initial;
}

a#header:active {
   background-color: initial;
}

/* ========================================================================= */
/* LH column */
.column-left {
   float: left;
   left: 5%;
   width: auto;
   margin-top: 0;
}

.menu-box {
   position: absolute;
   float: left;
   left: 2%;
   width: 14%;
   min-width: 100px;
   margin-top: 0;
}

.box {
   background: #FFFFFF;
   padding-left: 10%;
   padding-right: 10%;
   padding-top: 10%;
   padding-bottom: 5%;
   border: 5px solid #FFFFFF;
   border-radius: 5px;
   box-shadow: 5px 5px 10px #222222;
}

ul.menu {
   list-style-type: none;
   margin-right: 15%;
}

ul.menu li {
   padding-bottom: 5%;
}

ul.menu li a {
   color: #617BFF;
   font-weight: bold;
   text-decoration: none;
}

ul.menu li a:visited {
   color: #617BFF;
   font-weight: bold;
   text-decoration: none;
}

ul.menu li a:hover {
   background-color: #FF84D6;
}

ul.menu li a.active {
   background-color: #FF84D6;
}

.licence {
   text-align: left;
   color: #617BFF;
   font-size: 0.6em;
   font-weight: normal;
   text-decoration: none;
   padding-top: 5%;
   padding-bottom: 0px;
}

.licence a:link, .licence a:visited {
   color: #617BFF;
   text-decoration: none;
   font-weight: normal;
}

.licence a:hover, .licence a.active {
   background-color: #FF84D6;
}

.page_date {
   text-align: left;
   color: #617BFF;
   font-size: 0.6em;
   font-weight: normal;
   text-decoration: none;
   padding-bottom: 0px;
}

hr {
   color: #CCC;
   background-color: #CCC;
   height: 1px;
   width: 80%;
}

/* ========================================================================= */
/* Share buttons */
.share {
   float: left;
}

#share-buttons img {
   margin-top: 10px;
   width: 30px;
   padding-left: 0;
   padding-right: 5px;
   padding-top: 0;
   border: 0;
/*   display: inline; */
}

a.social:link, a.social:visited, a.social:hover, a.social:active {
   background-color: initial;
}

/* ========================================================================= */
/* RH column */
.column-right {
   float: right;
   right: 5%;
   width: 82%;
   margin: 0;
}

/* ========================================================================= */
/* Front page */
.text-box-front {
   float: right;
   margin-right: 5%;
   width: 70%;
   margin-top: 35px;
   text-align: left;
   padding-left: 5%;
   padding-right: 5%;
   padding-bottom: 30px;
   background: #FFFFFF;
   border: 5px solid #FFFFFF;
   border-radius: 5px;
   box-shadow: 5px 5px 10px #222222;
}

.random-image-box {
   margin-top: 0;
   padding-top: 5%;
}

img.random {
   width: 100%;
   vertical-align: top;
   margin-top: 0;
/*   margin-top: -20px;*/
   margin-bottom: 30px;
}

/* ========================================================================= */

/* For gallery */
table.gallery {
   width: 88%;
   margin-left: 12%;
   margin-right: 5%;
   margin-top: 0;
}

img.gallery {
   width: 85%;
   margin-bottom: 10px;
   border: 5px solid #FFFFFF;
   border-radius: 5px;
   box-shadow: 5px 5px 10px #222222;
}

a.highslide:link, a.highslide:visited, a.highslide:hover, a.highslide:active  {
   background-color: initial;
}

/* ========================================================================= */
/* For poems menu, and poems */
.text-box {
   float: right;
   margin-right: 5%;
   width: 70%;
   margin-top: 0;
   text-align: left;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 20px;
   padding-bottom: 30px;
   background: #FFFFFF;
   border: 5px solid #FFFFFF;
   border-radius: 5px;
   box-shadow: 5px 5px 10px #222222;
}

#double ul {
   margin-bottom: 30px;
   overflow: hidden;
   border-top: 1px solid #ccc;
}

#double li {
   width: 49%;
   border-bottom: 1px solid #ccc;
   padding-right: 1%;
   float: left;
   display: inline;
}

/* ========================================================================= */
/* For About, Exhibitions, and Contact pages */
img.inline {
   position: relative;
}

p.about, p.exhibition {
   font-size: 1.2em;
}

img.about {
   float: left;
   margin-left: 10px;
   margin-right: 10px;
}

img.exhibitionPic {
   width: 41%;
   margin: 10px 3% 10px 3%;
   vertical-align: middle;
}
/* ========================================================================= */