/*  
Theme Name: claudelle.com
Theme URI: http://claudelle.com/
Description: Theme for Claudelle Girard
Version: 1.0
Author: Terje Tjervaag
Author URI: http://daily.tjervaag.com/
*/



/* Begin Typography & Colors */
* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 98%;
}

html {
  overflow-y: scroll;
}

body {
  font-size: x-small;
  font-family: "Times New Roman", Times, serif;
  background-color: white;
  text-align: center;
  padding: 0 0 0 0;
  color: #696a6c;
}

#header {
  padding: 2em 0 0.5em 0;
  background-color: #696a6c;
}

#header a img {
  border: none;
}

a {
  text-decoration: underline;
}
p a, p a:visited, li a, li a:visited {
  color: #696a6c;
}
a img {
  border: none;
}
h4 a {
  color: #000000;
  text-decoration: none;
}
h4 a:hover {
  text-decoration: underline;
}

#menu {
  margin: 1em 0 0 9em;
}
#menu li {
  font-size: 1.55em;
  float: left;
  display: block;
  margin-right: 1em;
}
#menu a {
  color: #c7c8ca;
  text-decoration: none;
}
#menu li.selected a {
  color: #ffffff;
}

.color1 {
  color: #ff0000;
}
.color2 {
  color: #00ff00;
}

img.postleft {
  float: left;
  margin-right: 1em;
  border: 0.20em solid #c9cacc;
}

.illustration, .illustration a, #menu #illustration a.highlight { color: #009aca; }
.graphic_design, .graphic_design a, #menu #graphic_design .highlight { color: #9cb327; }
.jewelry, .jewelry a, #menu .#jewelry .highlight { color: #782283; }
.painting, .painting a, #menu #painting .highlight { color: #bb1d2b; }
.blog, .blog a, #menu #blog .highlight { color: #f68245; }
.about, .about a, #menu #about .highlight { color: #3e967e; }

h4 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.6em;
  font-weight: normal;
  color: #000000;
  margin: 0 0 0.4em 0.7em;
}
.wide h4, .narrow h4 {
  margin: 0 0 0.4em 0;
}

.meta {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1em;
  margin-left: 1.1em;
}
.wide .meta, .narrow .meta {
  margin-left: 0;
}
.meta em, .meta em a {
  font-style: normal;
  color: #f68245; 
}
.meta em a {
  text-decoration: none;
  color: #696a6c;
}

div#container {
  height: 100%;
}

div#main {
  width: 79em;
  text-align: left;
  margin: 0 auto;
  padding-bottom: 1.5em;
  position: relative;
  overflow: visible;
  height: 100%;
}
div#main:after, ul#menu:after, ul.images:after, div#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
div#main, ul#menu, ul.images, div#content { display: inline-block; }

/* Hides from IE-mac \*/
* html div#main { height: 1%; }
div#main { display: block; }
/* End hide from IE-mac */

div#content {
  padding: 0em 1.5em 0 1.5em;
  height: 98%;
}

div.column {
  width: 36.7em;
  float: left;
  height: 100%;
}

h2, h3 {
  font-weight: normal;
  font-size: 1.7em;
  border-bottom: 0.10em solid #c9cacc;
  text-align: center;
  margin-bottom: 0.8em;
  margin-top: 2em;
}
h2 strong, h3 strong, h2 a, h2 a:hover {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 1.2em;
  color: inherit;
  text-decoration: none;
}
h2 a, h2 a:hover {
	text-transform: none;
}
.extranarrow h2 {
  margin-top: 3.45em;
  font-size: 1.2em;
}
h3 {
  font-size: 1.6em;
  border: none;
  margin-top: 0;
  margin-bottom: -0.2em;
}


p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  margin: 0.8em 1em 1em 1em;
  line-height: 1.4em;
}
p.footer {
  text-align: right;
}
.entry p {
  text-align: justify;
}
.extranarrow p {
  font-size: 1.1em;
}
.extranarrow li {
  font-size: 0.9em;
}

a:hover {
  color: black;
}

ul.images {
  display: block;
  padding: 0 0 0 0.8em;
  margin: 1em 0em 0em 1em;
}
.images li {
  float: left;
  list-style: none;
  margin-right: 1em;
  margin-bottom: 0.8em;
}
.images li img {
  border: 0.20em solid #c9cacc;
}

.separator {
  width: 0.5em;
  float: left;
  display: block;
  background-image: url(images/dots.png);
  background-repeat: repeat-y;
  margin: 3em 1em 0 1em;
}

div.column.wider {
  width: 39.0em;
}
div.column.narrow {
  width: 34em;
}
div.column.narrow p {
  margin: 0.8em 0em 1em 0em;
}
div.column.narrow ul.images {
  display: block;
  padding: 0 0 0 0em;
  margin: 1em 0em 1em 0.3em;
}

div.column.wide {
  width: 55.05em;
}
div.column.wide p {
  margin: 0.8em 0em 1em 0em;
}
div.column.wide ul.images {
  display: block;
  padding: 0 0 0 0em;
  margin: 1em 0em 0em 0.0em;
}

div.column.extranarrow {
  width: 18.35em;
}
div.column.extranarrow p {
  margin: 0.8em 0em 1em 0em;
}
div.column.extranarrow ul.images {
  display: block;
  padding: 0 0 0 0em;
  margin: 1em 0em 0em 0.0em;
}

#etsy {
  text-align: center;
  padding-top: 5.3em;
  width: 40em;
}
#etsy.narrow {
  width: 34em;
  padding-top: 2em;
}

#searchform {
  text-align: center;
}
#searchform #s {
  width: 7em;
  margin-left: 1em;
}

.extranarrow ul {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.5em;
  margin-left: 0em;
  list-style: none;
}
.linkcat {
  list-style: none;
}
.linkcat h2 {
  display: none;
}

#comment {
  width: 49em;
  height: 10em;
}

cite {
  font-size: 1.5em;
  color: #f68245; 
}

#postcontainer {
  margin-top: 5.5em;
  z-index: 5;
  position: relative;
  text-align: center;
}
#postcontainer p {
  text-align: center !important;
}
#post {
  position: relative;
  margin-bottom: 3em;
}
#loader {
  z-index: 1;
  position: absolute;
  top: 14em;
  left: 17em;
}

#fontsettings {
  position: absolute;
  top: 1em;
  right: 1em;
}
#fontsettings a {
  color: white;
  font-size: 1.4em;
  text-decoration: none;
  margin: 0.2em;
  cursor: pointer;
}
#fontsettings a:hover {
  text-decoration: underline;
}
#fontsettings #font-smaller {
  font-size: 1.5em;
}
#fontsettings #font-bigger {
  font-size: 2.3em;
}