jsgui3-server 0.0.121 → 0.0.123

package/examples/_css/style.css

@@ -1,1669 +1,1669 @@
-/*
- * HTML5 Boilerplate
- *
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- *
- * Detailed information about this CSS: h5bp.com/css
- *
- * ==|== normalize ==========================================================
- */
-
-
-/* =============================================================================
-   HTML5 display definitions
-   ========================================================================== */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-audio:not([controls]) { display: none; }
-[hidden] { display: none; }
-
-
-/* =============================================================================
-   Base
-   ========================================================================== */
-
-/*
- * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
- * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
- */
-
-html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-
-html, button, input, select, textarea { font-family: sans-serif; color: #222; }
-
-body { margin: 0; font-size: 1em; line-height: 1.4; }
-
-/*
- * Remove text-shadow in selection highlight: h5bp.com/i
- * These selection declarations have to be separate
- * Also: hot pink! (or customize the background color to match your design)
- */
-
-::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
-::selection { background: #fe57a1; color: #fff; text-shadow: none; }
-
-
-/* =============================================================================
-   Links
-   ========================================================================== */
-
-a { color: #00e; }
-a:visited { color: #551a8b; }
-a:hover { color: #06e; }
-a:focus { outline: thin dotted; }
-
-/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
-a:hover, a:active { outline: 0; }
-
-
-/* =============================================================================
-   Typography
-   ========================================================================== */
-
-abbr[title] { border-bottom: 1px dotted; }
-
-b, strong { font-weight: bold; }
-
-blockquote { margin: 1em 40px; }
-
-dfn { font-style: italic; }
-
-hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
-
-ins { background: #ff9; color: #000; text-decoration: none; }
-
-mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
-
-/* Redeclare monospace font family: h5bp.com/j */
-pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
-
-/* Improve readability of pre-formatted text in all browsers */
-pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
-
-q { quotes: none; }
-q:before, q:after { content: ""; content: none; }
-
-small { font-size: 85%; }
-
-/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
-sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
-
-
-/* =============================================================================
-   Lists
-   ========================================================================== */
-
-ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
-dd { margin: 0 0 0 40px; }
-nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
-
-
-/* =============================================================================
-   Embedded content
-   ========================================================================== */
-
-/*
- * 1. Improve image quality when scaled in IE7: h5bp.com/d
- * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
- */
-
-img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
-
-/*
- * Correct overflow not hidden in IE9
- */
-
-svg:not(:root) { overflow: hidden; }
-
-
-/* =============================================================================
-   Figures
-   ========================================================================== */
-
-figure { margin: 0; }
-
-
-/* =============================================================================
-   Forms
-   ========================================================================== */
-
-form { margin: 0; }
-fieldset { border: 0; margin: 0; padding: 0; }
-
-/* Indicate that 'label' will shift focus to the associated form element */
-label { cursor: pointer; }
-
-/*
- * 1. Correct color not inheriting in IE6/7/8/9
- * 2. Correct alignment displayed oddly in IE6/7
- */
-
-legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
-
-/*
- * 1. Correct font-size not inheriting in all browsers
- * 2. Remove margins in FF3/4 S5 Chrome
- * 3. Define consistent vertical alignment display in all browsers
- */
-
-button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
-
-/*
- * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
- */
-
-button, input { line-height: normal; }
-
-/*
- * 1. Display hand cursor for clickable form elements
- * 2. Allow styling of clickable form elements in iOS
- * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
- */
-
-button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
-
-/*
- * Re-set default cursor for disabled elements
- */
-
-button[disabled], input[disabled] { cursor: default; }
-
-/*
- * Consistent box sizing and appearance
- */
-
-input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
-input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
-
-/*
- * Remove inner padding and border in FF3/4: h5bp.com/l
- */
-
-button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-
-/*
- * 1. Remove default vertical scrollbar in IE6/7/8/9
- * 2. Allow only vertical resizing
- */
-
-textarea { overflow: auto; vertical-align: top; resize: vertical; }
-
-/* Colors for form validity */
-input:valid, textarea:valid {  }
-input:invalid, textarea:invalid { background-color: #f0dddd; }
-
-
-/* =============================================================================
-   Tables
-   ========================================================================== */
-
-table { border-collapse: collapse; border-spacing: 0; }
-td { vertical-align: top; }
-
-
-/* =============================================================================
-   Chrome Frame Prompt
-   ========================================================================== */
-
-.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
-
-
-/* ==|== primary styles =====================================================
-   Author:
-   ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* ==|== media queries ======================================================
-   EXAMPLE Media Query for Responsive Design.
-   This example overrides the primary ('mobile first') styles
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 35em) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-
-
-/* ==|== non-semantic helper classes ========================================
-   Please define your styles before this section.
-   ========================================================================== */
-
-/* For image replacement */
-.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
-.ir br { display: none; }
-
-/* Hide from both screenreaders and browsers: h5bp.com/u */
-.hidden { display: none !important; visibility: hidden; }
-
-/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
-.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-
-/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
-.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
-
-/* Hide visually and from screenreaders, but maintain layout */
-.invisible { visibility: hidden; }
-
-/* Contain floats: h5bp.com/q */
-.clearfix:before, .clearfix:after { content: ""; display: table; }
-.clearfix:after { clear: both; }
-.clearfix { *zoom: 1; }
-
-
-
-/* ==|== print styles =======================================================
-   Print styles.
-   Inlined to avoid required HTTP connection: h5bp.com/r
-   ========================================================================== */
-
-@media print {
-  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
-  a, a:visited { text-decoration: underline; }
-  a[href]:after { content: " (" attr(href) ")"; }
-  abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
-  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-  thead { display: table-header-group; } /* h5bp.com/t */
-  tr, img { page-break-inside: avoid; }
-  img { max-width: 100% !important; }
-  @page { margin: 0.5cm; }
-  p, h2, h3 { orphans: 3; widows: 3; }
-  h2, h3 { page-break-after: avoid; }
-}
-
-
-
-/* ==|== custom fonts ======================================================
-   ========================================================================== */
-
-@font-face {
-    font-family: 'DroidSerifRegular';
-    src: url('fonts/DroidSerif-Regular-webfont.eot');
-    src: url('fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/DroidSerif-Regular-webfont.woff') format('woff'),
-         url('fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
-         url('fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'DroidSerifItalic';
-    src: url('fonts/DroidSerif-Italic-webfont.eot');
-    src: url('fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/DroidSerif-Italic-webfont.woff') format('woff'),
-         url('fonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
-         url('fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'DroidSerifBold';
-    src: url('fonts/DroidSerif-Bold-webfont.eot');
-    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
-         url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
-         url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'DroidSerifBoldItalic';
-    src: url('fonts/DroidSerif-BoldItalic-webfont.eot');
-    src: url('fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
-         url('fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
-         url('fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'NewCenturyBold';
-    src: url('fonts/ncsr75w.eot');
-    src: url('fonts/ncsr75w.eot?#iefix') format('embedded-opentype'),
-         url('fonts/ncsr75w.woff') format('woff'),
-         url('fonts/ncsr75w.ttf') format('truetype'),
-         url('fonts/ncsr75w.svg#DroidSerifRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-
-.preloaded {
-	position: absolute;
-	left: -3000px;
-	top: 0px;
-}
-
-
-.faded {
-	opacity: 0.6;
-}
-
-.screen {
-	width: 810px;
-	position: relative;
-	margin-bottom: 4px;
-	
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	
-	font-size: 15px;
-	font-family: DroidSerifRegular;
-
-	cursor:default;
-}
-
-.screen .header {
-	position: absolute;
-	/*
-	width: 810px;
-	height: 40px;
-	*/ 
-}
-
-.items_circle {
-	width: 600px;
-	height: 600px;
-	position: relative;
-}
-
-.items_circle .item {
-	width: 120px;
-	height: 120px;
-	background: url('../img/cloud_in_circle_120x120.png');
-	position: absolute;
-}
-
-.large_outer_shelf {
-	position:absolute;
-	background:url( '../img/large_shelf.png') no-repeat;
-	width:813px;
-	height:153px;
-}
-.small_outer_shelf {
-	position:absolute;
-	background:url( '../img/small_shelf.png') no-repeat;
-	width:815px;
-	height:91px;
-}
-
-.inner_shelf {
-	position:relative;
-}
-
-.base_screen .large_outer_shelf {
-	top: 220px;
-}
-
-.special_something_screen .large_outer_shelf {
-	top: 280px;
-}
-
-.spices_screen .large_outer_shelf {
-	top: 260px;
-}
-
-
-.fruit_and_veg_screen .small_outer_shelf.top {
-	top: 200px;
-}
-.fruit_and_veg_screen .small_outer_shelf.bottom {
-	top: 360px;
-}
-
-.extras_screen .large_outer_shelf {
-	top: 360px;
-}
-
-.screen {
-	background-color: #ffffcc;
-	width: 810px;
-	height: 640px;
-	overflow: hidden;
-}
-
-.screen .modal {
-	z-index: 40000;
-	position: absolute;
-	width: 810px;
-	height: 640px;
-}
-
-.screen .modal .dialog {
-	z-index: 50000;
-	position: absolute;
-	left: 150px;
-	top: 150px;
-}
-
-.screen .modal .dialog .small_mix_icon {
-	position: absolute;
-	top: 50px;
-	left: 195px;
-}
-
-.screen .modal .dialog .text {
-	height: 180px;
-    left: 80px;
-    position: absolute;
-    text-align: center;
-    top: 138px;
-    width: 300px;
-}
-
-.screen .modal .dialog .delete.button {
-    left: 384px;
-    position: absolute;
-    top: 38px;
-}
-
-.screen .modal .dialog .back.button {
-    left: 120px;
-    position: absolute;
-    top: 195px;
-}
-.screen .modal .dialog .yes.button {
-    left: 245px;
-    position: absolute;
-    top: 195px;
-}
-
-.screen .blocker {
-	width: 810px;
-	height: 640px;
-	position: absolute;
-	background-color: #000000;
-	opacity: 0.3;
-}
-
-.screen .footer {
-	position: absolute;
-	width: 810px;
-	height: 75px;
-	background-color: #8E4F09;
-	top: 565px;
-	z-index: 10;
-}
-
-.screen .button {
-	position: absolute;
-}
-
-
-
-/*
-.base_screen .sprite {
-	position: absolute;
-}
-*/
-/*
-.base_screen .creme_fraiche {
-	top: -40px;
-	left: 40px;
-}
-
-.base_screen .natural_yoghurt {
-	top: -40px;
-	left: 330px;
-}
-
-.base_screen .sour_cream {
-	top: -60px;
-	left: 570px;
-}
-*/
-
-.base_screen .Chop_board {
-	top: 531px;
-	left: 24px;
-}
-.fruit_and_veg_screen .Chop_board {
-	top: 531px;
-	left: 24px;
-}
-.special_something_screen .Chop_board {
-	top: 531px;
-	left: 24px;
-}
-.extras_screen .Chop_board {
-	top: 531px;
-	left: 24px;
-}
-
-/*
-.sprite.Layer_13 {
-	position: relative;
-	top: -160px;
-}
-*/
-.spices_screen .Chop_board {
-	top: 531px;
-	left: 24px;
-}
-
-.abs {
-	position: absolute;
-}
-
-.rel {
-	position: relative;
-	/*width: 3000px; */
-	
-}
-
-.asb .rel {
-	
-}
-
-/*
-.top .fruit_and_veg .rel {
-	top: -60px;
-}
-
-
-.bottom .fruit_and_veg .rel {
-	top: -25px;
-}
-*/
-
-/*
-
-.sprite.cucumber {
-	position: relative;
-	top: -15px;
-}
-
-.sprite.Sweetcorn {
-	position: relative;
-	top: 25px;
-}
-.sprite.onion {
-	position: relative;
-	top: -15px;
-}
-
-*/
-
-
-.base_screen .sliders{
-position: absolute;
-top:380px;
-left: 150px;
-}
-
-.sliders .salt {
-position: absolute;
-}
-
-.sliders .pepper{
-position: absolute;
-top: 80px;
-}
-
-.sliders .plus{
-position: absolute;
-left: 450px;
-
-}
-
-/*
-.col1 {
-	float: left;
-}
-*/
-
-/*
-.category label {
-	margin-left: 0.8em;
-}
-
-.category table {
-	margin-bottom: 0.8em;
-}
-*/
-
-
-h1 {
-	font-size: 16px;
-	margin-left: 16px;
-}
-
-h2 {
-	font-size: 14px;
-    margin-left: 16px;
-}
-
-.basic_display {
-	font-size: 12px;
-}
-
-.basic_display .col1 {
-	width: 320px;
-	float: left;
-	
-}
-
-.basic_display .col2 {
-	width: 320px;
-	float: left;
-}
-
-.basic_display table.category {
-	width: 320px;
-	margin-bottom: 22px;
-	margin-left: 22px;
-}
-
-.basic_display table label {
-	margin-left: 0.8em;
-}
-
-.logic_display {
-	float: left;
-	width: 320px;
-}
-
-.logic_display .label {
-	margin-top: 0.8em;
-}
-
-.logic_display .bar {
-	width: 300px;
-	height: 32px;
-	margin-bottom: 4px;
-	/* background-color: #ABCDEF; */
-	
-}
-
-.logic_display {
-	font-size: 12px;
-}
-
-
-.inner_shelf .ingredient {
-	float: left;
-	margin-right: 20px;
-}
-
-
-.bases.screen .outer_shelf {
-	top: 200px;
-	position: absolute;
-}
-
-.bases.screen .inner_shelf {
-	padding-left: 70px;
-}
-
-.bases .ingredient {
-	position: relative;
-	top: -45px;
-}
-
-.bases .salt_and_pepper_levels {
-	position: absolute;
-	width: 500px;
-	top: 370px;
-	left:240px;
-}
-
-.bases .salt_and_pepper_levels .spoon {
-	float: right;
-	width: 100px;
-	height: 100px;
-}
-
-.bases .salt_and_pepper_levels .spoon .grey_tilted_spoon {
-	float: left;
-	width: 37px;
-	height: 110px;
-}
-
-.bases .salt_and_pepper_levels .spoon .text {
-	color: #999;
-	margin-top: 45px;
-	white-space: nowrap;
-}
-
-.herbs_spices .spoon {
-	position: absolute;
-	width: 100px;
-	height: 100px;
-	left: 370px;
-}
-
-.herbs_spices .spoon .grey_tilted_spoon {
-	float: left;
-	width: 37px;
-	height: 110px;
-}
-
-.herbs_spices .spoon .text {
-	color: #999;
-	margin-top: 45px;
-	white-space: nowrap;
-}
-
-.fruits_vegetables_grain .pen_drawn_background {
-	position: absolute;
-	left: 300px;
-	top: 80px;
-	text-align: center;
-	/*
-	padding-left: 2px;
-	padding-right: 2px;
-	*/
-}
-
-.mini.spice_jar {
-	height: 124px;
-	width: 42px;
-}
-
-.screen .pen_drawn_background {
-	position: absolute;
-	text-align: center;
-	top: 80px;
-}
-
-.pen_drawn_background span {
-	color: #FFC;
-	padding: 8px;
-	font:size: 14pt;
-	position: relative;
-	top: 25px;
-	/*
-	margin-left: 0.6em;
-	mergin-right: 0.6em;*/
-	width: 140px;
-}
-
-.spice_level_bg {
-	padding: 1px;
-	padding-left: 7px;
-	background-repeat: no-repeat !important;
-	height: 27px !important;
-}
-
-.spice_level_white_left_cap {
-	width: 12px;
-}
-.spice_level_white_bar, .spice_level_brown_bar {
-    height: 26px;
-    /* width: 257px !important; */
-}
-.spice_level_white_right_cap {
-    background-position: -275px -136px !important;
-    height: 25px;
-    width: 14px;
-}
-.spice_level_brown_right_cap {
-    background-position: -261px -136px !important;
-    height: 25px !important;
-    width: 13px !important;
-}
-.spice_level_gr_right_cap {
-    background-position: -275px -109px !important;
-    height: 25px;
-    width: 14px;
-}
-
-.spice_level_red_right_cap {
-    background-position: -261px -109px !important;
-    height: 25px;
-    width: 14px;
-}
-
-.spice_level_yel_right_cap {
-    background-position: -276px -82px !important;
-    height: 25px;
-    width: 14px;
-}
-
-.level_indicator .left_cap {
-	float: left;
-	width: 12px;
-}
-.level_indicator .bar {
-	float: left;
-}
-.level_indicator .right_cap {
-	float: left;
-}
-
-.level_indicator .name {
-	text-align: center;
-	width: 290px;
-	color: #8e4f09;
-	text-transform: capitalize;
-}
-
-.fruits_vegetables_grain .ingredient {
-	position: relative;
-	top: -30px;
-}
-.extras .ingredient {
-	position: relative;
-}
-
-.button {
-	z-index: 1000;
-}
-
-.fruits_vegetables_grain .top.outer_shelf {
-	top: 210px;
-	position: absolute;
-}
-
-.fruits_vegetables_grain .inner_shelf {
-	width: 4000px;
-}
-
-.fruits_vegetables_grain .bottom.outer_shelf {
-	top: 390px;
-	position: absolute;
-}
-
-.fruits_vegetables_grain .move_bottom_shelf_right {
-	left: 750px;
-	top: 415px;
-	z-index: 4;
-}
-
-.fruits_vegetables_grain .move_top_shelf_right {
-	left: 750px;
-	top: 230px;
-	z-index: 4;
-}
-
-.fruits_vegetables_grain .move_bottom_shelf_left {
-	left: 24px;
-    top: 415px;
-    z-index: 4;
-}
-
-.fruits_vegetables_grain .move_top_shelf_left {
-	left: 24px;
-    top: 230px;
-    z-index: 4;
-}
-
-.condiments_toppings .large_shelf {
-	top: 330px;
-	position: absolute;
-}
-
-.condiments_toppings .inner_shelf {
-	width: 4000px;
-}
-
-.condiments_toppings .ingredient {
-	position: relative;
-}
-/*
-.condiments_toppings .ingredient.extra_virgin_olive_oil {
-	top: -160px;
-}
-*/
-
-.condiments_toppings .move_shelf_left {
-	position:absolute;
-	left: 24px;
-    top: 375px;
-    z-index: 4;
-}
-.condiments_toppings .move_shelf_right {
-	position:absolute;
-	left: 750px;
-    top: 375px;
-    z-index: 4;
-}
-
-/*
-.fruits_vegetables_grain .move_bottom_shelf_right {
-	
-}
-*/
-
-.shelf_view_window {
-	margin-left: 70px;
-	width: 640px;
-	/* overflow: hidden; */
-}
-
-.herbs_spices .large_shelf {
-	top: 240px;
-	position: absolute;
-}
-
-.herbs_spices .inner_shelf {
-	width: 4000px;
-}
-
-.herbs_spices .inner_shelf .spice_jar {
-	width: 86px;
-	float: left;
-	margin-right: 25px;
-	position: relative;
-	top: -120px;
-}
-
-.herbs_spices .inner_shelf .spice_jar.open {
-	float: left;
-	margin-right: 25px;
-	position: relative;
-	top: -158px;
-	/* left: -10px; */
-}
-.herbs_spices .red.spice_jar.open .jar_itself{
-	margin-top:1px;
-}
-
-.herbs_spices .move_shelf_left {
-	position:absolute;
-	left: 24px;
-    top: 290px;
-    z-index: 4;
-}
-.herbs_spices .move_shelf_right {
-	position:absolute;
-	left: 750px;
-    top: 290px;
-    z-index: 4;
-}
-
-.extras .inner_shelf {
-	width: 4000px;
-}
-.extras .large_shelf {
-	top: 330px;
-	position: absolute;
-}
-.extras .move_shelf_left {
-	position:absolute;
-	left: 24px;
-    top: 350px;
-    z-index: 4;
-}
-.extras .move_shelf_right {
-	position:absolute;
-	left: 750px;
-    top: 350px;
-    z-index: 4;
-}
-
-.level_indicator {
-	position: relative;
-	
-}
-
-.level_indicator .minus {
-	z-index: 4;
-	position: absolute;
-	left: -64px;
-}
-
-.level_indicator .plus {
-	z-index: 4;
-	position: absolute;
-	left: 320px;
-}
-
-.footer .button {
-	position: absolute;
-}
-
-.footer .back {
-	top: 15px;
-	left: 560px;
-}
-
-.footer .next {
-	top: 15px;
-	left: 680px;
-}
-
-.screen .chopping_board {
-	left: 20px;
-	top: 510px;
-	position: absolute;
-	z-index: 9;
-}
-
-.screen .chopping_board .open_chopping_board.button {
-	position: absolute;
-	left: 30px;
-	top: 4px;
-}
-
-.screen .page_number_indicator {
-	position: absolute;
-	right: 20px;
-	top: 24px;
-}
-
-.screen .page_number_indicator .circle_indicator_brown {
-	float: left;
-	margin-right: 2px;
-}
-.screen .page_number_indicator .circle_indicator_white {
-	float: left;
-	margin-right: 2px;
-}
-
-.ingredient.selected {
-	//opacity: 0.8;
-}
-
-.inner_shelf .natural_yoghurt {
-	margin-left: -20px;
-}
-
-.inner_shelf .sour_cream {
-	top: -60px;
-}
-
-.shelf_view_window .watermelon {
-	/*margin-left: 80px;*/
-	top: -60px;
-}
-
-.shelf_view_window .mango {
-	top: -30px;
-}
-
-.shelf_view_window .grapes {
-	top: -45px;
-}
-
-.shelf_view_window .lime {
-	margin-left: 24px;
-}
-.shelf_view_window .coconut {
-	top: -60px;
-	margin-left: 30px;
-}
-
-.shelf_view_window .orange {
-	margin-left: 30px;
-}
-
-
-.shelf_view_window .cucumber {
-	margin-left: 230px;
-	top: -40px;
-}
-
-
-.shelf_view_window .mushroom {
-	margin-left: 10px;
-	top: 0px;
-}
-
-.shelf_view_window .spring_onion {
-	top: -38px;
-	margin-left: 42px;
-}
-.shelf_view_window .sweetcorn {
-	margin-left: 40px;
-	top: 0px;
-}
-.shelf_view_window .red_onion {
-	top: -18px;
-	margin-left: 40px;
-}
-
-.shelf_view_window .green_chilli {
-	margin-left: 5px;
-	top: 20px;
-}
-
-.shelf_view_window .red_chilli {
-	margin-left: 40px;
-	top: 25px;
-}
-
-
-
-.shelf_view_window .avocado {
-	margin-left: 190px;
-	top: -30px;
-}
-
-.shelf_view_window .tomato {
-	margin-left: 20px;
-	top: -25px;
-}
-
-.shelf_view_window .peach {
-	margin-left: 0px;
-	top: -20px;
-}
-
-.shelf_view_window .red_bell_pepper {
-	top: -40px;
-	margin-left: 10px;
-}
-
-.shelf_view_window .green_bell_pepper {
-	margin-left: 25px;
-}
-
-
-.shelf_view_window .lemon {
-	margin-left: 330px;
-}
-.shelf_view_window .banana {
-	margin-left: 150px;
-}
-
-.shelf_view_window .garlic {
-	top: 0px;
-	margin-left: 25px;
-}
-
-.shelf_view_window .white_onion {
-	top: -20px;
-	margin-left: 245px;
-}
-
-.shelf_view_window .malt_vinegar {
-	top: -140px;
-	margin-left: 80px;
-}
-.shelf_view_window .extra_virgin_olive_oil {
-	top: -200px;
-	margin-left: 80px;
-}
-.shelf_view_window .tomato_paste {
-	top: -110px;
-	margin-left: 232px;
-}
-.shelf_view_window .english_mustard {
-	top: -35px;
-	margin-left: 2px;
-}
-
-.shelf_view_window .butter {
-	margin-left: 5px;
-}
-
-.shelf_view_window .tabasco {
-	margin-left: 90px;
-	top: -95px;
-}
-
-.shelf_view_window .wasabi_paste {
-	margin-left: 65px;
-	top: -110px;
-	
-}
-.shelf_view_window .mango_chutney {
-	margin-left: 50px;
-	top: -78px;
-	
-}
-
-.shelf_view_window .pepperdew_sweet_peppers {
-	margin-left: 270px;
-	top: -85px;
-	
-}
-
-.shelf_view_window .enchilada_seasoning {
-	margin-left: 30px;
-	top: -85px;
-}
-
-.shelf_view_window .peach_vinegar {
-	margin-left: 30px;
-	top: -175px;
-}
-
-.shelf_view_window .cooked_tiger_prawns {
-	margin-left: 50px;
-	top: 30px;
-}
-
-.shelf_view_window .streaky_bacon {
-	margin-left: 20px;
-}
-
-.shelf_view_window .runny_honey {
-	margin-left: 215px;
-	top: -110px;
-}
-
-.shelf_view_window .brown_sugar {
-	margin-left: 16px;
-}
-
-.shelf_view_window .black_beans {
-	margin-left: 16px;
-	top: 40px;
-}
-
-.herbs_spices .level_indicator {
-	position: absolute;
-	top: 402px;
-	left: 250px;
-}
-
-.herbs_spices .add.button {
-	position: absolute;
-	top: 458px;
-	left: 340px;
-	z-index: 4;
-}
-
-.herbs_spices .spice_jar .lid {
-	position: relative;
-	top: 15px;
-	left: 2px;
-}
-
-.spice_jar .label {
-	position: absolute;
-	top: 66px;
-	text-align: center;
-	width: 60px;
-	left: 16px;
-	font-size: 13px;
-}
-
-.mini.spice_jar .label {
-	position: absolute;
-	top: 33px;
-	text-align: center;
-	width: 30px;
-	left: 8px;
-	font-size: 7px;
-}
-
-.spice_jar .label .span {
-	
-	/*
-		Though may do other items in size 15 - not coriander.
-	*/
-	
-}
-
-.mini.spice_jar .label .span {
-	
-	/*
-		Though may do other items in size 15 - not coriander.
-	*/
-	
-}
-
-.chopping_board > .rel > .mini {
-	position: absolute;
-}
-
-.chopping_board {
-	z-index: 20000;
-}
-
-.chopping_board .handle {
-	position: absolute;
-	/* background-color: #FF0000; */
-	width: 400px;
-	height: 40px;
-	left: 180px;
-	text-align: center;
-	
-}
-
-.chopping_board .handle span {
-	
-	color: #A35D2E;
-	position: relative;
-	top: 4px;
-}
-
-
-.chopping_board .close.button{
-	position: absolute;
-	left: 12px;
-	top: 430px;
-}
-
-.chopping_board .remove.button{
-	position: absolute;
-	left: 350px;
-	top: 220px;
-	/*height: 76px;
-	width: 76px;
-	background-color: #FF0000;*/
-}
-
-.chopping_board .ingredient {
-	position: absolute;
-}
-
-.mix_a_dip.screen .mini {
-	position: absolute;
-}
-
-.mix_a_dip.screen .mix_icons {
-	position: absolute;
-	top: 180px;
-	left: 340px;
-}
-
-
-.video_area.screen .copy {
-    left: 130px;
-    position: absolute;
-    top: 420px;
-    width: 561px;
-    font-size: 13px;
-	/* background-color: #FF0000; */
-}
-
-
-.video_area.screen .videos {
-	position: absolute;
-	top: 90px;
-	left: 130px;
-}
-
-.recipe_area.screen .recipes {
-	position: absolute;
-	left: 145px;
-	top: 100px;
-	color: #8E4F09;
-	font-size: 10pt;
-	
-}
-
-.recipe_area.screen h1 {
-	margin-left: 0px;
-	width: 440px;
-}
-
-.recipe_area.screen h2 {
-	margin-left: 0px;
-	width: 280px;
-}
-
-.name_your_dip.screen .item {
-	float: left;
-	margin-right: 12px;
-	margin-bottom: 8px;
-}
-
-.recipe_area.screen .vertical.icon_bar.left {
-	position: absolute;
-	left: 60px;
-	top: 76px;
-	height: 600px;
-	width: 19px;
-}
-
-.recipe_area.screen .vertical.icon_bar.right {
-	position: absolute;
-	left: 710px;
-	top: 76px;
-	height: 600px;
-	width: 19px;
-}
-
-.spice_jar .mini.lid {
-    left: 1px;
-    position: relative;
-    top: 10px;
-}
-
-.recipe_area.screen td.left {
-	width: 68px;
-}
-.recipe_area.screen td.right {
-	width: 180px;
-}
-
-.screen.name_your_dip .mix_icon {
-	left: 400px;
-    position: absolute;
-    top: 120px;
-    z-index: 2;
-}
-
-.name_your_dip.screen .vertical.icon_bar {
-    height: 600px;
-    left: 350px;
-    position: absolute;
-    top: 76px;
-    width: 19px;
-}
-
-.screen .small_vertical_mix_icons {
-	margin-top: 8px;
-}
-
-.screen.name_your_dip .name {
-	left: 450px;
-    position: absolute;
-    top: 242px;
-    -webkit-touch-callout: text;
-	-webkit-user-select: text;
-	-khtml-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-	font-size: 15pt;
-	z-index: 3;
-}
-
-.screen.name_your_dip .packet {
-	position: absolute;
-	z-index: 1;
-	top: 90px;
-	left: 584px;
-}
-
-.screen.name_your_dip .large_green_chilli {
-	left:620px;
- 	position:absolute;
-    	top: 300px;
-     	z-index: 2;
-}
-
-.screen.video_area .wood_frame_left {
-	position:absolute;
-	width:16px;
-	height:347px;
-	left:118px;
-	top:74px;
-}
-
-.screen.video_area .wood_frame_top {
-	position:absolute;
-	left:112px;
-	top:80px;
-	width: 594px;
-}
-
-.screen.video_area .wood_frame_bottom {
-	position:absolute;
-	top:400px;
-	left:112px;
-	width: 594px;
-}
-
-.screen.video_area .wood_frame_right {
-	position:absolute;
-	width:16px;
-	height:347px;
-	left:685px;
-	top:74px;
-}
-
-.recipe {
-	-webkit-touch-callout: text;
-	-webkit-user-select: text;
-	-khtml-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-	width: 530px;
-	height: 420px;
-	overflow-y: auto;
-}
-
-.recipe .right_area {
-	/* width: 160px; */
-	float: right;
-	margin-right: 32px;
-}
-
-.recipe .packet {
-	/* position: relative;
-	top: -16px;
-	left: -26px;
-	float:right; */
-	/* position: absolute; */
-	/* float: right; */
-	/* left: 210px; */
-	margin-left: 40px;
-	/* top: 20px; */
-	width: 240px;
-	/* margin-left: 90px; */
-}
-
-.right_area > .social {
-	margin-left: 40px;
-}
-
-.name_your_dip.screen h2 {
-	font-size: 13pt;
-    position: absolute;
-    top: 60px;
-    width: 320px;
-    color: #8E4F09;
-}
-
-.name_your_dip.screen > .social {
-	left: 650px;
-    position: absolute;
-    top: 400px;
-}
-
-.video_area.screen > .social {
-	left: 590px;
-    position: absolute;
-    top: 487px;
-}
-
-.recipe_area.screen > .social {
-	position: absolute;
-	top: 400px;
-	left: 440px;
-	
-}
-
-
-.name_your_dip .ingredients {
-	position: absolute;
-	top: 105px;
-	left: 40px;
-};
-
-.name_your_dip .category {
-	clear: both;
-};
-
-.name_your_dip .ingredients .item {
-	float: left;
-	margin-right: 12px;
-};
-
-.screen.recipe_area {
-	-webkit-touch-callout: text;
-	-webkit-user-select: text;
-	-khtml-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-	color: #FFFFCC;
-};
-
-.screen.recipe_area h2 {
-	font-size: 11pt;
-}
-
-.footer {
-	z-index: 30000;
-}
-
-.footer .text {
-	position: absolute;
-	left: 30px;
-	top: 5px;
-	width: 480px;
-}
-
-.footer .text span {
-	color: #FFFFCC;
-}
-
-.modal {
-	/* opacity: 0; */
-	display: none;
-}
-
-.button.plus .button.minus .button.arrow_left .button.arrow_right {
-    z-index: 45000;
-}
-
-.social {
-	/* width: 240px; */
-	margin-left: -8px;
-	margin-top: 6px;
-}
-
-.social div {
-	float: left;
-	margin-left: 12px;
-}
-
-.screen.video_area .video_frame {
-	position: absolute;
-	left: 90px;
-	top: 100px;
-}
-
-.like-gate {
-	background: url('../img/like_gate.png');
-	width: 810px;
-	height: 650px;
-}
+/*
+ * HTML5 Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+html, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+body { margin: 0; font-size: 1em; line-height: 1.4; }
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+
+button, input { line-height: normal; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled], input[disabled] { cursor: default; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* =============================================================================
+   Chrome Frame Prompt
+   ========================================================================== */
+
+.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== media queries ======================================================
+   EXAMPLE Media Query for Responsive Design.
+   This example overrides the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */
+}
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+
+
+
+/* ==|== custom fonts ======================================================
+   ========================================================================== */
+
+@font-face {
+    font-family: 'DroidSerifRegular';
+    src: url('fonts/DroidSerif-Regular-webfont.eot');
+    src: url('fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/DroidSerif-Regular-webfont.woff') format('woff'),
+         url('fonts/DroidSerif-Regular-webfont.ttf') format('truetype'),
+         url('fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DroidSerifItalic';
+    src: url('fonts/DroidSerif-Italic-webfont.eot');
+    src: url('fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/DroidSerif-Italic-webfont.woff') format('woff'),
+         url('fonts/DroidSerif-Italic-webfont.ttf') format('truetype'),
+         url('fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DroidSerifBold';
+    src: url('fonts/DroidSerif-Bold-webfont.eot');
+    src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/DroidSerif-Bold-webfont.woff') format('woff'),
+         url('fonts/DroidSerif-Bold-webfont.ttf') format('truetype'),
+         url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'DroidSerifBoldItalic';
+    src: url('fonts/DroidSerif-BoldItalic-webfont.eot');
+    src: url('fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
+         url('fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
+         url('fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'NewCenturyBold';
+    src: url('fonts/ncsr75w.eot');
+    src: url('fonts/ncsr75w.eot?#iefix') format('embedded-opentype'),
+         url('fonts/ncsr75w.woff') format('woff'),
+         url('fonts/ncsr75w.ttf') format('truetype'),
+         url('fonts/ncsr75w.svg#DroidSerifRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+.preloaded {
+	position: absolute;
+	left: -3000px;
+	top: 0px;
+}
+
+
+.faded {
+	opacity: 0.6;
+}
+
+.screen {
+	width: 810px;
+	position: relative;
+	margin-bottom: 4px;
+	
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	
+	font-size: 15px;
+	font-family: DroidSerifRegular;
+
+	cursor:default;
+}
+
+.screen .header {
+	position: absolute;
+	/*
+	width: 810px;
+	height: 40px;
+	*/ 
+}
+
+.items_circle {
+	width: 600px;
+	height: 600px;
+	position: relative;
+}
+
+.items_circle .item {
+	width: 120px;
+	height: 120px;
+	background: url('../img/cloud_in_circle_120x120.png');
+	position: absolute;
+}
+
+.large_outer_shelf {
+	position:absolute;
+	background:url( '../img/large_shelf.png') no-repeat;
+	width:813px;
+	height:153px;
+}
+.small_outer_shelf {
+	position:absolute;
+	background:url( '../img/small_shelf.png') no-repeat;
+	width:815px;
+	height:91px;
+}
+
+.inner_shelf {
+	position:relative;
+}
+
+.base_screen .large_outer_shelf {
+	top: 220px;
+}
+
+.special_something_screen .large_outer_shelf {
+	top: 280px;
+}
+
+.spices_screen .large_outer_shelf {
+	top: 260px;
+}
+
+
+.fruit_and_veg_screen .small_outer_shelf.top {
+	top: 200px;
+}
+.fruit_and_veg_screen .small_outer_shelf.bottom {
+	top: 360px;
+}
+
+.extras_screen .large_outer_shelf {
+	top: 360px;
+}
+
+.screen {
+	background-color: #ffffcc;
+	width: 810px;
+	height: 640px;
+	overflow: hidden;
+}
+
+.screen .modal {
+	z-index: 40000;
+	position: absolute;
+	width: 810px;
+	height: 640px;
+}
+
+.screen .modal .dialog {
+	z-index: 50000;
+	position: absolute;
+	left: 150px;
+	top: 150px;
+}
+
+.screen .modal .dialog .small_mix_icon {
+	position: absolute;
+	top: 50px;
+	left: 195px;
+}
+
+.screen .modal .dialog .text {
+	height: 180px;
+    left: 80px;
+    position: absolute;
+    text-align: center;
+    top: 138px;
+    width: 300px;
+}
+
+.screen .modal .dialog .delete.button {
+    left: 384px;
+    position: absolute;
+    top: 38px;
+}
+
+.screen .modal .dialog .back.button {
+    left: 120px;
+    position: absolute;
+    top: 195px;
+}
+.screen .modal .dialog .yes.button {
+    left: 245px;
+    position: absolute;
+    top: 195px;
+}
+
+.screen .blocker {
+	width: 810px;
+	height: 640px;
+	position: absolute;
+	background-color: #000000;
+	opacity: 0.3;
+}
+
+.screen .footer {
+	position: absolute;
+	width: 810px;
+	height: 75px;
+	background-color: #8E4F09;
+	top: 565px;
+	z-index: 10;
+}
+
+.screen .button {
+	position: absolute;
+}
+
+
+
+/*
+.base_screen .sprite {
+	position: absolute;
+}
+*/
+/*
+.base_screen .creme_fraiche {
+	top: -40px;
+	left: 40px;
+}
+
+.base_screen .natural_yoghurt {
+	top: -40px;
+	left: 330px;
+}
+
+.base_screen .sour_cream {
+	top: -60px;
+	left: 570px;
+}
+*/
+
+.base_screen .Chop_board {
+	top: 531px;
+	left: 24px;
+}
+.fruit_and_veg_screen .Chop_board {
+	top: 531px;
+	left: 24px;
+}
+.special_something_screen .Chop_board {
+	top: 531px;
+	left: 24px;
+}
+.extras_screen .Chop_board {
+	top: 531px;
+	left: 24px;
+}
+
+/*
+.sprite.Layer_13 {
+	position: relative;
+	top: -160px;
+}
+*/
+.spices_screen .Chop_board {
+	top: 531px;
+	left: 24px;
+}
+
+.abs {
+	position: absolute;
+}
+
+.rel {
+	position: relative;
+	/*width: 3000px; */
+	
+}
+
+.asb .rel {
+	
+}
+
+/*
+.top .fruit_and_veg .rel {
+	top: -60px;
+}
+
+
+.bottom .fruit_and_veg .rel {
+	top: -25px;
+}
+*/
+
+/*
+
+.sprite.cucumber {
+	position: relative;
+	top: -15px;
+}
+
+.sprite.Sweetcorn {
+	position: relative;
+	top: 25px;
+}
+.sprite.onion {
+	position: relative;
+	top: -15px;
+}
+
+*/
+
+
+.base_screen .sliders{
+position: absolute;
+top:380px;
+left: 150px;
+}
+
+.sliders .salt {
+position: absolute;
+}
+
+.sliders .pepper{
+position: absolute;
+top: 80px;
+}
+
+.sliders .plus{
+position: absolute;
+left: 450px;
+
+}
+
+/*
+.col1 {
+	float: left;
+}
+*/
+
+/*
+.category label {
+	margin-left: 0.8em;
+}
+
+.category table {
+	margin-bottom: 0.8em;
+}
+*/
+
+
+h1 {
+	font-size: 16px;
+	margin-left: 16px;
+}
+
+h2 {
+	font-size: 14px;
+    margin-left: 16px;
+}
+
+.basic_display {
+	font-size: 12px;
+}
+
+.basic_display .col1 {
+	width: 320px;
+	float: left;
+	
+}
+
+.basic_display .col2 {
+	width: 320px;
+	float: left;
+}
+
+.basic_display table.category {
+	width: 320px;
+	margin-bottom: 22px;
+	margin-left: 22px;
+}
+
+.basic_display table label {
+	margin-left: 0.8em;
+}
+
+.logic_display {
+	float: left;
+	width: 320px;
+}
+
+.logic_display .label {
+	margin-top: 0.8em;
+}
+
+.logic_display .bar {
+	width: 300px;
+	height: 32px;
+	margin-bottom: 4px;
+	/* background-color: #ABCDEF; */
+	
+}
+
+.logic_display {
+	font-size: 12px;
+}
+
+
+.inner_shelf .ingredient {
+	float: left;
+	margin-right: 20px;
+}
+
+
+.bases.screen .outer_shelf {
+	top: 200px;
+	position: absolute;
+}
+
+.bases.screen .inner_shelf {
+	padding-left: 70px;
+}
+
+.bases .ingredient {
+	position: relative;
+	top: -45px;
+}
+
+.bases .salt_and_pepper_levels {
+	position: absolute;
+	width: 500px;
+	top: 370px;
+	left:240px;
+}
+
+.bases .salt_and_pepper_levels .spoon {
+	float: right;
+	width: 100px;
+	height: 100px;
+}
+
+.bases .salt_and_pepper_levels .spoon .grey_tilted_spoon {
+	float: left;
+	width: 37px;
+	height: 110px;
+}
+
+.bases .salt_and_pepper_levels .spoon .text {
+	color: #999;
+	margin-top: 45px;
+	white-space: nowrap;
+}
+
+.herbs_spices .spoon {
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	left: 370px;
+}
+
+.herbs_spices .spoon .grey_tilted_spoon {
+	float: left;
+	width: 37px;
+	height: 110px;
+}
+
+.herbs_spices .spoon .text {
+	color: #999;
+	margin-top: 45px;
+	white-space: nowrap;
+}
+
+.fruits_vegetables_grain .pen_drawn_background {
+	position: absolute;
+	left: 300px;
+	top: 80px;
+	text-align: center;
+	/*
+	padding-left: 2px;
+	padding-right: 2px;
+	*/
+}
+
+.mini.spice_jar {
+	height: 124px;
+	width: 42px;
+}
+
+.screen .pen_drawn_background {
+	position: absolute;
+	text-align: center;
+	top: 80px;
+}
+
+.pen_drawn_background span {
+	color: #FFC;
+	padding: 8px;
+	font:size: 14pt;
+	position: relative;
+	top: 25px;
+	/*
+	margin-left: 0.6em;
+	mergin-right: 0.6em;*/
+	width: 140px;
+}
+
+.spice_level_bg {
+	padding: 1px;
+	padding-left: 7px;
+	background-repeat: no-repeat !important;
+	height: 27px !important;
+}
+
+.spice_level_white_left_cap {
+	width: 12px;
+}
+.spice_level_white_bar, .spice_level_brown_bar {
+    height: 26px;
+    /* width: 257px !important; */
+}
+.spice_level_white_right_cap {
+    background-position: -275px -136px !important;
+    height: 25px;
+    width: 14px;
+}
+.spice_level_brown_right_cap {
+    background-position: -261px -136px !important;
+    height: 25px !important;
+    width: 13px !important;
+}
+.spice_level_gr_right_cap {
+    background-position: -275px -109px !important;
+    height: 25px;
+    width: 14px;
+}
+
+.spice_level_red_right_cap {
+    background-position: -261px -109px !important;
+    height: 25px;
+    width: 14px;
+}
+
+.spice_level_yel_right_cap {
+    background-position: -276px -82px !important;
+    height: 25px;
+    width: 14px;
+}
+
+.level_indicator .left_cap {
+	float: left;
+	width: 12px;
+}
+.level_indicator .bar {
+	float: left;
+}
+.level_indicator .right_cap {
+	float: left;
+}
+
+.level_indicator .name {
+	text-align: center;
+	width: 290px;
+	color: #8e4f09;
+	text-transform: capitalize;
+}
+
+.fruits_vegetables_grain .ingredient {
+	position: relative;
+	top: -30px;
+}
+.extras .ingredient {
+	position: relative;
+}
+
+.button {
+	z-index: 1000;
+}
+
+.fruits_vegetables_grain .top.outer_shelf {
+	top: 210px;
+	position: absolute;
+}
+
+.fruits_vegetables_grain .inner_shelf {
+	width: 4000px;
+}
+
+.fruits_vegetables_grain .bottom.outer_shelf {
+	top: 390px;
+	position: absolute;
+}
+
+.fruits_vegetables_grain .move_bottom_shelf_right {
+	left: 750px;
+	top: 415px;
+	z-index: 4;
+}
+
+.fruits_vegetables_grain .move_top_shelf_right {
+	left: 750px;
+	top: 230px;
+	z-index: 4;
+}
+
+.fruits_vegetables_grain .move_bottom_shelf_left {
+	left: 24px;
+    top: 415px;
+    z-index: 4;
+}
+
+.fruits_vegetables_grain .move_top_shelf_left {
+	left: 24px;
+    top: 230px;
+    z-index: 4;
+}
+
+.condiments_toppings .large_shelf {
+	top: 330px;
+	position: absolute;
+}
+
+.condiments_toppings .inner_shelf {
+	width: 4000px;
+}
+
+.condiments_toppings .ingredient {
+	position: relative;
+}
+/*
+.condiments_toppings .ingredient.extra_virgin_olive_oil {
+	top: -160px;
+}
+*/
+
+.condiments_toppings .move_shelf_left {
+	position:absolute;
+	left: 24px;
+    top: 375px;
+    z-index: 4;
+}
+.condiments_toppings .move_shelf_right {
+	position:absolute;
+	left: 750px;
+    top: 375px;
+    z-index: 4;
+}
+
+/*
+.fruits_vegetables_grain .move_bottom_shelf_right {
+	
+}
+*/
+
+.shelf_view_window {
+	margin-left: 70px;
+	width: 640px;
+	/* overflow: hidden; */
+}
+
+.herbs_spices .large_shelf {
+	top: 240px;
+	position: absolute;
+}
+
+.herbs_spices .inner_shelf {
+	width: 4000px;
+}
+
+.herbs_spices .inner_shelf .spice_jar {
+	width: 86px;
+	float: left;
+	margin-right: 25px;
+	position: relative;
+	top: -120px;
+}
+
+.herbs_spices .inner_shelf .spice_jar.open {
+	float: left;
+	margin-right: 25px;
+	position: relative;
+	top: -158px;
+	/* left: -10px; */
+}
+.herbs_spices .red.spice_jar.open .jar_itself{
+	margin-top:1px;
+}
+
+.herbs_spices .move_shelf_left {
+	position:absolute;
+	left: 24px;
+    top: 290px;
+    z-index: 4;
+}
+.herbs_spices .move_shelf_right {
+	position:absolute;
+	left: 750px;
+    top: 290px;
+    z-index: 4;
+}
+
+.extras .inner_shelf {
+	width: 4000px;
+}
+.extras .large_shelf {
+	top: 330px;
+	position: absolute;
+}
+.extras .move_shelf_left {
+	position:absolute;
+	left: 24px;
+    top: 350px;
+    z-index: 4;
+}
+.extras .move_shelf_right {
+	position:absolute;
+	left: 750px;
+    top: 350px;
+    z-index: 4;
+}
+
+.level_indicator {
+	position: relative;
+	
+}
+
+.level_indicator .minus {
+	z-index: 4;
+	position: absolute;
+	left: -64px;
+}
+
+.level_indicator .plus {
+	z-index: 4;
+	position: absolute;
+	left: 320px;
+}
+
+.footer .button {
+	position: absolute;
+}
+
+.footer .back {
+	top: 15px;
+	left: 560px;
+}
+
+.footer .next {
+	top: 15px;
+	left: 680px;
+}
+
+.screen .chopping_board {
+	left: 20px;
+	top: 510px;
+	position: absolute;
+	z-index: 9;
+}
+
+.screen .chopping_board .open_chopping_board.button {
+	position: absolute;
+	left: 30px;
+	top: 4px;
+}
+
+.screen .page_number_indicator {
+	position: absolute;
+	right: 20px;
+	top: 24px;
+}
+
+.screen .page_number_indicator .circle_indicator_brown {
+	float: left;
+	margin-right: 2px;
+}
+.screen .page_number_indicator .circle_indicator_white {
+	float: left;
+	margin-right: 2px;
+}
+
+.ingredient.selected {
+	//opacity: 0.8;
+}
+
+.inner_shelf .natural_yoghurt {
+	margin-left: -20px;
+}
+
+.inner_shelf .sour_cream {
+	top: -60px;
+}
+
+.shelf_view_window .watermelon {
+	/*margin-left: 80px;*/
+	top: -60px;
+}
+
+.shelf_view_window .mango {
+	top: -30px;
+}
+
+.shelf_view_window .grapes {
+	top: -45px;
+}
+
+.shelf_view_window .lime {
+	margin-left: 24px;
+}
+.shelf_view_window .coconut {
+	top: -60px;
+	margin-left: 30px;
+}
+
+.shelf_view_window .orange {
+	margin-left: 30px;
+}
+
+
+.shelf_view_window .cucumber {
+	margin-left: 230px;
+	top: -40px;
+}
+
+
+.shelf_view_window .mushroom {
+	margin-left: 10px;
+	top: 0px;
+}
+
+.shelf_view_window .spring_onion {
+	top: -38px;
+	margin-left: 42px;
+}
+.shelf_view_window .sweetcorn {
+	margin-left: 40px;
+	top: 0px;
+}
+.shelf_view_window .red_onion {
+	top: -18px;
+	margin-left: 40px;
+}
+
+.shelf_view_window .green_chilli {
+	margin-left: 5px;
+	top: 20px;
+}
+
+.shelf_view_window .red_chilli {
+	margin-left: 40px;
+	top: 25px;
+}
+
+
+
+.shelf_view_window .avocado {
+	margin-left: 190px;
+	top: -30px;
+}
+
+.shelf_view_window .tomato {
+	margin-left: 20px;
+	top: -25px;
+}
+
+.shelf_view_window .peach {
+	margin-left: 0px;
+	top: -20px;
+}
+
+.shelf_view_window .red_bell_pepper {
+	top: -40px;
+	margin-left: 10px;
+}
+
+.shelf_view_window .green_bell_pepper {
+	margin-left: 25px;
+}
+
+
+.shelf_view_window .lemon {
+	margin-left: 330px;
+}
+.shelf_view_window .banana {
+	margin-left: 150px;
+}
+
+.shelf_view_window .garlic {
+	top: 0px;
+	margin-left: 25px;
+}
+
+.shelf_view_window .white_onion {
+	top: -20px;
+	margin-left: 245px;
+}
+
+.shelf_view_window .malt_vinegar {
+	top: -140px;
+	margin-left: 80px;
+}
+.shelf_view_window .extra_virgin_olive_oil {
+	top: -200px;
+	margin-left: 80px;
+}
+.shelf_view_window .tomato_paste {
+	top: -110px;
+	margin-left: 232px;
+}
+.shelf_view_window .english_mustard {
+	top: -35px;
+	margin-left: 2px;
+}
+
+.shelf_view_window .butter {
+	margin-left: 5px;
+}
+
+.shelf_view_window .tabasco {
+	margin-left: 90px;
+	top: -95px;
+}
+
+.shelf_view_window .wasabi_paste {
+	margin-left: 65px;
+	top: -110px;
+	
+}
+.shelf_view_window .mango_chutney {
+	margin-left: 50px;
+	top: -78px;
+	
+}
+
+.shelf_view_window .pepperdew_sweet_peppers {
+	margin-left: 270px;
+	top: -85px;
+	
+}
+
+.shelf_view_window .enchilada_seasoning {
+	margin-left: 30px;
+	top: -85px;
+}
+
+.shelf_view_window .peach_vinegar {
+	margin-left: 30px;
+	top: -175px;
+}
+
+.shelf_view_window .cooked_tiger_prawns {
+	margin-left: 50px;
+	top: 30px;
+}
+
+.shelf_view_window .streaky_bacon {
+	margin-left: 20px;
+}
+
+.shelf_view_window .runny_honey {
+	margin-left: 215px;
+	top: -110px;
+}
+
+.shelf_view_window .brown_sugar {
+	margin-left: 16px;
+}
+
+.shelf_view_window .black_beans {
+	margin-left: 16px;
+	top: 40px;
+}
+
+.herbs_spices .level_indicator {
+	position: absolute;
+	top: 402px;
+	left: 250px;
+}
+
+.herbs_spices .add.button {
+	position: absolute;
+	top: 458px;
+	left: 340px;
+	z-index: 4;
+}
+
+.herbs_spices .spice_jar .lid {
+	position: relative;
+	top: 15px;
+	left: 2px;
+}
+
+.spice_jar .label {
+	position: absolute;
+	top: 66px;
+	text-align: center;
+	width: 60px;
+	left: 16px;
+	font-size: 13px;
+}
+
+.mini.spice_jar .label {
+	position: absolute;
+	top: 33px;
+	text-align: center;
+	width: 30px;
+	left: 8px;
+	font-size: 7px;
+}
+
+.spice_jar .label .span {
+	
+	/*
+		Though may do other items in size 15 - not coriander.
+	*/
+	
+}
+
+.mini.spice_jar .label .span {
+	
+	/*
+		Though may do other items in size 15 - not coriander.
+	*/
+	
+}
+
+.chopping_board > .rel > .mini {
+	position: absolute;
+}
+
+.chopping_board {
+	z-index: 20000;
+}
+
+.chopping_board .handle {
+	position: absolute;
+	/* background-color: #FF0000; */
+	width: 400px;
+	height: 40px;
+	left: 180px;
+	text-align: center;
+	
+}
+
+.chopping_board .handle span {
+	
+	color: #A35D2E;
+	position: relative;
+	top: 4px;
+}
+
+
+.chopping_board .close.button{
+	position: absolute;
+	left: 12px;
+	top: 430px;
+}
+
+.chopping_board .remove.button{
+	position: absolute;
+	left: 350px;
+	top: 220px;
+	/*height: 76px;
+	width: 76px;
+	background-color: #FF0000;*/
+}
+
+.chopping_board .ingredient {
+	position: absolute;
+}
+
+.mix_a_dip.screen .mini {
+	position: absolute;
+}
+
+.mix_a_dip.screen .mix_icons {
+	position: absolute;
+	top: 180px;
+	left: 340px;
+}
+
+
+.video_area.screen .copy {
+    left: 130px;
+    position: absolute;
+    top: 420px;
+    width: 561px;
+    font-size: 13px;
+	/* background-color: #FF0000; */
+}
+
+
+.video_area.screen .videos {
+	position: absolute;
+	top: 90px;
+	left: 130px;
+}
+
+.recipe_area.screen .recipes {
+	position: absolute;
+	left: 145px;
+	top: 100px;
+	color: #8E4F09;
+	font-size: 10pt;
+	
+}
+
+.recipe_area.screen h1 {
+	margin-left: 0px;
+	width: 440px;
+}
+
+.recipe_area.screen h2 {
+	margin-left: 0px;
+	width: 280px;
+}
+
+.name_your_dip.screen .item {
+	float: left;
+	margin-right: 12px;
+	margin-bottom: 8px;
+}
+
+.recipe_area.screen .vertical.icon_bar.left {
+	position: absolute;
+	left: 60px;
+	top: 76px;
+	height: 600px;
+	width: 19px;
+}
+
+.recipe_area.screen .vertical.icon_bar.right {
+	position: absolute;
+	left: 710px;
+	top: 76px;
+	height: 600px;
+	width: 19px;
+}
+
+.spice_jar .mini.lid {
+    left: 1px;
+    position: relative;
+    top: 10px;
+}
+
+.recipe_area.screen td.left {
+	width: 68px;
+}
+.recipe_area.screen td.right {
+	width: 180px;
+}
+
+.screen.name_your_dip .mix_icon {
+	left: 400px;
+    position: absolute;
+    top: 120px;
+    z-index: 2;
+}
+
+.name_your_dip.screen .vertical.icon_bar {
+    height: 600px;
+    left: 350px;
+    position: absolute;
+    top: 76px;
+    width: 19px;
+}
+
+.screen .small_vertical_mix_icons {
+	margin-top: 8px;
+}
+
+.screen.name_your_dip .name {
+	left: 450px;
+    position: absolute;
+    top: 242px;
+    -webkit-touch-callout: text;
+	-webkit-user-select: text;
+	-khtml-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+	font-size: 15pt;
+	z-index: 3;
+}
+
+.screen.name_your_dip .packet {
+	position: absolute;
+	z-index: 1;
+	top: 90px;
+	left: 584px;
+}
+
+.screen.name_your_dip .large_green_chilli {
+	left:620px;
+ 	position:absolute;
+    	top: 300px;
+     	z-index: 2;
+}
+
+.screen.video_area .wood_frame_left {
+	position:absolute;
+	width:16px;
+	height:347px;
+	left:118px;
+	top:74px;
+}
+
+.screen.video_area .wood_frame_top {
+	position:absolute;
+	left:112px;
+	top:80px;
+	width: 594px;
+}
+
+.screen.video_area .wood_frame_bottom {
+	position:absolute;
+	top:400px;
+	left:112px;
+	width: 594px;
+}
+
+.screen.video_area .wood_frame_right {
+	position:absolute;
+	width:16px;
+	height:347px;
+	left:685px;
+	top:74px;
+}
+
+.recipe {
+	-webkit-touch-callout: text;
+	-webkit-user-select: text;
+	-khtml-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+	width: 530px;
+	height: 420px;
+	overflow-y: auto;
+}
+
+.recipe .right_area {
+	/* width: 160px; */
+	float: right;
+	margin-right: 32px;
+}
+
+.recipe .packet {
+	/* position: relative;
+	top: -16px;
+	left: -26px;
+	float:right; */
+	/* position: absolute; */
+	/* float: right; */
+	/* left: 210px; */
+	margin-left: 40px;
+	/* top: 20px; */
+	width: 240px;
+	/* margin-left: 90px; */
+}
+
+.right_area > .social {
+	margin-left: 40px;
+}
+
+.name_your_dip.screen h2 {
+	font-size: 13pt;
+    position: absolute;
+    top: 60px;
+    width: 320px;
+    color: #8E4F09;
+}
+
+.name_your_dip.screen > .social {
+	left: 650px;
+    position: absolute;
+    top: 400px;
+}
+
+.video_area.screen > .social {
+	left: 590px;
+    position: absolute;
+    top: 487px;
+}
+
+.recipe_area.screen > .social {
+	position: absolute;
+	top: 400px;
+	left: 440px;
+	
+}
+
+
+.name_your_dip .ingredients {
+	position: absolute;
+	top: 105px;
+	left: 40px;
+};
+
+.name_your_dip .category {
+	clear: both;
+};
+
+.name_your_dip .ingredients .item {
+	float: left;
+	margin-right: 12px;
+};
+
+.screen.recipe_area {
+	-webkit-touch-callout: text;
+	-webkit-user-select: text;
+	-khtml-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+	color: #FFFFCC;
+};
+
+.screen.recipe_area h2 {
+	font-size: 11pt;
+}
+
+.footer {
+	z-index: 30000;
+}
+
+.footer .text {
+	position: absolute;
+	left: 30px;
+	top: 5px;
+	width: 480px;
+}
+
+.footer .text span {
+	color: #FFFFCC;
+}
+
+.modal {
+	/* opacity: 0; */
+	display: none;
+}
+
+.button.plus .button.minus .button.arrow_left .button.arrow_right {
+    z-index: 45000;
+}
+
+.social {
+	/* width: 240px; */
+	margin-left: -8px;
+	margin-top: 6px;
+}
+
+.social div {
+	float: left;
+	margin-left: 12px;
+}
+
+.screen.video_area .video_frame {
+	position: absolute;
+	left: 90px;
+	top: 100px;
+}
+
+.like-gate {
+	background: url('../img/like_gate.png');
+	width: 810px;
+	height: 650px;
+}