body{background:#e2231a url('./assets/images/bg.jpg');background-size:contain;background-repeat-y:repeat;color:white;font-family:Roboto,sans-serif;font-size:16px;} body.search-open { overflow: hidden; } h1,h2,h3,h4,h5,h6,p{font-family:Roboto,sans-serif;} h1{font-size:48px;font-weight:700;} h2{font-size:24px;font-weight:400;text-transform:uppercase;} h3{} h4{font-size:24px;font-weight:400;margin:0 0 4px;} h5{color:darkslategrey;font-size:28px;font-weight:bold;text-shadow:5px 5px white;} h6{font-size:41px;color:red;font-weight:bold;text-shadow:5px 5px white;} .button-spacing{padding-top:6em;} .mod-title{font-size:21px;font-weight:bold;color:red;} .mod-content{font-size:15px;font-weight:bold;color:darkslategray;} p{font-weight:300;line-height:1.5;} strong,b{font-weight:700;} a{color:white;} a:hover{color:white;text-decoration:none;} .checkbox input[type="checkbox"]:focus + label::before, .checkbox input[type="radio"]:focus + label::before{outline:none;} .checkbox input:focus, .checkbox input:active{outline:0;} .checkbox label::before{width:20px;height:20px;border:none;-webkit-background-clip: padding-box;outline:0;background:none;} .checkbox-default input[type="checkbox"]:checked + label::before, .checkbox-default input[type="radio"]:checked + label::before{background:black;} /*.checkbox label::before{background:black;border-color:black;}*/ .checkbox{margin:0;} .checkbox label::after{color:white;top:2px;left:1px;outline:0;} #admin_page_container .checkbox label{margin:0!important;color:black!important;font-weight:700;} #admin_page_container .checkbox label span{font-weight:300;} #privacy_policy_holder label{font-size:18px;line-height:15px;padding-left:22px;} #privacy_policy_holder label span{font-size:14px;} #privacy_policy_holder .checkbox label::before{width:32px;height:32px;background:#ff0b00;top:-1px;} #privacy_policy_holder .checkbox label::after{font-size:20px;top:7px;left:3px;} #gender label{font-size:16px;color:black !important;} #gender .checkbox{margin-top:13px;} #gender-label{padding:4px 8px} /* UTILITIES */ .vcenter {display:inline-block;vertical-align:middle;float:none;} .text-black{color:black!important;} /* NAVIGATION */ #top-nav { background: none; border: none; margin: 0 0 30px 0; -webkit-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); -moz-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); } .navbar{min-height:inherit;margin-bottom:0;z-index:2;} .navbar-brand{height:auto;padding: 13px 15px;} #top-nav .navbar-nav>li>a{margin:30px 10px;padding:0;color:#fff;} #top-nav .search-btn { margin: 29px 10px; } .navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>li>a:active{background:transparent;color:white;} .navbar-nav>li>a.sign-out{text-transform:uppercase;padding:0 20px;font-weight:700;font-size:30px;} .navbar-header { float: left; } .navbar-header .icon-bar { background-color: white; } .navbar-default .navbar-toggle { margin-top: 30px; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: #fff; color: #ff0000; } .jumbotron{background:rgba(0,0,0,0.6);padding:20px 0;} .jumbotron.voji_card{border-radius: 0;height:480px;padding:0;} #voji-masonry{ margin: 0 0 20px 0; } #voji-masonry.noLoadMoreBtn { margin: 0 0 40px 0; } #vojiGridContainer { display: none; } #trendingLoadMoreBtn { font-size: 20px; font-weight: 700; color: #fff; padding: 10px 15px; background: none; border: 4px solid #fff; width: auto; display: block; margin: 0 auto 40px auto; } #vaultLoadMoreBtn { font-size: 20px; font-weight: 700; color: #fff; padding: 10px 15px; background: #ff0000; border: 4px solid #ff0000; width: auto; display: block; margin: 0 auto 40px auto; } #searchResultsLoadMoreBtn { font-size: 20px; font-weight: 700; color: #fff; padding: 10px 15px; background: none; border: 4px solid #fff; width: auto; display: block; margin: 40px auto; clear: both; } .voji-wrapper{float:left;display:inline;width:100%;} .gutter-sizer{width:1.25%;} .item { width: 19%; } .voji{position:relative;margin-bottom:7%;float:left;display:block;width:100%;} .voji img{max-width:100%;height:auto;} #homepage-graphic-container { width: 100%; height: 700px; margin: -160px 0 30px 0; background: url('./assets/images/marble.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50%; position: relative; } #homepage-graphic-container h1 { font-size: 80px; font-weight: 700; font-family: Roboto Black, sans-serif; padding: 0 15px; text-align: center; position: absolute; top: 250px; left: 0; width: 100%; margin: 0; } #homepage-graphic-container a { font-size: 16px; font-weight: 300; position: absolute; bottom: 15px; left: 0; width: 100%; text-align: center; } #homepage-graphic-container a:focus { color: #fff; text-decoration: none; } /* VOJI PAGE */ .avatar{width:110px;height:110px;background:#C7C7C7;background-position:center center;background-size:cover;font-size:40px;line-height:110px;text-align:center;} .voji-player, #voji-player{height:480px;float:left;display:inline;width:50%;background:#000;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:contain;} #voji-player video{width:100%;height:480px;background:#000;background-color:#000;} #voji-player img { max-width: 100%; width: auto; height: auto; display: block; margin: 15px auto; } #voji-content{height: 480px;float:left;display:inline;width:50%;/*padding:15px;*/position:relative;background-color: #fff; } #voji-stats-holder{width: 20%; height: 480px; position: absolute; right: 0; top: 0; background-color: #FF0000; text-align: left; font-weight: normal; } #voji-stats-holder > div { position: absolute; width: 100%; text-align: center; } #voji-stats-holder > div#first { top:15px; } #voji-stats-holder > div#second { top:130px; } #voji-stats-holder > div#third { top:250px; } #voji-stats-holder > div#fourth { top:375px; } #voji-stats-holder .voji-stats-icon { width: 40%; max-width: 60%; } #voji-stats-holder .voji-stats-value { /*max-width: 65%; margin-left: 5px;*/ font-size: 150%; } #voji-stats-holder .voji-stats-label { font-size: 80%; font-weight: 100; } #voji-content .voji-creator-info { display: block; overflow: hidden; padding: 7px 10px; background-color: #fff; background:#e1e1e1;} #voji-content .voji-creator-info .voji-author-link { font-size: 20px; font-weight: 700; color: #000; } #voji-content .voji-title-info-col { padding: 0 15px 0 0; } #voji-content .avatar { width: 50px; height: 50px; line-height: 50px; overflow: hidden; } #voji-content .avatar-holder { width: 50px; display: inline-block; float: left; } #voji-content .voji-title-info-holder { width: calc(100% - 120px); margin: 0 0 0 10px; float: left; } #voji-content .voji-edit-holder { position: absolute; top: 5px; right: 10px; } #voji-content .voji-edit-holder a { font-size: 12px; color: #666; } #voji-content .voji-remove-holder { position: absolute; top: 23px; right: 10px; } #voji-content .voji-remove-holder a { font-size: 12px; color: #666; } #voji-content .voji-report-holder {position:absolute;right:10px;bottom:5px;} #voji-content .voji-report-holder a{font-size:12px;color:#666;} #voji-content .voji-title-info-holder h2 { font-size: 18px; font-weight: 700; color: #000; margin: 0; } #voji-content .voji-title-info-holder a { color: #000; } #voji-content h2.voji-title { font-size: 32px; font-weight: 500; margin: 30px 0 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: none; } #voji-content .voji-author-timestamp { font-size: 12px; font-weight: 600; margin: 0; } #voji-content .voji-author-timestamp span { margin: 0 15px 0 0;} #voji-content .voji-author-timestamp a { color: black; text-decoration: none; white-space: nowrap; padding-left:6px; } #voji-content .voji-content-centered-area { text-align: center; padding: 0; position: relative; } #voji-content .voji-content-centered-area h3.interact-download-text { font-weight: 200; margin: 5px 0 15px 0; } #voji-content .voji-content-centered-area ul{list-style:none;margin:0;padding:0;text-align:center;} #voji-content .voji-content-centered-area li{float:left;display:inline-block;width:33.333%;margin:0;text-align:center;padding-top:0;} #voji-content .voji-content-centered-area li a{text-transform:uppercase;font-weight:100;} .voji_card_header { position: relative; } .voji_card_header .quickview-close-btn { position: absolute; top: 0px; right: 0px; } .voji_card_header h2.voji-title { font-size: 24px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: none; } #voji-content .quickview-close-btn { position: absolute; top: 15px; right: 15px; } #voji-content .voji-download-btn-holder { } #voji-content .voji-download-btn-holder a { } #voji-content .voji-download-btn-holder a:focus { color: #fff; } #voji-content .voji-options { width: 80%; color: #000; } #voji-content .voji-options #voji_functions { display: table; width: 100%; padding: 0; margin: 0; } #voji-content .voji-options #voji_functions li { display: table-cell; width: 25%; background-color: #727272; border: 0.25em solid #fff; border-width: 2px 0 0 2px; text-align: center; text-transform: uppercase; font-weight: bold; color: #fff; } #voji-content .voji-options #voji_functions li a { display: block; width: 100%; padding: 0.5em 0; } #voji-content .voji-options #voji_functions li:first-child { border-left-width: 0; } #voji-content .voji-options #voji-functions.in_vault li { width: 33.333%; } /* COMMENTS STYLING */ .voji-comment-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .voji-comment-section .voji-comment-content-section { } .voji-comment-section .sender_timestamp_row { padding: 0 5px; } .voji-comment-section .sender_timestamp_row .col { padding: 0 5px; } .voji-comment-section .comment_creator { font-size: 16px; font-weight: 700; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0; } .voji-comment-section .comment_timestamp { font-size: 14px; text-align: left; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0; } .voji-comment-section .col-xs-2 { padding: 0 5px 0 15px; } .voji-comment-section .col-xs-10 { padding: 0 15px 0 5px; } .voji_comment_avatar_text { font-size: 25px; color: #ff0000; background: #d7d7d7; position: relative; letter-spacing: -1px; width: 100%; height: 0; padding-bottom: calc(100% - 10px); border-radius: 50%; display: block; text-align: center; padding-top: 10px; } .voji_comment_avatar_text span { line-height: 25px; position: absolute; top: calc(50% - 12px); left: 0; width: 100%; text-align: center; } .voji_comment_text { text-align: left; } .voji_comment_text p { font-size: 14px; color: #727272; background: #d7d7d7; margin: 0; border-radius: 20px; box-sizing: border-box; padding: 8px 30px; position: relative; text-align: left; float: left; overflow: visible; } .voji_comment_text p::before { border-radius: 30px / 10px; content: ''; display: block; position: absolute; border: 10px solid transparent; border-top-color: #d7d7d7; top: 0; left: -7px; z-index: -2; } .voji_comment_text p::after { border-radius: 30px / 10px; content: ''; display: block; position: absolute; border: 8px solid transparent; border-top-color: #d7d7d7; top: 1px; left: -5px;} .voji_comment_text p span { white-space: normal; } .voji_comment_talxt { background: #d7d7d7; color: #727272; border-radius: 20px; box-sizing: border-box; padding: 8px 30px; position: relative; text-align: center; float: left; } .voji_comment_talxt::before { border-radius: 30px / 10px; content: ''; display: block; position: absolute; border: 10px solid transparent; border-top-color: #d7d7d7; top: 0; left: -7px; z-index: -2; } .voji_comment_talxt::after { border-radius: 30px / 10px; content: ''; display: block; position: absolute; border: 8px solid transparent; border-top-color: #d7d7d7; top: 1px; left: -5px;} .voji_comment_talxt .spinner svg { height: 18px; } .voji_comment_talxt img { width: 20px !important; } .voji_comment_talxt p { margin: 0; line-height: 1; } .voji_comment_talxt span { font-size: 12px; } .voji_comment_voji { font-size: 14px; padding: 5px; background: #ff0000; color: #fff; float: left; width: auto; height: auto; max-width: 50%; border-radius: 15px; overflow: hidden; position: relative; } .voji_comment_voji.no-padding { padding: 0; } .voji_comment_voji i { font-size: 24px; position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); } .circle_avatar_img { width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% !important; } .my_comment_item .comment_creator { color: #ff0000; text-align: right; } .my_comment_item .comment_timestamp { color: #ff0000; text-align: right; margin: 0 0 5px 0 !important; } .my_comment_item .voji_comment_text { text-align: right; } .my_comment_item .voji_comment_text p { color: #fff; background: #ff0000; float: right; } .my_comment_item .voji_comment_voji { float: right; } .my_comment_item .voji_comment_talxt { float: right; color: #fff; background: #ff0000; } .my_comment_item p { color: #fff; } .my_comment_item .voji_comment_text p::before { border-top-color: #ff0000; left: auto; right: -7px; } .my_comment_item .voji_comment_text p::after { border-top-color: #ff0000; left: auto; right: -5px; } .my_comment_item .voji_comment_talxt::before { border-top-color: #ff0000; left: auto; right: -7px; } .my_comment_item .voji_comment_talxt::after { border-top-color: #ff0000; left: auto; right: -5px; } .commentHolder { font-size: 16px; padding: 5px 0; margin: 0; background: #fff; border:none; } .commentHolder a { display: block; } .commentHolder video { width: 100%; vertical-align: middle; } .commentHolder img { width: 100%; } .commentHolder p { font-size: 14px; } #voji-content .voji-creator-info { height: 64px; position:relative;} #voji-content #voji_functions { height: 40px; } #voji-content .voji-content-centered-area { height: 376px; } #voji-content .voji-content-centered-area .voji-comment-content-section { padding: 15px; height: 326px; position: absolute; top: 0; left: 0; width: 100%; overflow-y: scroll; } #voji-content .voji-content-centered-area .voji-comment-add-section { height: 50px; position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px; background: #d7d7d7; } #voji-content .voji-content-centered-area .voji-comment-section.not-logged-in .voji-comment-content-section { height: 376px; } #voji-content .voji-comment-section .voji-comment-add-section .voji-comment-add-bullseye { width: 50px; height: 40px; float: left; background: #000; } #voji-content .voji-comment-section .voji-comment-add-section .voji-comment-add-bullseye span { font-size: 10px; font-weight: 300; color: #fff; line-height: 1; margin: 2px 0 0 0; display: block; } #voji-content .voji-comment-section .voji-comment-add-section .voji-comment-add-bullseye i { font-size: 26px; color: #ff0000; display: block; } #voji-content .voji-comment-section .voji-comment-add-section input { width: calc(100% - 50px); height: 40px; padding-left: 5px; background: #fff; color: #000; text-align: left; } #voji-content .voji-comment-section .voji-comment-add-section #createVojiBtnList { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; width: auto; } #voji-content .voji-comment-section p { margin: 0; } #voji-content .voji-comment-section .voji-comment-add-section #createVojiBtnList .createCancelBtn { font-size: 26px; line-height: 42px; } #voji-content .voji-comment-section .voji-comment-add-section #createVojiBtnList li .create-option-label .fa { font-size: 20px; margin-top:4px;} #voji-content .voji-comment-section .voji-comment-add-section #createVojiBtnList li .create-option-label img { width: 20px; margin-top:4px;} #voji-content .voji-comment-section .voji-comment-add-section #createVojiBtnList li .create-option-label span { font-size: 12px; } .voji-comment-add-section input { color: #000; } .voji-comment-add-section ::-webkit-input-placeholder { color: #d7d7d7; } .voji-comment-add-section :-moz-placeholder { color: #d7d7d7; } .voji-comment-add-section ::-moz-placeholder { color: #d7d7d7; } .voji-comment-add-section :-ms-input-placeholder { color: #d7d7d7; } /* VIEW VOJI STYLING */ .view-voji-modal { } .view-voji-modal .modal-dialog { margin: 150px auto 0 auto; width: 80%; } .view-voji-modal .modal-dialog .modal-body { padding: 0; } .view-voji-modal .modal-dialog .modal-body .voji_card_header { position: absolute; top: -30px; left: 0; width: 100%; } .view-voji-modal .modal-dialog .modal-body .voji_card_header h2 { font-size: 24px; font-weight: 700; color: #fff; width: 80%; float: left; margin: 0; text-align: left; } .view-voji-modal .modal-dialog .modal-body .voji_card_header button { font-size: 24px; font-weight: 700; color: #fff; text-shadow: none; opacity: 1; width: 20%; float: right; margin: 0; text-align: right; } .view-voji-modal .modal-dialog .modal-body .voji_card_header button span{color:white !important;} .view-voji-modal .modal-dialog .modal-body .jumbotron { margin: 0; padding: 0; } .view-voji-modal .modal-content { border-radius: 0; } /* MESSAGES STYLING */ #admin_page_container #admin_content_column .sender_timestamp_row { padding: 0 5px; } #admin_page_container #admin_content_column .sender_timestamp_row .col { padding: 0 5px; } #admin_page_container #admin_content_column p.comment_creator { font-size: 16px; font-weight: 700; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 15px 0 0 0; } #admin_page_container #admin_content_column p.comment_timestamp { font-size: 14px; text-align: left; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0; } #admin_page_container .voji-comment-add-section { height: 50px; position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px; background: #d7d7d7; } #admin_page_container .voji-comment-section.not-logged-in .voji-comment-content-section { height: 376px; } #admin_page_container .voji-comment-add-section .voji-comment-add-bullseye { width: 50px; height: 40px; float: left; background: #000; cursor: pointer; } #admin_page_container .voji-comment-add-section .voji-comment-add-bullseye span { font-size: 10px; font-weight: 300; color: #fff; line-height: 1; margin: 2px 0 0 0; display: block; text-align: center; } #admin_page_container .voji-comment-add-section .voji-comment-add-bullseye i { font-size: 26px; color: #ff0000; display: block; text-align: center; } #admin_page_container .voji-comment-add-section input { width: calc(100% - 50px); height: 40px; padding-left: 5px; background: #fff; color: #000; text-align: left; } #admin_page_container .voji-comment-add-section .voji-message-text-form input{color:black;font-size:16px;} #admin_page_container .voji-comment-add-section #createVojiBtnList { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; width: auto; } #admin_page_container p { margin: 0; } #admin_page_container .voji-comment-add-section #createVojiBtnList .createCancelBtn { font-size: 26px; line-height: 42px; } #admin_page_container .voji-comment-add-section #createVojiBtnList li .create-option-label .fa { font-size: 20px; } #admin_page_container .voji-comment-add-section #createVojiBtnList li .create-option-label img { width: 20px; } #admin_page_container .voji-comment-add-section #createVojiBtnList li .create-option-label span { font-size: 12px; } #admin_page_container #admin_content_column .my_comment_item p{margin:0;} #admin_page_container #admin_content_column .my_comment_item p.comment_timestamp{text-align:right;} #admin_page_container #admin_content_column .my_comment_item p.comment_timestamp span{color:#ff0000;} .message_recipient_section { } .message_recipient_section .message_recipient_holder { } .message_recipient_section .message_recipient_holder.has-content { height: 75px; padding: 5px 5px 20px 5px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .message_recipient_section .message_recipient_holder a { margin: 0 5px 0 0; display: inline-block; width: 50px; height: 50px; vertical-align: middle; white-space: nowrap; } .message_recipient_section .message_recipient_holder a:last-child { margin: 0; } .message_recipient_section .message_recipient_holder .user-avatar { font-size: 20px; width: 50px; height: 50px; line-height: 50px; padding: 0; margin: 0; color: #727272; border: 2px solid #727272; text-align: center; background: #d7d7d7; display: inline-block; } .message_recipient_section .message_recipient_holder .user-avatar.message_add_recipient_btn { background: #fff; float: left; margin: 0 5px 0 0; } .message_recipient_section .message_recipient_holder .user-avatar.message_add_recipient_btn .fa { line-height: 50px; } .message_recipient_section .add_message_recipient_holder { position: relative; } .message_recipient_section .add_message_recipient_holder input { font-size: 16px; height: 40px; line-height: 40px; width: 100%; padding: 5px 10px; margin: 0; border: 5px solid #d7d7d7; } .message_recipient_section .add_message_recipient_holder ul { position: absolute; left: 0; top: 40px; width: 100%; z-index: 2; max-height: 250px; overflow-y: scroll; box-shadow: 0 10px 20px rgba(0,0,0,0.25); } /* VOJI CREATE STYLING */ #create_voji_progress_section { padding: 20px 10px; margin: -10px -10px 0 -10px; background: #1c1c1b; overflow: hidden; display: block; } #create_voji_progress_section .timeline { border: 1px solid #fff; margin: 5px 20px; } #create_voji_progress_section .entry { width: 25%; float: left; position: relative; } #create_voji_progress_section .entry:after { width: 10px; height: 10px; border-radius: 10px; border: 2px solid #fff; position: absolute; top: -11px; content: ''; background: #fff; } #create_voji_progress_section .entry.entry-active:after { background: #ff0000; } #create_voji_progress_section .entry-left { text-align: left; } #create_voji_progress_section .entry-left:after { left: 12%; } #create_voji_progress_section .entry-center { text-align: center; } #create_voji_progress_section .entry-center:after { left: 48%; } #create_voji_progress_section .entry-right { text-align: right; } #create_voji_progress_section .entry-right:after { right: 12%; } #create_voji_progress_section .entry h4 { font-size: 14px; font-weight: 300; color: #fff; margin: 10px 0 0 0; } #create_voji_content_holder { background: #fff; padding: 0; } #create_voji_content_holder .btn-red, .btn-red { color: #fff; background: #c41e17; } #edit-profile-picture-holder{padding:10px;} #save-profile-picture{border-radius:0;color:#c41e17;} #create_voji_content_holder .btn-white { color: #c41e17; background: #fff; } #create_voji_content_holder .btn-grey { color: #fff; background: #C7C7C7; } #create_voji_content_holder h2 { font-size: 16px; font-weight: 100; color: #ff0000; text-align: center; margin: 0 0 5px 0; } #create_voji_content_holder input, #create_voji_content_holder textarea { color: #000; width: 100%; } #create_voji_content_holder video { width: 100%; max-height: 350px; height: auto; background: #000; } #create_voji_content_holder img { max-height: 350px; height: auto; margin: 0 auto; } #create_voji_content_holder #VideoRecorder { width: 100%; max-height: 350px; background: #000; } #my_camera { width:320px; height:240px; margin: 0 auto; } /* #createVojiBtn { visibility: visible; transition: visibility 0.5s; -webkit-transition: visibility 0.5s; -moz-transition: visibility 0.5s; -ms-transition: visibilty 0.5s; } #createVojiBtn.hide { visibility: hidden; } */ #createVojiBtnList { background: #fff; width: 100%; padding: 5px; margin: 0; overflow: hidden; display: block; position: relative; } #createVojiBtnList a:hover, #createVojiBtnList a:focus, #createVojiBtnList a:active { text-decoration: none; } #createVojiBtnList input { text-align: left; color: #727272; } #createVojiBtnList li { width: auto; display: inline-block; float: left; cursor: pointer; } #createVojiBtnList > li { max-width: 16.666%; } #createVojiBtnList.optionSelected, #createVojiBtnList .optionSelected { padding: 0; } #createVojiBtnList li.activeOption { max-width: 100%; width: 100%; } #createVojiBtnList .createCancelBtn { font-size: 32px; font-weight: 600; color: #fff; background: #727272; line-height: 52px; width: 16.666%; height: 100%; position: absolute; top: 0; right: 0; text-align: center; } #createVojiBtnList li .create-option-label { } #createVojiBtnList li .create-option-label .fa { font-size: 24px; color: #727272; display: block; text-align: center; } #createVojiBtnList li .create-option-label img { width: 24px; max-width: 100%; height: auto; margin: 0 auto; display: block; } #createVojiBtnList li .create-option-label span { font-size: 14px; font-weight: 500; color: #727272; padding: 0 5px; display: block; text-align: center; } #createVojiBtnList li ul { width: 100%; padding: 0; margin: 0; overflow: hidden; display: block; position: relative; } #createVojiBtnList li ul li { max-width: 20%; padding:5px; } #createVojiBtnList li ul li.activeOption { padding: 0; } #createVojiBtnList li ul li:first-child { padding: 5px; } #createVojiBtnList li ul li.createSubOptionLabelHolder { background: #727272; padding:5px;} #createVojiBtnList li ul li.createSubOptionLabelHolder .create-option-label { } #createVojiBtnList li ul li.createSubOptionLabelHolder .create-option-label .fa { color: #fff; margin: 0 !important; } #createVojiBtnList li ul li.createSubOptionLabelHolder .create-option-label img { } #createVojiBtnList li ul li.createSubOptionLabelHolder .create-option-label span { color: #fff !important; } #createVojiBtnList li ul li .createSearchOptionHolder { } #createVojiBtnList li ul li .createSearchOptionHolder .create-option-label { background: #727272; width: 22%; max-width: 22%; text-align: center; padding: 0; } #createVojiBtnList li ul li .createSearchOptionHolder .create-option-label .fa { color: #fff !important; margin: 0 !important; } #createVojiBtnList li ul li .createSearchOptionHolder .create-option-label span { color: #fff !important; } #createVojiBtnList li ul li .createSearchOptionHolder input { width: 62%; border: none; position: absolute; top: 0; left: 22%; height: 100%; padding: 5px; } #createVojiBtnList li ul li .createSearchOptionHolder .createCancelBtn { } #recordAudioWaveformHolder { position: relative; display: block; width: 100%; overflow: hidden; } #recordAudioWaveformHolder #recordAudioWaveform { width: 100%; display: block; background: #000; } #recordAudioWaveformHolder #recordAudioPlaybackIcon { font-size: 48px; color: #fff; line-height: 48px; height: 48px; width: 48px; position: absolute; top: calc(50% - 24px); left: calc(50% - 24px); display: block; } #webBrowserSection { } #webBrowserSection iframe { height: 600px; } #webBrowserSection #webBrowserCreateContent { position: relative; } #webBrowserSection #webBrowserDisableCover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } #webBrowserSection #webBrowserCreateHeader { border-bottom: 5px solid #727272; } #webBrowserSection #webBrowserCreateHeader .createWebInputHolder { position: relative; } #webBrowserSection #webBrowserCreateHeader input { color: #727272; width: 100%; height: 40px; line-height: 40px; border: none; } /* #webBrowserSection #webBrowserCreateHeader .createWebInputClearBtn { font-size: 32px; font-weight: 600; color: #fff; background: #727272; line-height: 40px; width: 5%; height: 100%; position: absolute; top: 0; right: 0; text-align: center; } */ #webBrowserSection #webBrowserCreateHeader #createWebControlsRow { background: #d7d7d7; margin: 0; padding: 5px; } #webBrowserSection #webBrowserCreateHeader #createWebControlsRow .col-xs-6 { padding: 0; } #webBrowserSection #webBrowserCreateHeader #createWebControls { margin: 0; padding: 0; list-style: none; } #webBrowserSection #webBrowserCreateHeader #createWebControls li { padding: 5px 0; display: inline-block; width: 50px; max-width: 25%; float: left; text-align: center; } #webBrowserSection #webBrowserCreateHeader #createWebControls li i { font-size: 36px; line-height: 49px; color: #ff0000; } #webBrowserSection #webCreateVojiBtn { padding: 0; text-align: right; } #webBrowserSection #webCreateVojiBtn img { max-width: 100%; width: auto; } #create-voji-modal { z-index:1051; } #create-voji-modal.iframeModal .modal-dialog { width: 85%; } #create-voji-modal .modal-content { margin: 100px auto 0 auto; border-radius: 0; } #create-voji-modal .modal-body { padding: 10px 25px; } #create-voji-modal .modal-body .close { font-size: 18px; font-weight: 500; color: #fff; position: absolute; right: 0; top: -25px; margin: 0; opacity: 1; } #create-voji-modal #record_voji_button_holder { padding: 0 15px; margin: 10px 0 0 0; background: #fff; width: 100%; } #create-voji-modal #record_voji_button_holder .col-xs-6 { padding: 0 5px; } #create-voji-modal #record_voji_button_holder .col-xs-6:first-child { text-align: right; } #create-voji-modal #record_voji_button_holder .col-xs-6:last-child { text-align: left; } #create-voji-modal #record_voji_button_holder .col-xs-6 .btn { width: auto; min-width: 25%; display: inline-block; border-radius: 0; } #create-voji-modal .btn { border-radius: 0; margin-top: 5px; } #create-voji-modal .btn-green { background: #6EC147; color: #fff; } #create-voji-modal .btn-grey { background: #727272; color: #fff; } .img_search_results_holder { line-height: 0; -webkit-column-count: 2; -webkit-column-gap: 2px; -moz-column-count: 2; -moz-column-gap: 2px; column-count: 2; column-gap: 2px; } .img_search_results_holder img { margin: 1px 0; width: 100% !important; height: auto !important; } #cropperSection img { margin: 0 auto; display: block; max-height: 400px; } /*#vojiImgToCropHolder{min-height:400px;}*/ #trimSection video { width: 49%; float: left; margin: 15px 0; } #trimSection video:first-child { margin-right: 2%; } /* #trimSection video:last-child { margin-left: 1%; } */ #trimSection .ui-slider { border: none; margin: 15px 0 45px 0; } #trimSection .ui-slider .ui-slider-range { background: #c41e17; } #trimSection .ui-slider-horizontal .ui-slider-handle { background: #fff; border-radius: 50%; border: 1px solid #000; } #trimmer_container { width: 100%; height: 100px; background: #d7d7d7; position: relative; overflow: hidden; } #trimmer_container i { font-size: 30px; color: #fff; margin-top: 35px; } #trimmer_range { z-index: 2; width: calc(100% - 100px); height: 100px; background: #727272; border-top: 2px solid #ff0000; border-bottom: 2px solid #ff0000; position: absolute; top: 0; left: 50px; overflow: hidden; } #trimmer_start { z-index: 3; width: 50px; height: 100px; text-align: center; background: #ff0000; border-radius: 0; border-top: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-left: 2px solid #ff0000; position: absolute; left: 0; top: 0; } #trimmer_end { z-index: 3; width: 50px; height: 100px; text-align: center; background: #ff0000; border-radius: 0; border-top: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-right: 2px solid #ff0000; position: absolute; right: 0; top: 0; } #trimSection #trimmerPlayerScrubberHolder { background: #000; padding: 5px; } #dubSection #dubPlaybackHolder { position: relative; } #dubSection #dubWaveformHolder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } #dubSection #dubWaveformHolder #dubWaveform { position: relative; top: calc(50% - 125px); left: 0; } #dubSection #dubWaveformHolder #dubWaveform canvas { width: 100% !important; } #dubSection video { width: 100%; } #dubSection img { width: 100%; margin-bottom: 30px; } #recordSection { position: relative; padding-bottom: 130px; } #recordSection #record_voji_tab_section { width: 100%; bottom: 0; position: absolute; overflow: hidden; display: block; } #recordSection #record_voji_tab_section .nav-tabs { border: none; } #recordSection #record_voji_tab_section .nav-tabs li { font-size: 16px; color: rgba(191, 34, 79, 0.180392); background: #f7f7f7; width: 50%; max-width: 50%; border: none; text-align: center; } #recordSection #record_voji_tab_section .nav-tabs li.active { color: #ff0000; background: #ebebeb; } #recordSection #record_voji_tab_section #record_voji_button_holder { padding: 15px 0 0 0; text-align: center; } #recordSection #record_voji_tab_section #record_voji_button_holder button { padding: 10px 5px 6px 5px; font-size: 12px; height: 70px; width: 70px; border-radius: 70px; border: 4px solid #fff; margin: 0 auto; display: block; } #recordSection #record_voji_tab_section #record_voji_button_holder #stop-recording { border-radius: 0; } #saveSection { margin: -10px; background: #000; } #saveSection #edit_voji_preview_section { width: 40%; float: left; padding: 5px; } #saveSection #edit_voji_preview_section img { width: 100%; } #saveSection #edit_voji_preview_section video { width: 100%; } #saveSection #edit_voji_info_section { width: 40%; float: left; padding: 5px 0; } #saveSection #edit_voji_info_section .edit_voji_input_holder { display: block; margin: 0 0 5px 0; } #saveSection #edit_voji_info_section .edit_voji_input_holder input { font-size: 14px; width: 100%; color: #000; } #saveSection #edit_voji_info_section .edit_voji_input_holder select { font-size: 14px; width: 100%; color: #000; } #saveSection #edit_voji_info_section #edit_voji_new_folder_holder.edit_voji_input_holder { } #saveSection #edit_voji_info_section #edit_voji_new_folder_holder.edit_voji_input_holder input { } #saveSection #edit_voji_info_section #edit_voji_privacy_row { } #saveSection #edit_voji_info_section #edit_voji_privacy_row .checkbox_holder { padding: 0 0 0 15px; width: auto; float: left; } #saveSection #edit_voji_info_section #edit_voji_privacy_row .checkbox_holder input { width: auto; margin: 0 5px 0 0; } #saveSection #edit_voji_info_section #edit_voji_privacy_row .checkbox_label_holder { padding: 0 15px 0 0; width: auto; float: left; } #saveSection #edit_voji_info_section #edit_voji_privacy_row h2 { font-size: 14px; font-weight: 500; color: #fff; text-align: left; margin: 0; width: 100%; } #saveSection #edit_voji_info_section #edit_voji_privacy_row h4 { font-size: 12px; font-weight: 300; color: #fff; text-align: left; margin: 0; width: 100%; } #saveSection #edit_voji_thumbnail_section { width: 20%; float: left; padding: 5px; } #saveSection #edit_voji_thumbnail_section img { width: 100%; } #saveSection #edit_voji_thumbnail_section h3 { font-size: 14px; font-weight: 300; color: #fff; margin: 10px 0; text-align: center; } #saveSection #edit_voji_thumbnail_section .btn { font-size: 12px; font-weight: 300; background: #727272; margin: 0 0 5px 0; } #saveSection #edit_voji_thumbnail_section input { font-size: 12px; margin: 0; } #saveSection #edit_voji_buttons_section { padding: 5px; margin: 0; overflow: hidden; display: block; background: #fff; clear: both; } #saveSection #edit_voji_buttons_section .col-xs-6:first-child { text-align: left; } #saveSection #edit_voji_buttons_section .col-xs-6:last-child { text-align: right; } #saveSection #edit_voji_buttons_section .btn { font-size: 16px; font-weight: 400; width: auto; max-width: 100%; margin: 0; padding: 6px 20px; border: none; } #saveSection #edit_voji_buttons_section #edit_voji_cancel_btn { color: #fff; background: #727272; } #saveSection #edit_voji_buttons_section #edit_voji_save_btn { color: #fff; background: #ff0000; } #cropperSection { position: relative; } #cropperSection #vojiCropBtn { margin: 5px 0 0 0; } #cropperSection #dubImgBtn, #cropperSection #saveImgBtn { margin-top: 5px; } #vojiPickerSection .voji_grid_holder { width: 100%; display: block; position: relative; top: 0; left: 0; } #vojiPickerSection .voji_holder { width: 50%; height: 0; padding-bottom: 35%; margin: 0 0 4px 0; background: #000; float: left; position: relative; overflow: hidden; cursor: pointer; } #vojiPickerSection .voji_holder:nth-child(odd) { border-right: 2px solid #fff; } #vojiPickerSection .voji_holder:nth-child(even) { border-left: 2px solid #fff; } #vojiPickerSection .voji_holder:only-child { border: none; } #vojiPickerSection .voji_holder > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50%; } #vojiPickerSection .voji_holder .voji_holder_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); } #vojiPickerSection .voji_holder .voji_grid_info_holder { width: 100%; position: absolute; bottom: 0; left: 0; padding: 5px; } #vojiPickerSection .voji_holder .voji_grid_info_holder .voji_grid_icon { font-size: 26px; color: #fff; height: 22px; display: block; margin: 0 0 5px 0; } #vojiPickerSection .voji_holder .voji_grid_info_holder .voji_grid_icon.ion-image { height: 26px; } #vojiPickerSection .voji_holder .voji_grid_info_holder h2 { font-size: 14px; color: #fff; line-height: 1.15; width: 100%; margin: 0 0 5px 0; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; } #vojiPickerSection .voji_holder .voji_grid_info_holder h3 { font-size: 12px; font-weight: 300; color: #fff; line-height: 1.3; padding: 0; margin: 0; width: 100%; white-space: nowrap; text-overflow: ellipsis; text-align: left; overflow: hidden; -webkit-box-orient: vertical; } #create-voji-modal .vojiPickerSearchHolder { margin: 0; display: block; overflow: hidden; position: relative; } #create-voji-modal .vojiPickerSearchHolder .create-option-label { background: #727272; width: 22%; max-width: 22%; text-align: center; padding: 5px; } #create-voji-modal .vojiPickerSearchHolder .create-option-label img { width: 24px; max-width: 100%; height: auto; margin: 0 auto; display: block; } #create-voji-modal .vojiPickerSearchHolder .create-option-label span { font-size: 14px; font-weight: 500; color: #fff; padding: 0 5px; display: block; text-align: center; } #create-voji-modal .vojiPickerSearchHolder input { width: 60%; border: none; position: absolute; top: 0; left: 22%; height: 100%; padding: 5px; } #create-voji-modal .vojiPickerSearchHolder .createVojiCancelBtn, #create-voji-modal .vojiPickerSearchHolder .createVojiSearchCancelBtn { font-size: 32px; font-weight: 600; color: #fff; background: #727272; line-height: 52px; width: 18%; height: 100%; position: absolute; top: 0; right: 0; text-align: center; } #create-voji-modal .vojiPickerSearchHolder a:hover, #create-voji-modal .vojiPickerSearchHolder a:focus, #create-voji-modal .vojiPickerSearchHolder a:active { text-decoration: none; } #login-create-modal .modal-body h2 { color: #ff0000; text-align: center; margin: 0; text-transform: capitalize; } #login-create-modal .modal-body p { color: #ff0000; text-align: center; } #login-create-modal .modal-body .btn { color: #fff; background: #ff0000; text-align: center; } #webSearchResultsSection iframe { width: 100%; min-height: 250px; } #voji_trending_info_container { text-align: center; } #voji_trending_info_container h4 { font-size: 32px; font-weight: 700; margin: 30px 0; line-height: 1.5; } #voji_trending_info_container p { font-size: 16px; font-weight: 300; line-height: 1.5; } #app-store-button-container { margin: 15px 0; text-align: center; } #app-store-button-container a { } #app-store-button-container a img { max-width: 100%; height: auto; } /* ADMIN PAGE */ #admin_page_container { margin-top: 30px; } #admin_page_container #admin_side_nav_column { padding-right: 0; } #admin_page_container #admin_side_nav { color: #fff; } #admin_page_container .nav-stacked>li+li{margin-top:6px;} #admin_page_container #admin_side_nav li a { border-radius: 0; background:rgba(0,0,0,0.75);} #admin_page_container #admin_side_nav li a:focus, #admin_page_container #admin_side_nav li a:hover { background: #fff; color: #000; } #admin_page_container #admin_side_nav li.active { } #admin_page_container #admin_side_nav li.active a { color: #000; background: #fff;} #admin_page_container #admin_content_column { background: #fff; min-height: 400px; font-size: 12px; position: relative;} #admin_page_container #admin_content_column h1 { /*color: #c41e17;*/ margin: 10px 0; } #admin_page_container #admin_content_column span { color: #000; vertical-align: middle; /*line-height: 3;*/ } #admin_page_container #admin_content_column span a { color: #c41e17; text-decoration: underline; } #admin_page_container #admin_content_column .voji-comment-add-bullseye span { color: #fff; } .login-page input { color: black; } #business-fields{display:none;} .profile-page .user-avatar-holder{margin-top:30px;} .profile-page .user-avatar-holder.big{margin-top:0;} .profile-page .user-avatar-holder .user-avatar { font-size: 20px; width: 50px; height: 50px; line-height: 50px; padding: 0; margin: 0; color: #727272; border: 2px solid #727272; text-align: center; background: #d7d7d7; display: inline-block; } .profile-page .user-avatar-holder.big .user-avatar{font-size:50px;height:190px;width:190px;line-height:190px;} .profile-page .user-avatar-edit{line-height:86px;padding-left:15px;font-size:16px;} #view-profile-page{margin-top:18px;} .profile-page a{font-weight:700;} .profile-page #voji-stats-holder .voji-stats-label{font-size:12px;color:white;} .profile-page #voji-stats-holder .voji-stats-value{font-size:24px;color:white;} .profile-page #voji-content .voji-options #voji_functions li a{font-size:16px;} .profile-page .user-avatar-holder.big .user-avatar-name{float:left;margin-left:15px;} #admin_page_container #admin_content_column .user-avatar-name h1{color:black;font-size:40px;margin:28px 0 0!important;} .user-avatar-name span{display:block;} .user-avatar-name .college{font-size:18px;line-height:18px;} .user-avatar-name .occupation{font-size:24px;margin-top:20px;font-weight:600;} .user-avatar-name .location{font-size:14px;line-height:16px;} #profile-about{margin-top:40px;} #profile-about h1, .profile-page h1{color:black!important;margin:0!important;} #profile-vault{margin-top:40px!important;} .profile-page .profile_stats_holder img {float:left; margin-right:3px;} .profile-page .profile_stats_holder { float:left; margin-right:5px;} .profile-page .profile_stats_holder span { float:left; font-size:11px; margin-top:-3px; color:#f70019!important;} .profile-page .profile_stats_holder span span { font-size:16px;} #send-contact-request{margin-top:40px;} #profile-header{margin:-20px -15px 0;padding:15px 15px 0;} #profile-header .row{padding-bottom:20px;} .profile-page h3{font-weight:700;font-size:28px;margin-top:30px;} .profile-page .jumbotron{background:#eee;} #view-private-info span{color:white !important;} #private-info{padding:20px 40px;position:absolute;width:100%;z-index:10;} #private-info p{font-size:16px;margin:2px 0!important;} #private-info p span{font-weight:700;} #private-info{background:#e1e1e1;color:black;display:none;} .showPrivate{background:#404040;color:white!important;} .showPrivate #private-info{display:block;} .private-info-close-btn { position: absolute; top: 15px; right: 15px; } #admin_page_container #admin_content_column .showPrivate .user-avatar-name h1{color:white !important;} .showPrivate .user-avatar-name span{color:white !important;} .showPrivate .user-avatar-name .college{color:white !important;} .showPrivate .user-avatar-name .occupation{color:white !important;} .showPrivate .user-avatar-name .location{color:white !important;} /* MESSAGES */ .btn-transparent, .btn-transparent:hover, .btn-transparent:active, .btn-transparent:focus{background:transparent;color:white !important;border-color:white;border-radius:0;border-width:2px;} .text-white{color:white!important;} #create-message-btn{margin-top:22px;margin-right:-15px;} #addMessageBtn{padding:7px 16px;} #admin_page_container #voji_message{width:100% !important;} .message-threads{max-height:550px;overflow-x:hidden;overflow-y:scroll;} .chat-container{margin-left:-30px;padding-bottom:50px;} .chat-box{padding:0 20px;max-height:500px;overflow-y:scroll;} /* #user_id_list{max-height:300px;overflow-y:scroll;border-top:2px solid #c41e17;} */ #user_id_list li{float:left;display:inline;width:100%;border-bottom:1px solid #e1e1e1;background:#fff;} #user_id_list a{line-height:50px;display:block;padding:10px;} #user_id_list a:hover{background:#f1f1f1;} #user_id_list a:active, #user_id_list a:focus{text-decoration:none;} #user_id_list a.selected{background:#c41e17;color:white;} #user_id_list .user-avatar-holder{width:50px;float:left;margin-right:15px;} #addmessagethreadform label{padding-left:10px;font-size:16px;} #admin_page_container #addmessagethreadform .voji-comment-add-section #createVojiBtnList{right:86px;} /*#admin_page_container .chat-container .voji-comment-add-section{left:-15px;}*/ /* GLOBAL FORM STYLING */ .profile-page .form-group{background:#dfdfdf;height:50px;} .profile-page input::-webkit-input-placeholder{color:black;} .profile-page input:-moz-placeholder{color:black;} .profile-page input::-moz-placeholder{color:black;} .profile-page input:-ms-input-placeholder{color:black;} .form-control{background:#dfdfdf;box-shadow:none;border:none;border-radius:0;padding:14px 12px;height:50px;font-weight:700;font-size:16px;color:black;} .input-group-addon{background:#dfdfdf;border:none;} .profile-page .btn{border-radius:0;} .profile-page .btn-success{background: #6EC147; color: #fff!important; } .profile-page .btn-default, .profile-page .btn-default:hover, .profile-page .btn-default:active, .profile-page .btn-default:focus, .profile-page .btn-default:hover{background-color:black!important;color:white!important;border-radius:0;border:none;} #admin_page_container { color: #343935; } #admin_page_container .panel-group .panel { width: 100%; margin-top: 5px; } #admin_page_container .tab-content .nav-tabs li a { color: #555; } #admin_page_container .panel-body tr + tr td { border-top: 1px solid #ddd; } #admin_page_container .panel-body tr + tr.collapse td { border: none; } #admin_page_container .panel.panel-default { width: 100%; } #admin_page_container .panel-heading th, #admin_page_container .panel-body td { padding: 0.6rem; vertical-align: top; /* Override default table cell align */ } #admin_page_container a { color: inherit; /* Override default link color */ } #admin_page_container .panel-heading a { position: relative; /* Positioning context for pseudo-element sort indicators */ text-decoration: underline; } #admin_page_container .panel-heading a::before { /* Add placeholder element for Up/Down sort indicators: */ content: " "; display: block; position: absolute; left: 0; width: 1em; border: 0.5em solid transparent; } #admin_page_container .panel-heading a.ASC, #admin_page_container .panel-heading a.DESC { padding-left: 1.2em; /* Make room for sort indicators */ } #admin_page_container .panel-heading a.ASC::before { border-color: transparent transparent #777 transparent; top: -0.05em; } #admin_page_container .panel-heading a.DESC::before { border-color: #777 transparent transparent transparent; top: 0.4em; } #admin_page_container .btn-group-xs > .btn, .btn-xs { font-size: 90%; /* Override default bootstrap button font sizes */ } #admin_page_container .btn-block + .btn-block { margin-top: 4px; /* Override default bootstrap button spacing */ } #admin_page_container .btn-default { /*background-color: #f5f5f5;*/ } #admin_page_container .btn-default.active, #admin_page_container .btn-default.focus, #admin_page_container .btn-default:active, #admin_page_container .btn-default:focus, #admin_page_container .btn-default:hover, #admin_page_container .open > .dropdown-toggle.btn-default { background-color: #eee; /* Override default bootstrap bkgr color */ } #admin_page_container #admin_manage_users a { text-decoration: underline; } #admin_page_container #admin_manage_users .btn-danger, #admin_page_container #admin_manage_users .btn-default { text-decoration: none; color: #fff; } #admin_page_container #admin_manage_users .btn-default { color: inherit; margin-left: 1em; vertical-align: inherit; } #admin_page_container #admin_manage_users .user_voji_list th { text-align: center; } #admin_page_container #admin_manage_users .collapse .loading { display: block; margin: 0 auto; background: #999; text-align: center; background: #999 none repeat scroll 0% 0%; height: 100px; width: 100px; line-height: 100px; border-radius: 100%; } #admin_page_container #admin_manage_users a.collapsed { /* text-decoration: none;*/ } #admin_page_container #admin_manage_users .user_voji_list { width: 100%; } #admin_page_container #admin_manage_users .user_voji_list td:first-child { width: 35%; /* Set width of video/image container */ } #admin_page_container #admin_manage_users .user_voji_list video, #admin_page_container #admin_manage_users .user_voji_list .voji-player { width: 100%; background-color: transparent; } #admin_page_container #admin_manage_users .search_str { font-weight: bold; vertical-align: inherit; } /* VERTICAL TAB LAYOUTS */ #admin_page_container .page-heading h1, #admin_page_container .page-heading h2 { margin: 20px 0 10px; line-height: 1em; color: #fff; } #admin_page_container .page-heading > div.right { text-align: right; // Context for abs positioning } #admin_page_container .page-heading .btn { position: relative; bottom: 0; margin-top: 30px; border-radius: 0; border-width: 2px; border-color: #fff; background-color: transparent; color: #fff; } #admin_page_container .page-heading .btn:hover { background-color: rgba(159,23,15,0.5); } /* TERMS PAGE */ #terms_of_use ol li ol{list-style-type: upper-alpha;} #terms_of_use #Second13{position:relative; margin-left:-2.2%;} /* FOOTER */ #footer{background:white;margin:40px 0 0px 0px;} #footer ul{list-style:none;padding:0;margin:15px 0;width:100%;text-align:center;} #footer ul li{border-right:1px solid #e2231a;display:inline;} #footer ul li:last-child{border:none;} #footer a{color:#e2231a;text-transform:uppercase;padding:0 20px;font-size:18px;font-weight:500;} /* LOGIN */ .login-page .well { text-align: left; } .login-page .well h1 { color: #ff0000; margin: 0 0 15px 0; text-align:left; } .login-page .well .form-group { text-align: left; } .login-page .well .form-group label { color: #ff0000; } .login-page .well .form-group input { color: #000; opacity: 1; } .login-page .well p { color: #000; margin: 12px 0 0 0; } .login-page .well p a { color: #000; text-decoration: underline; } .login-page .well .checkbox { margin: 15px 0; } .login-page .well .checkbox label { color: #000; } .login-page .well .required { border: 2px solid #ff0000; } .login-page button.btn{border-radius:0;} #createAccountForm button.btn{margin-top:22px;} /* PROFILE */ .profile-page{padding-top:20px;} .profile-page .well { background: rgba(0,0,0,0.7); border: none; border-radius: 0; text-align: center; } .profile-page .well .avatar { margin: 0 auto; } .profile-page #profile_stats_section { } .profile-page #profile_stats_section .row { padding: 0; } .profile-page #profile_stats_section .profile_stats_holder { padding: 0; height: auto; color: #fff; text-align: center; border: none; background: none; } .profile-page #profile_stats_section .profile_stats_holder span { font-size: 12px; font-weight: 200; line-height: 1; margin-top: 2px; display: block; } .profile-page #profile_stats_section .profile_stats_holder span span { display: inline-block; } .profile-page #profile_stats_section .profile_stats_holder a { color: #fff; text-decoration: none; } .profile-page #profile_stats_section .profile_stats_holder i { display: block; font-size: 24px; margin: 0 0 5px 0; } .profile-page #profile_stats_section .profile_stats_holder img { height: auto; width: auto; max-width: 100%; max-height: 24px; vertical-align: middle; margin: 0 0 5px 0; } .profile-page #profile_stats_section button { padding: 9px 5px; width: 100%; border: none; } .profile-page #profile_stats_section .notifications_btn { color: #fff; } /* VOJI FILTER */ #vojiFilterRow { padding: 15px 0; } .voji-filter-holder { } .voji-filter-holder img { height: 30px; width: auto; margin: 0 5px 0 0; } .voji-filter-holder ul { list-style: none; padding: 0; margin: 0; z-index: 1000; text-align: left; } .voji-filter-holder ul li { font-size: 16px; font-weight: 200; padding: 10px; /*color: #fff;*/ background: none; line-height: 30px; border: none; display: inline-block; cursor: pointer; text-transform: uppercase; } .profile-page .voji-filter-holder ul li{display:block;} #profile-filter li{display:inline-block;} .voji-filter-holder ul li.active { font-weight: 500; } .voji-filter-holder ul li:last-child { border: none; } #vojiFilterRowMobile { padding: 15px 0; position: relative; } #vojiFilterRowMobile .col-xs-6 { position: initial; } #vojiFilterRowMobile .voji-filter-holder ul { position: absolute; top: 60px; left: 15px; right: 15px; } #vojiFilterRowMobile .voji-filter-holder ul li { padding: 10px; color: #757575; background: #ededed; line-height: 30px; border-bottom: 1px solid #ddd; display: block; } #vojiFilterRowMobile .voji-filter-holder ul li.active { color: #ff0000; } .voji-filter-dropdown>.active>a, .voji-filter-dropdown>.active>a:focus, .voji-filter-dropdown>.active>a:hover{background:#e1e1e1;} /* HOMEPAGE */ #homepage-top-nav { position: absolute; top: 0px; right: 30px; z-index: 2; width: 100%; } #homepage-top-nav > li { float: right; } #homepage-top-nav > li > a { color: #ff0000; } #homepage-particle-container { background: #fff; text-align: center; position: relative; overflow: hidden; min-height:55em;} #homepage-particle-container #particles-js { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 0; } #homepage-particle-container img { max-width: 100%; z-index: 1; position: relative; } #homepage-particle-container #homepage-voji-logo { } #homepage-particle-container #homepage-main-arrow { display: block; overflow: hidden; } #homepage-particle-container #homepage-main-arrow img { margin: 30px 0; } #homepage-particle-container button { font-size: 22px; font-weight: 700; display: block; width: auto; margin: 0 auto; margin-top: -60px; background: #ff0000; color: #fff; position: relative; z-index: 2; } #homepage-quickview-container.hasContent { margin-top: 45px; } #affixed_nav { width: 100%; top: 0; z-index: 2; -webkit-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); -moz-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.58); } #affixed_nav .navbar { background: #ff0000; border: none; border-radius: 0; } #affixed_nav .navbar .navbar-brand img { max-height: 75px; width: auto; } #affixed_nav .navbar .nav > li > a { font-size: 18px; color: #fff; margin: 32px 0px 29px 5px; padding: 10px; } #affixed_nav .search-btn { margin: 32px 0px 29px 5px; padding: 10px; } .createVojiBtnHolder, #createVojiBtnHolder { text-align: right; } .createVojiBtnHolder a, #createVojiBtnHolder a { display: block; } .createVojiBtnHolder a img, #createVojiBtnHolder a img { float: right; } .voji-modal .modal-header { padding: 5px 15px; border: none; } .voji-modal .modal-header .close { font-size: 32px; color: #ff0000; opacity: 1; float: none; margin: 0; position: absolute; top: 0; right: 15px; } #get-app-modal .modal-body h2 { font-size: 30px; font-weight: 400; margin: 0 0 30px 0; color: #ff0000; text-align: center; text-transform: none; } #get-app-modal .modal-body img { display: block; margin: 0 auto; } #purchase-modal .modal-body h2 { font-size: 30px; font-weight: 400; margin: 0 0 30px 0; color: #ff0000; text-align: center; text-transform: none; } #purchase-modal .modal-body img { display: block; margin: 0 auto; } #top-nav .navbar-nav > .user-avatar-li { width: 50px; } #top-nav .navbar-nav > .user-avatar-li a { margin: 18px 0; padding: 0 0 0 5px; width: 100%; text-align: center; } #affixed_nav .navbar .navbar-nav > .user-avatar-li { width: 50px; } #affixed_nav .navbar .navbar-nav > .user-avatar-li a { margin: 27px 0 24px 0; padding: 0 0 0 5px; width: 100%; text-align: center; } .user-avatar { width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% !important; } /* WHIRLY CSS */ #vojiGridLoader { display: block; text-align: center; padding: 40px 0; margin: 0 0 30px 0; height: 100px; } #vojiLoadMoreGridLoader { display: block; text-align: center; padding: 40px 0; margin: 0 0 30px 0; height: 100px; } #vojiLoadMorePeopleSearchLoader { display: block; text-align: center; padding: 40px 0; margin: 0 0 30px 0; height: 100px; } /*Added css for image preview*/ #imagePreview { width: 180px; height: 180px; background-position: center center; background-size: cover; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3); display: inline-block; } /* Profile Settings */ .notification-checkbox label{ color: black; } #admin_page_container #admin_content_column label { color: #c41e17; margin: 10px 0; } #admin_page_container #admin_content_column p { color: black; margin: 10px 0; } #admin_page_container #admin_content_column .my_comment_item p, #admin_page_container #admin_content_column .my_comment_item p span{color:white;} /*#admin_page_container #admin_content_column .voji_comment_text p span { color: #fff; }*/ #admin_page_container #admin_content_column .voji_comment_voji p { margin: 0; } #statusMsg{ color:#999999 !important;} .form-validation-error{ color: #a94442;} table.notification-table{ color:#000 !important; font-size:16px; font-weight:700; } /* ALERTS */ .content-mid { margin:20px 0px 0px 0px; } .alert.alert-message, .contact-list { background:#FFF; color:#333; border-radius:0px; margin:0px auto 10px auto; width:100%; } .alert.alert-message a,visited:link, .contact-list a,visited:link { color:#333; text-decoration:none;} .user-photo { float:left;} .a-message, .a-message-title { float:left; font-weight:600;} .a-message, .time{padding-top:0;white-space:nowrap;overflow:hidden;line-height:46px;} .time { float:right; } .alert-message .close-icon .close { background:#fb0e1c; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; color:#FFF; text-align:center; opacity:1; font-family:Awesome; font-weight:normal; } .alert-message .close-icon { margin-top:0px;} .alert-message a.close { color:#FFF;} .main-view { padding-left:0px; padding-right:0px;} /*CONTACTS */ .contact-list .profile_stats_holder img {float:left; margin-right:6px;} .contact-list .voji_plays_holder.profile_stats_holder, .contact-list .profile_stats_holder { display:inline-block; } .contact-list .profile_stats_holder span { float:left; margin-top:-5px; color:#f70019; font-weight:400;} .contact-list .profile_stats_holder span span { font-weight:700;} .icons { padding-top:10px;} .contact-list .col-md-4.col-sm-12.col-xs-12, .col-md-4.col-sm-8.col-xs-12.icons, .col-md-4.col-sm-4.col-xs-12.btns { padding-left:0px; padding-right:0px;} .btn.send-message { background:#727272; color:#FFF; font-weight:bold; margin-top:1px; border-radius:0px !important; padding:11px 12px 10px 12px;} .load-more { padding-top:30px; text-align:center; margin-left:auto; margin-right:auto;} .loadmorebtn { margin-top:30px; border:3px solid #FFF; padding:5px 20px; text-align:center; background:none; font-size:22px; } .c-search input { text-align:left; border:3px solid #FFF; padding:5px 14px; color:#FFF; font-size:22px; text-transform:capitalize; background:none; outline:none; } .c-heading { float:left; text-transform:uppercase; font-size:38px; margin-left:8px; margin-top:0px; margin-bottom:0px; padding-top:4px;} .a-heading { text-transform:uppercase; font-size:38px; margin-top:0px; margin-bottom:4px;} .pagination-view { width:255px; margin:0px auto; text-align:center;} .create-btn { border:3px solid #FFF; background:none; color:#FFF; border-radius:0 !important; font-size:18px; font-weight:bold; margin-right:-15px; } .tab-con { background:#FFF; padding:20px 0px; color:#000; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background:#FFF !important; color:#000;} .nav-pills>li>a { background:url(../images/nav-bg.png) repeat-x; width:100%; border-radius:0px !important;} .search { background:#000; width:100%; position:absolute;top:0px; left:0px; min-height:86px; z-index: 2;} .search.hasResults { position: fixed; overflow-y: scroll; height: 100%; bottom: 0; } .search input[type="text"] {background:none; border:none; outline:none; float:left; margin:30px 0px 0px 15px; padding:6px; font-weight:600; font-size:16px; } #search-bar .voji-masonry{float:left;width:100%;} .search-close, .search-close.close { color:#FFF !important; font-size:30px; margin:37px 15px 0px 0px; opacity:1; } .s-list { float:right; text-align:right; margin:40px 0px;} .s-list li { float:left; display:inline; cursor:pointer; font-size:16px;} .s-list li a,visited:link { color:#FFF; font-weight:300; text-decoration:none;} .search-btn { cursor:pointer; margin:40px 0px 0px 14px; float:right;} .s-list li a.active { font-weight:600;} .voji-search .modal-content { background:#000; box-shadow:none !important; border:none; border-radius:0px;} .voji-search .modal-header { border-bottom:0px !important; background:white;} .voji-search .modal-header .close{color:#f70019;font-size:36px;} .voji-search .c-search{margin-bottom:15px;} .contact-request { float:left;} .modal-header .close { color:#FFF; opacity:1;} .modal.voji-search .modal-body { padding:0px !important;background:#f70019;} .modal.voji-search .modal-title{font-weight:700;color:#f70019;} .modal.voji-search .a-message { width: calc(100% - 40px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .modal.voji-search .a-message a{font-size:18px;} .modal.voji-search .user-photo{width:40px;} .modal.voji-search .loadmorebtn{margin-bottom:30px;color:white;} .modal.voji-search .loadmorebtn:hover{color:#333;} .modal.voji-search .loadmorebtn:hover, .modal.voji-search .loadmorebtn:active, .modal.voji-search .loadmorebtn:focus { background: none; color: #333; border-color: #fff; } .user-photo img { width:100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .avatar-icon img { width:100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .col-1 { float:left; } .col-2 { float:left; } .col-3 { float:left;} .user, .user-photo { float:left;} .user-photo { padding-bottom:6px;} .user-photo-default { width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% !important; } .user-photo-voji { width:100%; } /*search input placeholder*/ .c-search input::-webkit-input-placeholder { color: #FFF; } .c-search input::-moz-input-placeholder { /* Firefox 18- */ color: #FFF; opacity:1; } .c-search input::-moz-placeholder { /* Firefox 19+ */ color: #FFF; opacity:1; } .c-search input::-ms-input-placeholder { color: #FFF; opacity:1; } /*header navigation styles */ .navbar-brand img { max-height:55px;} table.notification-table>tbody>tr{} table.notification-table>tbody>tr>td{padding:14px 8px;border:none;border-bottom:6px solid white;background:#f1f1f1;} /* MICROSITE NAV STYLING */ .nav > li { z-index: 3; } .nav li.microsite-list-holder { width: 70px; height: 100px; position: relative; z-index: 2; } .nav li.microsite-list-holder .menu-open-button .fa { font-size: 45px; line-height: 60px; color: #fff; vertical-align: text-bottom; } .nav li.microsite-list-holder.opened { z-index: 4; } .nav li.microsite-list-holder .menu { /* -webkit-filter: url("#shadowed-goo"); filter: url("#shadowed-goo"); */ } .microsite-list-holder.opened .menu { background: #ff0000; } .menu-item, .menu-open-button { background: white; border-radius: 100%; width: 60px; height: 60px; margin-left: -40px; position: absolute; right: 0; top: 20px; color: white; text-align: center; line-height: 80px; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: -moz-transform ease-out 200ms; -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-item .fa { font-size: 40px; line-height: 60px; color: #727272; vertical-align: text-bottom; } .menu-open { display: none; } .nav li.microsite-list-holder .menu { position: absolute; left: auto; right: 0; margin-left: -80px; padding-top: 20px; padding-left: 80px; width: 1000px; height: 100px; box-sizing: border-box; font-size: 20px; text-align: right; } .menu-item:hover { background: white; color: white; } .menu-item:nth-child(3) { -moz-transition-duration: 180ms; -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(4) { -moz-transition-duration: 180ms; -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(5) { -moz-transition-duration: 180ms; -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-item:nth-child(6) { -moz-transition-duration: 180ms; -webkit-transition-duration: 180ms; transition-duration: 180ms; } .menu-open-button { background: #ff0000; z-index: 2; -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition-duration: 40ms; -webkit-transition-duration: 400ms; transition-duration: 400ms; -moz-transform: scale(1.1, 1.1) translate3d(0, 0, 0); -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .menu-open-button:hover { /* -moz-transform: scale(1.2, 1.2) translate3d(0, 0, 0); -webkit-transform: scale(1.15, 1.15) translate3d(0, 0, 0); transform: scale(1.15, 1.15) translate3d(0, 0, 0); */ } .menu-open:checked + .menu-open-button { background: #000; -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; transition-timing-function: linear; -moz-transition-duration: 200ms; -webkit-transition-duration: 200ms; transition-duration: 200ms; -moz-transform: scale(0.8, 0.8) translate3d(0, 0, 0); -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .menu-open:checked ~ .menu-item:nth-child(3) { -moz-transition-duration: 190ms; -webkit-transition-duration: 190ms; transition-duration: 190ms; -moz-transform: translate3d(-65px, 0, 0); -webkit-transform: translate3d(-65px, 0, 0); transform: translate3d(-65px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { -moz-transition-duration: 290ms; -webkit-transition-duration: 290ms; transition-duration: 290ms; -moz-transform: translate3d(-130px, 0, 0); -webkit-transform: translate3d(-130px, 0, 0); transform: translate3d(-130px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { -moz-transition-duration: 390ms; -webkit-transition-duration: 390ms; transition-duration: 390ms; -moz-transform: translate3d(-195px, 0, 0); -webkit-transform: translate3d(-195px, 0, 0); transform: translate3d(-195px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { -moz-transition-duration: 490ms; -webkit-transition-duration: 490ms; transition-duration: 490ms; -moz-transform: translate3d(-260px, 0, 0); -webkit-transform: translate3d(-260px, 0, 0); transform: translate3d(-260px, 0, 0); } #top-nav li.microsite-list-holder { height: 80px; } #top-nav .menu { height: 80px; } #top-nav .microsite-list-holder.opened .menu { background: none; } #top-nav .menu-item, #top-nav .menu-open-button { top: 10px; } #add-microsite-modal h2 { font-size: 24px; font-weight: 600; color: #ff0000; text-align: center; } #add-microsite-modal p { font-size: 16px; font-weight: 500; color: #ff0000; text-align: center; } #add-microsite-modal a { color: #ff0000; text-decoration: underline; } /* Events Styling */ h4.event_time { font-size: 20px; } @media (max-width: 1200px){ #affixed_nav .navbar .nav > li > a { font-size: 16px; margin: 35px 0 26px 0; padding: 10px 5px; } #affixed_nav .search-btn { margin: 35px 0px 26px 0; padding: 10px 5px; } #affixed_nav .navbar .navbar-nav > .user-avatar-li a { margin: 30px 0 26px 0; } .nav li.microsite-list-holder .menu { width: 900px; } #homepage-graphic-container h1 { font-size: 60px; } #vojiFilterRow .voji-filter-holder ul li { padding: 10px 5px; } } @media (max-width: 1100px){ .nav li.microsite-list-holder .menu { width: 800px; } } @media (max-width:991px){ #top-nav .navbar-nav>li>a { font-size: 14px; margin: 40px 5px; } #top-nav .search-btn { margin: 40px 5px; } #top-nav .navbar-brand>img { max-height: 75px; width: auto; } #top-nav .navbar-nav > .user-avatar-li a { margin: 27px 0; } #affixed_nav .navbar .nav > li > a { font-size: 14px; margin: 40px 5px; padding: 0; } #affixed_nav .search-btn { margin: 40px 5px; padding: 0; } #affixed_nav .navbar .navbar-nav > .user-avatar-li a { margin: 28px 0 26px 0; } .nav li.microsite-list-holder .menu { width: 550px; } /* VOJI PAGE */ .view-voji-modal .modal-dialog { width: 95%; margin: 40px auto; } .voji-options h2{font-size: 20px;} #admin_page_container #admin_content_column{margin:40px 8.33333333% 0;} .profile-page .user-avatar-holder.big .user-avatar{float:none!important;width:110px;height:110px;margin:-65px auto 10px;border:5px solid white;} .profile-page .user-avatar-holder.big .user-avatar-name{text-align:center;margin:0;width:100%;margin-bottom:22px;} #admin_page_container #admin_content_column .user-avatar-name h1{margin-top:0!important;font-size:30px;} .user-avatar-name .college i{display:inline!important;} #profile-header .row{padding:10px 0;} } @media (min-width: 992px) and (max-width:1023px){ .modal-lg { width: 900px;} } @media (min-width: 1024px) and (max-width:1100px){ .modal-lg { width: 1020px; } } @media (min-width: 1101px){ .modal-lg { width: 1100px;} } @media (min-width: 1000px){ .col-1 { width:27%; padding-left:0px; padding-right:0px; } .col-2 { width:46%; text-align:center;padding-left:0px; padding-right:0px;} .col-3 { width:27%; padding-bottom:6px; padding-left:0px; padding-right:0px;} .a-message, .time { padding:0 5px 0px 7px; font-size:24px; } .a-message-title { padding:13px 5px 0px 7px; font-size:24px; } } @media (min-width: 768px) and (max-width:999px) { .col-1 { width:26%; padding-left:0px; padding-right:0px; } .col-2 { width:54%; text-align:center;padding-left:0px; padding-right:0px;} .col-3 { width:20%; padding-bottom:6px; padding-left:0px; padding-right:0px;} .a-message, .a-message-title {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top:5px; padding:5px 5px 0px 5px; font-size:20px;} .a-message { width:110px;} .a-message-title { width:200px;} .time { padding:9px 5px 0px 5px; font-size:20px; } } @media (min-width: 768px) { .btns { float:right; text-align:right; } .iocns .profile_stats_holder img { width:30px; float:left; margin-right:3px;} .c-search, .create-btn {float:right; margin-top:0px;text-align:right;} .s-list li { padding:0px 20px 0px 0px; } .user-photo, .avatar-icon { width:40px;} .user-photo img, .avatar-icon img { width:100%; height:40px; overflow:hidden;} .contact-list .voji_plays_holder.profile_stats_holder, .contact-list .voji_revoji_holder, .contact-list .voji_views_holder { margin-right:4%;} .contact-list { padding: 10px 0; } .alert.alert-message { padding:6px; } .icons { margin-right:-50px; } .contact-list .profile_stats_holder span { font-size:14px; } .contact-list .profile_stats_holder span span { font-size:18px; } .user, .user-photo { width:50px;} .alert-message .close-icon .close { width:50px; height:50px; line-height:50px; font-size:26px; } .alert-message .close-icon { margin-top:0px;} .btn.send-message { background:#727272; } } @media (max-width: 767px){ #top-nav .navbar-collapse { clear: both; } #top-nav .navbar-collapse ul { float: none !important; } #top-nav .navbar-nav > .user-avatar-li { width: 100px; display: block; margin: 0 auto; } #top-nav .navbar-nav > .user-avatar-li a { margin: 0; padding: 5px; } .navbar-collapse .nav > li { width: 100%; float: none; text-align: center; } .navbar-collapse .nav > li img { max-width: 100%; display: block; margin: 0 auto; } #top-nav .navbar-nav>li>a { font-size: 18px; margin: 0; padding: 5px; } #top-nav .search-btn { margin: 0; padding: 5px; float: none; } #affixed_nav .navbar-collapse { clear: both; } #affixed_nav .navbar-collapse .navbar-nav { float: none !important; width: 100%; margin: 0; height: auto; max-height: 250px; overflow: scroll; } #affixed_nav .navbar .nav > li > a { font-size: 18px; margin: 0; padding: 5px; } #affixed_nav .search-btn { margin: 0; padding: 5px; float: none; } #affixed_nav .navbar .navbar-nav > .user-avatar-li { width: 100px; display: block; margin: 0 auto; } #affixed_nav .navbar .navbar-nav > .user-avatar-li a { margin: 0; padding: 5px; } #homepage-top-nav > li > a { margin: 25px 10px; } #homepage-graphic-container { height: 600px; } #homepage-graphic-container h1 { font-size: 48px; top: 230px; } .view-voji-modal .modal-dialog .modal-body #voji-player img { margin: 0 auto; } #createVojiBtnHolder a img { float: none; max-width: 100%; width: auto; margin: 0 auto; } /* VOJI PAGE */ .jumbotron.voji_card{border-radius: 0;height:auto;padding:30px 15px 15px 15px;position:relative;} #voji-player{float:none;display:block;width:auto;height:auto;max-width:100%;max-height:350px;} #voji-player video{display:block;width:auto;height:auto;max-width:100%;max-height:350px;margin:0 auto;} #voji-content{float:none;display:block;width:auto;height:auto;max-width:100%;position:initial;} #voji-content .avatar-holder{width:100%;display:block;float:none;margin:0;} #voji-content h2.voji-title { margin: 0; } #voji-content .voji-title-info-holder{width:100%;display:block;float:none;margin:0;} #voji-content .voji-content-centered-area { padding: 30px 15px; } #voji-content .quickview-close-btn { top: 5px; right: 5px; } #voji-content .voji-options{float:none;display:block;width:100%;margin: 0; text-align: center;} #voji-content .voji-options .avatar{margin: 0 auto; display: block;} #voji-stats-holder{position:relative;display:block;width:100%; height: auto; padding-top: 6px; text-align:center;} #voji-stats-holder .voji-stats-icon { /*width: 10%;*/ } #voji-stats-holder > .row > .col-xs-6 { margin: 10px 0 0 0; } #voji-stats-holder > div { position: relative; display: inline-block; top: 0 !important; width: 20%; } #voji-stats-holder .voji-stats-value { } .voji_card_header h2.voji-title { margin: 0; max-width: 75% } .voji_card_header .quickview-close-btn { right: 0; } .view-voji-modal .modal-dialog .modal-body .voji_card_header h2 { width: 100%; } .view-voji-modal .modal-dialog .modal-body .voji_card_header button { width: 100%; } #voji-content .voji-creator-info { height: auto; } #voji-content #voji_functions { height: auto; } #voji-content .voji-creator-info .voji-author-link { font-weight: 500; } #voji-content .voji-remove-holder { top: calc(50% - 6px); } /* ADMIN PAGE */ #admin_page_container { padding-right: 15px; } #admin_page_container #admin_side_nav_column { padding-right: 15px; } .item { width: 49%; } .gutter-sizer { 1% } #homepage-particle-container button { margin-top: -30px; } #saveSection #edit_voji_preview_section { width: 100%; float: none; display: block; padding: 5px; } #saveSection #edit_voji_info_section { width: 100%; float: none; display: block; padding: 5px; } #saveSection #edit_voji_thumbnail_section { width: 100%; float: none; display: block; padding: 5px; } #saveSection #edit_voji_buttons_section { padding: 5px; margin: 0; overflow: hidden; display: block; background: #fff; clear: both; } #admin_page_container #admin_content_column { margin: 40px 0; } .icons { text-align:left; margin-top:5px; } .a-message, .a-message-title { font-size:20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:200px; } .a-message { padding:5px 5px 0px 5px; } .nav .menu-item .fa { line-height: 80px; } .nav li.microsite-list-holder { height: 110px; } .nav li.microsite-list-holder .menu { height: 110px; } .nav li.microsite-list-holder.opened { height: 260px; } .nav li.microsite-list-holder.opened .menu { height: 260px; } .nav li.microsite-list-holder .menu-open-button .fa { line-height: 80px; } .nav li.microsite-list-holder .menu { margin: 0; padding: 0; width: 100%; } .nav li.microsite-list-holder .menu-item, .nav .microsite-list-holder .menu-open-button { width: 80px; height: 80px; top: 10px; left: 50%; margin-left: -40px; right: auto; } .menu-open:checked ~ .menu-item:nth-child(3) { -moz-transform: translate3d(0, 75px, 0); -webkit-transform: translate3d(0, 75px, 0); transform: translate3d(0, 75px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { -moz-transform: translate3d(0, 160px, 0); -webkit-transform: translate3d(0, 160px, 0); transform: translate3d(0, 160px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { -moz-transform: translate3d(0, 245px, 0); -webkit-transform: translate3d(0, 245px, 0); transform: translate3d(0, 245px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { -moz-transform: translate3d(0, 330px, 0); -webkit-transform: translate3d(0, 330px, 0); transform: translate3d(0, 330px, 0); } #top-nav li.microsite-list-holder { height: 100px; } #top-nav li.microsite-list-holder .menu { height: 100px; } #top-nav li.microsite-list-holder.opened { height: 260px; } #top-nav li.microsite-list-holder.opened .menu { height: 260px; } } @media (min-width: 481px) and (max-width:767px) { .contact-list .profile_stats_holder img { width:25px; margin-right:2px;} .c-search {float:right; text-align:right; max-width:220px;} .c-search input { text-align:left; border:3px solid #FFF; width:100%; } .s-list li { padding:0px 8px 0px 0px; } .user, .user-photo, .avatar-icon { width:40px;} .user { margin-bottom:4px;} .avatar-icon img { width:100%; height:40px; overflow:hidden;} .contact-list .voji_plays_holder.profile_stats_holder, .contact-list .voji_revoji_holder, .contact-list .voji_views_holder { margin-right:2%;} .contact-list .profile_stats_holder span { font-size:14px; } .contact-list .profile_stats_holder span span { font-size:18px; } .contact-list { padding:6px 7px 2px 7px; } .alert.alert-message { padding:6px 7px 2px 7px; } .col-1 { width:96%; padding-left:0px; padding-right:0px; } .col-2 { width:73%; text-align:left;padding-left:3px; padding-right:0px;} .col-3 { width:25%; padding-left:0px; padding-right:0px; text-align:right; float:right;} .a-message, .a-message-title { margin-left:3px; font-size:20px;} .time {font-size:20px; padding:3px 6px;} .alert-message .close-icon .close { width:40px; height:40px; line-height:40px; font-size:22px; } .alert-message .close-icon { margin-top:-3px;} .btn.send-message { background:#727272; } .a-message-title { padding:5px 5px 0px 5px; } } @media (min-width: 481px) and (max-width:550px) { .col-3 { padding-right: 10px; text-align: left; float: left; } .col-2 { width:72%; text-align:left;padding-left:3px; padding-right:0px;} .contact-list .voji_plays_holder.profile_stats_holder, .contact-list .voji_revoji_holder, .contact-list .voji_views_holder { margin-right:1%; } } @media (max-width: 480px){ .a-message, .a-message-title {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-left:3px; width:200px;} .btns { float:left; text-align:left; margin-top:0px;} .u-name img { width:30px;} .a-message { margin-top:0px; } .a-message-title { padding:19px 5px 0px 5px; } .icons .profile_stats_holder img { width:20px; margin-right:2px;} .c-search {float:none; margin-top:20px; margin-bottom:6px; text-align:center; width:100%;clear:left; padding-left:15px; padding-right:15px; } .c-search input { text-align:center; border:3px solid #FFF; width:100%; } .s-list li { padding:0px 20px 0px 0px; } .search { height:229px;} .search input[type="text"] { width:100% !important; border:1px solid #666;} .user, .user-photo, .avatar-icon { width:35px;} .user { margin-top:17px;} .avatar-icon img { width:100%; height:35px; overflow:hidden;} .contact-list .voji_plays_holder.profile_stats_holder, .contact-list .voji_revoji_holder, .contact-list .voji_views_holder { margin-right:2%;} .contact-list .profile_stats_holder span { font-size:11px; } .contact-list .profile_stats_holder span span { font-size:15px; } .contact-list { padding:6px 7px 6px 7px; } .alert.alert-message { padding:6px 7px 6px 7px; } .col-1 { width:96%; padding-left:0px; padding-right:0px; } .col-2 { width:96%; text-align:left;padding-left:3px; padding-right:0px;} .col-3 { width:100%; padding-left:0px; padding-right:0px; background:#ff0606; margin-top:3px;} .time {font-size:16px; margin-top:-72px; font-weight:400; width:100%; display:block; text-align:right;} .alert-message .close-icon .close { width:24px; height:24px; line-height:24px; font-size:18px; } .alert-message .close-icon { margin-top:-5px; width:90%; display:block; float:right; text-align:right; } .a-heading, .c-heading { text-align:center; float:none; display:bolck;} .contact-header { padding-left:0px; padding-right:0px;} .btn.send-message { background:url("../images/m-message-icon.png") 10px center no-repeat; background-size:30px 30px; padding-left:50px; font-size:15px; } /* mobile header icons*/ .xs-show { display:block; float:none; clear:both;} .user-avatar-li.xs-show .m-avatar{ width:45px; float:left; margin-right:4px;} .user-avatar-li.xs-show .m-avatar-m{ width:45px; float:left; } .clear { clear:both;} #homepage-top-nav > li > a { margin: 25px 0 0 10px; padding: 0; } #homepage-graphic-container { height: 600px; } #homepage-graphic-container h1 { font-size: 42px; top: 230px; } #homepage-particle-container button { margin-top: 0; } #createVojiBtnHolder a img { width: 100%; } }