/* ----------CSS 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, 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;}

/* ---------- GENERAL ---------- */

body {background: url("../img/bg.jpg") no-repeat; color: #378ec9; font-family: 'Open Sans', sans-serif; font-weight: 400; width: 500px; height: 700px; z-index: -1;}

h1 {display: none;}
h2 {font-size: 20px; margin: 10px 0 0 0; padding: 0px; line-height: 20px;}
h3 {font-family:  'Open Sans', sans-serif; font-weight: 700; font-style: italic; font-size: 13px; line-height: 1.3em; margin: 35px 0 10px 0; text-align: right; width: 286px;}
	.heart_content h3 {margin-top: 25px;}

p {font-size: 12px; line-height: 1.3em; margin: 10px 0 0 0; width: 286px;}
	.share p {font-size: 10px; line-height: 1.1em; margin: 5px 0 0 0; padding: 0; text-align: center; width: 500px;}
	
a, a:active, a:visited {color: #b32c39; font-style: italic; text-decoration: none;}	
	a {-webkit-tap-highlight-color: #a4d6f3;}
	a:hover {color: #fddc36;}
	
ul {margin: 5px 0; list-style: none;}

li {font-size: 12px; line-height: 1.3em; margin: 5px 0;}

img {border: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, .1);}

/* ---------- PARTS SECTION ---------- */

.belly_square, .ear_square, .heart_square, .knees_square, .stitches_square, .typing_square, .voice_square, .ogmog_link {margin:0 auto; position: absolute;}	

	.belly_square {background: url("../img/belly_bg.png") no-repeat center top; top: 361px; left: 372px; width: 52px; height: 48px;}
		.belly_square:hover {background: url("../img/belly_bg.png") no-repeat center -48px;}
	.ear_square {background: url("../img/ear_bg.png") no-repeat center top; top: 76px; left: 345px; width: 30px; height: 30px;}
		.ear_square:hover {background: url("../img/ear_bg.png") no-repeat center -30px;}
	.heart_square {background: url("../img/heart_bg.png") no-repeat center top; top: 205px; left: 443px; width: 41px; height: 39px;}
		.heart_square:hover {background: url("../img/heart_bg.png") no-repeat center -39px;}
	.knees_square {background: url("../img/knees_bg.png") no-repeat center top; top: 503px; left: 446px; width: 34px; height: 43px;}
		.knees_square:hover {background: url("../img/knees_bg.png") no-repeat center -43px;}
	.stitches_square {background: url("../img/stitches_bg.png") no-repeat center top; top: 267px; left: 366px; width: 47px; height: 50px;}
		.stitches_square:hover {background: url("../img/stitches_bg.png") no-repeat center -50px;}
	.typing_square {background: url("../img/typing_bg.png") no-repeat center top; top: 255px; left: 302px; width: 47px; height: 65px;}
		.typing_square:hover {background: url("../img/typing_bg.png") no-repeat center -65px;}
	.voice_square {background: url("../img/voice_bg.png") no-repeat center top; top: 155px; left: 416px; width: 27px; height: 27px;}
		.voice_square:hover {background: url("../img/voice_bg.png") no-repeat center -27px;}
	.ogmog_link {background: url("../img/ogmog_sprite.png") no-repeat center top; top: 652px; left: 384px; width: 106px; height: 14px;}
		.ogmog_link:hover {background: url("../img/ogmog_sprite.png") no-repeat center -14px;}

	.heart_square img, .knees_square img, .stitches_square img, .typing_square img, .voice_square img, .ogmog_link img {position:absolute; left:0; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;}

/* ---------- MODALS ---------- */

.modal_dialog a {opacity: 1;}

img.modal_top {position: absolute; top: 10px; left: 0px; z-index: 500;}

#open_belly, #open_ear, #open_heart, #open_knees, #open_stitches, #open_typing, #open_voice {position: fixed; margin: 0px; padding: 0px; top: 0; right: 0; bottom: 0; left: 0; width: 500px; height: 680px;}

.modal_dialog {margin-top: 0px; padding: 0px; right: 0; bottom: 0; left: 0; z-index: 100; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none;}

.modal_dialog:target {opacity:1; pointer-events: auto;}

.modal_dialog > div {position: relative; -webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px; background: #a4d6f3; -moz-box-shadow: 10px 10px 7px #555; -webkit-box-shadow: 10px 10px 7px #555; box-shadow: 10px 10px 7px rgba(0,0,0,0.4);}

.modal_dialog > div > section {margin-top: 30px; z-index: 100;}

	#open_belly.modal_dialog > div {top: 106px; left: 33px; width: 317px; height: 360px; z-index: 100;}	
	#open_ear.modal_dialog > div {top: 137px; left: 34px; width: 317px; height: 433px; z-index: 100;}
	#open_heart.modal_dialog > div {top: 88px; left: 84px; width: 317px; height: 417px; z-index: 100;}
	#open_knees.modal_dialog > div {top: 164px; left: 51px; width: 317px; height: 445px; z-index: 100;}
	#open_stitches.modal_dialog > div {top: 103px; left: 36px; width: 317px; height: 340px; z-index: 100;}
	#open_typing.modal_dialog > div {top: 23px; left: 23px; width: 317px; height: 407px; z-index: 100;}
	#open_voice.modal_dialog > div {left: 42px; top: 33px; height: 377px; width: 317px; z-index: 100;}

		.empty_belly {background: url("../img/belly_bg.png"); position: fixed; top: 361px; left: 372px; width: 52px; height: 48px;}
		.empty_ear {background: url("../img/ear_bg.png"); position: fixed; left: 345px; top: 76px; height: 30px; width: 30px;}
		.empty_heart {background: url("../img/heart_bg.png"); position: fixed; top: 205px; left: 443px; width: 41px; height: 39px;}
		.empty_knees {background: url("../img/knees_bg.png"); position: fixed; top: 503px; left: 446px; width: 34px; height: 43px;}
		.empty_stitches {background: url("../img/stitches_bg.png"); position: fixed; top: 267px; left: 366px; width: 47px; height: 50px;}
		.empty_typing {background: url("../img/typing_bg.png"); position: fixed; top: 255px; left: 302px; width: 47px; height: 65px; z-index: 0;}
		.empty_voice {background: url("../img/voice_bg.png"); position: fixed; top: 155px; left: 416px; width: 27px; height: 27px;}
		.empty_link {cursor: default;}

	.belly_content, .ear_content, .heart_content, .knees_content, .stitches_content, .typing_content, .voice_content {float: left; margin: 0 0 10px 10px; overflow: auto;}

		.belly_content {width: 302px; height: 320px;}
		.ear_content {width: 302px; height: 385px;}
		.heart_content {width: 302px; height: 370px;}
		.knees_content {width: 302px; height: 395px;}
		.stitches_content {width: 302px; height: 300px;}
		.typing_content {width: 302px; height: 360px;}
		.voice_content {width: 302px; height: 330px;}

		.belly_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -159px; width: 286px; height: 53px;}		
		.ear_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -318px; width: 286px; height: 53px;}
		.heart_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -265px; width: 286px; height: 53px;}
		.knees_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center 0px; width: 286px; height: 53px;}
		.stitches_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -212px; width: 286px; height: 53px;}
		.typing_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -106px; width: 286px; height: 53px;}
		.voice_logo {background: url(../img/logo/logo_sheet.jpg) no-repeat center -53px; width: 286px; height: 53px;}		

.close {background: #a4d6f3; background-image: url(../img/x.png); background-repeat: no-repeat; border: 2px solid #2e8dcc; position: absolute; top:-10px; right: -12px; width: 24px; height: 24px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; -moz-box-shadow: 10px 10px 7px #555; -webkit-box-shadow: 10px 10px 7px #555; box-shadow: 6px 6px 7px #555;}
	.close:hover { background: #fddc36;	background-image: url(../img/x.png); background-repeat: no-repeat;}
	.close_full {position: absolute; top:0; left: 0; width: 500px; height: 680px; background: rgba(110,184,230,0.75); cursor: default;}

/* ---------- SHARE ---------- */
.share {display: block; width: 500px; height: 20px; position:absolute; top: 680px; margin: 0; padding: 0; text-align: center;}

	
/* ---------- SPINNING ICONS ---------- */

#belly_icon img {position: fixed; top: 364px; left: 377px; width: 43px; height: 43px; z-index: 1000;}
#ear_icon img {position: fixed; top: 79px; left: 348px; width: 24px; height: 24px; z-index: 1000;}
#heart_icon img {position: fixed; top: 212px; left: 452px; width: 24px; height: 24px; z-index: 1000;}
#knees_icon img {position: fixed; top: 508px; left: 445px; width: 35px; height: 35px; z-index: 1000;}
#stitches_icon img {position: fixed; top: 276px; left: 370px; width: 35px; height: 35px; z-index: 1000;}
#typing_icon img {position: fixed; top: 260px; left: 295px; width: 52px; height: 52px; z-index: 1000;}
#voice_icon img {position: fixed; top: 161px; left: 421px; width: 16px; height: 16px; z-index: 1000;}

@-webkit-keyframes spin {100% {-webkit-transform: rotate(-360deg);}}
@-moz-keyframes spin {100%{-moz-transform: rotate(-360deg);}}
@keyframes spin {100%{-webkit-transform: rotate(-360deg); transform:rotate(-360deg);}}

.spin {-webkit-animation: spin .7s linear 1; -moz-animation: spin .7s linear .7; animation: spin .7s linear 1; z-index: 2000;}
	.spin.trigger{display:table;}

/* ---------- NOSCRIPT FALLBACKS ---------- */
#no_belly {position: fixed; top: 116px; left: 42px; width: 77px; height: 77px; z-index: 1000;}
#no_ear {position: fixed; top: 146px; left: 42px; width: 77px; height: 77px; z-index: 1000;}
#no_heart {position: fixed; top: 101px; left: 92px; width: 77px; height: 77px; z-index: 1000;}
#no_knees {position: fixed; top: 177px; left: 59px; width: 77px; height: 77px; z-index: 1000;}
#no_stitches {position: fixed; top: 115px; left: 42px; width: 77px; height: 77px; z-index: 1000;}
#no_typing {position: fixed; top: 15px; left: 11px; width: 115px; height: 115px; z-index: 1000;}
#no_voice {position: fixed; top: 45px; left: 40px; width: 77px; height: 77px; z-index: 1000;}

/* ---------- WIGGLE EFFECT ---------- */

@-webkit-keyframes wiggle {0% {-webkit-transform:rotate(10deg);} 50% {-webkit-transform:rotate(-10deg);} 100% {-webkit-transform:rotate(10deg);}} 
@-moz-keyframes wiggle {0% {-moz-transform:rotate(10deg);} 50% {-moz-transform:rotate(-10deg);} 100% {-moz-transform:rotate(10deg);}}
@keyframes wiggle {0% {transform:rotate(10deg);} 50% {transform:rotate(-10deg);} 100% {transform:rotate(10deg);}}

.wiggler:hover {-webkit-animation: wiggle 0.2s infinite; -moz-animation: wiggle 0.5s infinite; animation: wiggle 0.5s infinite;}


/* ---------- IE 10 hack for modal appearance ---------- */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.modal_dialog {display:none;}
	.modal_dialog:target {display:block;pointer-events:none;}
	#close {display:none;}
}