body
{
    background-image:url(../images/pattern.png);
}
.padding-rl-zero{
	padding-right:0px;
	padding-left:0px;
}
.padding-l-zero{
	padding-left:0px;
}
.padding-r-zero{
	padding-right:0px;
}
.m-5
{
    margin:5px;
}
textarea
{
    resize:none;
}
#header
{
    width:100%;
    height:60px;
    border-bottom:2px solid #fb4801;
    background-color:#555;
    background-image:url(../images/texture_black.png);
}
.logo
{
	width: 300px;
	height:80px;
    position: relative;
    padding:0px;
    background-image:url(../images/logo300x90.jpg);
    background-size:90% 90%;
    background-repeat:no-repeat;
    background-position:left center;
}
.logo-txt
{
	position: relative;
    padding:10px;
}
.logo-txt h1
{
	margin:0;
	font-size: 32px;
	font-weight: bold;
	color:#fb4801;
}  
 /*--LOGIN PAGE START--*/
#login-container
{
    padding:10px 25px;
    background-color: transparent;
}
#login-image
{
    width: 100%;
    height: 80px;
    background-image: url('../images/login.png'); 
    background-repeat: no-repeat;
    background-position:center center;
}
#login-container input, #login-container select
{
    height: 50px;
    margin-bottom: 15px;
    border-radius: 0px;
}
#btn-sign-in
{
    width:100%;
    height: 50px;
    font-size:16px;
    font-weight: bold;
    /*background: #c0f2a7;
    background: -moz-linear-gradient(top,  #c0f2a7 0%, #7ec94c 37%, #5fc103 55%, #418c00 100%);
    background: -webkit-linear-gradient(top,  #c0f2a7 0%,#7ec94c 37%,#5fc103 55%,#418c00 100%);
    background: linear-gradient(to bottom,  #c0f2a7 0%,#7ec94c 37%,#5fc103 55%,#418c00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0f2a7', endColorstr='#418c00',GradientType=0 ); */
}

#btn-change-gym
{
    width:100%;
    height: 50px;
    font-size:16px;
    font-weight: bold;
    /*background: #f3c5bd; 
    background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 34%, #e86c57 34%, #ea2803 51%, #c72200 100%);
    background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 34%,#e86c57 34%,#ea2803 51%,#c72200 100%);
    background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 34%,#e86c57 34%,#ea2803 51%,#c72200 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 );*/
}
#footer
{
    width: 100%;
    background-color:#555;
    background-image:url(../images/texture_black.png);
    text-align: center;
    padding:15px 0px;
    border-top:2px solid #fb4801;
}
#footer p
{
    color:#fff;
    padding:0;
   
}
#footer h6
{
    color:#fff;
    margin:0;
    padding:0;
}
/*--LOGIN PAGE END--*/



/*--DASHBOARD PAGE START--*/
#dashboard-container
{
    width:100%;
    min-height:100%;
    overflow: visible;
}
#top-icons-container
{
    overflow:auto;
    float:right;
    color:#fb4801;
    font-weight: bold;
    padding-top:10px;
}
#time-container
{
    overflow: auto;
    float:left;
}
#logout-container
{
    float:right;
}
#logout-container a
{
    color:#fb4801;
}
#logout-container a:hover
{
    text-decoration: none;
}
#tab-color
{
    background-color: #fb4801;
    color:#fff;
    font-weight: bold;
}
#dashboard-container .bbottom
{
    border-bottom: 1px dotted #aaa;
}
#dashboard-container .h-label
{
    margin:0;
}
/*--DASHBOARD PAGE END--*/

/*--MEMBER-FORM PAGE START--*/
    #member-form-container
    {
        width:100%;
        overflow:visible !important;
        padding:5px 5px;
        margin-bottom:30px;
    }
    #member-form-left
    {
        width:100%;
        overflow:visible !important;
        padding:10px 0px;
    }
    #member-form-right
    {
        width:100%;
        overflow:visible !important;
        padding:10px 10px;
    }
    
    #member-form-container input, #member-form-container select, #member-form-container textarea
    {
        margin-bottom: 10px;
        border-radius:0px;
    }
    #txt-address
    {
        height: 100px;
        resize:none;
    }
    #btn-save, #btn-reset, .btn-default
    {
        padding:12px 0px;
        height: 50px;
        font-size:16px;
        font-weight: bold;
    }
    #member-image
    {
        width: 100%;
        height: 280px;
        background-color:#ccc;
    }
    #member-img-upload, #member-img-capture
    {
    	padding:0 10px;
    }
    #member-form-back {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        font-size:25px;
        color:#fb4801;
}
/*--MEMBER-FORM PAGE END--*/

/*--PAYMENT PAGE START--*/
    #payment-container
    {
        width: 100%;
        overflow: auto;
        background-color: #eee;
        border: 1px solid #fb4801;
        border-top:none;
    }
    #payment-button-container
    {
        overflow: auto;
        margin:0 auto;
        background-color:#eee;
    }
    .button-block
    {
        width:100%;
        padding:3px;
        border:1px solid #aaa;
        overflow: auto;
        margin-bottom: 20px;
    }
    #payment-button-container .heading
    {
        font-weight: bold;
        margin-bottom: 20px;
    }
    #btn-collect-payment,#btn-due-payment
    {
        font-size:17px;
        font-weight: bold;
        padding:10px 0px;
        border-radius: 0px;
        background-color: #fb4801;
        color:#fff;
        height: 45px;
        border: 1px solid #fb4801; 
        display: block;
        
    }
    
    /*--COLLECT PAYMENT PAGE START--*/
    #collect-payment-container
    {
        width: 100%;
        overflow: auto;
        background-color: #eee;
        border: 1px solid #fb4801;
        border-top:none;
    }
    #collect-payment-button-container
    {
        overflow: auto;
        margin:0 auto;
        background-color:#eee;
    }
    .collect-payment-button-block
    {
        width:100%;
        padding:3px;
        border:1px solid #aaa;
        overflow: auto;
    }
    #collect-payment-button-container .heading
    {
        font-weight: bold;
        margin-bottom: 20px;
    }
    #txt-collect-payment-years, #txt-collect-payment-id-number
    {
        font-size:17px;
        font-weight: bold;
        border-radius: 0px;
        height: 45px;
        border: 1px solid #fb4801;  
    }
    #btn-collect-payment-go
    {
        font-weight: bold;
        border-radius: 0px;
        padding:8px 0px;
        height: 37px;
        background-color: #fb4801;
        color:#fff;
        font-size: 15px;
    }
    .block-border-none
    {
        border:none;
    }
    /*--COLLECT PAYMENT PAGE END--*/
    /*--FEE STATUS FORM START--*/
        #fee-status-top
        {
            width: 100%;
            overflow: auto;
            //background-color:#eee;
            padding:20px 0px;
        }
        #fee-status-top h1
        {
            font-size: 25px;
            margin: 0px;
            margin-bottom: 10px;
        }
        #fee-status-top input
        {
            border-radius: 0px;
        }
        #image-container
        {
            width: 100%;
            height: 600px;
            background-color:#ddd;
            text-align: center;
            margin-top:5px;
        }
        #image-container .heading
        {
            font-size:25px;
            font-weight: bold;
            margin:10px 0px;
        }
        #image
        {
            width:100%;
            height: 400px;
            border:1px solid #aaa;
        }
        .month
        {
            width: 100%;
            overflow: auto;
            background-color:#eee;
            text-align: center;
            margin:5px 0px;
        }
        .month a
        {
            display: block;
            width: 100%;
            height: 100%;
            color:#fb4801;
            padding:33px 15px;
            font-size:18px;
        }
    /*--FEE STATUS FORM END--*/

.calendar {
	font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif;
	font-size: 0.9em;
	background-color: #eee;
	color: #333;
	border: 1px solid #DDD;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 0.2em;
	width: 260px;
}

.calendar .months {
	background-color: #000;
	border: 1px solid #E78F08;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #FFF;
	padding: 0.4em;
	text-align: center;
	font-size:18px;
	font-weight:bold;
}

.calendar .prev-month,
.calendar .next-month {
	padding: 0;
}

.calendar .prev-month {
	float: left;
}

.calendar .next-month {
	float: right;
}

.calendar .current-month {
	margin: 0 auto;
}

.calendar .months .prev-month,
.calendar .months .next-month {
	color: #FFF;
	text-decoration: none;
	padding: 0 0.4em;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
}

.calendar .months .prev-month:hover,
.calendar .months .next-month:hover {
	background-color: #FFF;
	color: #000;
}

.calendar table {
	border-collapse: collapse;
	padding: 0;
	font-size: 0.8em;
	width: 100%;
}

.calendar th {
	text-align: center;
	padding:5px 0;
	font-size:14px;
	font-weight:bold;
}

.calendar td {
	text-align: right;
	padding: 1px;
	width: 14.3%;
}

.calendar td span {
	display: block;
	color: #1C94C4;
	background-color: #F6F6F6;
	border: 1px solid #CCC;
	text-decoration: none;
	padding: 0.4em 0.2em;
	cursor: pointer;
	font-size:14px;
	font-weight:bold;
}

.calendar td span:hover {
	color: #C77405;
	background-color: #FDF5CE;
	border: 1px solid #FBCB09;
}

.calendar td.today span {
	background-color: #CC3300;
	border: 1px solid #CC0000;
	color: #FFF;
}
/*======== WEB CAM ==============*/

#webcam
{
	width: 320px;
	height:240px;
	background:#efefef;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#canvas 
{
	width: 320px;
	background:#efefef;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#webcam {
	position:relative;
}
#webcam > div {
	position:absolute;
	right:-90px;
	padding:5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}
#flash {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5000;
	width:100%;
	height:500px;
	background-color:#c00;
	display:none;
}
/*======== LARGE LAYOUT==========*/

@media (min-width:1200px)
{
   /*--LOGIN PAGE START--*/
   .space-5
    {
       padding-left:5px;
       padding-right:5px;
    }
    .space-left
    {
        padding-left: 0px;
    }
    .space-right
    {
        padding-right: 0px;
    }
    #login-container
    {
        width:38%;
        height: 450px;
        margin:35px auto;
    }
    #login-image
    {
        height: 180px;
    }
    #footer
    {
        position: fixed;
        bottom:0;
    }
    #footer p
    {
        font-size: 18px;
    }
    /*--LOGIN PAGE END--*/
    
    /*--DASHBOARD PAGE START--*/
    #dashboard-container
    {
        padding:10px; 
    }
    #top-icons-container
    {
        width:34%;
        text-align: right; 
    }
    #time-container
    {
        width: 78%;
    }
    #logout-container
    {
        width:18%;
    }
}

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

@media (min-width: 994px) and (max-width: 1200px)
{
    /*--LOGIN PAGE START--*/
    .space-5
    {
       padding-left:5px;
       padding-right: 5px;
    }
    
    .space-left
    {
        padding-left: 0px;
    }
    .space-right
    {
        padding-right: 0px;
    }
    #login-container
    {
        width:40%;
        height:430px;
        margin:45px auto;
    }
    #login-image
    {
        height: 150px;
    }
     #footer
    {
        position: fixed;
        bottom:0;
    }
    #footer p
    {
        font-size: 16px;
    }
    /*--LOGIN PAGE END--*/
    
    /*--DASHBOARD PAGE START--*/
    #dashboard-container
    {
        padding:10px; 
    }
    #top-icons-container
    {
        width:40%;
        text-align: right; 
    }
    #time-container
    {
        width: 75%;
    }
    #logout-container
    {
        width:20%;
    }
}

/*======== TABLET LAYOUT=========*/    

@media (min-width: 768px) and (max-width: 994px)
{
	
    /*--LOGIN PAGE START--*/
    .space-5
    {
       padding-left:5px;
       padding-right: 5px;
    }
    .space-left
    {
        padding-left: 0px;
    }
    .space-right
    {
        padding-right: 0px;
    }
    #login-container
    {
        width:50%;
        height: 400px;
        margin:50px auto;
    }
    #login-image
    {
        height: 150px;
    }
     #footer
    {
        position: fixed;
        bottom:0;
    }
    #footer p
    {
        font-size: 16px;
    }
    /*--LOGIN PAGE END--*/
    
    /*--DASHBOARD PAGE START--*/
    #dashboard-container
    {
        padding:10px; 
    }
    #top-icons-container
    {
        width:50%;
        text-align: right; 
    }
    #time-container
    {
        width: 75%;
    }
    #logout-container
    {
        width:20%;
    }
}    
    
/*======== MOBILE LAYOUT========*/

@media (max-width: 768px)
{
    /*--LOGIN PAGE START--*/
    .mob-space-5
    {
       padding-left:5px;
       padding-right: 5px;
    }
    .mob-space-0
    {
       padding-left:0px;
       padding-right:0px; 
    }
    .space-left
    {
        padding-left:0px;
       padding-right:0px;
    }
    .space-right
    {
        padding-left:0px;
       padding-right:0px;
    }
    #login-container
    {
        width:100%;
        overflow: auto;
        margin:10px auto;
    }
    #login-image
    {
        height: 120px;
    }
     #footer
    {
        position: fixed;
        bottom:0;
    }
    #footer p
    {
        font-size: 13px;
    }
    /*--LOGIN PAGE END--*/
    
    /*--DASHBOARD PAGE START--*/
    #top-icons-container
    {
        width:100%;
        font-size:13px;
    }
    #time-container
    {
        width: 65%;
    }
    #logout-container
    {
        width:35%;
        text-align: right;
    }
    
}