/**
 * Right Sidebar addon
 *
 * @package    BardCanvas
 * @subpackage Responsive Template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

#right_sidebar { font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
                 font-size: 11pt; line-height: normal;
                 float: right; padding-top: 20px; padding-right: 0; }

#right_sidebar .item_container             { display: inline-block; width: 100%; padding: 10px; margin-bottom: 20px;
                                             background-color: #F9F9F9; border: 1px solid #E5E5E5; border-radius: 3px; }
#right_sidebar .item_container.highlighted { background-color: #E4EFFA; }

#right_sidebar .item_container h3         { margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: none; color: #555555; }
#right_sidebar .item_container h3:empty   { display: none; }
#right_sidebar .item_container .content   { padding: 5px; }

#right_sidebar .item_container .content *:first-child { margin-top: 0; }
#right_sidebar .item_container .content *:last-child  { margin-bottom: 0; }

/* Default dimensions, for everything above  720px */
#content       { width: calc(100% - 150px - 220px); float: left; }
body[data-has-left-sidebar="false"] #content { width: calc(100% - 220px); }
#right_sidebar { width: 220px; }

@media all and (min-width: 100px) and (max-width: 720px)
{
    /* Hidden for small displays (below 720px) */
    #content       { width: calc(100% - 150px) }
    body[data-has-left-sidebar="false"] #content { width: 100%; float: none; }
    #right_sidebar { width: 100%; float: none; padding-left: 0; }
    
    #user_info_sections { -moz-column-count:    1; -webkit-column-count:   1; column-count:   1; }
}

@media all and (min-width: 100px) and (max-width: 480px)
{
    /* Left sidebar is hidden here. Right sidebar goes below. 
       We must adjust the content width. */
    #content { width: 100%; float: none; }
    body[data-has-left-sidebar="false"] #content { width: 100%; float: none; }
    
    #user_info_sections { -moz-column-count:    1; -webkit-column-count:   1; column-count:   1; }
}

/* 1080p and above */
@media all and (min-width: 1920px) and (max-width: 9999px) {
    #content       { width: calc(100% - 150px - 310px) }
    body[data-has-left-sidebar="false"] #content { width: calc(100% - 310px) }
    #right_sidebar { width: 310px }
    
    #user_info_sections { -moz-column-count:    4; -webkit-column-count:   4; column-count:   4; }
}

/* Laptop displays */
@media all and (min-width: 1281px) and (max-width: 1366px)
{
    #content       { width: calc(100% - 150px - 260px) }
    body[data-has-left-sidebar="false"] #content { width: calc(100% - 260px) }
    #right_sidebar { width: 260px }
    
    #user_info_sections { -moz-column-count:    2; -webkit-column-count:   2; column-count:   2; }
}