/*
    style.css

    responsive table/divs

*/

/*
@import '/include/reset.css';

*/

body {
 background:white; text-align:center; 
 }
body { ; text-align:center; }
button { background-color:lightblue; border-radius:15px; height:40px; margin:1px; }
button:hover { background-color:yellow; }
.phno { font-size:0.9em; font-weight:700; display:block; line-height:30px; border:1px solid black; border-radius:15px; background-color:lightblue; }
a:visited { color:blue; }

#main_page { display:table; width:300px; padding:5px; }
#left_pane { display:table; width:100%; }

#title_pane { background:lightgray; display:table; vertical-align:top; width:100%; border:thick solid teal; border-radius:15px; }
#title_text { display:table-cell; width:50%; vertical-align:middle; text-align:center; }
#title_logo { display:table-cell; width:50%; padding:5px; text-align:center; }

#menu_pane { display:table; vertical-align:top; text-align:center; width:100%; margin:6px;}
#menu_box { display:table-cell; padding:5px; }

#image_pane { display:table; vertical-align:top; height:180px; text-align:center; width:100%; display:none; }
#image_box { display:table-cell; background-repeat:no-repeat; }

#mobile_image_pane { display:table; height:200px; width:100%; display:none; margin-left:auto; margin-right:auto; text-align:center; }
#mobile_image_box { display:table-cell; background-repeat:no-repeat; }

#content_pane { background:lightgray; display:table; text-align:center; width:100%; border:thick solid green; border-radius:15px;  }

/*
*/

@media only screen and ( min-width:320px )
{
 body { background-image:url("/images/bike1.jpg"); background-size:cover; }
 #main_page { width:290px; }
}

@media only screen and ( min-width:480px )
{
 #main_page { width:100%; }
 #title_pane { width:280px; }
 #menu_pane { width:280px; }
 #mobile_image_pane { display:table; }
 #image_pane { width:280px; }
 #content_pane { display:table-cell; vertical-align:top; width:100%; min-width:400px; }
 #content_box { padding:0 10% 0 10%; }
}

@media only screen and ( min-width:900px )
{
 #main_page { width:768px; }
 #image_pane { display:table-cell; vertical-align:top; padding:0 50px 0 50px; }
 #mobile_image_pane { display:none; }
}

@media only screen and ( min-width:1200px )
{
 #main_page { width:100%; }
 #title_pane { margin-right:10px; }
 button:hover { background-color:lightgray; color:red; }
}

#menu { position:relative; text-align:center; }
#menu ul { margin:0px; padding:0px; }
#navigation li { list-style:none; }
ul.top-level li { cursor:pointer; width:95%; height:50px; list-style:none; margin:auto; background:#883399; border:white solid; border-width:1px; border-radius:15px; }
#menu a { height:50px; line-height:50px; color:white; display:block; font-size:16px; font-size:16px; font-weight:700; text-decoration:none; border-radius:15px; }
.sub-level { display:none; width:90%; float:right; }
ul.sub-level li { height:40px; margin:5px; background:slategray; opacity:0.8; background-repeat:no-repeat; background-size:220px 40px; border:none; }
ul.sub-level li :hover { background:orange; }
#menu ul.sub-level a { color:black; font-size:16px; font-weight:700; margin-right:30%; }

.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.text_border { color:#000000; font-size:15px; padding:8px 12px; position:absolute; bottom:-8px; width:100%; text-align:center; }

/*
 button { background-color:lightgray; border-radius:0px; font-size:100%; height:100%;  margin:0; border:none; padding:0; color:blue; text-decoration:underline; }
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
*/