/*
  Theme Name: Christopher Brett Bailey
  Theme URI: http://www.limnerstudio.co.uk
  Description: Basic starting theme. Based on the work of Aaron T. Grogg, Paul Irish, Divya Manian, and Elliot Jay Stocks
  Author: Limner Studio
  Author URI: http://www.limnerstudio.co.uk
  Version: 2.0.0
*/


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


html { font-size: 80%; -webkit-text-size-adjust: 80%; -ms-text-size-adjust: 80%; cursor: url('img/face.png'), default; }

html, button, input, select, textarea { font-family: "Courier New", monospace; color: #222; }

html.not-home {
  animation-name: color-transition;
  animation-duration: 90s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes color-transition {
  0%    {background-color: #ffae00;}
  15%   {background-color: #5FC3D9;}
  30%   {background-color: #FAE806;}
  45%   {background-color: #65e75a;}
  60%   {background-color: #c481ff;}
  75%   {background-color: #ff709b;}
  90%   {background-color: #1daedf;}
  100%  {background-color: #ffae00;}
}

body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fffdda; color: black; text-shadow: none; }
::selection { background: #fffdda; color: black; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #222; text-decoration: none;}
a:visited { text-decoration: underline; }
a:hover { text-decoration: underline; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

h1, h2 { text-transform: uppercase; font-style: normal; font-weight: 300; }

p { margin: 0 0 0.6em 0; }

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author: Limner Studio #5169b8 #d18b8b #913d89 #d9c104 #9564c0 #0aaeae
   ========================================================================== */

html {
  background-color: teal;
}

body {
  width: 850px;
  margin: 30px 0 35px 35px;
}

/* ========== Header --------------------------- */

header h1 {
  /*float: left;*/
  width: 530px;
  margin: -0.2em 0 0.4em 0;
  padding-right: 120px;
  height: 70px;
  text-shadow: 1px 1px 0px white, 2px 2px 0px pink, 3px 3px 0px beige, 4px 4px 0px red, 5px 5px 0px aqua, 6px 6px 0px purple, 7px 7px 0px yellow, 8px 8px 0px maroon;
}

.cart-link {
  font-size: 2em;
  text-shadow: 4px 4px 0px transparent, 5px 5px 0px aqua, 6px 6px 0px transparent, 7px 7px 0px yellow, 8px 8px 0px transparent, 1px 1px 0px white, 2px 2px 0px transparent, 3px 3px 0px beige;
}
.cart-link > a {
  text-decoration: none;
}
.cart-link:hover {
  animation: 1s infinite streams;
  animation-timing-function: linear;
  border: none;
}

@keyframes streams {
  0% {
    text-shadow: 1px 1px 0px white;
  }
  10% {
    text-shadow: 2px 2px 0px pink;
  }
  20% {
    text-shadow: 3px 3px 0px beige;
  }
  30% {
    text-shadow: 4px 4px 0px red;
  }
  40% {
    text-shadow: 5px 5px 0px aqua;
  }
  50% {
    text-shadow: 6px 6px 0px purple;
  }
  60% {
    text-shadow: 7px 7px 0px yellow;
  }
  70% {
    text-shadow: 8px 8px 0px maroon;
  }
  80% {
    text-shadow: 9px 9px 0px choral;
  }
  90% {
    text-shadow: 10px 10px 0px teal;
  }
  100% {
    text-shadow: 11px 11px 0px straw;
  }
}

#access a:hover {
  color: #222;
  background-color: yellow;
  text-decoration: none;
}
.current-menu-item a {
  background-color: yellow;
}
.current-menu-item:before {
  content: "> ";
  margin-left: -15px;
}
p#siteBio {
  float: left;
  width: 200px;
  display: none;
}
.home #siteBio {
  display: block;
  float: none;
}
#access {
  text-transform: uppercase;
}
#access div[class ^='menu-header'], #random-head {
  float: left;
}
.menu-header {
  width: 380px;
  padding-right: 50px;
}
.menu-header-2 {
  width: 220px;
}
#random-head {
  width: 200px;
  font-size: 12px;
}
.menu-head {
  text-decoration: underline;
}
.home #access, .home #random-head {
  display: none;
}


/* =========== Content ---------------------------- */

#close-product {
  position: fixed;
  font-size: 5vmin;
  top: 85px;
  left: 70%;
  color: white;
}

#close-product a {
  color: white;
}

.entry-content {
  margin-top: 25px;
  display: block;
}
.page-id-39 .entry-content {
  columns: 420px 1;
  -webkit-columns: 420px 2;
  -moz-columns: 420px 2;
}
.images {
  float: left;
  margin-right: 20px;
  margin-top: 5px;
}
.images img {
  width: 410px;
  display: block;
  float: none;
}

.it_exchange_prod .images,
#post-0 .images {
  float: none;
}


input {
  font-size: 16px;
  font-weight: 500;
  color: black;
  background: white;
  padding: 10px;
  box-shadow: 3px 3px 0px beige, 4px 4px 0px red, 7px 7px 0px yellow, 8px 8px 0px maroon;
  border: 1px solid;
  -webkit-font-smoothing: antialiased;
}

.the_blogzone {
  background: white;
  position: absolute;
  top: 80px;
  left: 115px;
  height: 75%;
  overflow: auto;
  width: 580px;
  padding: 0 1em 1em 1em;
  border: 1px solid black;
  box-shadow: 3px 3px 0px beige, 4px 4px 0px red, 7px 7px 0px yellow, 8px 8px 0px maroon;
}
.the_blogzone h3 {
  background: #fffdc7;
  border-radius: 4px;
  padding: 0 6px;
}
.the_blogzone article {
  margin-bottom: 3em;
}
.pull-right {
  position: absolute;
  top: 20px;
  right: 16px;
}
small {
  font-style: normal;
  font-weight: 400;
}

footer {
  display: none;
}

#bg { position: fixed; top: 0; left: 0; z-index: -1; zoom:1; display: block; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/** END HTML5 Boilerplate CSS **/


/** START Starkers CSS **/

/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */
*/
/* TYPOGRAPHY */
/* ----------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-weight:bold }
.alert { background:red; color:white }


.wp-caption-text{}
.gallery-caption{}
.bypostauthor{}
.sticky{}

.flex