/*
Theme Name: Frog8
Theme URI: http://maltha.com/themes/Frog
Author: Maltha Creations
Author URI: http://maltha.com/
Description: <strong>UPDATE</strong> - 4.0+ is here, completely overhauled, yet again. As always, <a href="http://tidythemes.com/concept/#upgrading">use caution when upgrading</a> (tidythemes.com/concept/#upgrading) and <a href="http://tidythemes.com/concept/">learn the TidyThemes concept</a> (tidythemes.com/concept). &nbsp; &rarr; <em><strong>CAUTION</strong>: If you're child theming or have clients that are child theming on top of Frog (not the recommended use), please do not blindly upgrade to newer versions.</em> &nbsp; &rarr; <strong>DESCRIPTION</strong>: Frog is the definitive WordPress HTML5 boilerplate starter theme. We've carefully constructed the most clean and minimalist theme available anywhere for designers/developers to use as a base/foundation to build websites for clients or to build completely custom themes from scratch to release faster. Clean, semi-minified, unformatted and valid code, SEO-friendly, no programmer comments, standardized and as white label as possible and most importantly, CSS reset for cross-browser-compatability and no intrusive visual CSS styles added whatsoever. A perfect skeleton theme that blows any others like it (the subsequent underscores.me for example) completely out of the water, as they're simply too overcomplicated for what people really want in this kind of theme. Now comes with jQuery enqueued and ready to go. &nbsp; &rarr; <strong>SUPPORT</strong>: Please use the <a href="http://tidythemes.com/forum/">official support forum</a> (tidythemes.com/forum). Comments and suggestions for improving Frog, please see "<a href="http://tidythemes.com/tidythemes-sucks/">TidyThemes Sucks!</a>" (tidythemes.com/tidythemes-sucks). Just getting started? <a href="http://tidythemes.com/want-to-learn-css/">Want to learn CSS?</a> (tidythemes.com/want-to-learn-css) &nbsp; &rarr; <br />
<strong>WHAT'S NEW?</strong>: We stripped down as much custom, extraneous, superfluous junk code as we could and greatly improved the HTML5 structure. <a href="http://make.wordpress.org/themes/author/chipbennett/">Chip Bennett</a> (make.wordpress.org/themes/author/chipbennett), a highly experienced programmer and official WordPress administrator, worked closely with us to audit the theme code for quality. <a href="http://themes.trac.wordpress.org/changeset?old_path=/Frog/3.3&new_path=/Frog/4.0">See</a> (themes.trac.wordpress.org/changeset?old_path=/Frog/3.3&new_path=/Frog/4.0) just how much we've revamped things. Last, but not least, Frog has now been <a href="https://github.com/tidythemes/Frog">opened up on GitHub</a> (github.com/tidythemes/Frog) if anyone would like to make suggested code additions/improvements. Thank you for using Frog.
Version: 2.0.2
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html = nog aanpassen
Tags: black, blue, white, light, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: Frog

Frog WordPress Theme © 2003-2014 Maltha Creations
Frog is distributed under the terms of the GNU GPL = nog aanpassen
*/

/* tags = nog uitzoeken = lijst met approved words = http://wordpress.org/themes/about/
bovenstaande tekst herschrijven, kan html code bevcatten, dus alles netjes op volgende regel, met links 

/* RTL style sheet nog bijwerken + goed testen */

/* nieuwe versie maken van styles.css met reest 2.0 en daarna pas verder uitbouwen */
/* met schone lei beginnen */


/* check box model = welke gebruik ik? = nog uitzoeken + eventueel in uitleg vermelden dat site padding word opgeteld bij de site width

/* eigen toevoegingen hieronder = bovenstaande nog opschonen */

/* uitzoeken = styles voor code in post/page - wil ik net zoals bij http://themeshaper.com/2012/10/31/the-wordpress-theme-header-template/ = in kleur + uitklapbaar = uitzoeken + theme optie van maken.... code styling */


/* hieronder de echte code */

/* CSS reset = nog bijwerken, opschinen en vergelijken met andere css codes o.a mar=era theme */
/* CSS Reset http://themeshaper.com/2012/11/12/how-to-reset-rebuild-wordpress-theme-css-define-your-layouts/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  font-size: 62.5%;
  overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
   -webkit-text-size-adjust: 100%; /*Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;  /*www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
  background: #fff;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
  outline: 0;
}
a img {
  border: 0;
}

/* CSS Rebuild =  nog bijwerken */
body, button, input, select, textarea {
  color: #404040;
  font-family: sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 {
  clear: both;
}
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}
p {
  margin-bottom: 1.5em;
}
ul, ol {
  margin: 0 0 1.5em 3em;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 1.5em 1.5em;
}
b, strong {
  font-weight: bold;
}
dfn, cite, em, i {
  font-style: italic;
}
blockquote {
  margin: 0 1.5em;
}
address {
  margin: 0 0 1.5em;
}
pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
}
code, kbd, tt, var {
  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}
mark, ins {
  background: #fff9c0;
  text-decoration: none;
}
sup, sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}
small {
  font-size: 75%;
}
big {
  font-size: 125%;
}
figure {
  margin: 0;
}
table {
  margin: 0 0 1.5em;
  width: 100%;
}
th {
  font-weight: bold;
}
button, input, select, textarea {
  font-size: 100%; /* Corrects font size not being inherited in all browsers */
  margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline; /* Improves appearance and consistency in all browsers */
  *vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button, input {
  line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
  *overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  border: 1px solid #ccc;
  border-color: #ccc #ccc #bbb #ccc;
  border-radius: 3px;
  background: #e6e6e6;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
  color: rgba(0,0,0,.8);
  cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
  -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
  font-size: 12px;
  font-size: 1.4rem;
  line-height: 1;
  padding: 1.12em 1.5em 1em;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa #bbb;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
  border-color: #aaa #bbb #bbb #bbb;
  -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
  -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
  padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
  -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
  -webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
  border: 0;
  padding: 0;
}
input[type=text], input[type=email], textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  color: #111;
}
input[type=text], input[type=email] {
  padding: 3px;
}
textarea {
  overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
  padding-left: 3px;
  vertical-align: top; /* Improves readability and alignment in all browsers */
  width: 98%;
}
a {
    color: royalblue;
}
a:visited {
    color: purple;
}
a:hover,
a:focus,
a:active {
    color: midnightblue;
}

/* Standard Styles = nog uitzoeken wat ik wel en niet gebruik  + opschomnen */
/* Alignment */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}
.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}
 
/* Text meant only for screen readers */
.assistive-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
 
/* =Menu
----------------------------------------------- */
 
.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
}
.main-navigation ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    position: absolute;
        top: 1.5em;
        left: 0;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
}
 
/* Small menu */
.menu-toggle {
    cursor: pointer;
}
.main-small-navigation .menu {
    display: none;
}
 
/* =Content
----------------------------------------------- */
 
.sticky {
}
.hentry {
    margin: 0 0 1.5em;
}
.entry-meta {
    clear: both;
}
.byline {
    display: none;
}
.single .byline,
.group-blog .byline {
    display: inline;
}
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
 
/* =Asides
----------------------------------------------- */
 
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}
 
/* =Media
----------------------------------------------- */
 
.site-header img,
.entry-content img,
.comment-content img,
.widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
.site-header img,
.entry-content img,
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
.site-header img,
.entry-content img,
img.size-full {
    max-width: 100%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
.wp-caption {
    border: 1px solid #ccc;
    max-width: 100%;
}
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright {
    margin-bottom: 1.5em;
}
.wp-caption img {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}
.site-content .gallery {
    margin-bottom: 1.5em;
}
.gallery-caption {
}
.site-content .gallery a img {
    border: none;
    height: auto;
    max-width: 90%;
}
.site-content .gallery dd {
    margin: 0;
}
.site-content .gallery-columns-4 .gallery-item {
}
.site-content .gallery-columns-4 .gallery-item img {
}
 
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}
 
/* =Navigation
----------------------------------------------- */
 
.site-content .site-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}
.site-content .nav-previous {
    float: left;
    width: 50%;
}
.site-content .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}
 
/* =Comments
----------------------------------------------- */
 
.bypostauthor {
}
 
/* =Widgets
----------------------------------------------- */
 
.widget {
    margin: 0 0 1.5em;
}
 
/* Search widget */
#searchsubmit {
    display: none;
}

/* ? wil ik widgets met25% breedte = uitzoeken */
/* Site Structure = nog uitzoeken */
#primary {
float: left;
margin: 0 -25% 0 0;
width: 100%;
}
#content {
margin: 0 25% 0 0;
}
#secondary { /* Sidebar 1 */
float: right;
overflow: hidden;
width: 25%;
}
#tertiary { /* Sidebar 2 */
clear: right;
}
.site-footer {
clear: both;
width: 100%;
}


/* Frog Theme Styles */

body { /* verwerken in reset */
  cursor: default;
  background-color: yellow;
  box-sizing: border-box;
}
.site { /* rename naar id=container */
  overflow: hidden; /*nog testen */
  position: relative; /* voor safari anders werkt overflow niet */
  box-sizing: border-box; /* nog uitzoeken of op zowel body als site */
   
}


/* vide css ombouwen naar functions = site css = dynamic maken - onderstaande zijn opties dus instelbaar maken...



/* videobackground op site div = niet altijd nodig, zou mooi zijn als wel/niet toepasesn van code hoort bij site instelling - ipv in standaard styles.css = smaller is better
/* nog uitzoeken = dynamic css */
/* Video from File */
.site video {
  position: absolute;
  top: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
  background-size: cover; /* voegt weinig toe */
}
/* Video Align */
.site video.left {
  left: 0;
}
.site video.right {
  right: 0;
}
/* test om video in het midden te centreren, werkt  */
.site video.center {
  left: -100%;
  right: -100%;
  margin: auto; 
}




/* http://css-tricks.com/circular-3d-buttons/ */
/* round is default = no class needed, square is extra class */
.video-controls {
   position: absolute;
   z-index: 10;
 /* float: left;niet meer nodig float niet gebruiken = beide gebeuken - position is genoeg, gaat wel over tekst heen */
}
/* px veranderen in ems */
.video-controls button {
  display: block;
  padding: 0;
  background: #f7f7f7;
  margin: 0.45em; /*4px;*/
  position: relative;
  float: left; /* verwijderen bij center left align */
  border-radius: 50%;
  box-shadow: 0 0.2em 0.6em #aaa, inset 0 0.05em 0.15em #fff; /* nog ems van maken = 0 3px 8px #aaa, inset 0px 2px 3px #fff */
  border-width: inherit;
}
.video-controls button:hover{
  background: #fff; /*#f5f5f5; lijkt niet meer te werken = werkt wel, erg subtiel, anders wit maken*/
}
.video-controls button:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 0.1em solid #ddd;
  position: absolute;
  top: -0.25em; /*-4px; */
  left: -0.25em; /*-4px; */
  bottom: -0.25em; /*-4px; */
  right: -0.25em; /*-4px; */
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 0.5em 0.5em #ddd inset; /*0 4px 4px #ddd inset; /*0 2px 4px #ddd inset;*/
}


/* button = play/pause */
.video-controls button.play:after { /* test after in before veranderen aangezien ik toch geen before meer heb*/
  display: block;
  border-bottom: 0.75em solid transparent;
  border-left: 1em solid #aaa;
  border-top: 0.75em solid transparent;
  content: "";
  margin-left: 0.65em; /*9px; */
}
.video-controls button.play:hover:after {
  border-left-color: #555;
  /* glow toepassen ? = testen */
}
.video-controls button.pause:after {
    border: medium none;
    content: "\275A\275A";
    color: #aaa;
    font-size: 1.3em; /* op alle buttons van video-controls zetten ? */
}
.video-controls button.pause:hover:after {
  color: #555;
}  
/* button = mute/sound */
.video-controls button.mute:after,
.video-controls button.sound:after { 
  display: inline-block;
  background-color: #aaa;
  border-bottom: 0.45em solid #f7f7f7;
  border-right: 0.5em solid #aaa;
  border-top: 0.45em solid #f7f7f7;
  content: "";
  height: 0.55em;
  width: 0.5em; /*7px;*/
  margin-left: -0.15em; /*-2px;*/
  margin-top: 0.2em;
}
.video-controls button.mute:hover:after,
.video-controls button.sound:hover:after { 
  background-color: #555;
  border-bottom: 0.45em solid #fff;
  border-right-color: #555;
  border-top: 0.45em solid #fff;
}

/* button mute diagonal line = muted */
.video-controls button.sound > .line {
  display: none;
}
.video-controls button.mute > .line {
  display: block;
}
.video-controls button.mute:hover > .line {
  display: none;
}
.video-controls button.sound:hover > .line {
  display: block;
}
.video-controls .line {
  border-top: 0.25em solid #ddd;
  box-shadow: 0 0.05em 0.05em #aaa;
 /* display: block;*/
  margin-bottom: -1em; /*-13px; */
  margin-top: 0.75em; /*11px; */
  transform: rotate(-45deg);
}

/* video controller button sizes = small, medium (default), large */
/* small */
.video-controls.small button {
  width: 1em;
  height: 1em;
  /* box shadow aanpassen */
}
.video-controls.small button.play:after {
  border-bottom-width: 0.4em; /* nog aanpassen */
  border-left-width: 0.45em;
  border-top-width: 0.4em;
  margin-left: 0.35em;
}



/* medium */
.video-controls.medium button {
  width: 2em;
  height: 2em;
}
/* large */
.video-controls.large button {
  width: 3em;
  height: 3em;
}

/* Video Controller Styles = round (default), square */
.video-controls.square button { 
  border-radius: 0;
  box-shadow: none;
}
.video-controls.square button:before {
  display: none;
}
.video-controls.square button.play { 
  margin-right: 0;
}

/* video controller locations = naar boven verplaatsen - top left is default  = ovrerbodig*/
.video-controls.topleft {
  /* zowel hier als in code niet vermelden...*/
}
.video-controls.topcenter {
   left: 45%;
}
.video-controls.topright {
 right: 0;
}

.video-controls.centerleft {
  top: 45%;
}  
.video-controls.centerleft button {
  float: none;
  margin-top: 0.75em;
} 
.video-controls.centerright {
  top: 45%;
  right: 0;
} 
.video-controls.centerright button {
  float: none;
  margin-top: 0.75em;
} 
.video-controls.bottomleft {
  bottom: 0;
}
.video-controls.bottomcenter {
  bottom: 0;
  left: 45%;
}
.video-controls.bottomright {
  bottom: 0;
  right: 0;
}

/* header styles = eerste opzet = even als test hier */
#header {
  background-color: blue;
}






/* site structure

container
  - header
  - 





*/