diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..88ba6b9
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,715 @@
+/*! normalize.css v1.0.2 | MIT License | git.io/normalize */article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden] {
+  display: none;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+body {
+  margin: 0;
+}
+a:focus {
+  outline: thin dotted;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: .83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: .67em;
+  margin: 2.33em 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: 700;
+}
+blockquote {
+  margin: 1em 40px;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background: #ff0;
+  color: #000000;
+}
+p,
+pre {
+  margin: 1em 0;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace,serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+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: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 0;
+}
+form {
+  margin: 0;
+}
+fieldset {
+  border: 1px solid silver;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+  white-space: normal;
+  *margin-left: -7px;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  margin: 0;
+  vertical-align: baseline;
+  *vertical-align: middle;
+}
+button,
+input {
+  line-height: normal;
+}
+button,
+html input[type=button],
+input[type=reset],
+input[type=submit] {
+  -webkit-appearance: button;
+  cursor: pointer;
+  *overflow: visible;
+}
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type=checkbox],
+input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+  *height: 13px;
+  *width: 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-cancel-button,
+input[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.cf {
+  *zoom: 1;
+}
+.cf:before,
+.cf:after {
+  content: " ";
+  display: table;
+}
+.cf:after {
+  clear: both;
+}
+/*
+
+  GLOBAL CONTAINER
+
+*/
+body {
+  background-color: #fcfcfc;
+}
+#landscape {
+  position: absolute;
+  background-color: #fff;
+  width: 100%;
+  max-width: 1024px;
+  max-height: 768px;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: 5;
+  overflow: hidden;
+  margin: 0px auto;
+  outline: 2px solid #5e8c71;
+  box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
+}
+#portrait {
+  display: none;
+}
+.bgContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.bgTop,
+.bgMiddle,
+.bgBottom {
+  opacity: 1.0;
+  transition: opacity .35s linear;
+  position: absolute;
+  left: 0px;
+  z-index: -5;
+}
+.bgTop {
+  top: 0px;
+}
+.bgMiddle {
+  top: 30%;
+}
+.bgBottom {
+  bottom: 0px;
+}
+.rightpanel img,
+.leftpanel img {
+  cursor: pointer;
+}
+/*
+
+  CENTER PANEL
+
+*/
+.centerpanel {
+  position: absolute;
+  left: 50%;
+  margin-left: -33%;
+  width: 66%;
+  height: 100%;
+  z-index: 5;
+}
+.logopanel {
+  height: 25%;
+}
+.d3dlogo {
+  position: relative;
+  top: 15%;
+  width: 100%;
+  height: 100%;
+  margin: 0px auto;
+  max-width: 399px;
+  height: 139px;
+  background: url('../img/logo/logo_full.png') no-repeat center center;
+  cursor: pointer;
+}
+.drawareacontainer {
+  position: relative;
+  width: 100%;
+  height: 65%;
+  background-color: #fff;
+  border: 4px solid #000;
+  border-radius: 15px;
+  box-sizing: border-box;
+  z-index: 15px;
+}
+/* DEBUG THING */
+#preview_tmp {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 500;
+  border: 1px solid #f80;
+  display: none;
+}
+.bottompanel {
+  position: relative;
+  bottom: 0px;
+  width: 100%;
+  height: 10%;
+}
+/* DOODLE UP/DOWN/LEFT/RIGHT buttons */
+.manipulationBtns {
+  margin: 2px 5px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  max-width: 340px;
+  max-height: 70px;
+  width: 45%;
+}
+.manipulationBtn {
+  width: 45%;
+  height: auto;
+  cursor: pointer;
+}
+#btnsUpDown {
+  float: left;
+  width: 45%;
+}
+#btnsUpDown > div {
+  float: left;
+  padding-right: 8px;
+  background-repeat: no-repeat;
+}
+#btnsTurnLeftRight {
+  float: right;
+  width: 45%;
+}
+#btnsTurnLeftRight > div {
+  float: left;
+  padding-right: 8px;
+  background-repeat: no-repeat;
+}
+#btnMoveUp {
+  max-width: 65px;
+}
+#btnMoveDown {
+  max-width: 64px;
+}
+#btnTwistLeft {
+  max-width: 59px;
+}
+#btnTwistRight {
+  max-width: 64px;
+}
+/*
+	HEIGHT-related RESPONSIVE STUFF
+*/
+@media screen and (max-height: 700px) {
+  .logopanel {
+    height: 22%;
+  }
+  .doodlecontainer {
+    height: 68%;
+  }
+  .d3dlogo {
+    top: 25%;
+    max-width: 399px;
+    height: 74px;
+    background-image: url('../img/logo/logo_small.png');
+  }
+}
+@media screen and (max-height: 655px) {
+  .bgMiddle {
+    opacity: 0;
+  }
+}
+@media screen and (max-height: 525px) {
+  .d3dlogo {
+    max-width: 399px;
+    top: 20%;
+    height: 57px;
+    background-image: url('../img/logo/logo_smaller_wide.png');
+  }
+}
+@media screen and (max-height: 375px) {
+  .d3dlogo {
+    max-width: 399px;
+    height: 40px;
+    background-image: url('../img/logo/logo_smallest_wide.png');
+  }
+}
+/*
+
+  LEFT PANEL
+
+*/
+.leftpanel {
+  position: absolute;
+  width: 17%;
+  /*  background-color: rgba(67, 204, 67, 0.4);*/
+
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+}
+.btnNew {
+  margin: 5% 0% 1% 5%;
+  width: 100%;
+  max-width: 180px;
+  height: auto;
+}
+.btnsPrevNext {
+  margin: 1% 7%;
+  max-width: 160px;
+}
+.btnPrevious {
+  width: 40%;
+  max-width: 56px;
+  height: auto;
+}
+.btnNext {
+  width: 40%;
+  max-width: 56px;
+  height: auto;
+  float: right;
+}
+.btnSave {
+  margin: 5% 5% 1% 5%;
+  width: 90%;
+  max-width: 144px;
+  height: auto;
+}
+.btnOops {
+  margin: 5% 5% 1% 5%;
+  width: 90%;
+  max-width: 144px;
+  height: auto;
+}
+/*
+
+  RIGHT PANEL
+
+*/
+.rightpanel {
+  position: absolute;
+  width: 17%;
+  /*  background-color: rgba(255, 0, 254, 0.4);*/
+
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+.btnPrint {
+  margin: 1% 5% 5% 0%;
+  width: 100%;
+  max-width: 163px;
+  height: auto;
+  float: right;
+}
+.btnStop {
+  margin: 5% 10% 1% 5%;
+  float: right;
+  width: 90%;
+  max-width: 98px;
+  height: auto;
+}
+.btnsSettingsInfo {
+  position: absolute;
+  bottom: 25px;
+  right: 5px;
+  width: 80%;
+  margin: 1% 5%;
+  max-width: 160px;
+}
+.btnInfo {
+  width: 40%;
+  max-width: 53px;
+  height: auto;
+}
+.btnSettings {
+  width: 40%;
+  max-width: 53px;
+  height: auto;
+  float: right;
+}
+/*
+
+  REST
+
+*/
+/* CLEARFIX */
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  /* 1 */
+
+  display: table;
+  /* 2 */
+
+}
+.clearfix:after {
+  clear: both;
+}
+/* For IE 6/7 only*/
+.clearfix {
+  *zoom: 1;
+}
+/*
+
+  REST
+
+*/
+/* CLEARFIX */
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  /* 1 */
+
+  display: table;
+  /* 2 */
+
+}
+.clearfix:after {
+  clear: both;
+}
+/* For IE 6/7 only*/
+.clearfix {
+  *zoom: 1;
+}
+@media only screen and (max-width: 480px), only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {
+  /*
+    TOP LOGO
+  */
+  .centerpanel {
+    left: 0;
+    margin-left: 0;
+    width: 100%;
+    /*  background-color: rgba(0, 135, 255, 0.4);*/
+  
+  }
+  .logopanel {
+    height: 40px;
+  }
+  .d3dlogo {
+    top: 0;
+    max-width: 399px;
+    height: 40px;
+    background-image: url('../img/logo/logo_smallest_wide.png');
+  }
+  .doodlecontainer {
+    /*	position: absolute;*/
+  
+    height: 85%;
+  }
+  /*.bottompanel {
+  	display: none;
+  }*/
+  /*
+    LEFT
+  */
+  .leftpanel {
+    width: 100px;
+    background-color: #fff;
+    z-index: 50;
+    transition: left 0.15s ease-out;
+  }
+  .hideleft {
+    left: -101px;
+  }
+  .shadowright {
+    box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
+  }
+  .btnNew {
+    margin: 5% 5% 1% 5%;
+    width: 90%;
+  }
+  .btnSave {
+    margin-left: 9%;
+    width: 75%;
+  }
+  .btnOops {
+    margin-left: 6%;
+    width: 71%;
+  }
+  /*
+    RIGHT
+  */
+  .rightpanel {
+    width: 100px;
+    background-color: #fff;
+    z-index: 50;
+    transition: right 0.15s ease-out;
+  }
+  .hideright {
+    right: -101px;
+  }
+  .shadowleft {
+    box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);
+  }
+  .btnPrint {
+    margin: 1% 5% 5% 5%;
+    width: 90%;
+  }
+  .btnStop {
+    margin: 5% 6% 1% 5%;
+    width: 70%;
+  }
+  /*
+    REST
+  */
+  .sidebutton {
+    display: block;
+    position: absolute;
+    /*  top: 50%;*/
+  
+    /*  margin-top: -20px;*/
+  
+    top: 0px;
+    /*float:right;*/
+  
+    width: 25px;
+    height: 38px;
+    border: 1px solid #808;
+    background: url('../img/arrows.png') no-repeat;
+    background-color: #eee;
+  }
+  .sidebutton:active {
+    background-color: #aaa;
+  }
+  .leftpanel .sidebutton {
+    right: -27px;
+    background-position: 0px 0px;
+  }
+  .rightpanel .sidebutton {
+    left: -27px;
+    background-position: -25px 0px;
+  }
+  .leftpanel .sidebuttonin {
+    background-color: #ccc;
+    background-position: -25px 0px;
+  }
+  .rightpanel .sidebuttonin {
+    background-color: #ccc;
+    background-position: 0px 0px;
+  }
+  .sidebuttonin:active {
+    background-color: #888;
+  }
+}
+@media only screen and (min-width: 1000px) and (max-device-pixel-ratio: 1.5), only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5) {
+  /*
+  .leftpanel {
+  	background-color: #8F8;
+  }
+  .rightpanel {
+  	background-color: #4Fc;
+  }
+  */
+  /*
+  .leftpanel {
+  	background-color: #0FF;
+  	width: 200px;
+  }
+  
+  .rightpanel {
+  	width: 200px;
+  }
+  */
+}
+@media only screen and (orientation: portrait) {
+  #landscape {
+    display: none;
+  }
+  #portrait {
+    display: block;
+  }
+}
diff --git a/css/styles.min.css b/css/styles.min.css
new file mode 100644
index 0000000..2999772
--- /dev/null
+++ b/css/styles.min.css
@@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}h2{font-size:1.5em;margin:0.83em 0;}h3{font-size:1.17em;margin:1em 0;}h4{font-size:1em;margin:1.33em 0;}h5{font-size:.83em;margin:1.67em 0;}h6{font-size:.67em;margin:2.33em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000000;}p,pre{margin:1em 0;}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new', monospace;font-size:1em;}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:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}dl,menu,ol,ul{margin:1em 0;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}button,input{line-height:normal;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px;}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}.cf{*zoom:1;}.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}body{background-color:#fcfcfc;}#landscape{position:absolute;background-color:#fff;width:100%;max-width:1024px;max-height:768px;top:0px;bottom:0px;left:0px;right:0px;z-index:5;overflow:hidden;margin:0px auto;outline:2px solid #5e8c71;-webkit-box-shadow:0 0 8px rgba(8, 8, 8, 0.25);box-shadow:0 0 8px rgba(8, 8, 8, 0.25);}#portrait{display:none;}.bgContainer{position:absolute;width:100%;height:100%;overflow:hidden;}.bgTop,.bgMiddle,.bgBottom{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;-webkit-transition:opacity .35s linear;-moz-transition:opacity .35s linear;-o-transition:opacity .35s linear;-ms-transition:opacity .35s linear;transition:opacity .35s linear;position:absolute;left:0px;z-index:-5;}.bgTop{top:0px;}.bgMiddle{top:30%;}.bgBottom{bottom:0px;}.rightpanel img,.leftpanel img{cursor:pointer;}.centerpanel{position:absolute;left:50%;margin-left:-33%;width:66%;height:100%;z-index:5;}.logopanel{height:25%;}.d3dlogo{position:relative;top:15%;width:100%;height:100%;margin:0px auto;max-width:399px;height:139px;background:url('../img/logo/logo_full.png') no-repeat center center;cursor:pointer;}.drawareacontainer{position:relative;width:100%;height:65%;background-color:#fff;border:4px solid #000;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:15;}#preview_tmp{position:absolute;top:0px;left:0px;z-index:500;border:1px solid #f80;display:none;}.bottompanel{position:relative;bottom:0px;width:100%;height:10%;}.manipulationBtns{margin:2px 5px;position:absolute;right:0;top:0;max-width:340px;max-height:70px;width:45%;}.manipulationBtn{width:45%;height:auto;cursor:pointer;}#btnsUpDown{float:left;width:45%;}#btnsUpDown > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnsTurnLeftRight{float:right;width:45%;}#btnsTurnLeftRight > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnMoveUp{max-width:65px;}#btnMoveDown{max-width:64px;}#btnTwistLeft{max-width:59px;}#btnTwistRight{max-width:64px;}@media screen and (max-height: 700px){.logopanel{height:22%;}.doodlecontainer{height:68%;}.d3dlogo{top:25%;max-width:399px;height:74px;background-image:url('../img/logo/logo_small.png');}}@media screen and (max-height: 655px){.bgMiddle{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}}@media screen and (max-height: 525px){.d3dlogo{max-width:399px;top:20%;height:57px;background-image:url('../img/logo/logo_smaller_wide.png');}}@media screen and (max-height: 375px){.d3dlogo{max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}}.leftpanel{position:absolute;width:17%;top:0px;left:0px;bottom:0px;}.btnNew{margin:5% 0% 1% 5%;width:100%;max-width:180px;height:auto;}.btnsPrevNext{margin:1% 7%;max-width:160px;}.btnPrevious{width:40%;max-width:56px;height:auto;}.btnNext{width:40%;max-width:56px;height:auto;float:right;}.btnSave{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.btnOops{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.rightpanel{position:absolute;width:17%;top:0px;right:0px;bottom:0px;}.btnPrint{margin:1% 5% 5% 0%;width:100%;max-width:163px;height:auto;float:right;}.btnStop{margin:5% 10% 1% 5%;float:right;width:90%;max-width:98px;height:auto;}.btnsSettingsInfo{position:absolute;bottom:25px;right:5px;width:80%;margin:1% 5%;max-width:160px;}.btnInfo{width:40%;max-width:53px;height:auto;}.btnSettings{width:40%;max-width:53px;height:auto;float:right;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5){.centerpanel{left:0;margin-left:0;width:100%;}.logopanel{height:40px;}.d3dlogo{top:0;max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}.doodlecontainer{height:85%;}.leftpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:left 0.15s ease-out;-moz-transition:left 0.15s ease-out;-o-transition:left 0.15s ease-out;-ms-transition:left 0.15s ease-out;transition:left 0.15s ease-out;}.hideleft{left:-101px;}.shadowright{-webkit-box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);}.btnNew{margin:5% 5% 1% 5%;width:90%;}.btnSave{margin-left:9%;width:75%;}.btnOops{margin-left:6%;width:71%;}.rightpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:right 0.15s ease-out;-moz-transition:right 0.15s ease-out;-o-transition:right 0.15s ease-out;-ms-transition:right 0.15s ease-out;transition:right 0.15s ease-out;}.hideright{right:-101px;}.shadowleft{-webkit-box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);}.btnPrint{margin:1% 5% 5% 5%;width:90%;}.btnStop{margin:5% 6% 1% 5%;width:70%;}.sidebutton{display:block;position:absolute;top:0px;width:25px;height:38px;border:1px solid #808;background:url('../img/arrows.png') no-repeat;background-color:#eee;}.sidebutton:active{background-color:#aaa;}.leftpanel .sidebutton{right:-27px;background-position:0px 0px;}.rightpanel .sidebutton{left:-27px;background-position:-25px 0px;}.leftpanel .sidebuttonin{background-color:#ccc;background-position:-25px 0px;}.rightpanel .sidebuttonin{background-color:#ccc;background-position:0px 0px;}.sidebuttonin:active{background-color:#888;}}@media only screen and (orientation: portrait){#landscape{display:none;}#portrait{display:block;}}
\ No newline at end of file