API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 18th, 2012
208
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 44.59 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>Post it</title>
  5. <link rel="shortcun icon" href="http://cdn1.iconfinder.com/data/icons/spirit20/post-it.png">
  6. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  7. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
  8. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAnMvBxXo9S2OX7r4UAYFk4RTWx8njL9qYLnq46LoOVGM6mIGTuxSw5Vy1t3-Mgam0NeNQzRbf5lkSpw"></script>
  9. <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
  11. <script type="text/javascript" src="http://rikrikrik.com/js/jquery.shortkeys.js"></script></head>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14.     var id = 1;
  15.    
  16.     $("#textinput").hide();
  17.     $("#sortPost").hide();    
  18.     $("#imginput").hide();
  19.     $(".add_post_button").click(function(){
  20.         $("#textinput").slideToggle(500);
  21.         $("#imginput").slideUp(500);
  22.         $("#sortPost").slideUp(500);
  23.         $(".help_info").fadeOut(1000);
  24.     });
  25.     $(".sort_by_button").click(function(){
  26.         $("#sortPost").slideToggle(500);
  27.         $("#textinput").slideUp();
  28.         $("#imginput").slideUp();
  29.         $(".help_info").fadeOut(1000);
  30.     });
  31.     $(".search_bar").focus(function(){
  32.         $("#textinput").slideUp(500);
  33.         $("#imginput").slideUp(500);
  34.         $("#sortPost").slideUp(500);
  35.         $(".help_info").fadeOut(1000);
  36.     });
  37.     $(".photoPost").click(function(){
  38.         $("#textinput").slideToggle(500);
  39.         $("#imginput").slideToggle(500);
  40.     });
  41.     $(".textPost").click(function(){
  42.         $("#imginput").slideToggle(500);
  43.         $("#textinput").slideToggle(500);
  44.     });
  45.     $(".text_submit_post").click(function(){
  46.         var currentTime = new Date();
  47.         var month = currentTime.getMonth() + 1;
  48.         var day = currentTime.getDate();
  49.         var year = currentTime.getFullYear();
  50.         var hours = currentTime.getHours();
  51.         var minutes = currentTime.getMinutes();
  52.         var ampm;
  53.         var randomBg = Math.floor((Math.random()*14)+1);
  54.         var positionTop = Math.floor((Math.random()*80));
  55.         var positionLeft = Math.floor((Math.random()*80));
  56.         var divnumber = Math.floor((Math.random()*10000));
  57.         var wh = Math.floor((Math.random()*100)+110);
  58.         var rotatedegree = Math.floor((Math.random()-0.5)*4);
  59.  
  60.         if($(".checkbox").is(':checked')){
  61.             var user = "Anonymous";
  62.         }
  63.         else{
  64.             var user = "User";
  65.         }
  66.  
  67.         if (minutes < 10){
  68.            minutes = "0" + minutes
  69.        }
  70.        if (hours > 12){
  71.             var ampm = "PM"
  72.         }
  73.         if (hours <= 12){
  74.            var ampm = "AM"
  75.        }
  76.  
  77.        var post = stripHTML($(".text_input").val())
  78.  
  79.        $("#header").append("<div class='postIt-" + id + "'><h style='font-weight: bold; font-size: 13px;'>" + user + "<br>" + month + "/" + day + "/" + year + " - " + (hours - 12) + ":" + minutes + " " + ampm + "</h><br><h style='font-size: 15px;'>" + post + "</h></div>");
  80.         $(".postIt-" + id).css("width",wh);
  81.         $(".postIt-" + id).css("height",wh);
  82.         $(".postIt-" + id).css("transform","rotate("+rotatedegree+"deg)");
  83.         $(".postIt-" + id).css("-moz-transform","rotate("+rotatedegree+"deg)");
  84.         $(".postIt-" + id).css("-webkit-transform","rotate("+rotatedegree+"deg)");
  85.         $(".postIt-" + id).css("top",positionTop+"%");
  86.         $(".postIt-" + id).css("left",positionLeft+"%");
  87.  
  88.         $(".postIt-" + id).css("position","absolute");
  89.         $(".postIt-" + id).css("min-height", "70px");
  90.         $(".postIt-" + id).css("min-width", "70px");
  91.         $(".postIt-" + id).css("max-height", "350px");
  92.         $(".postIt-" + id).css("max-width", "350px");
  93.         $(".postIt-" + id).css("display","block");
  94.         $(".postIt-" + id).css("border","1px solid #B8B8B8");
  95.         $(".postIt-" + id).css("text-overflow","ellipsis");
  96.         $(".postIt-" + id).css("margin","3px");
  97.         $(".postIt-" + id).css("overflow","hidden");
  98.         $(".postIt-" + id).css("font-family","'Open Sans', Helvetica, Arial, sans-serif");
  99.         $(".postIt-" + id).css("border-radius","3px");
  100.         $(".postIt-" + id).css("-webkit-border-radius","3px");
  101.         $(".postIt-" + id).css("-mox-border-radius","3px");
  102.         $(".postIt-" + id).css("cursor","move");
  103.         $(".postIt-" + id).css("z-index","1");
  104.         $(".postIt-" + id).css("padding","2px 4px 2px 4px");
  105.         $(".postIt-" + id).css("box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  106.         $(".postIt-" + id).css("-moz-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  107.         $(".postIt-" + id).css("-webkit-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  108.  
  109.         $(".postIt-" + id).draggable();
  110.         $(".postIt-" + id).resizable();
  111.  
  112.         if (randomBg == 1){
  113.             $(".postIt-" + id).addClass("bg_one");
  114.         }
  115.         if (randomBg == 2){
  116.             $(".postIt-" + id).addClass("bg_two");
  117.         }
  118.         if (randomBg == 3){
  119.             $(".postIt-" + id).addClass("bg_three");
  120.         }
  121.         if (randomBg == 4){
  122.             $(".postIt-" + id).addClass("bg_four");
  123.         }
  124.         if (randomBg == 5){
  125.             $(".postIt-" + id).addClass("bg_five");
  126.         }
  127.         if (randomBg == 6){
  128.             $(".postIt-" + id).addClass("bg_six");
  129.         }
  130.         if (randomBg == 7){
  131.             $(".postIt-" + id).addClass("bg_seven");
  132.         }
  133.         if (randomBg == 8){
  134.             $(".postIt-" + id).addClass("bg_eight");
  135.         }
  136.         if (randomBg == 9){
  137.             $(".postIt-" + id).addClass("bg_nine");
  138.         }
  139.         if (randomBg == 10){
  140.             $(".postIt-" + id).addClass("bg_ten");
  141.         }
  142.         if (randomBg == 11){
  143.             $(".postIt-" + id).addClass("bg_eleven");
  144.         }
  145.         if (randomBg == 12){
  146.             $(".postIt-" + id).addClass("bg_twelve");
  147.         }
  148.         if (randomBg == 13){
  149.             $(".postIt-" + id).addClass("bg_thirteen");
  150.         }
  151.         if (randomBg == 14){
  152.             $(".postIt-" + id).addClass("bg_fourteen");
  153.         }
  154.  
  155.         $("#textinput").slideUp(500);
  156.         $(".text_input").val("");
  157.         $(".checkbox").removeAttr("checked");
  158.         id++
  159.     });
  160.     $(".img_submit_post").click(function(){
  161.         var currentTime = new Date();
  162.         var month = currentTime.getMonth() + 1;
  163.         var day = currentTime.getDate();
  164.         var year = currentTime.getFullYear();
  165.         var hours = currentTime.getHours();
  166.         var minutes = currentTime.getMinutes();
  167.         var ampm;
  168.         var randomBg = Math.floor((Math.random()*14)+1);
  169.         var positionTop = Math.floor((Math.random()*80));
  170.         var positionLeft = Math.floor((Math.random()*80));
  171.         var wh = Math.floor((Math.random()*100)+110);
  172.         var rotatedegree = Math.floor((Math.random()-0.5)*4);
  173.        
  174.         if($(".checkbox").is(':checked')){
  175.                var user = "Anonymous";
  176.         }
  177.         else{
  178.             var user = "User";
  179.         }
  180.  
  181.         if (minutes < 10){
  182.            minutes = "0" + minutes
  183.        }
  184.        if (hours > 12){
  185.             var ampm = "PM"
  186.         }
  187.         if (hours <= 12){
  188.            var ampm = "AM"
  189.        }
  190.        var imgurl = $(".img_input").val()
  191.        var comment = $(".img_comment").val()
  192.  
  193.        $("#header").append("<div class='urlPost-" + id + "'><h style='font-weight: bold; font-size: 13px'>" + user + "<br>" + month + "/" + day + "/" + year + " - " + (hours - 12) + ":" + minutes + " " + ampm + "</h><br><a target='_blank' style='font-size: 15px'href='" + imgurl + "'><img onError=\"this.src='http://www.badhaven.com/wp-content/uploads/2012/04/image-not-found.gif';\" class='image_embed' src='" + imgurl + "'></a><a target='_blank' style='font-size: 13px'href='" + imgurl + "'>" + comment + "</a></div>");    
  194.         $(".urlPost-" + id).css("width",wh);
  195.         $(".urlPost-" + id).css("height",wh);
  196.         $(".urlPost-" + id).css("transform","rotate("+rotatedegree+"deg)");
  197.         $(".urlPost-" + id+ id).css("-moz-transform","rotate("+rotatedegree+"deg)");
  198.         $(".urlPost-" + id).css("-webkit-transform","rotate("+rotatedegree+"deg)");
  199.         $(".urlPost-" + id).css("top",positionTop+"%");
  200.         $(".urlPost-" + id).css("left",positionLeft+"%");
  201.  
  202.         $(".urlPost-" + id).css("position","absolute");
  203.         $(".urlPost-" + id).css("display","block");
  204.         $(".urlPost-" + id).css("min-height", "70px");
  205.         $(".urlPost-" + id).css("min-width", "70px");
  206.         $(".urlPost-" + id).css("max-height", "350px");
  207.         $(".urlPost-" + id).css("max-width", "350px");
  208.         $(".urlPost-" + id).css("border","1px solid #B8B8B8");
  209.         $(".urlPost-" + id).css("text-overflow","ellipsis");
  210.         $(".urlPost-" + id).css("margin","3px");
  211.         $(".urlPost-" + id).css("overflow","hidden");
  212.         $(".urlPost-" + id).css("font-family","'Open Sans', Helvetica, Arial, sans-serif");
  213.         $(".urlPost-" + id).css("border-radius","3px");
  214.         $(".urlPost-" + id).css("-webkit-border-radius","3px");
  215.         $(".urlPost-" + id).css("-mox-border-radius","3px");
  216.         $(".urlPost-" + id).css("cursor","move");
  217.         $(".urlPost-" + id).css("padding","2px 4px 2px 4px");
  218.         $(".urlPost-" + id).css("box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  219.         $(".urlPost-" + id).css("-moz-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  220.         $(".urlPost-" + id).css("-webkit-box-shadow","0px 0px 0px 3px rgba( 255,255,255,0.4 ), 0px 3px 9px rgba( 0,0,0,0.5 )");
  221.  
  222.         $(".urlPost-" + id).draggable();
  223.         $(".urlPost-" + id).resizable();
  224.  
  225.         if (randomBg = 1){
  226.             $(".urlPost-" + id).addClass("bg_one");
  227.         }
  228.         if (randomBg = 2){
  229.             $(".urlPost-" + id).addClass("bg_two");
  230.         }
  231.         if (randomBg = 3){
  232.             $(".urlPost-" + id).addClass("bg_three");
  233.         }
  234.         if (randomBg = 4){
  235.             $(".urlPost-" + id).addClass("bg_four");
  236.         }
  237.         if (randomBg = 5){
  238.             $(".urlPost-" + id).addClass("bg_five");
  239.         }
  240.         if (randomBg = 6){
  241.             $(".urlPost-" + id).addClass("bg_six");
  242.         }
  243.         if (randomBg = 7){
  244.             $(".urlPost-" + id).addClass("bg_seven");
  245.         }
  246.         if (randomBg = 8){
  247.             $(".urlPost-" + id).addClass("bg_eight");
  248.         }
  249.         if (randomBg = 9){
  250.             $(".urlPost-" + id).addClass("bg_nine");
  251.         }
  252.         if (randomBg = 10){
  253.             $(".urlPost-" + id).addClass("bg_ten");
  254.         }
  255.         if (randomBg = 11){
  256.             $(".urlPost-" + id).addClass("bg_eleven");
  257.         }
  258.         if (randomBg = 12){
  259.             $(".urlPost-" + id).addClass("bg_twelve");
  260.         }
  261.         if (randomBg = 13){
  262.             $(".urlPost-" + id).addClass("bg_thirteen");
  263.         }
  264.         if (randomBg = 14){
  265.             $(".urlPost-" + id).addClass("bg_fourteen");
  266.         }
  267.  
  268.         $("#imginput").slideUp(500);
  269.         $(".img_input").val("");
  270.         $(".checkbox").removeAttr("checked");
  271.  
  272.         id++;
  273.     });
  274.     $('.sort').click(function(){
  275.         if ($(this).hasClass('selected')){
  276.             return false;
  277.         }
  278.         else{
  279.             $('.selected').removeClass('selected');
  280.             $(this).addClass('selected');
  281.         }
  282.     });
  283.     $(".help_info_question_button").click(function(){
  284.         $(".help_info").fadeToggle(500);
  285.     });
  286.     $(document).shortkeys({
  287.     'N':       function () {
  288.         $('#textinput').slideToggle(500);
  289.         $("#imginput").slideUp(500);
  290.         $("#sortPost").slideUp(500);
  291.     }});
  292.     $(document).shortkeys({
  293.     'T':       function () {
  294.         $('#textinput').slideToggle(500);
  295.         $("#imginput").slideUp(500);
  296.         $("#sortPost").slideUp(500);
  297.     }});
  298.     $(document).shortkeys({
  299.     'H':       function () {
  300.         $('.help_info').fadeToggle(500);
  301.     }});
  302.     $(document).shortkeys({
  303.     'S':       function () {
  304.         $('#sortPost').slideToggle(500);
  305.         $("#imginput").slideUp(500);
  306.         $("#textinput").slideUp(500);
  307.     }});
  308.     $(document).shortkeys({
  309.     'I':       function () {
  310.         $('#imginput').slideToggle(500);
  311.         $("#textinput").slideUp(500);
  312.         $("#sortPost").slideUp(500);
  313.     }});
  314. });
  315.  
  316. function stripHTML(str){
  317.   var strippedText = $("<div/>").html(str).text();
  318.   return strippedText;
  319. }
  320. </script>
  321. <style type="text/css">
  322. body{
  323.     background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noise_lines.png');
  324.     overflow-x: hidden;
  325.     overflow-y: auto;
  326. }
  327. #header{
  328.     width: 100%;
  329.     height: 100%;
  330.     top: 0px;
  331.     left: 0px;
  332.     position: absolute;
  333.     z-index: 1;
  334.     overflow: auto;
  335. }
  336. #header .help_info_question_button{
  337.     margin-right: 5px;
  338.     margin-left: auto;
  339.     margin-top: 5px;
  340.     float: right;
  341.     opacity: 0.3;
  342.     -moz-opacity: 0.3;
  343.     filter:alpha(opacity=3);
  344.     height: 26px;
  345.     width: 26px;
  346.     z-index: 2;
  347. }
  348. #header .help_info_question_button:hover{
  349.     margin-right: 5px;
  350.     margin-left: auto;
  351.     margin-top: 5px;
  352.     float: right;
  353.     opacity: 1;
  354.     -moz-opacity: 1;
  355.     filter:alpha(opacity=1);
  356.     z-index: 2;
  357. }
  358. #header .help_info{
  359.     margin-right: 5px;
  360.     margin-left: auto;
  361.     margin-top: 10px;
  362.     float: right;
  363.     opacity: 1;
  364.     width: 300px;
  365.     height: 325px;
  366.     overflow-y: scroll;
  367.     overflow-x: hidden;
  368.     background-color: #696969;
  369.     color: #E8E8E8;
  370.     opacity: .7;
  371.     -moz-opacity: .7;
  372.     filter:alpha(opacity=7);
  373.     z-index: 100;
  374.     display: none;
  375.     border-radius: 3px;
  376.     -moz-border-radius: 3px;
  377.     -webkit-border-radius: 3px;
  378.     -o-border-radius: 3px;
  379.     border: 1px solid #858585;
  380. }
  381. .help_info::-webkit-scrollbar {
  382.     width: 5px;
  383. }
  384. .help_info::-webkit-scrollbar-track {
  385.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  386.     -webkit-border-radius: 10px;
  387.     border-radius: 10px;
  388. }
  389. .help_info::-webkit-scrollbar-thumb {
  390.     -webkit-border-radius: 10px;
  391.     border-radius: 10px;
  392.     background: rgba(0, 0,0,0.8);
  393.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  394. }
  395. .help_info::-webkit-scrollbar-thumb:window-inactive {
  396.     background: rgba(55,0,0,0.4);
  397. }
  398. #header .keyboard_control_button{
  399.     margin-right: 5px;
  400.     margin-left: auto;
  401.     float: right;
  402.     opacity: 0.3;
  403.     -moz-opacity: 0.3;
  404.     filter:alpha(opacity=3);
  405.     height: 26px;
  406.     width: 26px;
  407.     z-index: 2;
  408.     margin-top: -9px;
  409. }
  410. #header .keyboard_control_button:hover{
  411.     margin-right: 5px;
  412.     margin-left: auto;
  413.     float: right;
  414.     opacity: 1;
  415.     -moz-opacity: 1;
  416.     filter:alpha(opacity=1);
  417.     z-index: 2;
  418.     margin-top: -9px;
  419. }
  420. #header hr{
  421.     width: 270px;
  422.     background-color: #BDBDBD;
  423.     border-bottom: 1px solid #D4D4D4;
  424. }
  425. #header br{
  426.     display: block;
  427.     margin-top: 5px;
  428. }
  429. #header::-webkit-scrollbar {
  430.     width: 5px;
  431. }
  432. #header::-webkit-scrollbar-track {
  433.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  434.     -webkit-border-radius: 10px;
  435.     border-radius: 10px;
  436. }
  437. #header::-webkit-scrollbar-thumb {
  438.     -webkit-border-radius: 10px;
  439.     border-radius: 10px;
  440.     background: rgba(0, 0,0,0.8);
  441.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  442. }
  443. #header::-webkit-scrollbar-thumb:window-inactive {
  444.     background: rgba(55,0,0,0.4);
  445. }
  446. .font{
  447.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  448. }
  449. .text_submit_post:hover, .img_submit_post:hover{
  450.     color: gray;
  451. }
  452. .float_right{
  453.     float: right;
  454. }
  455. .float_left{
  456.     float: left;
  457. }
  458. .center_text{
  459.     text-align: enter;
  460. }
  461. #footer{
  462.     position: fixed;
  463.     width: 100%;
  464.     right: 0px;
  465.     left: 0px;
  466.     bottom: 0px;
  467.     padding: 20px;
  468.     height: 40px;
  469.     background-color: #FCFCFC;
  470.     border-top: 1px solid #E3E3E3;
  471.     -moz-box-shadow: 0 0 11px #DEDEDE;
  472.     -webkit-box-shadow: 0 0 11px #DEDEDE;
  473.     box-shadow: 0 0 11px #DEDEDE;
  474.     z-index: 100;
  475. }
  476. #footer .footer_float_right{
  477.     float: right;
  478.     margin-right: 40px;
  479. }
  480. #footer .footer_float_left{
  481.     float: left;
  482.     margin-left: 5px;
  483. }
  484. #footer .sign_up_button{
  485.     border: 1px solid #D9D9D9;
  486.     outline: none;
  487.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  488.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  489.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  490.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  491.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  492.     background-image: -webkit-gradient(
  493.         linear,
  494.         left bottom,
  495.         left top,
  496.         color-stop(0.34, rgb(240,240,240)),
  497.         color-stop(0.67, rgb(237,237,237)),
  498.         color-stop(0.79, rgb(242,242,242))
  499.     );
  500. }
  501. #footer .sign_up_button:hover{
  502.     border: 1px solid #BD5563;
  503.     outline: none;
  504.     background: #F06C7D;
  505. }
  506. #footer .sign_up_button:active{
  507.     border: 1px solid #BD5563;
  508.     outline: none;
  509.     background: #F06C7D;
  510. }
  511. #footer .sign_in_button{
  512.     border: 1px solid #D9D9D9;
  513.     outline: none;
  514.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  515.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  516.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  517.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  518.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  519.     background-image: -webkit-gradient(
  520.         linear,
  521.         left bottom,
  522.         left top,
  523.         color-stop(0.34, rgb(240,240,240)),
  524.         color-stop(0.67, rgb(237,237,237)),
  525.         color-stop(0.79, rgb(242,242,242))
  526.     );
  527. }
  528. #footer .sign_in_button:hover{
  529.     border: 1px solid #969E49;
  530.     outline: none;
  531.     background: #DBE868;
  532. }
  533. #footer .sign_in_button:active{
  534.     border: 1px solid #969E49;
  535.     outline: none;
  536.     background: #DBE868;
  537. }
  538. #footer .add_post_button{
  539.     border: 1px solid #D9D9D9;
  540.     outline: none;
  541.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  542.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  543.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  544.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  545.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  546.     background-image: -webkit-gradient(
  547.         linear,
  548.         left bottom,
  549.         left top,
  550.         color-stop(0.34, rgb(240,240,240)),
  551.         color-stop(0.67, rgb(237,237,237)),
  552.         color-stop(0.79, rgb(242,242,242))
  553.     );
  554. }
  555. #footer .add_post_button:hover{
  556.     border: 1px solid #4AA168;
  557.     outline: none;
  558.     background: #68ED97;
  559. }
  560. #footer .add_post_button:active{
  561.     border: 1px solid #4AA168;
  562.     outline: none;
  563.     background: #68ED97;
  564. }
  565. #footer .sort_by_button{
  566.     border: 1px solid #D9D9D9;
  567.     outline: none;
  568.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  569.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  570.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  571.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  572.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  573.     background-image: -webkit-gradient(
  574.         linear,
  575.         left bottom,
  576.         left top,
  577.         color-stop(0.34, rgb(240,240,240)),
  578.         color-stop(0.67, rgb(237,237,237)),
  579.         color-stop(0.79, rgb(242,242,242))
  580.     );
  581. }
  582. #footer .sort_by_button:hover{
  583.     border: 1px solid #5198B0;
  584.     outline: none;
  585.     background: #80D2ED;
  586. }
  587. #footer .sort_by_button:active{
  588.     border: 1px solid #5198B0;
  589.     outline: none;
  590.     background: #80D2ED;
  591. }
  592. #footer .search_bar{
  593.     font-style: italic;
  594.     color: #5C5C5C;
  595.     border: 1px solid #D9D9D9;
  596.     outline: none;
  597.     padding: 8px;
  598.     width: 250px;
  599.     transition: all .7s ease;
  600.     -webkit-transition: all .7s ease;
  601.     -moz-transition: all .7s ease;
  602.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  603.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  604.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  605.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  606.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  607.     background-image: -webkit-gradient(
  608.         linear,
  609.         left bottom,
  610.         left top,
  611.         color-stop(0.34, rgb(240,240,240)),
  612.         color-stop(0.67, rgb(237,237,237)),
  613.         color-stop(0.79, rgb(242,242,242))
  614.     );
  615. }
  616. #footer .search_bar:hover{
  617.     border: 1px solid #D9D9D9;
  618.     outline: none;
  619.     padding: 8px;
  620.     width: 300px;
  621.     background-color: #F5F5F5;
  622.     transition: all .7s ease;
  623.     -webkit-transition: all .7s ease;
  624.     -moz-transition: all .7s ease;
  625.     background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  626.     background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  627.     background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  628.     background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  629.     background-image: -ms-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
  630.     background-image: -webkit-gradient(
  631.         linear,
  632.         left bottom,
  633.         left top,
  634.         color-stop(0.34, rgb(240,240,240)),
  635.         color-stop(0.67, rgb(237,237,237)),
  636.         color-stop(0.79, rgb(242,242,242))
  637.     );
  638. }
  639. #footer .search_bar:focus{
  640.     font-style: normal;
  641.     border: 1px solid #B5B5B5;
  642.     outline: none;
  643.     padding: 8px;
  644.     font-weight: bold;
  645.     width: 300px;
  646.     transition: all .7s ease;
  647.     -webkit-transition: all .7s ease;
  648.     -moz-transition: all .7s ease;
  649.     background-image: linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
  650.     background-image: -o-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
  651.     background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
  652.     background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
  653.     background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 34%, rgb(255,255,255) 67%, rgb(255,255,255) 79%);
  654.     background-image: -webkit-gradient(
  655.         linear,
  656.         left bottom,
  657.         left top,
  658.         color-stop(0.34, rgb(255,255,255)),
  659.         color-stop(0.67, rgb(255,255,255)),
  660.         color-stop(0.79, rgb(255,255,255))
  661.     );
  662. }
  663. #footer .input{
  664.     padding: 8px;
  665.     padding-left: 15px;
  666.     padding-right: 15px;
  667.     cursor: pointer;
  668.     color: #5C5C5C;
  669. }
  670. #footer .cancel_space{
  671.     margin-left: -7px;
  672. }
  673. #footer .left_nav_button{
  674.     border-bottom-left-radius: 5px;
  675.     border-top-left-radius: 5px;
  676.     border-right: 1px solid #D9D9D9;
  677. }
  678. #footer .center_nav_button{
  679.     border-radius: none;
  680.     border-right: 1px solid #D9D9D9;
  681. }
  682. #footer .right_nav_button{
  683.     border-bottom-right-radius: 5px;
  684.     border-top-right-radius: 5px;
  685. }
  686. #sortPost{
  687.     position: fixed;
  688.     border-top-right-radius: 3px;
  689.     border-top-left-radius: 3px;
  690.     margin: auto;
  691.     bottom: 0;
  692.     left: 0;
  693.     right: 0;
  694.     margin-left: auto;
  695.     margin-right: 20px;
  696.     padding: 15px 0px 5px 50px;
  697.     width: 370px;
  698.     height: 110px;
  699.     background-color: #FCFCFC;
  700.     -moz-box-shadow: 0 0 11px #DEDEDE;
  701.     -webkit-box-shadow: 0 0 11px #DEDEDE;
  702.     box-shadow: 0 0 11px #DEDEDE;
  703.     border: 1px solid #DEDEDE;
  704.     outline: none;
  705.     z-index: 10;
  706. }
  707. #textinput{
  708.     position: fixed;
  709.     border-top-right-radius: 3px;
  710.     border-top-left-radius: 3px;
  711.     margin: auto;
  712.     bottom: 0;
  713.     left: 0;
  714.     right: 0;
  715.     margin-left: auto;
  716.     margin-right: 20px;
  717.     padding: 15px 0px 5px 0px;
  718.     width: 420px;
  719.     height: 335px;
  720.     background-color: #FCFCFC;
  721.     -moz-box-shadow: 0 0 11px #DEDEDE;
  722.     -webkit-box-shadow: 0 0 11px #DEDEDE;
  723.     box-shadow: 0 0 11px #DEDEDE;
  724.     border: 1px solid #DEDEDE;
  725.     outline: none;
  726.     z-index: 10;
  727. }
  728. #textinput .text_input{
  729.     width: 420px;
  730.     max-width: 420px;
  731.     outline: none;
  732.     height: 210px;
  733.     overflow: auto;
  734.     max-height: 210px;
  735.     background-color: #F0F0F0;
  736.     padding: 6px;
  737.     border: none;
  738.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  739.     font-size: 22px;
  740.     font-weight: lighter;
  741.     resize: none;
  742.     border-bottom: 1px solid #D1D1D1;
  743.     border-top: 1px solid #D1D1D1;
  744.     transition: all .3s ease;
  745.     -webkit-transition: all .3s ease;
  746.     -moz-transition: all .3s ease;
  747. }
  748. .close{
  749.     margin-right: 3px;
  750.     margin-top: 3px;
  751. }
  752. #textinput .text_input:hover{
  753.     width: 420px;
  754.     max-width: 420px;
  755.     outline: none;
  756.     height: 210px;
  757.     max-height: 210px;
  758.     background-color: #EDEDED;
  759.     padding: 6px;
  760.     border: none;
  761.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  762.     font-size: 22px;
  763.     font-weight: lighter;
  764.     resize: none;
  765.     border-bottom: 1px solid #D1D1D1;
  766.     border-top: 1px solid #D1D1D1;
  767.     transition: all .3s ease;
  768.     -webkit-transition: all .3s ease;
  769.     -moz-transition: all .3s ease;
  770. }
  771. #textinput .text_input:focus{
  772.     width: 420px;
  773.     max-width: 420px;
  774.     outline: none;
  775.     height: 210px;
  776.     max-height: 210px;
  777.     background-color: #EDEDED;
  778.     padding: 6px;
  779.     border: none;
  780.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  781.     font-size: 22px;
  782.     font-weight: lighter;
  783.     resize: none;
  784.     border-bottom: 1px solid #D1D1D1;
  785.     border-top: 1px solid #D1D1D1;
  786.     transition: all .3s ease;
  787.     -webkit-transition: all .3s ease;
  788.     -moz-transition: all .3s ease;
  789. }
  790. #textinput .text_input::-webkit-scrollbar {
  791.     width: 5px;
  792. }
  793. #textinput .text_input::-webkit-scrollbar-track {
  794.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  795.     -webkit-border-radius: 10px;
  796.     border-radius: 10px;
  797. }
  798. #textinput .text_input::-webkit-scrollbar-thumb {
  799.     -webkit-border-radius: 10px;
  800.     border-radius: 10px;
  801.     background: rgba(0, 0,0,0.8);
  802.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  803. }
  804. #textinput .text_input::-webkit-scrollbar-thumb:window-inactive {
  805.     background: rgba(55,0,0,0.4);
  806. }
  807. #textinput .photoPost{
  808.     float: right;
  809.     margin-right: 15px;
  810.     opacity: 0.6;
  811.     -moz-opacity: 0.6;
  812.     filter:alpha(opacity=6);
  813. }
  814. #textinput .photoPost:hover{
  815.     float: right;
  816.     margin-right: 15px;
  817.     opacity: 1;
  818.     -moz-opacity: 1;
  819.     filter:alpha(opacity=1);
  820. }
  821. #imginput{
  822.     position: fixed;
  823.     border-top-right-radius: 3px;
  824.     border-top-left-radius: 3px;
  825.     margin: auto;
  826.     bottom: 0;
  827.     left: 0;
  828.     right: 0;
  829.     margin-left: auto;
  830.     margin-right: 20px;
  831.     padding: 15px 0px 5px 0px;
  832.     width: 420px;
  833.     height: 228px;
  834.     background-color: #FCFCFC;
  835.     -moz-box-shadow: 0 0 11px #DEDEDE;
  836.     -webkit-box-shadow: 0 0 11px #DEDEDE;
  837.     box-shadow: 0 0 11px #DEDEDE;
  838.     border: 1px solid #DEDEDE;
  839.     outline: none;
  840.     z-index: 10;
  841. }
  842. #imginput .img_input{
  843.     width: 420px;
  844.     max-width: 420px;
  845.     outline: none;
  846.     height: 45px;
  847.     overflow-y: hidden;
  848.     overflow-x: auto;
  849.     max-height: 45px;
  850.     background-color: #F0F0F0;
  851.     padding: 6px;
  852.     border: none;
  853.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  854.     font-size: 22px;
  855.     font-weight: lighter;
  856.     resize: none;
  857.     border-bottom: 1px solid #D1D1D1;
  858.     border-top: 1px solid #D1D1D1;
  859.     transition: all .3s ease;
  860.     -webkit-transition: all .3s ease;
  861.     -moz-transition: all .3s ease;
  862. }
  863. #imginput .img_input:hover{
  864.     width: 420px;
  865.     max-width: 420px;
  866.     outline: none;
  867.     height: 45px;
  868.     overflow-y: hidden;
  869.     overflow-x: auto;
  870.     max-height: 45px;
  871.     background-color: #EDEDED;
  872.     padding: 6px;
  873.     border: none;
  874.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  875.     font-size: 22px;
  876.     font-weight: lighter;
  877.     resize: none;
  878.     border-bottom: 1px solid #D1D1D1;
  879.     border-top: 1px solid #D1D1D1;
  880.     transition: all .3s ease;
  881.     -webkit-transition: all .3s ease;
  882.     -moz-transition: all .3s ease;
  883. }
  884. #imginput .img_input:focus{
  885.     width: 420px;
  886.     max-width: 420px;
  887.     outline: none;
  888.     height: 45px;
  889.     overflow-y: hidden;
  890.     overflow-x: auto;
  891.     max-height: 45px;
  892.     background-color: #EDEDED;
  893.     padding: 6px;
  894.     border: none;
  895.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  896.     font-size: 22px;
  897.     font-weight: lighter;
  898.     resize: none;
  899.     border-bottom: 1px solid #D1D1D1;
  900.     border-top: 1px solid #D1D1D1;
  901.     transition: all .3s ease;
  902.     -webkit-transition: all .3s ease;
  903.     -moz-transition: all .3s ease;
  904. }
  905. #imginput .textPost{
  906.     float: right;
  907.     margin-right: 15px;
  908.     opacity: 0.6;
  909.     -moz-opacity: 0.6;
  910.     filter:alpha(opacity=6);
  911. }
  912. #imginput .textPost:hover{
  913.     float: right;
  914.     margin-right: 15px;
  915.     opacity: 1;
  916.     -moz-opacity: 1;
  917.     filter:alpha(opacity= 1 1);
  918. }
  919. #sortPost span{
  920.     color: #6E6E6E;
  921.     font-size: 14px;
  922.     background-color: #F9F9F9;
  923.     border: 1px solid #DCDCDC;
  924.     border-radius: 2px;
  925.     margin-right: 5px;
  926.     cursor: pointer;
  927.     padding: 4px 9px 4px 9px;
  928. }
  929. #sortPost span.selected{
  930.     color: #363636;
  931.     background-color: #C2E8BE;
  932.     border: 1px solid #B5D4B2;
  933.     font-weight: bold;
  934. }
  935. #textinput .text_submit_post{
  936.     background: none;
  937.     outline: none;
  938.     border: none;
  939.     text-decoration: underline;
  940.     cursor: pointer;
  941. }
  942. #imginput .img_submit_post{
  943.     background: none;
  944.     outline: none;
  945.     border: none;
  946.     text-decoration: underline;
  947.     cursor: pointer;
  948. }
  949. .bg_one {
  950.     background-image: linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
  951.     background-image: -o-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
  952.     background-image: -moz-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
  953.     background-image: -webkit-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
  954.     background-image: -ms-linear-gradient(bottom, rgb(184,35,35) 24%, rgb(171,36,36) 62%);
  955.  
  956.     background-image: -webkit-gradient(
  957.         linear,
  958.         left bottom,
  959.         left top,
  960.         color-stop(0.24, rgb(184,35,35)),
  961.         color-stop(0.62, rgb(171,36,36))
  962.     );  
  963. }
  964. .bg_two {
  965.     background-image: linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
  966.     background-image: -o-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
  967.     background-image: -moz-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
  968.     background-image: -webkit-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
  969.     background-image: -ms-linear-gradient(bottom, rgb(184,35,124) 24%, rgb(201,40,131) 61%);
  970.  
  971.     background-image: -webkit-gradient(
  972.         linear,
  973.         left bottom,
  974.         left top,
  975.         color-stop(0.24, rgb(184,35,124)),
  976.         color-stop(0.61, rgb(201,40,131))
  977.     );
  978. }
  979. .bg_three {
  980.     background-image: linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
  981.     background-image: -o-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
  982.     background-image: -moz-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
  983.     background-image: -webkit-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
  984.     background-image: -ms-linear-gradient(bottom, rgb(184,37,162) 24%, rgb(199,40,188) 61%);
  985.  
  986.     background-image: -webkit-gradient(
  987.         linear,
  988.         left bottom,
  989.         left top,
  990.         color-stop(0.24, rgb(184,37,162)),
  991.         color-stop(0.61, rgb(199,40,188))
  992.     );
  993. }
  994. .bg_four {
  995.     background-image: linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
  996.     background-image: -o-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
  997.     background-image: -moz-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
  998.     background-image: -webkit-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
  999.     background-image: -ms-linear-gradient(bottom, rgb(126,39,184) 24%, rgb(135,40,199) 61%);
  1000.  
  1001.     background-image: -webkit-gradient(
  1002.         linear,
  1003.         left bottom,
  1004.         left top,
  1005.         color-stop(0.24, rgb(126,39,184)),
  1006.         color-stop(0.61, rgb(135,40,199))
  1007.     );
  1008. }
  1009. .bg_five {
  1010.     background-image: linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
  1011.     background-image: -o-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
  1012.     background-image: -moz-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
  1013.     background-image: -webkit-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
  1014.     background-image: -ms-linear-gradient(bottom, rgb(68,39,184) 24%, rgb(42,74,199) 61%);
  1015.  
  1016.     background-image: -webkit-gradient(
  1017.         linear,
  1018.         left bottom,
  1019.         left top,
  1020.         color-stop(0.24, rgb(68,39,184)),
  1021.         color-stop(0.61, rgb(42,74,199))
  1022.     );
  1023. }
  1024. .bg_six {
  1025.     background-image: linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
  1026.     background-image: -o-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
  1027.     background-image: -moz-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
  1028.     background-image: -webkit-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
  1029.     background-image: -ms-linear-gradient(bottom, rgb(40,139,184) 24%, rgb(42,144,199) 61%);
  1030.  
  1031.     background-image: -webkit-gradient(
  1032.         linear,
  1033.         left bottom,
  1034.         left top,
  1035.         color-stop(0.24, rgb(40,139,184)),
  1036.         color-stop(0.61, rgb(42,144,199))
  1037.     );
  1038. }
  1039. .bg_seven {
  1040.     background-image: linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
  1041.     background-image: -o-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
  1042.     background-image: -moz-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
  1043.     background-image: -webkit-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
  1044.     background-image: -ms-linear-gradient(bottom, rgb(40,179,184) 24%, rgb(44,199,199) 61%);
  1045.  
  1046.     background-image: -webkit-gradient(
  1047.         linear,
  1048.         left bottom,
  1049.         left top,
  1050.         color-stop(0.24, rgb(40,179,184)),
  1051.         color-stop(0.61, rgb(44,199,199))
  1052.     );
  1053. }
  1054. .bg_eight {
  1055.     background-image: linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
  1056.     background-image: -o-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
  1057.     background-image: -moz-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
  1058.     background-image: -webkit-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
  1059.     background-image: -ms-linear-gradient(bottom, rgb(40,184,127) 24%, rgb(44,199,142) 61%);
  1060.  
  1061.     background-image: -webkit-gradient(
  1062.         linear,
  1063.         left bottom,
  1064.         left top,
  1065.         color-stop(0.24, rgb(40,184,127)),
  1066.         color-stop(0.61, rgb(44,199,142))
  1067.     );
  1068. }
  1069. .bg_nine {
  1070.     background-image: linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
  1071.     background-image: -o-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
  1072.     background-image: -moz-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
  1073.     background-image: -webkit-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
  1074.     background-image: -ms-linear-gradient(bottom, rgb(40,184,79) 24%, rgb(46,199,87) 61%);
  1075.  
  1076.     background-image: -webkit-gradient(
  1077.         linear,
  1078.         left bottom,
  1079.         left top,
  1080.         color-stop(0.24, rgb(40,184,79)),
  1081.         color-stop(0.61, rgb(46,199,87))
  1082.     );
  1083. }
  1084. .bg_ten {
  1085.     background-image: linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
  1086.     background-image: -o-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
  1087.     background-image: -moz-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
  1088.     background-image: -webkit-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
  1089.     background-image: -ms-linear-gradient(bottom, rgb(93,184,40) 24%, rgb(77,199,46) 61%);
  1090.  
  1091.     background-image: -webkit-gradient(
  1092.         linear,
  1093.         left bottom,
  1094.         left top,
  1095.         color-stop(0.24, rgb(93,184,40)),
  1096.         color-stop(0.61, rgb(77,199,46))
  1097.     );
  1098. }
  1099. .bg_eleven{
  1100.     background-image: linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
  1101.     background-image: -o-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
  1102.     background-image: -moz-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
  1103.     background-image: -webkit-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
  1104.     background-image: -ms-linear-gradient(bottom, rgb(150,184,40) 24%, rgb(159,199,48) 61%);
  1105.  
  1106.     background-image: -webkit-gradient(
  1107.         linear,
  1108.         left bottom,
  1109.         left top,
  1110.         color-stop(0.24, rgb(150,184,40)),
  1111.         color-stop(0.61, rgb(159,199,48))
  1112.     );
  1113. }
  1114. .bg_twelve{
  1115.     background-image: linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
  1116.     background-image: -o-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
  1117.     background-image: -moz-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
  1118.     background-image: -webkit-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
  1119.     background-image: -ms-linear-gradient(bottom, rgb(184,184,40) 24%, rgb(194,199,48) 61%);
  1120.  
  1121.     background-image: -webkit-gradient(
  1122.         linear,
  1123.         left bottom,
  1124.         left top,
  1125.         color-stop(0.24, rgb(184,184,40)),
  1126.         color-stop(0.61, rgb(194,199,48))
  1127.     );
  1128. }
  1129. .bg_thirteen{
  1130.     background-image: linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
  1131.     background-image: -o-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
  1132.     background-image: -moz-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
  1133.     background-image: -webkit-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
  1134.     background-image: -ms-linear-gradient(bottom, rgb(184,131,40) 24%, rgb(199,149,50) 61%);
  1135.  
  1136.     background-image: -webkit-gradient(
  1137.         linear,
  1138.         left bottom,
  1139.         left top,
  1140.         color-stop(0.24, rgb(184,131,40)),
  1141.         color-stop(0.61, rgb(199,149,50))
  1142.     );
  1143. }
  1144. .bg_fourteen{
  1145.     background-image: linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
  1146.     background-image: -o-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
  1147.     background-image: -moz-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
  1148.     background-image: -webkit-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
  1149.     background-image: -ms-linear-gradient(bottom, rgb(184,91,40) 24%, rgb(199,115,50) 61%);
  1150.  
  1151.     background-image: -webkit-gradient(
  1152.         linear,
  1153.         left bottom,
  1154.         left top,
  1155.         color-stop(0.24, rgb(184,91,40)),
  1156.         color-stop(0.61, rgb(199,115,50))
  1157.     );
  1158. }
  1159. .image_embed{
  1160.     width: 100%;
  1161.     height: auto;
  1162. }
  1163. #textinput .checkbox{
  1164.     width: 10px;
  1165.     height: 10px;
  1166. }
  1167. #imginput .checkbox{
  1168.     width: 10px;
  1169.     height: 10px;
  1170. }
  1171. </style>
  1172. <body>
  1173.     <div id="header">
  1174.         <input type="image" src="http://cdn1.iconfinder.com/data/icons/brightmix/64/monotone_question.png" class="help_info_question_button">
  1175.         <div class="help_info">
  1176.             <ol class="font" style="font-size: 14px; margin-right: 15px; margin-bottom: 15px;">
  1177.                 <li>Start by clicking 'N' on your keyboard or the "Add Note" button on the navigation bar at the bottom right of your screen.</li><br>
  1178.                 <li>From there you can either add a text note or an image note by clicking on the camera icon.</li><br>
  1179.                 <li>If you want, you can start by clicking 'I' on your keyboard and that will directly take you to adding an image note.</li><br>
  1180.                 <li>Fill out the form provided, but make sure you don't exceed 180 characters.</li><br>
  1181.                 <li>If you're adding an image, make sure you don't forget to include the 'http://'.</li><br>
  1182.                 <li>Lastly, the sort panel can be accessed by hitting 'S' on your keyboard or simple clicking it on the navigation bar at the buttom right of your screen.</li><br>
  1183.                 <li>Then, click 'Post' and your note will be added. Enjoy!</li>
  1184.             </ol>
  1185.         </div>
  1186.     <div id="textinput">
  1187.         <form action="" method="">
  1188.         <textarea class="text_input" maxlength="180" placeholder="Do you have something to say?"  required></textarea>
  1189.         <div class="float_left" style="width: 200px; padding-top: 11px; padding-left: 8px;">
  1190.             <input type="button" class="text_submit_post font" style="font-size: 14px" value="Post">
  1191.             <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
  1192.         </div>
  1193.         </form>
  1194.         <div class="float_right" style="width: 20px;">
  1195.             <input type="image" class="photoPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/photo.png">
  1196.         </div>
  1197.     </div>
  1198.     <div id="imginput">
  1199.         <form action="" method="">
  1200.         <input type="text" class="img_input" placeholder="Image URL goes here." required>
  1201.         <input type="text" style="margin-top: 15px" class="img_input img_comment" maxlength="180" placeholder="Add a comment." required>
  1202.         <div class="float_left"  style="width: 200px; padding-top: 11px; padding-left: 8px;">
  1203.             <input type="button" class="img_submit_post font" style="font-size: 14px" value="Post">
  1204.             <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
  1205.         </div>
  1206.         </form>
  1207.         <div class="float_right">
  1208.         <input type="image" style="height: 14px; width: 14px" class="textPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/text_letter_t.png">
  1209.         </div>
  1210.     </div>
  1211.     <div id="sortPost">
  1212.         <span class="sort font" id="random">Random</span>
  1213.         <span class="sort font" id="popular">Popularity</span>
  1214.         <span class="sort font" id="active">Active</span>
  1215.         <span class="sort selected font" id="newest">Newest</span>
  1216.     </div>
  1217.     <div id="footer">
  1218.         <div class="footer_float_right">
  1219.         <form action="" method="">
  1220.             <input type="button" class="add_post_button input cancel_space left_nav_button font" style="font-size: 14px;" value="Add Note">
  1221.             <input type="button" class="sort_by_button input cancel_space center_nav_button font" style="font-size: 14px;" value="Sort By">
  1222.             <input type="text" class="search_bar cancel_space right_nav_button font" style="outline: none; font-size: 14px;" placeholder="Search">
  1223.         </form>
  1224.         </div>
  1225.         <div class="footer_float_left">
  1226.         <form action="" method="">
  1227.             <input type="button" class="font input sign_in_button left_nav_button cancel_space" style="font-size:14px" value="Sign In">
  1228.             <input type="button" class="font input sign_up_button right_nav_button cancel_space" style="font-size:14px;" value="Sign Up">
  1229.         </form>
  1230.     </div>
  1231.     </div>
  1232. </body>
  1233. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!