/* ====== MOBILE ====== */

@media (max-width: 950px) { 
    
    #post {
        position: relative;
        width: 95%;
        margin: auto;
        display: block;
        background-color: #FFF;
    }
    
    .post_confirm {
        display: block;
        width: 100%;
        padding: 10px 0 20px 0;
        text-align: center;
    }
    
    .post_info {
        display: block;
        width: 100%;
        background-color: #222;
        text-align: center;
    }
    
    #post_body {
        display: block;
        width: 100%;
        background-color: #FFF;
        padding-bottom: 35px;
    }
    
    .post_contents {
        position: relative;
        display: block;
        width: 90%;
        margin: auto;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #post_body h1 {
        text-align: center;
        color: #6B6C6E;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 26px;
        padding: 25px 0 25px 0;
    }
    
    .post_info > img {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 5px auto 15px auto;
        border-radius: 50%;
    }
    
    .post_info p {
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        padding: 0 0 15px 0;
    }
    
    .post_info a:link {
        color: #4197E2;
        font-size: 20px;
    }
    
    .post_info a:visited {
        color: #C363FF;
        font-size: 20px;
    }
    
    .div_half {
        position: relative;
        float: left;
        width: 50%;
        color: #FFF;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        background-color: #222;
    }
    
    .likes {
        width: 60px;
        margin: auto;
    }
    
    .div_half img {
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 5px;
        cursor: pointer;
    }
    
    .div_half span {
        float: right;
    }
    
    .comment {
        position: relative;
        display: block;
        width: 90%;
        clear: both;
        overflow: auto;
        margin: 20px auto 20px auto;
    }
    
    .comment_box_owner {
        position: relative;
        float: left;
        width: 80%;
        background-color: rgba(131, 232, 118, 0.5);
        color: #222;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_another {
        position: relative;
        float: right;
        width: 80%;
        background-color: rgba(175, 232, 255, 0.5);
        color: #222;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_new {
        position: relative;
        width: 100%;
        background-color: rgba(22, 22, 22, 0.8);
        color: #FFF;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_new p.alert {
        text-align: center;
        padding: 5px 0 5px 0;
    }
    
    .comment_box_owner p, .comment_box_another p {
        color: #444;
        padding: 5px 0 10px 10px;
    }
    
    .action_right, .action_left {
        position: relative;
        width: 20%;
        text-align: center;
        margin-top: 15px;
    }
    
    .action_right {
        float: right;
    }
    
    .action_left {
        float: left;
    }
    
    .action_right img, .action_left img {
        display: inline-block;
        width: 25px;
        height: 25px;
        cursor: pointer;
        margin-right: 10px;
    }
    
    .testa {
        position: relative;
        display: block;
        width: 90%;
        text-align: center;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 24px;
        color: #222;
        padding-top: 50px;
        margin: auto;
    }
    
    .comment_body {
        margin: 0 10px 5px 10px;
        word-wrap: break-word;
    }
    
    .comment_body p {
        color: #000;
        padding: 0;
        margin: 0;
    }
    
    .writecomment {
        position: relative;
        display: block;
        width: 90%;
        clear: both;
        overflow: auto;
        text-align: center;
        margin: 50px auto 50px auto;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    .writecomment form {
        margin: 0px;
        padding: 0px;
    }
    
    .writecomment textarea {
        display: block;
        margin: 10px auto 0 auto;
        border: 1px solid #C8C8C8;
        height: 100px;
        font-size: 16px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        color: #222;
        width: 90%;
        resize: none;
    }
    
    .c_content {
        margin: 15px auto 10px auto;
        width: 95%;
        text-align: center;
    }
    
    .c_content + span {
        font-size: 16px;
    }
    
    .c_content input {
        position: relative;
        margin: 15px auto 5px auto;
        display: block;
        border: 0px;
        background-color: #4197E2;
        color: #FFF;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        height: 30px;
        width: 50%;
        transition: background-color 0.5s ease;
    }
    
    .c_content input:hover {
        cursor: pointer;
        background-color: #1B74C1;
    }
    
    .greenbutton {
        display: block;
        margin: 10px auto 10px auto;
        width: 50%;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        border: 0;
        background-color: #22d825;
        border-radius: 5px;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        transition: background-color 200ms linear;
    }
    
    .greenbutton:hover {
        background-color: #009b02;
    }
    
    em {
        display: block;
    }
    
}


/* ====== DESKTOP ====== */

@media screen and (min-width: 950px) { 
    
    #post {
        position: relative;
        width: 90%;
        margin: auto;
        display: block;
        background-color: #FFF;
    }
    
    .post_confirm {
        display: block;
        width: 100%;
        padding: 10px 0 20px 0;
        text-align: center;
    }
    
    .post_info {
        display: block;
        width: 100%;
        background-color: #222;
        text-align: center;
    }
    
    #post_body {
        display: block;
        width: 100%;
        background-color: #FFF;
        padding-bottom: 35px;
    }
    
    .post_contents {
        position: relative;
        display: block;
        width: 90%;
        margin: auto;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 17px;
    }
    
    .post_contents p {
        font-size: 17px;
    }
    
    #post_body h1 {
        text-align: center;
        color: #6B6C6E;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 26px;
        padding: 25px 0 25px 0;
    }
    
    .post_info > img {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 5px auto 15px auto;
        border-radius: 50%;
    }
    
    .post_info p {
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        padding: 0 0 15px 0;
    }
    
    .post_info a:link {
        color: #4197E2;
        font-size: 20px;
    }
    
    .post_info a:visited {
        color: #C363FF;
        font-size: 20px;
    }
    
    .div_half {
        position: relative;
        float: left;
        width: 50%;
        color: #FFF;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        background-color: #222;
    }
    
    .likes {
        width: 60px;
        margin: auto;
    }
    
    .div_half img {
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 5px;
        cursor: pointer;
    }
    
    .div_half span {
        float: right;
    }
    
    .comment {
        position: relative;
        display: block;
        width: 90%;
        clear: both;
        overflow: auto;
        margin: 20px auto 20px auto;
    }
    
    .comment_box_owner {
        position: relative;
        float: left;
        width: 80%;
        background-color: rgba(131, 232, 118, 0.5);
        color: #222;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_another {
        position: relative;
        float: right;
        width: 80%;
        background-color: rgba(175, 232, 255, 0.5);
        color: #222;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_new {
        position: relative;
        width: 100%;
        background-color: rgba(22, 22, 22, 0.8);
        color: #FFF;
        font-size: 17px;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 15px 0 15px 0;
    }
    
    .comment_box_new p.alert {
        text-align: center;
        padding: 5px 0 5px 0;
    }
    
    .comment_box_owner p, .comment_box_another p {
        color: #444;
        padding: 5px 0 10px 10px;
    }
    
    .action_right, .action_left {
        position: relative;
        width: 20%;
        text-align: center;
        margin-top: 15px;
    }
    
    .action_right {
        float: right;
    }
    
    .action_left {
        float: left;
    }
    
    .action_right img, .action_left img {
        display: inline-block;
        width: 25px;
        height: 25px;
        cursor: pointer;
        margin-right: 10px;
    }
    
    .testa {
        position: relative;
        display: block;
        width: 90%;
        text-align: center;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        font-size: 24px;
        color: #222;
        padding-top: 50px;
        margin: auto;
    }
    
    .comment_body {
        margin: 0 10px 5px 10px;
        word-wrap: break-word;
    }
    
    .comment_body p {
        color: #000;
        padding: 0;
        margin: 0;
    }
    
    .writecomment {
        position: relative;
        display: block;
        width: 90%;
        clear: both;
        overflow: auto;
        text-align: center;
        margin: 50px auto 50px auto;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    .writecomment form {
        margin: 0px;
        padding: 0px;
    }
    
    .writecomment textarea {
        display: block;
        margin: 10px auto 0 auto;
        border: 1px solid #C8C8C8;
        height: 100px;
        font-size: 16px;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        color: #222;
        width: 95%;
        resize: none;
    }
    
    .c_content {
        margin: 15px auto 10px auto;
        width: 95%;
    }
    
    .c_content + span {
        float: left;
        font-size: 16px;
    }
    
    .c_content input {
        float: right;
        border: 0px;
        background-color: #4197E2;
        color: #FFF;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        height: 25px;
        width: 48px;
        transition: background-color 0.5s ease;
    }
    
    .c_content input:hover {
        cursor: pointer;
        background-color: #1B74C1;
    }
    
    .greenbutton {
        display: block;
        margin: 10px auto 10px auto;
        width: 50%;
        height: 30px;
        line-height: 30px;
        color: #FFF;
        border: 0;
        background-color: #22d825;
        border-radius: 5px;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        transition: background-color 200ms linear;
    }
    
    .greenbutton:hover {
        background-color: #009b02;
    }

}

@media print {
    
    .post_info img, .writecomment, .action_right img, .action_left img {
        display: none;
        visibility: hidden;
    }
    
}