/* ==================== Eric M Reset ==================== */
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, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 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;
}
/* remember to define visible focus styles! 
:focus {
	outline:;
} */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse; 
	border-spacing: 0;
}


/* ================== MoodSwings ================== */
/* ==================== Global ==================== */

html {
	color:#EFEFEF;
	position:relative;
	min-height:100%;
    font-size:62.5%; /*16px > adjusted to 10px base font size*/		
} 
body { 
    font-family:"Nixie One", Courier, monospace; 
	font-size:1.4rem; /*14px*/	
	letter-spacing:0.08em;    
	background:#1e2f3b;		
	width:100%;
	height:100%;	
	position:absolute;	
	top:0;
	left:0;	
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	text-transform:uppercase;
	font-family: "Pompiere", Helvetica, Arial, Verdana, sans-serif; 
}
header {
	position:absolute; 
	right:2rem;
	top:3rem;
	cursor:pointer;
	}	
header h1 {
	padding:0 0 0.3rem 0;
	font-size:3.2rem; /*32px*/
	border-bottom:0.3rem solid ;
	opacity:0.4;
	margin:0;	
}
h2 {
    font-size:5.6rem;
	margin:3rem 0 0 3rem;
}
#moods h2 + p {
	opacity:0.3;
	margin:0 0 2rem 3rem;
}
a:link, a:visited, span.calculate, span.retry {color:#BBB; text-decoration:none;}
a:hover, a:active, span.calculate:hover, span.retry:hover {color:#FFF; text-decoration:none;}

strong {font-weight:bold;}

em {font-style:italic;}

/*Go/Back buttons*/
span.calculate, 
span.retry {
    font-family:"Nixie One", Courier, monospace;
    font-size:4rem; /*40px*/
    text-decoration:none;
    background:#131f29;
    position:fixed;
    top:46%;    
    z-index:20;
    cursor:pointer;
}
span.calculate {
    right:0;
	border-radius: 0.3rem 0 0 0.3rem;   
    padding:1rem 1.6rem 1rem 2rem;	
}
span.retry {
    font-size:2.2rem;
	border-radius:0 0.3rem 0.3rem 0;
	position:absolute;
    left:0;	
	top:2rem;
	line-height:120%;
    padding:1rem 2rem;	
}

/*footer*/
footer {
	font-family: "Pompiere", Helvetica, Arial, Verdana, sans-serif;
	color:#EFEFEF; 
 	font-size:1.6rem; /*16px*/	
	position:fixed;
	bottom:2rem;
	right:0;
	text-transform:uppercase;		
	opacity:0.8;
	z-index:10000;
}
footer h4 {
	display:block;
	float:left;
	margin:0.4rem 0.8rem 0 1rem; 	
}
footer a {
	border-bottom:0.2rem solid;
	display:block;
	float:left;
	margin-top:0.4rem;
}
footer h4:before {
	content:".";
	display:block;
	float:left;
	margin:-1.6rem 0.8rem 0 0;
	font-size:3rem;
	opacity:0.4;
}
footer div {
	display:block;
	float:left;
	overflow:hidden;
	width:90px!important;	
}
footer div.tw {
	margin:0 1rem 0 0;
}
footer.about h4:before {
	content:"";
	display:none;
}
/* ================ Mood Selection & Dropzone ================ */ 
/*wraps all of mood selection section*/ 
.mood_selector {
	height:100%;		
} 

/* List moods */
#left-col {
    float:left;
    background:#192733;
    width:45%;
    box-shadow:1rem 0 2rem  rgba(0,0,0,0.3);
    z-index:10;
    position:relative;
    min-height:100%;
}	
#moods {
	float:left;
}
#moods ul {
	width:90%;
	float:left;
	margin: 0 0 0.8rem 2.2rem;
}
#moods .mood {
	background:#253c47;	
	margin:0.6rem;
	padding:1rem;
	border-radius:0.3rem;
	white-space:nowrap;
	float:left;
	color:#FFF;
	cursor:move;
	position:relative; 	
}

#moods .mood.dropped {
    background:none;
	color:#8b949a;
}
#moods .mood.dropped:before {
    content: "";
   	position:absolute;
   	left:-3rem;
	border:1.6rem solid #253c47; 
	border-radius:3rem 0.3rem 3rem 3rem;
	opacity:0.85;
	top:1.2rem;
}

/*
result = left |> actual <| right
14 = 5a467a |> 202020 <| a6a6a6 (black)
13 = 202020 |> a6a6a6 <| fcffec (grey)
12 = a6a6a6 |> fcffec <| 916e54 (white)
11 = fcffec |> 916e54 <| eaa655 (brown)
10 = 916e54 |> eaa655 <| ffc546 (amber)
09 = eaa655 |> ffc546 <| f37c66 (yellow)
08 = ffc546 |> f37c66 <| e27031 (pink)
07 = f37c66 |> e27031 <| c7412a (orange)
06 = e27031 |> c7412a <| 9fb36d (red)
05 = c7412a |> 9fb36d <| 599b92 (green)
04 = 9fb36d |> 599b92 <| 487dbd (green-blue)
03 = 599b92 |> 487dbd <| 234775 (blue)
02 = 487dbd |> 234775 <| 5a467a (dark blue)
01 = 234775 |> 5a467a <| 202020 (purple)
*/

/*14 black*/
#moods .mood.dropped#meaningless:before, 
#moods .mood.dropped#sobbing:before,
#moods .mood.dropped#angry:before, 
#moods .mood.dropped#wtf:before,
#moods .mood.dropped#stressed:before {border-color:#202020;}

/*13 grey*/
#moods .mood.dropped#stabby:before, 
#moods .mood.dropped#embarrassed:before,
#moods .mood.dropped#alone:before,
#moods .mood.dropped#nervous:before {border-color:#a6a6a6;}

/*12 white*/
#moods .mood.dropped#selfconscious:before,
#moods .mood.dropped#gassy:before,
#moods .mood.dropped#frustrated:before,
#moods .mood.dropped#unhappy:before,
#moods .mood.dropped#tired:before,
#moods .mood.dropped#bored:before {border-color:#fcffec;}

/*11 brown*/
#moods .mood.dropped#jealous:before,
#moods .mood.dropped#offended:before,
#moods .mood.dropped#grouchy:before, 
#moods .mood.dropped#meh:before {border-color:#916e54;}

/*10 amber*/
#moods .mood.dropped#frazzled:before,
#moods .mood.dropped#undecided:before,
#moods .mood.dropped#confused:before,
#moods .mood.dropped#change:before {border-color:#eaa655;}

/*09 yellow) */
#moods .mood.dropped#inspired:before,
#moods .mood.dropped#dreamy:before,
#moods .mood.dropped#creative:before {border-color:#ffc546;}

/*08 pink*/
#moods .mood.dropped#drunk:before, 
#moods .mood.dropped#suspicious:before {border-color:#f37c66;}

/*07 orange*/
#moods .mood.dropped#bold:before,
#moods .mood.dropped#alert:before, 
#moods .mood.dropped#ambitious:before {border-color:#e27031;}

/*06 red*/
#moods .mood.dropped#excited:before,
#moods .mood.dropped#passionate:before,
#moods .mood.dropped#energized:before {border-color:#c7412a;}

/*05 green*/
#moods .mood.dropped#reasonably:before, 
#moods .mood.dropped#refreshed:before {border-color:#9fb36d;}

/*04 blue-green*/
#moods .mood.dropped#relaxed:before,
#moods .mood.dropped#content:before,
#moods .mood.dropped#calm:before {border-color:#599b92;}

/*03 blue*/
#moods .mood.dropped#sociable:before,
#moods .mood.dropped#hot:before {border-color:#487dbd;}

/*02 dark-blue*/
#moods .mood.dropped#boppin:before,
#moods .mood.dropped#swoony:before {border-color:#234775;}

/*01 purple*/
#moods .mood.dropped#love:before,
#moods .mood.dropped#omgsohappy:before {border-color:#5a467a;}

#dropzone {
	height:100%;	
	width:55%;	 
	overflow:hidden;	
}
#bucket {
	height:100%;
    z-index:5;    
    box-shadow:inset -3rem 3rem 4rem  rgba(0,0,0,0.1);   
}


/* ============ Mood Result ============ */
/*wraps all of mood result section*/ 
.mood_result {
	height:100%;
	display:none;	
	overflow:hidden;	
} 
p.moodInfo span { cursor: pointer; color: #eaa655; }
p.moodInfo span:hover{ text-decoration: underline; }

#result h2 {
	font-size:4rem; /*40px*/
	margin:0 0 2rem 0;
} 
#result #ring #desc {
	display: block;
	color: #EFEFEF;
	margin: 15% auto;
	text-align: center;
	padding: 10% 15%; 
    opacity:1;  
	line-height:2rem; 
	font-size:1.6rem; 	
}
#result #ring #desc i {
	font-size:1.4rem; 
	clear:both; 
	display:block; 
	margin-top:1rem; 
	opacity:0.6;
}	

#result {
 	position:relative;
 	margin:4% auto;
 	left:-5rem;	
}
#result:before, 
#result:after {
	border:7rem solid #DDD; /*70px*/	
    border-radius:90%;
    content: "";
    display: block;
    position: absolute;
    height: 100%;    
    width: 100%;
    z-index:0;
    opacity:0.8;
}
#result:before {
    top:0;
    left:3%; 
}    
#result:after {
    top:0;
    left:-3%;  
}
#result #ring {	
 	position:relative;
	border-radius: 90%;
	border:7rem solid #DDD; /*70px*/
	z-index:10;
    height:100%;    
    width:100%;
    opacity:0.9;         	
}

/*14 black */
#result.black:before {border-color:#5a467a;}  
#result.black:after {border-color:#a6a6a6;}
#result.black #ring {border-color:#202020;}

/*13 grey*/
#result.grey:before {border-color:#202020;}  
#result.grey:after {border-color:#fcffec;}
#result.grey #ring {border-color:#a6a6a6;}

/*12 white*/
#result.white:before {border-color:#a6a6a6;}  
#result.white:after {border-color:#916e54;}
#result.white #ring {border-color:#fcffec;}

/*11 brown*/
#result.brown:before {border-color:#fcffec;}  
#result.brown:after {border-color:#eaa655;}
#result.brown #ring {border-color:#916e54;}

/*10 amber*/
#result.amber:before {border-color:#916e54;}  
#result.amber:after {border-color:#ffc546;}
#result.amber #ring {border-color:#eaa655;}

/*09 yellow*/
#result.yellow:before {border-color:#eaa655;}  
#result.yellow:after {border-color:#f37c66;}
#result.yellow #ring {border-color:#ffc546;}

/*08 pink*/
#result.pink:before {border-color:#ffc546;}  
#result.pink:after {border-color:#e27031;}
#result.pink #ring {border-color:#f37c66;}

/*07 orange*/
#result.orange:before {border-color:#f37c66;}  
#result.orange:after {border-color:#c7412a;}
#result.orange #ring {border-color:#e27031;}

/*06 red*/
#result.red:before {border-color:#e27031;}  
#result.red:after {border-color:#9fb36d;}
#result.red #ring {border-color:#c7412a;}

/*05 green*/
#result.green:before {border-color:#c7412a;}  
#result.green:after {border-color:#599b92;}
#result.green #ring {border-color:#9fb36d;}

/*04 green-blue*/
#result.green-blue:before {border-color:#9fb36d;}  
#result.green-blue:after {border-color:#487dbd;}
#result.green-blue #ring {border-color:#599b92;}

/*03 blue*/
#result.blue:before {border-color:#599b92;}  
#result.blue:after {border-color:#234775;}
#result.blue #ring {border-color:#487dbd;}

/*02 dark-blue*/
#result.dark-blue:before {border-color:#487dbd;}  
#result.dark-blue:after {border-color:#5a467a;}
#result.dark-blue #ring {border-color:#234775;}

/*01 purple*/
#result.purple:before {border-color:#234775;}  
#result.purple:after {border-color:#202020;}
#result.purple #ring {border-color:#5a467a;}



/* ============ Media Queries ============ */

/* Smartphones (portrait) %^&&*!! ----------- */


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	html { font-size:60%; }
	html ul li, html p, span.calculate, span.retry { -webkit-text-stroke: 0.35px; }	
	h2 { margin:2rem 0 0 2.6rem; font-size:3.6rem; }
	#moods h2 + p { margin-bottom:1rem; margin-left:2.6rem;}
	header { top:2rem; right:1.8rem; }
	#left-col { width: 52%; }
	#dropzone { width: 48%; }	
	#result {  margin:6% auto; left:-4rem; }
	#result:before, #result:after, #result #ring { border-width:4rem; }	
	#result #ring #desc p { font-size:1rem;	line-height:130%;  }
	#result #ring #desc h2 { -webkit-text-stroke: 0; font-size:2.4rem; margin-bottom:2rem; }
	#footer { font-size:2.5rem; }	
}


/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	html { font-size:65%; }
	html ul li, html p, span.calculate, span.retry { -webkit-text-stroke: 0.2px; }	
	h2 { margin:2rem 0 0 2.6rem; font-size:3.6rem; }
	#moods h2 + p { margin: 0.4rem 0 2rem 2.6rem; font-size:1.4rem; }
	header { top:2rem; right:1.8rem; }
	#left-col { width:55%; }
	#moods .mood { margin:0.5rem; font-size:1.4rem; padding:0.9rem; }
	#dropzone { width:45%; }
	#result { margin:8% auto; }	
	#result:before, #result:after, #result #ring { border-width:5rem; }
	#result #ring #desc p { font-size:1.6rem; line-height:130%; }	
	#footer { font-size:120%; }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	html { font-size:83%; }
	html ul li, html p, span.calculate, span.retry { -webkit-text-stroke: 0.35px; }
	#moods h2 + p { margin-bottom:1.6rem; margin-top:0.3rem; }
	#left-col { width:50%; }
	#dropzone { width:50%; }
	#result { margin:14% auto; left:-6.2rem; }
	#result #ring #desc p { font-size:2rem; line-height:140%; }
	#result #ring #desc h2 { font-size:6rem; margin-bottom:3rem; -webkit-text-stroke: 0; }
	#footer { font-size:2.5rem; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	html {font-size:90%;}
	#left-col {width:35%;}
	#dropzone {width:65%;}
	#result:before, #result:after { border-width:8rem; }
	#result:before { left:4%; }    
	#result:after { left:-4%; }
	#result #ring {	border-width:8rem;}
	footer div.tw {margin:0.2rem 1rem 0 0;}	
}