/*
	Copyright 2015:	    Skyler Hart - K. Grey Web Development
    Contact:            info@kgreywebdevelopment.com    	http://kgreywebdevelopment.com
	Site for:			Cheryl Hart - Shop Just by Hand		http://shopjustbyhand.com
	Date:			    20 Aug 2015
*/








/*      Transitions     */
.button {
            -webkit-transition: background 0.4s ease;
            -moz-transition:    background 0.4s ease;
            -o-transition:      background 0.4s ease;
            -ms-transition:     background 0.4s ease;      
}

input, label, textarea{
            -webkit-transition: all 0.6s ease;
            -moz-transition:    all 0.6s ease;
            -o-transition:      all 0.6s ease;
            -ms-transition:     all 0.6s ease;      
}




#output {
            text-align:         center;
            padding:            20px 0 20px 0;
            width:              50%;
            margin:             3% auto;
            color:              #DFE6E5;
            background:         #236E56;
            box-shadow:         9px 9px 8px #333;
            font-family:        'Josefin Sans', sans-serif;
            font-size:          1.3em;
}

form {
            text-align:         center;
            width:              90%;
            margin:             4% auto;
            padding:            0;
			padding-bottom:		2em;
            color:              #DFE6E5;
            background:         #236E56;
            box-shadow:         9px 9px 8px #333;
            font-family:        'Josefin Sans', sans-serif;
}

form h3 {
            font-size:          2.4em;
            font-family:        'university-roman';
            margin:             0;
            color:              #1F2625;
            margin-bottom:      3%;
            padding:            1%;
			margin-bottom:		2em;
            background:         #438E76;
            border-bottom:      2px groove #033E26;
}

form a {
            font-weight:        bold;
            text-shadow:        1px 1px 1px #444;
            color:              #271C13;
}

form a:hover {
            color:              #AAA;
}

form a:active {
            color:              #222;
}

form p {
            text-align:         center;
            text-shadow:        1px 1px 2px #111;
            font-size:          1.2em;
            font-weight:        bold;
}

form em {
            clear:              both;
            font-family:        'Cinzel Decorative', cursive;
            font-size:          0.75em;
            font-style:         italic;
            font-weight:        normal;
            text-shadow:        2px 2px 3px #111;
            display:            block;
            margin:             8% auto 2%;
            padding-bottom:     1%;
            box-shadow:         0px 1px #438E76,
                                0px -2px #154 inset;
}

fieldset    {
            border:             none;
            padding:            0;
            margin:             0;
        }
        
legend	{
            padding-top:        10px;
            font-size:          28pt;
		    font-style:			italic;
            text-align:         center;
            font-weight:        bold;
            color:              #170C03;
		}
		
label 	{ 
            width:              25%;
            clear:              both;
            float:              left;
			color: 				#DFE6E5;
            font-family:        'Titillium Web', sans-serif;
            font-weight:        bold;
            font-size:          0.95em;
            text-shadow:        1px 1px 2px #111;
            text-align:         right;
            margin:             0;
            margin-left:        3%;
            margin-top:         1.25%;
            padding:            0;
            display:            block;
		}

fieldset input, fieldset textarea		{
            width:              25%;  
            border-radius:      4px;
            border:             1px dashed #498;
            color:              black;
            float:              right;
            font-family:        'Josefin Sans', sans-serif;
            font-size:          1.05em;
            font-weight:        bold;
            margin-right:       37.5%;
            margin-top:         1%;
            padding:            3px;
            display:            block;
		}		

fieldset input {
            height:             2em;
}
        
fieldset textarea {
            width:              50%;
            margin-right:       12.5%;
            height:             9.55em;
            box-shadow:         none;
}

#copy_for_me {
			height:				2.05em;
			width:				15px;
			left:				-10em;
			margin:				0.6% 60% 0 0;
}

#button_div        {
            margin:             2% auto;
            clear:              both;
            text-align:         center;
        }

.button {
            float:              none;
            width:              auto;
            margin:             1% auto;
            border-radius:      4px;
            border:             none;
            font-weight:        bold;
            font-size:          1.2em;
            background-color:   #487;
            box-shadow:         3px 3px 5px black;
            cursor:             pointer;
			padding:			3px 6px 1px;
}        
        
.button:hover, .button:focus {
            background:         #6A9;
}        

.button:focus, input:focus, textarea:focus, #copy_for_me:focus {
            outline:            none;
}

.button:active {
            background:         #265;
}        

#error_output {
            color:              yellow;
            font-weight:        bold;
            font-size:          1.15em;
            display:            block;
            padding:            0;
            margin:             0;
            padding-top:        1em;
}