* {
  /*   box-sizing: border-box;*/
}

body
{
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
background-image:url(/img/green_cup.png);
}

#canvas
{
width: 100%;
max-width: 797px;
margin: 0 auto;
background-color: white;
min-height: 300px;
}

#img-auto
{
width: 100%;
height: auto;
}


#hdr-img
{
width: 98%;
max-width: 795px;
height: auto;
max-height: 108px;
margin: 0 auto;
border-width: 1px;
border-style: solid;
border-color: black;
}


.divshadow
{
margin-top: 0px;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;

/*
border-width: 1px;
border-style: solid;
height: 100%;
max-height: 110px;
margin-bottom: 5px;
*/
}

#loginbox
{
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
max-width: 220px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-style: solid;
font-weight: normal;
color: black;
text-align: center;
background-color: #b5e4f1;
}

#logform
{
margin-top: 10px;
}


#home-btn
{
float: left;
}

#logout-btn
{
float: right;
}

#usr-box
{
width: 90%;
max-width: 700px;
margin: 0 auto;
}

#dshbox-btns
{
width: 98%;
max-width: 600px;
margin: 0 auto;
text-align: center;
}


.hd1
{
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}

.hd2
{
margin-top: 15px;
margin-bottom: 5px;
text-align: left;
font-size: 1.1em;
font-weight: bold;
}

.hd3
{
margin-top: 25px;
margin-bottom: 15px;
text-align: center;
font-size: 1.8em;
font-weight: normal;
}

.hd4
{
margin-top: 3px;
margin-bottom: 2px;
text-align: left;
font-size: 1.1em;
font-weight: bold;
}

.hd5
{
margin-top: 3px;
margin-bottom: 2px;
text-align: left;
font-size: 0.8em;
font-weight: bold;
}

#listings
{
list-style-type: none;
padding: 0px;
margin: 0px;
font-size: 0.9em;
font-weight: 500;
color: #184445;
/* text-shadow:2px 2px white; */
}

.img_shdw
{
border-width: 1px;
border-style: solid;
border-color: black;
box-shadow: 10px 10px 5px gray;
background:#e8edee;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.review-filled-data
{
font-size: 1.0em;
/*background-color: #336699;
color: white;*/
color: #336699;
padding-left: 2px;
padding-right: 2px;
}

.AR_labels
{
margin-left: 10px;
font-size: 1.0em;
margin-bottom: 10px;
}

.input_hdngs
{
padding: 3px;
margin-top: 15px;
margin-bottom: 25px;
text-align: center;
font-size: 0.9em;
font-weight: bold;
border-width: 1px;
border-style: solid;
border-color: black;
box-shadow: 10px 10px 5px gray;
background:#e8edee;
border-radius:3px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.show_image
{
max-width: 100%;
max-height: 250px; 
overflow-y: scroll; 
overflow-x: scroll;
padding: 0px;
margin-bottom: 20px;
border-width: 1px;
border-style: solid;
border-color: black;
/*
setting max-width to 100% means that maximum width of that particular div can not be more than 100% of it's containing (outter) div.
this is necessary so that if the device is mobile and upload image size is more than 300px, image will not overflow out of containing div but will scroll on x & y axis.
if the device is pc/laptop, containing div will be 800px and hence image will not scroll unless exceeding 800px horizontally.
*/
}

#show-prof
{
width: 98%;
max-width: 500px;
margin: 0 auto;
margin-top: 20px;
}
.clr
{
clear: both;
margin-bottom: 10px;
}

.show-prof-c1
{
width: 40%;
font-size: 0.8em;
font-weight: bold;
float: left;
margin-right: 10px;
}

.show-prof-c2
{
width: 50%;
font-size: 0.9em;
float: left;
}

#ftr-txt
{
margin-top: 5px;
width: 100%;
text-align: center;
color: black;
font-size: 0.8em;
}