/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

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

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

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

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

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

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

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

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

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

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

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

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

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

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

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

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

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

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* FONT-FACE CANTARELL */

@font-face {
    font-family: 'cantarell';
    src: url('../font/Cantarell-Regular-webfont.eot');
    src: url('../font/Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Cantarell-Regular-webfont.woff') format('woff'),
         url('../font/Cantarell-Regular-webfont.ttf') format('truetype'),
         url('../font/Cantarell-Regular-webfont.svg#cantarellregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cantarell';
    src: url('../font/Cantarell-Bold-webfont.eot');
    src: url('../font/Cantarell-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Cantarell-Bold-webfont.woff') format('woff'),
         url('../font/Cantarell-Bold-webfont.ttf') format('truetype'),
         url('../font/Cantarell-Bold-webfont.svg#cantarellbold') format('svg');
    font-weight: bold;
    font-style: normal;

}


@font-face {
    font-family: 'cantarell';
    src: url('../font/Cantarell-Oblique-webfont.eot');
    src: url('../font/Cantarell-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Cantarell-Oblique-webfont.woff') format('woff'),
         url('../font/Cantarell-Oblique-webfont.ttf') format('truetype'),
         url('../font/Cantarell-Oblique-webfont.svg#cantarelloblique') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'cantarell';
    src: url('../font/Cantarell-BoldOblique-webfont.eot');
    src: url('../font/Cantarell-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Cantarell-BoldOblique-webfont.woff') format('woff'),
         url('../font/Cantarell-BoldOblique-webfont.ttf') format('truetype'),
         url('../font/Cantarell-BoldOblique-webfont.svg#cantarellboldoblique') format('svg');
    font-weight: bold;
    font-style: italic;

}



/* FONT-FACE OPEN SANS */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Regular-webfont.eot');
    src: url('../font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Regular-webfont.woff') format('woff'),
         url('../font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Regular-webfont.svg#OpenSansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Open Sans'';
    src: url('../font/OpenSans-Bold-webfont.eot');
    src: url('../font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Bold-webfont.woff') format('woff'),
         url('../font/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Bold-webfont.svg#OpenSansbold') format('svg');
    font-weight: bold;
    font-style: normal;

}


@font-face {
    font-family: 'Open Sans'';
    src: url('../font/OpenSans-Oblique-webfont.eot');
    src: url('../font/OpenSans-Oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-Oblique-webfont.woff') format('woff'),
         url('../font/OpenSans-Oblique-webfont.ttf') format('truetype'),
         url('../font/OpenSans-Oblique-webfont.svg#OpenSansoblique') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Open Sans'';
    src: url('../font/OpenSans-BoldOblique-webfont.eot');
    src: url('../font/OpenSans-BoldOblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-BoldOblique-webfont.woff') format('woff'),
         url('../font/OpenSans-BoldOblique-webfont.ttf') format('truetype'),
         url('../font/OpenSans-BoldOblique-webfont.svg#OpenSansboldoblique') format('svg');
    font-weight: bold;
    font-style: italic;

}



/*
* height chain to move the footer at th bottom of the page.  Only the last
* element should have min-height 100% instead of height, since the parent stated
* height and not the computed one is taken into account by standard complaint
* browsers.
*/
html, body { 
    height:100%;
}

body {
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
}

#main {
     min-height:100%;
     margin-bottom: -150px; /* footer total height */
}

h1, h2, h3 {
    font-family: 'cantarell', serif;
}
h1 {
    font-size:200%;
}

h2 {
    font-size:150%;
}

h3 {
    font-size:120%;
}

header {
   padding:30px 0px 15px 0px;
   border-top: 3px solid #4378c8 ;
}

header h1 {
    font-size:1.6em;
    font-weight:normal;
    margin:0;
    text-align:center;

}

header  h1 a, header h1 a:visited {
    color: black;
}

header h2 {
    font-size:1.1em;
    color:#4d4d4d;
    font-weight:normal;
    margin:0;
    text-align:center;
}


p {

}

a, a:visited {
    text-decoration:none;
    color: #ff0066;
}

a:hover{
    text-decoration:underline;
}

#menu ul{
    clear:both;
    color:black;
    text-align:center;
    margin:0;
    padding: 25px 0px;
    border: 1px solid #d3d7cf;
    border-width: 1px 0px;
    margin-top:50px;
}

#menu li{
    display:inline;
    line-height:2em;
}

#menu a, #menu a:visited {
    color:black;
    text-decoration:none;
    padding: 8px 20px 5px 20px;
}


#menu a:hover, #menu a.active {
    border-bottom:3px solid #4378c8;
}

#menu a.active {
    background: #4378c8;
    color:white;
    border-radius: 3px;
}

#menu a:active{
    position: relative;
    top: 1px;
}

#homepanel {
}

#homepanel img {
    display:block;
    margin:auto;
}

#hometitle {
    font-family: "cantarell", sans-serif;
    font-size:2.5em;
    color: #555753;
    text-align:center;
    margin:0;
    padding:20px 0;
}

.container {
    margin:auto;
    max-width:960px;
    padding:0 15px;
}

#content {
    margin-top:30px;
    color: #434343;

}

#maincontent {
    padding-bottom: 200px; /* footer totoal height + real padding */
}

#maincontent, #homecontent {
    max-width:585px;
}

#maincontent p{
    text-align:left;
}

#content img.right {
    float:right;
    padding:7px 0px 7px 10px;
}

#content img.center {
    display:block;
    margin:auto;
}

#maincontent h2, #homecontent h2 {

    font-size:230%;
    color: #4378c8;
    font-weight:normal;
    margin: 1.2em auto 0.67em auto;

}

#maincontent h3 {

    font-size:1.5em;
    color: #434343;
    font-weight:bold;
    margin: 1.2em auto 0.67em auto;

}

#sidecontent, #homesidecontent {
    float:right;
    width:300px;
    padding-left:30px;
}


#sidemenu {
    border-left: 1px solid #4378c8;
    margin:0;
    list-style:none;
    padding:10px 0px 10px 0px;
}

#sidemenu ul {
    margin:0;
    list-style:none;
    padding: 0px 0px 0px 15px;
}

#sidemenu a {
    display:block;
    padding:5px 5px 5px 10px;
}

#sidemenu a.current {
    border-right:4px solid #4378c8;

}

#button {
    max-width:300px;
    margin:auto;
    padding:15px 0 15px 0px;
}

#button li {
    background:#ececec;
    display:block;
    margin-bottom:12px;
    border-radius:10px;
    overflow:hidden;
    color:black;
    font-size:0.875em;
}


#button li  p:first-child a {
    display:block;
    color:white;
    background-color:#f62651;
    font-weight:normal;
    padding:15px 0px  12px 75px;
    background-position: 15px 15px;
    background-repeat: no-repeat;
    transition: background-color 0.5s ease-in;
}

#button li  p:first-child a:hover{
        background-position: 15px -45px;
        background-color:  #ff0066 ;

}


#button p{
    margin:0;
    padding:0 15px;
    text-align:left;
}

#button li  p:first-child {
    padding:0;
    font-size:2em;
    margin-bottom:15px;
    border-bottom:1px solid #c53553;
}

#button li p:last-child {
    padding-bottom:15px;
}

.pagination {
    text-align: center; 
}

a.small-button-link, span.small-button-link  {
    display:inline-block;
    min-width:6em;
    margin:0px 10px;
    text-align:center;
    padding:10px;
    border-radius:10px;
    background:#f62651;
    color:white;
    transition: background-color 0.5s ease-in;
}

/* The ones in a span are unactive buttons */
span.small-button-link{
    opacity:0.5;
}

a.small-button-link:hover {
    background:#ff0066
}

a.small-button-link:hover:active{
    position: relative;
    top: 1px;
}

@media all and (min-width: 960px) {

  #lovebar {
      background: url('../media/puzzle.png') center center no-repeat, url('../media/gradient.png') center center no-repeat;
      height: 50px;
      padding: 75px 0px;
  }

  .lovebarBox1 {
      float:left;
  }

  .lovebarBox2 {
      float:right;
  }
}

.download {
    background-image: url('../media/download.png');
}

.star {
    background-image: url('../media/star.png');

}

#sideads {
    margin:20px 0px 20px 0px;
    text-align:center;
}

p.post-date {
    float:left;
    margin:0px 15px 0px 0px;
    padding:3px 8px 8px 8px;
    background: #4378c8;
    color:white;
    font-family: opensans, sans-serif;
    min-width:3em;
    border-radius: 3px;
}
.day, .month, .year {
    display:block;
    text-align:center;
}
.day {
    font-size:200%;
}

#maincontent p.post-author {
    margin:0;
    padding:0;
}

#maincontent p.post-category {
    margin:0;
    padding:0;
    font-weight:bold;
}

#maincontent p.post-more {
    text-align:right;
}

#maincontent .post-content {
    clear:left;
    padding-top:0.5em;
    padding-bottom:2em;
}

#maincontent h2.post-title {
    margin:0;
    padding:0;

}

#maincontent h2.post-title a{
    color: #4378c8;
}


footer {
    clear:both;
    min-height: 90px;
    margin:auto;
    padding: 30px ;
    font-size:0.875em;
    word-spacing:0.1em;
    text-align:left;
    color:#333333;
    background: #4378c8;
    background: #274c85 linear-gradient(to bottom , #305b9c  0% , #4378c8 40%) repeat-x;
}

footer .vcard {

    margin:10px auto 0px auto;
    padding:13px 0px 0px 55px;
    font-family: 'Open Sans', sans;

    line-height:1.1;
    background: transparent url('../media/envelope.png') no-repeat 0px 15px;
}

footer .vcard p {
    margin:0;
}


footer .fn{
    text-transform:uppercase;
}

footer a, footer a:visited{
    text-decoration:none;
    font-weight:normal;
    color:white;
}

footer a:hover{
    text-decoration:underline;
    color: white;
}

code, pre{
    background: #eeeeec;
    border-radius:4px;
    border:1px solid #d3d7cf;

}

code {
    font-family:monospace;
    font-size:90%;
    padding:3px 5px;
    white-space: nowrap;

}


pre code {
    padding:0;
    white-space: pre;
    border:none;
}

pre {
padding:10px;

}

img {
max-width:100%;
}