/*
    style.css

    responsive table/divs

*/

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

body { background:white; 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:#0000FF; }

#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 dodgerblue; 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%; }
#menu_box { display:table-cell; padding:5px; }
#menu_sub_box { display:table-row; }

#image_pane { display:table; vertical-align:top; height:200px; text-align:center; width:100%; display:none; }
#image_box { display:table-cell; background-repeat:no-repeat; border:9px solid lightgrey; border-radius:15px; padding:5px; background-color:#0f0; }

#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 orangered; border-radius:15px; }
/* #content_box { display:table-cell; padding:5px; } */ /* causes cascading right-padding /home/...tidetables/...moreweather - ??? - why ???  */

@media only screen and ( min-width:320px )
{
/* body { background-image:url("/images/COBLSTON.GIF"); }*/
/* body { background-image:url("/images/WHTPAPER.GIF"); }*/
 body { background-image:url("/images/Flowers.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 { background-color:lightgray; border-radius:0px; font-size:100%; height:100%;  margin:0; border:none; padding:0; color:blue; text-decoration:underline; }
 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:blue; 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; }
ul.sub_level { position:relative; display:none; width:90%; float:right; }

/*
ul.sub-level li { height:40px; margin:5px; background:lightgreen; opacity:0.9; background-repeat:no-repeat; background-size:220px 40px; border:none; }
ul.sub-level li :hover { background:green; }
#menu ul.sub-level a { color:black; font-size:16px; font-weight:700; margin-right:30%; }
*/