/*STYLE LOGIN*/

html, body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin: 0; padding: 0; }
div#login { border-bottom: solid 2px #B55100; padding: 10px; background: #FE7805; color: #ffffff; }
div#login table { float: right; }
div#loginTop { margin: 10px 0; font-weight: bold; }
div#loginTop img { float: right; border: none; background: none; }
div#login input { font-family: Verdana;  }
div#loginHeader { color: #000000; }
div#loginMain { width: 100%; margin: 0; padding: 0; }
div#loginHeader { text-align: right; font-family: Verdana; font-weight: bold; text-transform: uppercase; }

/* Mobile responsive styles */
@media (max-width: 768px) {
    html, body { font-size: 14px; }
    
    div#login table { 
        float: none; 
        width: 100%; 
        margin: 0;
    }
    
    div#login table tr { 
        display: block; 
        margin-bottom: 10px; 
    }
    
    div#login table td { 
        display: block; 
        padding: 5px 0; 
        text-align: left;
    }
    
    div#login table td:first-child { 
        font-weight: bold; 
        color: #ffffff;
    }
    
    div#login input { 
        width: 100%; 
        padding: 8px; 
        font-size: 16px; 
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    div#login input[type="submit"] { 
        background: #B55100; 
        color: white; 
        border: none; 
        padding: 12px; 
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
    }
    
    div#login input[type="submit"]:hover { 
        background: #8B3A00; 
    }
}

/*REGISTER*/
div#registerMain { margin: 100px auto; width: 700px; padding: 0; font-family: Verdana; font-size: 12px; color: #595959; }
div#registerMain input, textarea { font-family: Verdana; font-size: 12px; }
div#register { margin: 0; padding: 10px; border: solid 2px #bebebe; line-height: 17px; background: #f0f0f0;  }
div#register p { margin: 0; padding: 5px 0; }

div#infoDiv { filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: absolute; top: 400px; left: 50%; margin-left: -125px; padding: 20px; background: #FFFFCC; border: solid 2px #000000; width: 250px; text-align: left; font-weight: bold; font-size: 100%; font-family: Verdana; font-size: 12px; color: #000000; z-index: 99; }

/*ADD*/
div#add { border: solid 2px #bebebe; margin: 100px auto; width: 680px; padding: 10px; background: #f0f0f0; line-height: 20px; color: #595959; }
div#add a, div#topLink a { color: #0000ff; text-decoration: none; }
div#add a:hover, div#topLink a:hover { text-decoration: underline; color: #ff0000;  }
div#add p.header { letter-spacing: 5px; margin: 0; padding: 0; }

/*TOPLINK*/
div#topLink { text-align: right; float: right; }

/*FOOTER*/
#footer {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 30px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

#footer p {
	margin: 0;
	padding-top: 40px;
	line-height: normal;
	font-size: 12px;
	color: #404040;
}

#footer a {
	color: #404040;
	text-decoration: none;
}

#footer a:hover {
	color: #FE7805;
	text-decoration: underline;
}

/* Mobile responsive styles for register and other sections */
@media (max-width: 768px) {
    div#registerMain { 
        margin: 20px auto; 
        width: 95%; 
        padding: 0 10px; 
    }
    
    div#registerMain table { 
        width: 100%; 
    }
    
    div#registerMain table tr { 
        display: block; 
        margin-bottom: 15px; 
    }
    
    div#registerMain table td { 
        display: block; 
        padding: 5px 0; 
        text-align: left;
    }
    
    div#registerMain table td:first-child { 
        font-weight: bold; 
        margin-bottom: 5px;
    }
    
    div#registerMain input, 
    div#registerMain textarea, 
    div#registerMain select { 
        width: 100%; 
        padding: 10px; 
        font-size: 16px; 
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    div#registerMain input[type="submit"], 
    div#registerMain input[type="button"] { 
        background: #FE7805; 
        color: white; 
        border: none; 
        padding: 12px 20px; 
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    div#registerMain input[type="submit"]:hover, 
    div#registerMain input[type="button"]:hover { 
        background: #B55100; 
    }
    
    div#add { 
        margin: 20px auto; 
        width: 95%; 
        padding: 15px; 
    }
    
    div#add p.header { 
        letter-spacing: 2px; 
        font-size: 16px;
    }
    
    div#infoDiv { 
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        margin: 0; 
        width: 90%; 
        max-width: 300px;
    }
    
    div#topLink { 
        text-align: center; 
        float: none; 
        margin-bottom: 15px;
    }
    
    div#topLink a { 
        display: inline-block; 
        margin: 0 10px; 
        padding: 8px 12px;
        background: #FE7805;
        color: white !important;
        text-decoration: none;
        border-radius: 4px;
    }
    
    div#topLink a:hover { 
        background: #B55100; 
        text-decoration: none;
    }
    
    #footer {
        padding: 20px 0;
    }
    
    #footer p {
        padding-top: 20px;
        font-size: 14px;
    }
    
    #footer a {
        display: inline-block;
        margin: 0 5px;
        padding: 5px 8px;
    }
}