summaryrefslogtreecommitdiff
path: root/assets/stylesheets/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/stylesheets/app.css')
-rwxr-xr-xassets/stylesheets/app.css1415
1 files changed, 1415 insertions, 0 deletions
diff --git a/assets/stylesheets/app.css b/assets/stylesheets/app.css
new file mode 100755
index 0000000..aa9db84
--- /dev/null
+++ b/assets/stylesheets/app.css
@@ -0,0 +1,1415 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
+
+*{
+ margin:0;
+ padding:0;
+ outline:0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ font-family: 'Lato', sans-serif;
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+*, *:before, *:after {
+ moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+body{
+ overflow-x:hidden;
+}
+
+body.noOverflow{
+ overflow:hidden;
+}
+
+body.loading * {
+ -webkit-transition: all 0 ease 0 !important;
+ -moz-transition: all 0 ease 0 !important;
+ transition: all 0 ease 0 !important;
+}
+
+body.pastePaper .mx-scene{
+ cursor:url(../img/paintbucket.png), auto;
+}
+
+body.pastePaper .wallpaper.active span:hover{
+ cursor:url(../img/paintbucket.png), auto;
+}
+
+a{
+ color:black;
+}
+
+/*page*/
+
+.topLogo {
+ width:300px;
+ margin-top:20px;
+}
+
+.floatingImg {
+ width: 100%;
+ cursor: -webkit-grabbing; cursor: -moz-grabbing;
+}
+
+.floatimgImg.edit {
+
+}
+
+.ants {
+width:320px;
+height:auto;
+padding:15px;
+background:white;
+position:absolute;
+margin:0 auto;
+overflow:hidden;
+display: none;
+}
+
+.ants.edit {
+ display: block;
+}
+
+.ants:before {
+ content:"";
+ width:100%;
+ border-bottom:1px dashed #000;
+ position:absolute;
+ top:0px;
+ left:0px;
+ background:#fff;
+ -webkit-animation:borderanimation 10s infinite;
+ -moz-animation:borderanimation 10s infinite;
+ -ms-animation:borderanimation 10s infinite;
+ -o-animation:borderanimation 10s infinite;
+ animation:borderanimation 10s infinite;
+ z-index:99;
+}
+
+.ants:after
+{
+ content:"";
+ width:100%;
+ border-bottom:1px dashed #000;
+ position:absolute;
+ bottom:0px;
+ left:0px;
+ background:#fff;
+ -webkit-animation:borderanimation 10s infinite;
+ -moz-animation:borderanimation 10s infinite;
+ -ms-animation:borderanimation 10s infinite;
+ -o-animation:borderanimation 10s infinite;
+ animation:borderanimation 10s infinite;
+}
+
+.leftborder
+{
+ height:auto;
+ width:100%;
+ position:absolute;
+ top:-3px;
+ left:-1px;
+ background:#fff;
+}
+
+.leftborder:before
+{
+ content:"";
+ height:250px;
+ border-left:1px dashed #000;
+ position:absolute;
+ top:0px;
+ left:1px;
+ background:#fff;
+ -webkit-animation:borderanimationleftright 10s infinite;
+ -moz-animation:borderanimationleftright 10s infinite;
+ -ms-animation:borderanimationleftright 10s infinite;
+ -o-animation:borderanimationleftright 10s infinite;
+ animation:borderanimationleftright 10s infinite;
+}
+
+.leftborder:after
+{
+ content:"";
+ height:250px;
+ border-left:1px dashed #000;
+ position:absolute;
+ top:0px;
+ left:100%;
+ background:#fff;
+ -webkit-animation:borderanimationleftright 10s infinite;
+ -moz-animation:borderanimationleftright 10s infinite;
+ -ms-animation:borderanimationleftright 10s infinite;
+ -o-animation:borderanimationleftright 10s infinite;
+ animation:borderanimationleftright 10s infinite;
+}
+
+h5{
+ font-weight: 300;
+ font-style: italic;
+ margin: 20px 0 0px 0;
+ font-size: 14px;
+}
+
+.page{
+ text-align:center;
+}
+
+.page .profile {
+ color:white;
+}
+.page table{
+ width:100%;
+ height:400px;
+ border-top:1px solid;
+ margin:40px 0 0 0;
+ border-spacing: 0;
+ clear:both;
+}
+.page table.showcase {
+ height:70vh;
+}
+.page table td.border{
+ border-right:1px solid;
+}
+.page table td{
+ width: 33.3333%;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-bottom:1px solid black;
+}
+
+.page table.showcase td{
+ height: 70vh;
+ background-size: cover;
+}
+
+.viewMore {
+ color: #017cfe;
+ text-decoration: none;
+ font-weight: 300;
+ font-size: 22px;
+ padding-top: 20px;
+ display: block;
+ border-bottom: 1px solid black;
+ padding-bottom: 19px;
+}
+
+.viewMore:hover {
+ text-decoration:underline;
+}
+
+.page .roomName {
+ font-weight: 300;
+ font-size: 20px;
+ letter-spacing: 1px;
+ color: black;
+ background: white;
+ border: 1px solid;
+ padding: 5px;
+ box-shadow: -3px 3px black;
+ text-decoration:none;
+ max-width: 180px;
+ display: inline-block;
+}
+
+.page .roomName:hover {
+ background:black;
+ color:white;
+}
+
+.room1 {
+ position: relative;
+ overflow: hidden;
+ background-image:url(https://s3.amazonaws.com/luckyplop/7eb159e99924e6e371046d6fa12e566fd77901c9.jpg);
+}
+.room2 {
+ background-image:url(https://s3.amazonaws.com/luckyplop/fd4ebe8a7a4246c8273fc999fb1ef0d6a8260b8c.png);
+}
+
+.room1 .editBtn {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+}
+
+.room1 form textarea {
+ width: 226px;
+}
+
+.room1 .radio-group {
+ width: 226px;
+}
+
+.room1 .radio-group__label {
+ width: 106px;
+ font-size: 13px;
+}
+
+.room1 .formHolder {
+ top: 0;
+ padding-top: 10px;
+ display: table;
+ width: 100%;
+ height: 100%;
+ background: rgba(255,255,255,0.9);
+ -webkit-transform:translateY(-100%);
+ -moz-transform:translateY(-100%);
+}
+
+.room1 form {
+ padding: 0 10px;
+ max-width: 440px;
+}
+
+.room1 .formInner {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.room1.editing .formHolder {
+ -webkit-transform:translateY(0);
+ -moz-transform:translateY(0);
+}
+
+.page .questions {
+ background: #55efcb;
+ color:white;
+ padding:80px;
+}
+.subButtons a {
+ margin: 9px 0;
+ border: 0;
+ background: transparent;
+ font-size: 15px;
+ font-weight: 300;
+ width: 33.33333333333%;
+ display: inline-block;
+ float: left;
+ text-decoration:none;
+}
+.subButtons a:hover {
+ text-decoration:underline;
+}
+.subButtons a:nth-child(3){
+ color:#FF3A2D;
+ float: right;
+}
+.page .questions span{
+ font-weight:300;
+ line-height:30px;
+ font-size:16px;
+ margin:20px 0 40px 0;
+ display:inline-block;
+}
+
+.page h2 {
+ font-weight: 100;
+ font-size: 40px;
+}
+
+.page h1 {
+ font-size: 80px;
+ font-weight: 100;
+ padding-top: 25px;
+}
+
+.footer {
+ width: 100%;
+ margin: 80px 0;
+}
+
+.footer a, .footer span{
+ margin: 15px;
+ font-weight: 300;
+ font-size: 13px;
+}
+
+
+/* PROFILE PAGE */
+.profilepage .profilePic {
+ font-size: 148px;
+ background: url(http://www.clevelandfoundation.org/wp-content/uploads/2012/10/ivan-discussing-his-eye-surgery.jpg);
+ background-size: cover;
+ background-position: center;
+}
+.editProfile {
+ padding: 8px;
+ float: right;
+ margin-right: 10px;
+ font-size: 38px;
+ color: black;
+ font-weight: 100;
+ text-decoration: none
+}
+
+.editProfile span {
+ vertical-align: middle;
+}
+.topLink {
+ padding: 8px;
+ float: right;
+ margin: 14px;
+ font-size: 18px;
+ color: black;
+ font-weight: 300;
+ text-decoration: none;
+ border-bottom:1px solid white;
+}
+.topLink:hover {
+ border-bottom:1px solid lightgreen;
+}
+.profilepage .bio {
+ text-align: left;
+ padding: 0 5%;
+ width: 66.5%;
+ background-image:url(../img/pattern.png);
+ background-size:100%;
+ background-color: lightyellow;
+ box-shadow: -4px 6px 7px rgba(0,0,0,0.1) inset;
+}
+
+.profilepage .bio.one {
+ background-color: lightyellow;
+}
+.profilepage .bio.two {
+ background-color: #FFCC00;
+}
+.profilepage .bio.three {
+ background-color: #4CD964;
+}
+.profilepage .bio.four {
+ background-color: #D1EEFC;
+}
+.profilepage .bio.five {
+ background-color: #C7C7CC;
+}
+.profilepage .bio.six {
+ background-color: #55EFCB;
+}
+.profilepage .bio.seven {
+ background-color: #FFD3E0;
+}
+.profilepage .bio.eight {
+ background-color: #F7F7F7;
+}
+.profilepage .bio.nine {
+ background-color: #D6CEC3;
+}
+.profilepage .bio.ten {
+ background-color: #1AD6FD;
+}
+.profilepage .bio.eleven {
+ background-color: #b5bfe4;
+}
+.profilepage .bio.twelve {
+ background-color: #85c98f;
+}
+.profilepage .bio.thirteen {
+ background-color: #c2cab1;
+}
+
+
+.profilepage .bio h2 {
+ text-align: left;
+ font-weight: 100;
+ font-size: 70px;
+}
+.profilepage .bio span {
+ font-size: 16px;
+ font-weight: 300;
+}
+
+.templates {
+ padding-top: 7vh;
+}
+
+.templates span{
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-image: url(http://upload.wikimedia.org/wikipedia/commons/d/d9/Graceland_Memphis_TN_Floorplan_Basement.jpg);
+ width: 20vw;
+ height: 20vh;
+ display: inline-block;
+ margin: 4vw;
+ border:1px solid white;
+}
+
+.templates span:hover {
+ border:1px dashed black;
+ cursor:pointer;
+}
+
+.templates h1 {
+ font-weight: 300;
+ font-size: 21px;
+ margin: 0;
+}
+
+.templates span.active {
+ border:1px solid #017cfe;
+}
+
+.clear:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+.clear{
+ display: inline-block;
+ width:100%;
+}
+.left {
+ float:left;
+}
+.right {
+ float:right;
+}
+.mx-scene {
+ position:fixed;
+ top:0;
+ left:0;
+ cursor: -webkit-grab; cursor: -moz-grab;
+}
+.mx-scene:active{
+ cursor: -webkit-grabbing; cursor: -moz-grabbing;
+}
+
+.rapper {
+ position:relative;
+}
+.logo {
+ float:left;
+ padding:10px;
+ z-index:3;
+ position:relative;
+}
+.logo:hover {
+ -webkit-filter:invert(30%);
+}
+.profile{
+ padding:8px;
+ float:right;
+ margin-right: 10px;
+ font-size:41px;
+ color: black;
+}
+
+.profile:hover {
+ background:black;
+ color:white;
+ cursor:pointer;
+}
+.vvbox {
+ border: 1px solid;
+ position: fixed;
+ display: inline-block;
+ background: white;
+ box-shadow: -3px 3px;
+}
+
+.edit-video.menu,
+.edit-image.menu {
+ right: auto;
+ top: auto;
+ z-index: 3;
+ display: none;
+}
+
+.menu {
+ right: 10px;
+ top: 70px;
+ z-index:3;
+}
+
+
+.menu span{
+ display: inline-block;
+ text-align: center;
+ padding: 15px;
+ font-size: 17px;
+ float: left;
+ clear: both;
+ width: 55px;
+}
+
+.menu span:hover{
+ color:white;
+ background:black;
+ cursor:pointer;
+}
+
+.menu span.toggled {
+ color:white;
+ background:black;
+ cursor:pointer;
+}
+
+.menu span.icon-close{
+ color:white;
+ background:black;
+ cursor:pointer;
+}
+
+.icon-close:before {
+content: "\e736"!important;
+}
+
+.menu span:hover:after{
+ content: attr(data-info);
+ position: absolute;
+ color: black;
+ background: rgba(255,255,255,0.9);
+ margin-left: -180px;
+ display: inline-block;
+ width: 90px;
+ text-align: right;
+ padding: 17px 13px;
+ margin-top: -16px;
+ font-size: 13px;
+}
+
+.menu span.icon-close:hover:after{
+ content:"";
+ opacity:0;
+}
+.menu span.icon-map.hidden:hover:after{
+ content:"show map";
+}
+.fixed {
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ z-index:2;
+ overflow-y:scroll;
+}
+
+.fixed::-webkit-scrollbar
+{
+ width: 3px;
+}
+
+.fixed::-webkit-scrollbar-track
+{
+ background:white;
+}
+
+.fixed::-webkit-scrollbar-thumb
+{
+ background: black;
+}
+
+.fixed::-moz-scrollbar
+{
+ width: 3px;
+}
+
+.fixed::-moz-scrollbar-track
+{
+ background:white;
+}
+
+.fixed::-moz-scrollbar-thumb
+{
+ background: black;
+}
+.animate {
+ -webkit-transition:all 0.2s ease-in-out;
+ -moz-transition:all 0.2s ease-in-out;
+ transform:translateY(-100%);
+}
+.mediaDrawer {
+ -webkit-transform:translateY(-100%);
+ -moz-transform:translateY(-100%);
+ transform:translateY(-100%);
+ background:rgba(255,255,255,0.9);
+ text-align:center;
+ overflow-x: hidden;
+}
+.mediaDrawer.active {
+ -webkit-transform:translateY(0%);
+ -moz-transform:translateY(0%);
+ transform:translateY(0%);
+}
+.mediaDrawer.signin, .mediaDrawer.signup{
+ display:table;
+}
+.image.active {
+ background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important;
+ cursor:move;
+}
+.deleteActive .image {
+ cursor:pointer;
+}
+.deleteActive .image:after {
+ content: "\e68f";
+ font-family: 'ionicons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size:150px;
+ color:#FF3B30;
+}
+.image.editText:after {
+ content: "hey";
+ position: absolute;
+ width:calc(100% - 100px) ;
+ background: white;
+ padding: 30px;
+ border: 3px solid #000;
+ margin-left:20px;
+ box-shadow: 9px 9px 2px #999 inset;
+ font-size: 30px;
+ margin-top: 600px;
+ cursor:text;
+}
+
+.fileUpload{
+ position: fixed;
+ width: 400px;
+ text-align: center;
+ font-size: 16px;
+ top: 30%;
+ left: 50%;
+ padding: 26px 20px;
+ margin-left: -200px;
+ background: white;
+ z-index: 4;
+ -webkit-transform: translateY(-1000%);
+ -webkit-transition: -webkit-transform 0.6s ease-in-out;
+ -moz-transform: translateY(-1000%);
+ -moz-transition: -webkit-transform 0.6s ease-in-out;
+ transform: translateY(-1000%);
+ transition: -webkit-transform 0.6s ease-in-out;
+ border: 1px solid;
+ box-shadow: -3px 3px black;
+}
+
+.fileUpload.active {
+ -webkit-transform:translateY(0%);
+ -moz-transform:translateY(0%);
+ transform:translateY(0%);
+}
+
+.fileUpload .icon-ios7-upload-outline{
+ font-size:40px;
+}
+.fileUpload input[type="text"]{
+ border: 1px solid #ccc;
+ font-size: 15px;
+ padding: 5px;
+ width: 220px;
+ text-align: center;
+ border-radius: 20px;
+}
+
+.fileUpload input[type="text"]:focus{
+ border: 1px solid #000;
+}
+
+.fileUpload input[type="file"]{
+ position: absolute;
+ margin-left: -134px;
+ background: blue;
+ height: 50px;
+ margin-top: -35px;
+ opacity: 0;
+ cursor:pointer;
+}
+.fileUpload small{
+ margin: 5px 0;
+ display:inline-block;
+ width:100%;
+ font-weight:bold;
+}
+.myMedia {
+ -webkit-transition: opacity 0.3s ease-in-out;
+ -moz-transition: opacity 0.3s ease-in-out;
+ transition: opacity 0.3s ease-in-out;
+}
+.myMedia.inactive {
+ opacity:0;
+}
+
+.foundMedia {
+ position:absolute;
+ top:0;
+ left:0;
+ -webkit-transform: translateX(100%);
+ -webkit-transition: -webkit-transform 0.3s ease-in-out;
+ -moz-transform: translateX(100%);
+ -moz-transition: -webkit-transform 0.3s ease-in-out;
+ transform: translateX(100%);
+ transition: -webkit-transform 0.3s ease-in-out;
+ padding-top:40px;
+}
+
+.foundMedia.active {
+ -webkit-transform:translateX(0%);
+ -moz-transform:translateX(0%);
+ transform:translateX(0%);
+}
+
+.mediaDrawer h2{
+ font-size: 18px;
+ display: inline-block;
+ margin-top: 20px;
+ position:relative;
+ z-index:4;
+}
+
+.mediaDrawer h3{
+ margin-top: 28px;
+ position: relative;
+ z-index: 4;
+}
+
+.editBtn{
+ color: #FF3B30;
+ padding: 3px;
+ font-size: 12px;
+ display: inline-block;
+ cursor:pointer;
+ font-weight:600;
+ text-decoration:none;
+}
+
+.editBtn:hover {
+ background:lightgreen;
+}
+
+.deleteArmed .mediaDrawer h3 {
+ background:#FF3B30;
+ color:white;
+}
+
+.deleteArmed .mediaContainer {
+
+}
+
+.deleteArmed .mediaContainer:hover {
+ background:#FF3B30;
+ border:1px solid #FF3B30;
+}
+
+
+.deleteArmed .mediaContainer:before {
+ content: "\e68f";
+ font-family: 'ionicons';
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ font-size: 60px;
+ margin-top: -62px;
+ position: absolute;
+ background: #FF3B30;
+ border-radius: 1000px;
+ margin-left: -59px;
+ color: white;
+}
+
+.deleteArmed .mediaContainer.deleted {
+ background:#FF3B30;
+}
+.mediaDrawer h2 a{
+ color: #555;
+ text-decoration:none;
+ padding:5px;
+ border:3px solid white;
+}
+
+.mediaDrawer h2 a.active{
+ cursor:default;
+ border:3px solid black;
+ color:black;
+}
+
+.mediaDrawer h2 a:hover {
+ border:3px solid #ccc;
+}
+
+.mediaDrawer h2 a.active{
+ border:3px solid black;
+}
+
+
+.mediaContainer {
+ border: 1px solid white;
+ display: inline-block;
+ width: 25%;
+ margin: 4%;
+ vertical-align: top;
+ border:1px solid white;
+ padding:2%;
+}
+.mediaContainer:hover {
+ border:1px dashed black;
+ cursor:pointer;
+}
+.mediaContainer img{
+ max-width:100%;
+}
+#minimap {
+ position: fixed;
+ bottom: 20px;
+ left: 20px;
+ color: black;
+ cursor:pointer;
+ background:black;
+ -webkit-transform: translateY(0px);
+ -moz-transform: translateY(0px);
+ transform: translateY(0px);
+}
+#minimap.hide{
+ -webkit-transform: translateY(155px);
+ -moz-transform: translateY(155px);
+ transform: translateY(155px);
+}
+#minimap.hide canvas{
+ opacity:0;
+}
+#minimap canvas {
+ display: block;
+ width:130px;
+ opacity:1;
+ -webkit-transition:opacity 0.3s ease-in-out;
+ -moz-transition:opacity 0.3s ease-in-out;
+ transition:opacity 0.3s ease-in-out;
+}
+.wallpaper{
+ right: 80px;
+ margin-top: 77px;
+ width: 162px;
+ z-index: 1;
+ -webkit-transition: -webkit-transform 0.1s ease-in-out;
+ -webkit-transform: translateX(400px);
+ -moz-transition: -webkit-transform 0.1s ease-in-out;
+ -moz-transform: translateX(400px);
+ transition: -webkit-transform 0.1s ease-in-out;
+ transform: translateX(400px);
+}
+.wallpaper.active {
+ display:inline-block;
+ -webkit-transform: translateX(0px);
+ -moz-transform: translateX(0px);
+ transform: translateX(0px);
+}
+.wallpaper.active span {
+ width: 40px;
+ height: 35px;
+ display: inline-block;
+ float: left;
+ border:1px solid;
+ background: url(../img/MacPaint.gif);
+ -webkit-transition: -webkit-transform 0.1s ease-in-out;
+ -webkit-user-drag: element;
+}
+
+.wallpaper.active span:nth-child(1){
+ background-position:103px 70px;
+}
+.wallpaper.active span:nth-child(2){
+ background-position:200px -98px;
+}
+.wallpaper.active span:nth-child(3){
+ background-position:200px -260px;
+}
+.wallpaper.active span:nth-child(4){
+ background-position:200px -350px;
+}
+.wallpaper.active span:nth-child(5){
+ background-position:200px -484px;
+}
+.wallpaper.active span:nth-child(6){
+ background-position:200px -581px;
+}
+.wallpaper.active span:nth-child(7){
+ background-position:200px -645px;
+}
+.wallpaper.active span:nth-child(8){
+ background-position:200px -772px;
+}
+
+.wallpaper.active span:hover {
+ cursor: pointer;
+ -webkit-transform: translateX(3px) translateY(-3px);
+ -moz-transform: translateX(3px) translateY(-3px);
+ transform: translateX(3px) translateY(-3px);
+}
+
+.lightcontrol {
+ margin-top: 13%;
+ right: 80px;
+ padding: 20px;
+ -webkit-transform: translateX(400px);
+ -webkit-transition: -webkit-transform 0.2s ease-in-out;
+ -moz-transform: translateX(400px);
+ -moz-transition: -webkit-transform 0.2s ease-in-out;
+ transform: translateX(400px);
+ transition: -webkit-transform 0.2s ease-in-out;
+}
+
+.lightcontrol.active {
+ -webkit-transform: translateX(0px);
+ -moz-transform: translateX(0px);
+ transform: translateX(0px);
+}
+
+.lightcontrol .slider {
+
+}
+h4 {
+ font-weight:300;
+ font-size:11px;
+}
+input[type=range] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ background-color: black;
+ width: 200px;
+ height:3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ background-color: #000;
+ width: 10px;
+ height: 10px;
+ border-radius:10px;
+ cursor:pointer;
+}
+
+.settings {
+ padding: 20px;
+ bottom: 20px;
+ right: 10px;
+ font-size: 12px;
+ -webkit-transform: translateY(400px);
+ -webkit-transition: -webkit-transform 0.2s ease-in-out;
+ -moz-transform: translateY(400px);
+ -moz-transition: -webkit-transform 0.2s ease-in-out;
+ transform: translateY(400px);
+ transition: -webkit-transform 0.2s ease-in-out;
+}
+
+.settings.active {
+ -webkit-transform: translateY(0px);
+ -moz-transform: translateY(0px);
+ transform: translateY(0px);
+}
+
+#startpoint {
+ text-decoration: none;
+}
+
+#startpoint:hover {
+ text-decoration: underline;
+}
+@-webkit-keyframes fade
+{
+ 50%{
+ opacity:0.6;
+ }
+}
+@-moz-keyframes fade
+{
+ 50%{
+ opacity:0.6;
+ }
+}
+#startpoint.active #moveText{
+ -webkit-animation:fade 0.5s infinite;
+ -moz-animation:fade 0.5s infinite;
+}
+#moveText{
+ display:none;
+}
+#moveText.show {
+ display:inline-block;
+}
+#startText.hide {
+ display:none;
+}
+#startpoint.active:after {
+ content: "done";
+ background: black;
+ color: white;
+ padding: 2px;
+ font-weight: 900;
+ margin-left: 5px;
+}
+#startpoint.active:hover {
+ text-decoration:none;
+}
+.settings input[type="text"], textarea{
+ border: 1px solid #000;
+ font-size: 15px;
+ padding: 5px;
+}
+
+.settings textarea {
+ font-size: 12px;
+ width: 100%;
+ max-height: 200px;
+ max-width: 180px;
+}
+
+.settings input[type="text"]:focus{
+ border: 1px solid #000;
+}
+
+.settings .setting{
+ margin-bottom:10px;
+}
+.setting.subButtons {
+ display: inline-block;
+ width: 100%;
+ margin-top: 10px;
+}
+.settings .subButtons a{
+ font-size: 12px;
+ font-weight: 300;
+ width: 40px;
+ margin: 0;
+}
+.settings .setting:last-child{
+ margin-bottom:0px;
+}
+
+button {
+ padding: 8px;
+ border: 1px solid;
+ float: right;
+ font-weight: 500;
+ background: white;
+ cursor: pointer;
+ width: 100%;
+}
+
+button:hover {
+ background:black;
+ color:white;
+}
+
+
+
+.radio-group {
+ width: 182px;
+ display: table;
+ table-layout: fixed;
+ border-spacing: 0;
+ border-collapse: separate;
+}
+
+.radio-group__label {
+ display: table-cell;
+ height: 28px;
+ padding: 5px;
+ vertical-align: middle;
+ text-align: center;
+ position: relative;
+ border: 1px solid #ccc;
+ cursor:pointer;
+ border-style: solid none solid solid;
+ /* border-radius: 5px 0 0 5px;*/
+ -webkit-transition:border 250ms, color 250ms);
+}
+
+.radio-group__label + input + .radio-group__label {
+ /*border-radius: 0 5px 5px 0;*/
+ border-style: solid solid solid none;
+}
+
+.radio-group__label + input + .radio-group__label:before {
+ content: " ";
+ display: block;
+ position: absolute;
+ top:-1px;
+ width: 100%;
+ height: 100%;
+ border: 1px solid #000;
+ /*border-radius: 5px 0 0 5px;*/
+ -webkit-transform: translate3d(-103%,0,0);
+ -webkit-transition: all 250ms;
+ -moz-transform: translate3d(-103%,0,0);
+ -moz-transition: all 250ms;
+ transform: translate3d(-103%,0,0);
+ transition: all 250ms;
+ background:;
+}
+
+.radio-group__label + input:checked + .radio-group__label:before {
+ -webkit-transform: translate3d(-6px,0,0);
+ -moz-transform: translate3d(-6px,0,0);
+ transform: translate3d(-6px,0,0);
+}
+
+.radio-group__option:checked + label {
+ color: #000;
+}
+
+.radio-group__option {
+ display: none;
+}
+
+/*FORM STUFF*/
+
+form {
+ max-width: 440px;
+ margin: 0 auto;
+
+}
+form div {
+ float:right;
+}
+form li {
+ font-size: 20px;
+ font-weight: 300;
+ margin: 8px 0;
+ list-style: none;
+ display: inline-block;
+ width: 100%;
+}
+form label {
+ float:left;
+}
+form input[type="text"],form input[type="password"] {
+ border: 1px solid;
+ font-size: 20px;
+ padding: 5px;
+ font-weight:300;
+}
+form input[type="submit"] {
+ width: 100%;
+ border: 1px solid;
+ background: white;
+ font-size: 20px;
+ font-weight: 300;
+ padding: 10px 0;
+}
+form input[type="submit"]:hover {
+ background:lightgreen;
+ color:white;
+ border:1px solid lightgreen;
+ cursor:pointer;
+}
+form p{
+ display: block;
+ float: left;
+ font-size: 15px;
+ font-weight: 500;
+ margin-top: 10px;
+ color: #999;
+}
+form h3 {
+ text-align: left;
+ font-weight: 600;
+ font-size: 12px;
+ border-bottom: 1px solid;
+ padding: 10px 0;
+ margin-bottom: 10px;
+}
+#form_container {
+ clear:both;
+}
+
+.video {
+ height:80vh;
+ min-height:300px;
+}
+
+.video span {
+ font-size:100px;
+ color:white;
+ cursor:pointer;
+}
+.video span.videoTitle {
+ font-size: 29px;
+ font-weight: 300;
+ padding: 3px 7px;
+}
+
+.video span.icon-ios7-play-outline:hover {
+ color:lightgreen;
+}
+
+.box {
+ display: table-cell;
+ vertical-align: middle;
+ width: 100%;
+}
+
+.bigClose {
+ font-weight: 100;
+ font-size: 120px;
+ float: right;
+ cursor: pointer;
+ position: fixed;
+ right: 20px;
+}
+
+.bigClose:hover {
+ color:lightgreen;
+}
+
+.facebook {
+ width: 100%;
+ display: inline-block;
+ text-align: right;
+ font-size: 28px;
+ font-weight: 300;
+ background: #1D62F0;
+ vertical-align: top;
+ text-decoration: none;
+ margin-bottom: 20px;
+ color: white;
+}
+/*
+.facebook:hover{
+ background:lightgreen;
+}
+*/
+.box b.info {
+ display: inline-block;
+ width: 100%;
+ margin-bottom: 18px;
+ font-weight: 500;
+ font-size: 12px;
+ letter-spacing: 2px;
+}
+.facebook b {
+ float: left;
+ font-size: 50px;
+}
+
+.facebook span {
+ vertical-align: bottom;
+ padding-right: 14px;
+ font-size: 19px;
+ line-height: 16px;
+}
+
+.aboutRoom {
+ width: 250px;
+ background: rgba(255,255,255,0.95);
+ padding: 20px;
+ position: fixed;
+ bottom: 10px;
+ left: 10px;
+ border: 1px solid;
+}
+
+.aboutRoom h1 a{
+ text-decoration: none;
+ font-style: italic;
+}
+
+.aboutRoom h1 a:hover {
+ text-decoration:underline;
+}
+
+.aboutRoom h2{
+ font-size: 13px;
+ margin: 5px 0;
+}
+
+.share {
+ position: fixed;
+ right: 0px;
+ bottom: 10px;
+ padding-right:10px;
+ background:rgba(255,255,255,0.95);
+}
+
+.share h2 {
+ font-weight: 300;
+ font-size: 18px;
+ text-align: right;
+}
+
+.share a{
+ color: #017cfe;
+ text-decoration: none;
+ margin-left: 6px;
+ font-size: 13px;
+ font-weight: 600;
+}
+
+.share a:hover{
+ text-decoration:underline;
+}
+@-webkit-keyframes borderanimation
+{
+ 0%{width:600px;}
+ 100%{width:750px;left:2px;}
+}
+
+@-webkit-keyframes borderanimationleftright
+{
+ 0%{height:250px;}
+ 100%{height:500px;top:2px;}
+}
+
+@-moz-keyframes borderanimation
+{
+ 0%{width:600px;}
+ 100%{width:750px;left:2px;}
+}
+
+@-moz-keyframes borderanimationleftright
+{
+ 0%{height:250px;}
+ 100%{height:500px;top:2px;}
+}
+
+@-ms-keyframes borderanimation
+{
+ 0%{width:500px;}
+ 100%{width:750px;left:2px;}
+}
+
+@-ms-keyframes borderanimationleftright
+{
+ 0%{height:250px;}
+ 100%{height:500px;top:2px;}
+}
+
+@-o-keyframes borderanimation
+{
+ 0%{width:500px;}
+ 100%{width:750px;left:2px;}
+}
+
+@-o-keyframes borderanimationleftright
+{
+ 0%{height:250px;}
+ 100%{height:500px;top:2px;}
+}
+
+@keyframes borderanimation
+{
+ 0%{width:500px;}
+ 100%{width:750px;left:2px;}
+}
+
+@keyframes borderanimationleftright
+{
+ 0%{height:250px;}
+ 100%{height:500px;top:2px;}
+}