/*
Elise Murphy
Web Dev 2 Final Project
May 2013
*/

/* Page TOC
#Resets
#Global Page Layout & Styles
#Header Layout & Styles
#Body Content Layout & Styles
#Footer Layout & Styles
#Media Queries
---------------------------------------------- */


/* Resets
---------------------------------------------- */
* {
    margin:                     0;
    padding:                    0;
}

.clear {
    clear:                      both;
}

/* Global Page Layout & Styles
---------------------------------------------- */

body {
    margin:                     0 auto;
    font:                       400 100%/1.3 'droid sans', arial, sans-serif;
    background:                 url("../images/black-bg.png") #ccc;
    color:                      #444;
}

#container {
    width:                      840px;
    margin:                     20px auto 0;
    background:                 url("../images/white_carbon.png") #fff;
    padding:                    0 60px;
}

/* Header Layout & Styles
---------------------------------------------- */

#top-border {
    width:                      960px;
    position:                   relative;
    top:                        0;
    left:                       -60px;
    padding:                    5px 0;
    height:                     auto;

    background: #ea933c; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #ea933c 2%, #168c37 34%, #9125c4 66%, #2a9bd3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(2%,#ea933c), color-stop(34%,#168c37), color-stop(66%,#9125c4), color-stop(100%,#2a9bd3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #ea933c 2%,#168c37 34%,#9125c4 66%,#2a9bd3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #ea933c 2%,#168c37 34%,#9125c4 66%,#2a9bd3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #ea933c 2%,#168c37 34%,#9125c4 66%,#2a9bd3 100%); /* IE10+ */
    background: linear-gradient(45deg,  #ea933c 2%,#168c37 34%,#9125c4 66%,#2a9bd3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea933c', endColorstr='#2a9bd3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

header {
    padding-top:                40px;
}

/* Color transitions for H1 page title  */
@keyframes title {
    0% {
        color:                  #EA933C;
    }
    50% {
        color:                  #168C37;
    }
    75% {
        color:                  #9125C4;
    }
    100% {
        color:                  #2A9BD3;
    }
}

h1 {
    font:                       400 4em 'Monoton', cursive;
    letter-spacing:             .05em;
    font-style:                 normal;
    background-color:           #fff;
    color:                      #2A9BD3; /* default font color */
    box-shadow:                 2px 2px 2px #888;
    padding-left:               10px;
    width:                      65%;

    /* adds color animation to h1 title */
    animation-name:             title;
    animation-duration:         3s;
    animation-timing-function:  ease-in-out;
    animation-delay:            .5s;
}

hgroup {
    padding-top:                40px;
    padding-bottom:             20px;
}
hgroup h4 {
    font-style:                 normal;
    padding-top:                10px;
    font-size:                  .95em;
}

/* Body Content Layout & Styles
---------------------------------------------- */

#instructions ul {
    list-style:                 square inside;
}

#shapes canvas {
    float:                      left;
    cursor:						pointer;
}

.shapeContainer, 
#canvas_palette {
	cursor:						pointer;
}

.activeShape,
.shapeContainer:hover {
	border:						1px dashed #444;
}

#colors-shapes {
    padding-top:               20px;
    padding-bottom:            50px;
    height:                    auto;
}

.highlight-step {
    background-color:           rgba(44,44,44, 0.5);
    z-index:                    99;
    color:                      #fff;
    width:                      25%;
    padding:                    5px 0 5px;
    margin-left:                -90px;
    margin-bottom:              20px;
    text-align:                 center;
    border-top-right-radius:    20px;
    border-bottom-right-radius: 20px;
    box-shadow:                 3px 3px 2px #222;
}

h4#colors {
    padding-bottom:             10px;
}

h4#shapes, h4#colors {
    display:                    none;
}

#shape-section,
#color-section {
    padding:                    20px 30px;
    background-color:           #fff;
}

#picked_color_rgb {
    display:                    none;
}

.preview-select {
    float:                      left;
    width:                      20%;
}

.color_fields {
    width:                      112px;
    height:                     100px;
    border:                     1px solid black;
    margin-right:               10px;
}

#colorWheel {
    width:                      50%;
    float:                      right;
}
#hex, #rgb {
    padding-top:               5px;
}

#color-controls {
  position:                     relative;
  top:                          -130px;
  width:                        195px;
  height:                       auto;
}

input {
    float:                     right;
}

input#clear_color  {
    float:                      left;
    margin-top:                 10px;
    width:                      50%;
}


/* Footer Layout & Styles
---------------------------------------------- */

footer {
    position:                   relative;
    top:                        0;
    padding-bottom:             30px;
    font-size:                  .9em;
}

/* #Media Queries
---------------------------------------------- */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    #top-border {
        width:                          768px;
    }
    #container {
        width:                          648px;
    }
    h1 {
        font-size:                      3.5em;
    }
    .highlight-step {
        width:                          30%;
    }
    #shape-section canvas {
    	padding-right:					10%;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    #top-border {
        width:                         420px;
        left:                          -30px;
    }
    #container {
        padding:                        0 30px;
        width:                          360px;
    }
    h1 {
        font-size:                      2.2em;
        width:                          75%;
    }
    h2 {
        font-size:                      1.3em;
    }
    .highlight-step {
        width:                          50%;
        margin-left:                    -60px;
    }
    #colorWheel, #shapes canvas {
        float:                          none;
    }
    .preview-select {
        width:                          50%;
        padding-bottom:                 15px;
    }
    #color-controls {
        top:                            0;
        padding-bottom:                 25px;
    }

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    #container {
        padding:                        0 10px;
        width:                          300px;
    }
    #top-border {
        width:                         320px;
        left:                          -10px;
    }
    h1 {
        font-size:                     2em;
        width:                         80%;
    }
    h2 {
        font-size:                      1.1em;
    }
    .highlight-step {
        width:                          65%;
        margin-left:                    -40px;
    }
    #colorWheel, #shapes canvas {
        float:                          none;
    }
    .preview-select {
        width:                          50%;
        padding-bottom:                 15px;
    }
    #color-controls {
        top:                            0;
        padding-bottom:                 25px;
    }
}