/* PLACEHOLDER Media Queries for Responsive Design. */

@media only screen and (max-width: 1024px) {
    /* i.e. iPad landscape mode   */

    #fancybox-videocontainer {
        width: 400px;
        height: 360px;
        overflow: hidden;
    }

    .fancybox-videoplayer {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

     #wrapper, #header_wrapper, #footer_wrapper {
        width: auto;
        margin: 0;
    }

    .resp div#main {
        width: 72.916666666667%; /* 700px / 960 */
        right: auto;
    }

    .resp div#main.no-sidebar {
    	width: 100% ;
    	}


    #nav_container {
        width: auto
    }

    #wrapper {
        padding: 20px;
    }
}

@media only screen and (max-width: 768px) {
    /* i.e. iPad portrait mode   */



    body #root > header nav ul li a {
        margin-right: 1px;
        padding: 3px 9px;
    }

    ul.usernav li ul#notification-list {
        display: none;
    }

    .postcomment .postcomment-options:hover small {
        display: none;
    }

    .postcomment .postcomment-body textarea,
    .postcomment .postcomment-body .comment-field {
    margin-left: 40px;
}

    #codeigniter-debug-toolbar {
            display: none;
    }

   .resp #header_wrapper {
   	z-index: 1 !important;
    }

     #header_wrapper aside {
            width: 100%
            }

	.resp #wrapper {
		z-index: auto !important; /* reset z-index for both sidebar + notificationslist visability */
                position: inherit;
	}

   #header_wrapper aside ul.usernav {
    	float: left;
    }

    #header_wrapper aside ul.usernav li.user #usercontrols, ul.usernav li ul#notification-list {
        right: auto;
        margin-left: -1em;
        }

    .resp body #root > header h1 {
        margin: 10px;
    }


        .resp body > header nav ul li a {
            margin-right: 1px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

    .resp div#innerbody {
        /*below for sticky footer*/
        display: block;
    }

    .resp body.clean div#innerbody {
        margin-top: 0
    }

	.resp body.clean div#main {
	    width: 100% !important
	}

    .resp .admincontrols, .resp a#settings, .resp .btn-group {
        z-index: 3;
    }

    .dropdown-menu {
       z-index: 9999;
    }

.resp #header_wrapper aside {
	position: relative;
}

   .resp #header_wrapper .sidebar-show-box {
   	display: block;
   }

   	.resp #sidebar {
   		background: #fff;
   		background: rgba(255,255,255,.95);
   		 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   		 display: none;
   		 height: 100%;
   		 overflow: auto;
   		 padding: 10px;
   		 position: fixed;
   		 right: 0;
   		 top: 0;
   		 width: 220px;
   	}


   	#sidebar.visible {
   		display: block;
   	}

	.resp #sidebar > .sidebar-hide-box {
		display: block;
	}

	.resp div#main {
	    width: 100%;
            margin-bottom: 15px;
	}

    .resp body.clean div#wrapper {
        margin: 20px auto 0;
        max-width: 480px;
        width: auto;
    }

    .nice-date .date-day {
    font-size: 2.4rem;
    line-height: 3rem;
}


}


@media only screen and (max-width: 480px) {
    /* ===[ Style adjustments for viewports 480px and over go here ]=== */
    div#main .box > h3, .uploadsmodule h3, .pointsform h3, .badgeform h3  {
        padding: 0 10% 0 0;
    }


    body #root > header h1 {
        margin: 30px 0 2px;
        width: 100%;
        }

    body #root > header h1 a {
            background-position: top center
            }

    body #root > header nav ul {
        margin-bottom: 2px;
        text-align: center;
        }

    body #root > header nav ul li a {
            -webkit-tap-highlight-color: #999;
            border-radius: 4px;
            font-size: 1em;
            margin: 0 4px 2px 0;
            padding: 3px 5px;
            }

    body > header h1 {
        margin: 0 auto;
        width: 100%;
        }

    body > header h1 a {
            height: 80px
            }

    body > header nav ul li a {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        font-size: 1em;
        margin-bottom: 2px;
        margin-right: 12px!important;
        padding: 3px 5px;
        }

    div#innerbody {
        margin-top: 0!important
        }

    section.login .logo {
        margin: 1em 0;
        width: 100%;
        }

    .authentication input[type=text], .authentication input[type=password], .authentication input[type=email], .authentication textarea {
        width: 94%
        }

    .social > a {
        width: 60%
        }

    .box_content.nosocial .login.regular-form, .box_content.nosocial .register.regular-form {
        margin-left: 0
        }

    .login, .register {
        width: 100%
        }

	.resp body #root > header h1 {
	    width: 100%;
	}

	.resp body #root > header h1 a {
	        background-position: top center
	    }

	body.clean {
		width: 100%;
	}

    .resp  #codeigniter-debug-toolbar {
        display: none;
        /* hide debugbar on phone */
        }



    /* ===[ Video 480px max ]=== */

    .fancybox-videoplayer {
        padding-bottom: -30px; /* staat normaal op 56%, is teveel om goed op klein scherm te komen */
    }



    /* put the usernav on top      */

    .resp #header_wrapper {
        margin: 0
    }

    .resp #header_wrapper aside {
            width: 100%
        }

    .resp #header_wrapper aside ul.usernav {
                border-radius: 0;
            }

    .resp #header_wrapper aside ul.usernav li.user #usercontrols, .resp ul.usernav li ul#notification-list {
                    right: auto
                }
    /*
    .resp #nav_container {
        margin: 0 10px
    }*/



    .resp body #root > header nav ul {
        margin-bottom: 2px;
        text-align: center;
    }

    .resp body #root > header nav ul li a {
            margin: 0 4px 2px 0;
            padding: 3px 5px;
            font-size: 1em;
            border-radius: 4px;
            -webkit-tap-highlight-color: #999;
        }

    .resp body > header h1 {
        width: 100%;
        margin: 0 auto;
    }

    .resp body > header h1 a {
            height: 80px
        }

    .resp body > header nav ul li a {
        font-size: 1em;
        padding: 3px 5px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin-right: 12px !important;
        margin-bottom: 2px;
    }

    .resp  body.clean {
        width: 100%
    }

    .resp  div#innerbody {
        margin-top: 0 !important
    }

    .resp  section.login .logo {
        width: 100%;
        margin: 1em 0;
    }

    .resp .authentication input[type="text"], .resp .authentication input[type="password"], .resp .authentication input[type="email"], .resp .authentication textarea {
        width: 80%
    }

    .resp .social > a {
        width: 60%
    }

    .resp  .box_content.nosocial .login.regular-form, .resp .box_content.nosocial .register.regular-form {
        margin-left: 0
    }

    .resp .authentication input[type="text"], .resp .authentication input[type="password"], .resp .authentication input[type="email"], .resp .authentication textarea {
        width: 94%
    }

    /* hide ajax-tags-box  */

    .resp li.ajax-tags-box {
        display: none
    }

    .resp .tags {
        padding: 3px 1px
    }

    /* community  */

    .resp .userprofiles li.profile {
        margin-left: 0;
        width: 98.285714%;
    }

    li.profile {
        margin-left: 0;
        width: 100%;
    }

    li.profile figure {
            height: auto;
            width: 25%;
     }

    li.profile div {
            float: right;
            width: 72%;
    }

    .resp .user .nav-tabs > li> a {
                margin-bottom: 4px;
    }

    .resp .user .nav-tabs > li.active > a {
                    border: 1px solid #ddd;
                    border-radius: 4px 4px 4px 4px;
    }

    .resp .user .profile-main {
                width: 97%;
    }

    .resp .user .profile-fields,  .resp .user .profile-stats {
                width: 43%;
                margin-top: 5px;
     }

    .resp .user .profile-badges {
                width: 93%;
    }

    .resp .user .profile-main .profile-user figure {
                width: 40%;
                padding-right: 3%;
                margin-bottom: 2%;

    }

    .resp .user .profile-main .profile-user h1 {
                float: none;
    }

    .resp .user.editprofile input {
                width: 155px;
    }

    .resp .user.editprofile #daylight_saving {
                width: auto;
    }

    .resp .user.editprofile form select {
                width: 170px;
                margin-bottom: 5px;
    }

    .resp .user.editprofile form section {
                float: left;
                margin-top: 15px;
                width: 95%;
    }

    .resp .user.editprofile figure {
                float: none;
                margin-left: auto;
                margin-right: auto;
    }

    .resp .user.editprofile form dl.inline dt label {
                font-size: 0.9em;
    }

    .resp .user.editprofile form dl.inline dt {
                padding-right: 2%;
                width: 38%;
    }

    .resp .user.editprofile form dl.inline dd {
                width: 60%;
    }

     .resp .userprofiles li.profile-picture-view {
         width: 21%;
         margin: 0 0 1% 3.5%;
     }

     .resp .userprofiles li.profile-picture-view.first-in-row {

         margin: 0 0 1% 0%;
     }


     .resp .userprofiles li.profile.profile-picture-view h3.username {
        width: 100%;
     }

    .resp  .userprofiles li.profile.profile-picture-view figure {
        width: 100%;
        height: auto;
    }

     /* /// */

    .resp  .userprofiles li.profile figure {
        width: 25%;
        height: auto;
    }

    .resp  .userprofiles li.profile a > div {
        float: right;
        width: 72%;
    }

    .resp  .userprofiles li.profile a > div.profile-login-as {
        width: 0;
    }

    .resp section.user .profile-actions {
        width: 100%;
        margin-top: 0em;
        border-top: 0px solid #DADADA;
        padding: 0em 0 0 0;
    }


    .resp section.user .profile-actions a.btn {
            width: 93%;
    }

    .resp section.user .profile-actions a.btn.btn-block {
            width: 100%
    }

    /* comments   */

    .resp .postcomment button {
        margin-top: .5em;
        width: 98%;
    }

    .resp section.comments .postcomment textarea, .resp section.comments .postcomment .comment-field, .resp section.comments .postcomment input[type="text"], .resp div.postcomment textarea {
        width: 89%/*92.289458%*/;
        float: right;
    }

    .resp .postcomment section.postbody {
        width: 100%;
    }

    div#main .box .box_content figure .video span {
        left: 22%;
        top: 8%;
        width: 70%;
        height: 20%;
    }

    div#main .box .box_content figure img.video-play-button {
        width: 42px;
        height: 32px;
    }

    ul.attachments li a {
        width: 100%;
        padding: 4px 2.424242424242% 4px 30.7575757575758%;
    }

    .resp body.clean div#wrapper {
        margin: 20px 2% 2em!important;
        width: 91.8333333333333%!important;
    }

    .resp body.clean div#wrapper header .logo h1 a {
            width: 100%;
            margin: 1em 0;
    }

    .login.regular-form, .register.regular-form {
        border-right: 0;
        padding-right: 0;
    }

        .nice-date {
    display:none;
    }

   }

    /* =============================================================================
Print styles.
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    /* Black prints faster: sanbeiji.com/archives/953 */
    a {
        color: #444 !important;
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")"
    }
    abbr[title]:after {
        content: " (" attr(title) ")"
    }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
        content: ""
    }
    /* Don't show links for images, or javascript/internal links */
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group
    }
    /* css-discuss.incutio.com/wiki/Printing_Tables */
    tr, img {
        page-break-inside: avoid
    }
    img {
        max-width: 100% !important;
    }
}