@charset "UTF-8";



.container
{
/*	width: 470px; */
}

/* CSS Document */
#dialog-overlay
{
    /* set it o fill the whil screen */
    width:100%; 
    height:100%;
     
    /* transparency for different browsers */
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    background:#000; 
 
    /* make sure it appear behind the dialog box but above everything else */
    position:absolute; 
    top:0; left:0; 
    z-index:3000; 
 
    /* hide it by default */
    display:none;
}

#dialog-box, #dialog-box-ts, #dialog-box-user
{
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
     
    /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:470px; 
	height: 200px;	
    /* make sure it has the highest z-index */
    position:absolute; 
    z-index:5000; 
 
    /* hide it by default */
    display:none;
	
	padding: 10px 10px 10px 10px;

}

#dialog-box-task
{
	/*height: 225px;*/
}

#dialog-box-ts
{
	height: 300px;
}

#dialog-box-user
{
	height: 100px;
}

#projectselect
{
	width: 100%;
}

#taskselect
{
	width: 100%;
}

#taskhours
{
	width: 25%;
	padding-left:	4px;
}

#taskdescription
{
	width: 100%;
	height: 75px;
	font-size:11px;	
}

.menu-table
{
	font-size: 0.9em;
}

.acttableDate { width:20%; text-align: left;}
.acttableDescription { width:70%; text-align: left;}
.acttableTime { width: 10%; text-align:right; }
.acttableHeader { background-color: #EEE; }
tbody tr:nth-child(even) td, tbody tr.even td {background-color:transparent;} 

.btn-mini { margin-bottom: 6px;}

/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 8px 0;
}

.tasktable
{
    width: 100%;
}
.tasktable th
{
    text-align: left;
}
.nav-pills > li {
    margin-right: 8px;
}

   @media (max-width: 480px) {

        .modal {
            height: 500px; /* Set a default max height of the modal (adjusted later)*/
            position: fixed; /* Display modal in the centre of your screen */
            overflow-y: scroll; /*  Ensure that the modal is scroll-able */
             overflow-x: scroll;
            -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
        }
        .modal.fade.in{
            top: 5px; /* Use more screen real estate */
        }
        .modal-body{
            /* Increase the max height of the modal body to try & avoid both it,
             * and the modal container having scroll bars which results in odd behavior */ 
            max-height: 2400px; 
        }   
    }

    /* Now adjust the height so it handles various screen sizes & orientations */
    /* You could make this as granular as you like, or have it more granular at common screen sizes
     * but it should start at the height we set on .modal (i.e. 500px) & work down */
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}