/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* /\/\/\/\ End of reset /\/\/\/\ */

/* ======= LAYOUT ======= */
body {
    width: 90%;
	max-width: 1980px;
	min-width: 320px;
	margin: 0 auto;
    background-color: #edb61f; /*TBC*/
    font-family: 'Open Sans', 'Arial', 'Verdana', 'Helvetica', sans-serif;
    font-size: 1.3em;
    line-height: 1.5;
}

/* First plant - Monstera */

div p.monstera a:link, div p.monstera a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant1_sprite1.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant1.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* Secon plant - Bird */

div p.bird a:link, div p.bird a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant2_sprite2.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant2.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* Third Plant - Other */

div p.other a:link, div p.other a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant3-03.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant3.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* Fourth Plant - Pothos */

div p.pothos a:link, div p.pothos a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant4-04.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant4.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* Fifth Plant - Snake */

div p.snake a:link, div p.snake a:visited, div p.snake a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant5-05.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant5.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* Sixth Plant - Rubber */

div p.rubber a:link, div p.rubber a:visited, div p.rubber a:visited {
    color: #070033;
    display: block;
    width: 150px;
    height: 200px;
    padding: 56px 30px 0 256px;
    
    border-radius: 0 128px 0 128px;
    
    /* PNG fallback */
    background: url(../plants/png/plant6-06.png);
    
    /* SVG */
    background: url(../plants/svg-optimized/plant6.svg), /*Optimized version without xmlns didn't work, but this optimized version did - Hurray!*/
        linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 252px;
    background-position: 0 -6px;
    
    /* background colour */
    background-color: #fff;
    
    /* Transitions */
    -webkit-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out, 
        border-color .3s ease-in-out;
    
    -moz-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
    
    -o-transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3 ease-in-out;
    
    transition: background-color .6s ease-in-out,
        border-radius .6s ease-in-out,
        border-color .3s ease-in-out;
}

/* All plants */

div p.monstera a:hover, div p.bird a:hover, div p.other a:hover, div p.pothos a:hover, div p.snake a:hover, div p.rubber a:hover {
    border-radius: 137px 137px 137px 137px;
    background-position: 0 -258px;
    background-color: rgba (0,0,0,.2);
}

div p.monstera a:active, div p.bird a:active, div p.other a:active, div p.pothos a:active, div p.snake a:active, div p.rubber a:active, div p.monstera a:focus, div p.bird a:focus, div p.other a:focus, div p.pothos a:focus, div p.snake a:focus, div p.rubber a:focus {
    color: #070033;
    border-radius: 137px 137px 137px 137px;
    background-position: 0 -510px;
    background-color: rgba(255,255,255,.3);
}

/*Position*/
div p.monstera, div p.bird, div p.other, div p.pothos, div p.snake, div p.rubber {
    float: left;
    margin: 0 0 .5em .5em;
}

/* ======= TYPOGRAPHY ======= */

h1 {
    font-family: 'Sacramento', 'Brush Script MT', 'Comic Sans MS', 'cursive';
    font-size: 3.4em;
    text-align: center;
    margin-top: .1em;
    margin-bottom: .1em;
    color: #fff;
}

footer {
    font-size: .8em;
    color: #fff;
    padding: 1em 0 0 0;
    content: "";
    clear: both;
    text-align: center;
}

/* ======= LINKS ======= */

div a {
    text-decoration: none;
}

footer a:link, footer a:visited, footer a:hover, footer a:active, footer a:focus {
    color: #de2651;
}