@media all and (orientation: portrait) {
  /* line 16, ../sass/all.scss */
  body, body > section {
    min-height: 420px;
  }
}
@media all and (orientation: landscape) {
  /* line 20, ../sass/all.scss */
  body, body > section {
    min-height: 350px;
  }
}
@-webkit-keyframes throbs {
  /* line 24, ../sass/all.scss */
  0% {
    -webkit-transform: scale(1);
  }

  /* line 25, ../sass/all.scss */
  50% {
    -webkit-transform: scale(1.1);
  }

  /* line 26, ../sass/all.scss */
  100% {
    -webkit-transform: scale(1);
  }
}
@font-face {
    font-family: 'HelsinkiRegular';
    src: url('/css/helsinki-webfont.eot') format('eot'),
         url('/css/helsinki-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/helsinki-webfont.woff') format('woff'),
         url('/css/helsinki-webfont.ttf') format('truetype'),
         url('/css/helsinki-webfont.svg#HelsinkiRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* line 29, ../sass/all.scss */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* line 37, ../sass/all.scss */
body {
  position: relative;
  height: auto;
  width: 100%;
  color: #333;
  font: 100 0.8em Helsinki, Comic, Arial, Sans;
  overflow-x: hidden;
  background: url("/images/navbar.jpg") repeat-x #fff5e7;
  -webkit-perspective: 800;
  -webkit-text-size-adjust: none;
  -webkit-transform-style: preserve-3d;
  -webkit-user-select: none;
}

body.single {
    background: #fff5e7;
}
body.single #pages {
    width: 330px;
}
body.single li.wallpic {
    margin-top: 0;
}

#pages {
    width: 770px;
    margin: 0 auto;
    position: relative;
}
/* line 50, ../sass/all.scss */
#pages section {
  display: none;
  position: absolute;
  left: 0;
  min-height: 100%;
  width: 100%;
  pointer-events: none;
  -webkit-transition: all 0.2s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate(0%, 100%);
}
/* line 62, ../sass/all.scss */
#pages section.current {
  display: block;
  -webkit-transform: translate(0%, 0%);
  pointer-events: auto;
}
/* line 67, ../sass/all.scss */
body section > header {
  color: #DDD;
  display: block;
  list-style: none;
  color: inherit;
  text-decoration: none;
  padding: 10px;
  height: 63px;
  font-weight: bold;
  background: #181818;
  border-bottom: 1px solid #999999;
  border-top: 1px solid #999999;
}

/* line 162, ../sass/all.scss */
#navbar {
  margin-bottom: 10px;
  height: 50px;
  padding: 0;
  margin: 0 0 0 0;
  position: relative;
  /* ===== logo-link ===== */
}
/* line 169, ../sass/all.scss */
#navbar span.logo {
	background: url("/images/logo.jpg") no-repeat;
	width: 178px;
	height: 122px;
	float: right;
}

#navbar a {
    float: left;
	cursor: pointer;
	padding: 16px;
	font-size: 1.4em;
	font-weight: normal;
	text-decoration: none;
	color: #FFF;
}

li.wallpic {
    position: relative;
    width: 380px;
    list-style: none;
    margin-bottom: 80px;
}

li.wallpic .message {
    display: block;
    position: absolute;
}
li.wallpic .bubble .message {
    margin-left: 0;
}

span.name {
    background: #FFF;
    padding: 4px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 3;
    font-family: Arial, Helvetica, Sans;
    font-size: 0.8em;
    border: 3px solid #333;
    text-align: center;
    display: inline;

    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
}
.wallpic.right span.name,
.wallpic.right span.name input {
    position: absolute;
    right: 30px;
    left: auto;
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}

.userpic {
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
    background: #FFF;
    border: 2px dashed #fff5e7;
    position: relative;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
    padding: 10px 10px 50px 10px;
    height: auto;
}
.wallpic.right .userpic {
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
#message .userpic {
    padding: 10px;
    background: #FFF;
    border: 2px dashed #fff5e7;
    position: relative;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
#message span.name {
    z-index: 16;
}
.bubble.regular .message {
    background: url("/images/bubble_regular.png") no-repeat;
    width: 330px;
    height: 134px;
    padding: 18px 20px;
    overflow: hidden;
    margin-left: 15px;
}
ul.leftCol,
ul.rightCol {
    float: left;
    width: 380px;
}
.rightCol {
    padding-top: 130px;
}
ul.leftCol {
    padding-top: 30px;
}

/* bubble & pointers */
.bubble {
    width: 335px;
    height: 130px;
    margin: 10px auto;
    position: relative;
}
.bubble .message {
    font-family: Helsinki, Comic, Arial, Sans;
    font-size: 20px;
    text-align: center;
    resize: none;
}

.messagePic .comments {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 12px;
    box-shadow: 4px 4px 4px #000000;
    position: absolute;
    bottom: 15px;
    left: 10px;
    z-index: 5;
    border: 3px solid #000000;
    width: 310px;
    height: 310px;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
}

.messagePic .comments .fb_iframe_widget {
    display: inline-block;
    position: relative;
    border: 3px solid #fff;
    border-radius: 7px;
}

.rightCol .messagePic .comments {
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}

.messagePic .close {
    background: url("/images/close.png") no-repeat scroll 0 0 transparent;
    bottom: 304px;
    cursor: pointer;
    height: 22px;
    position: absolute;
    right: 2px;
    width: 22px;
    z-index: 13;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
    display: none;
}
.rightCol .messagePic .close {
    right: 15px;
    bottom: 314px;
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.messagePic .amount_comments {
    font-size: 15px;
    padding: 2px;
    position: absolute;
    left: 103px;
    bottom: 7px;
    cursor: pointer;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
}
.rightCol .messagePic .amount_comments {
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
#mouseclick {
    display: none;
    position: absolute;
    z-index: 2;
    width: 64px;
    height: 64px;
    background: url("/images/mouseclick.png") no-repeat transparent;
}
#pointer,
.pointer {
    position: absolute;
    z-index: 4;
    width: 40px;
}
.row0_col1 {
    top: 130px;
    left: 70px;
    background: url("/images/pointer_0_1.png") no-repeat transparent;
    height: 52px;
}
.row0_col2 {
    position: relative;
    top: 130px;
    left: 160px;
    background: url("/images/pointer_0_2.png") no-repeat transparent;
    height: 115px;
}
.row0_col3 {
    top: 130px;
    left: 250px;
    background: url("/images/pointer_0_3.png") no-repeat transparent;
    height: 52px;
}
.row1_col1 {
    top: 130px;
    left: 70px;
    background: url("/images/pointer_1_1.png") no-repeat transparent;
    height: 115px;
}
.row1_col2 {
    position: relative;
    top: 130px;
    left: 160px;
    background: url("/images/pointer_1_1.png") no-repeat transparent;
    height: 115px;
}
.row1_col3 {
    top: 130px;
    left: 250px;
    background: url("/images/pointer_1_1.png") no-repeat transparent;
    height: 115px;
}
.row2_col1 {
    top: 130px;
    left: 40px;
    background: url("/images/pointer_2_1.png") no-repeat transparent;
    height: 235px;
}
.row2_col2 {
    top: 130px;
    left: 160px;
    background: url("/images/pointer_2_2.png") no-repeat transparent;
    height: 235px;
}
.row2_col3 {
    top: 130px;
    left: 250px;
    background: url("/images/pointer_2_3.png") no-repeat transparent;
    height: 235px;
}
.row3_col1 {
    top: 130px;
    left: 50px;
    background: url("/images/pointer_3_1.png") no-repeat transparent;
    height: 370px;
}
.row3_col2 {
    top: 130px;
    left: 160px;
    background: url("/images/pointer_3_3.png") no-repeat transparent;
    height: 370px;
}
.row3_col3 {
    top: 130px;
    left: 250px;
    background: url("/images/pointer_3_3.png") no-repeat transparent;
    height: 370px;
}


.messagePic {
    position: relative;
    width: 335px;
    cursor: pointer;
    left: 20px;
}

.message ul {
    position: relative;
    top: -90px;
    z-index: 1;
}
.messagePic .like {
    position: absolute;
    z-index: 2;
    bottom: 15px;
    left: 8px;
    background: url("/images/like.png") no-repeat transparent;
    width: 33px;
    height: 28px;
    -moz-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    transform:rotate(2deg);
}
.rightCol .messagePic .like {
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
    left: 24px;
    bottom: 3px;
}


form.message {
    margin: 10px auto;
    width: 380px;
    text-align: center;
}

.file_browse_wrapper {
    display: block;
    padding: 5px;
    text-align: center;
    margin: 5px 13px;
    border: 1px solid #666;
    border-radius: 6px;
    background: url("/images/navbar.jpg") repeat-x #bc6a00;
    overflow: hidden;
    box-shadow: 4px 4px 4px rgba(0,0,0,20);
}
.file_browse_wrapper span {
    cursor: pointer;
    color: #FFF;
    font-family: Helsinki, Comic, Arial, Sans;
    font-size: 18px;
}
.file_browse_wrapper:hover {
    background: url("/images/navbar.jpg") repeat-x;
}
.file_browse_wrapper:active {
    background: url("/images/navbar.jpg") repeat-x;
}
.myfile{
      cursor: pointer;
    height: 30px;
    margin-left: -225px;
    opacity: 0;
    position: absolute;
    top: 17px;
    width: 260px;
    z-index: 2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.submitButton {
    display: none;
    width: 290px;
    padding: 10px 5px;
    text-align: center;
    border: 1px solid #666;
    border-radius: 6px;
    background: url("/images/navbar.jpg") repeat-x #bc6a00;
    box-shadow: 4px 4px 4px rgba(0,0,0,20);
    color: #FFF;
    font-family: Helsinki, Comic, Arial, Sans;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 40px;
}
.tooltip_bubble {
    display: none;
    background: url("/images/arrow.png") no-repeat scroll right bottom transparent;
    font-size: 9px;
    left: 120px;
    padding-bottom: 24px;
    position: absolute;
    top: 11px;
    z-index: 3;
}
.tooltip_name {
    display: none;
    background: url("/images/arrow.png") no-repeat scroll right bottom transparent;
    font-size: 9px;
    left: -119px;
    padding-bottom: 24px;
    position: absolute;
    top: 17px;
    z-index: 3;
}
.tooltip_userpic {
    display: none;
    background: url("/images/arrow.png") no-repeat scroll right bottom transparent;
    font-size: 9px;
    left: -114px;
    padding-bottom: 24px;
    position: absolute;
    top: 120px;
    z-index: 3;
}
#mouseOverArea {
    -moz-transform: rotate(2deg);
    cursor: pointer;
    height: 90%;
    padding: 10px;
    position: absolute;
    top: 25px;
    width: 340px;
    z-index: 15;
}



/* ===== helper ===== */
/* line 334, ../sass/all.scss */
br.clear {
  height: 1px;
  display: block;
  clear: both;
}

/* ===== loading wheel ===== */
/* line 340, ../sass/all.scss */
.loading {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 50px;
}

/* ===== 404 ===== */
/* line 348, ../sass/all.scss */
#not_found {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #dddddd;
  padding-top: 5%;
}





/* upload */
#container {
	margin: auto;
	width: 300px;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000033;
	border-right-color: #000033;
	border-bottom-color: #000033;
	border-left-color: #000033;
	background-color: #FFFFFF;
	border-bottom-left-radius: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-bottom-right-radius: 12px;
	-moz-border-radius-bottomright: 12px;
}
#container #header #header_left {
	float: left;
	background-image: url(/images/header_left.gif);
	background-repeat: no-repeat;
	height: 42px;
	width: 45px;
}
#container #header #header_right {
	background-image: url(/images/header_right.gif);
	background-repeat: no-repeat;
	height: 42px;
	width: 6px;
	float: right;
}

#container #content {
	padding: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #666666;
}
#container #footer {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	text-align: right;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-top-color: #999999;
	border-right-color: #000033;
	border-bottom-color: #000033;
	border-left-color: #000033;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
}
#container #footer a {
	color: #999999;
	text-decoration: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#container #header #header_main {
	float: left;
	padding: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.sbtn    {
	background-image: url(/images/button.gif);
	border: 1px solid #000033;
	height: 22px;
	width: 82px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	background-position: center;
	padding: 0px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
}
button {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	height: 22px;
	width: 82px;
	background-image: url(/images/button.gif);
}
#container #content #form1 legend {
	padding: 5px;
	margin: auto;
}
form {
	margin: 10px 5px 0px 5px;
}




#container #header {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-image: url(/images/header_bg.gif);
	background-repeat: repeat-x;
	height: 42px;
}
label {
	padding: 0px;
	text-align: center;
}

.msg {
	text-align:left;
 	color:#666;
	background-repeat: no-repeat;
 	margin-left:30px;
   margin-right:30px;
	padding:5px;
   padding-left:30px;
}

.emsg {
	text-align:left;
	margin-left:30px;
   margin-right:30px;
	color:#666;
	background-repeat: no-repeat;
	padding:5px;
   padding-left:30px;
}

#loader{
   visibility:hidden;
}

#error{
   font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
   font-weight:bold;
   color:#FF0000;
}

#ok{
   font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
   font-weight:bold;
   color:#00FF00;

}

#upload_process{
   z-index:100;
   display:none;
   text-align:center;
   width:290px;
}

#featuredImage {
    display: none;
}

#debug {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    background: #00FF00;
    font-size: 10px;
    padding: 10px;
}