/* General page layout */
* {margin: 0;}
html, body {padding: 0; height: 100%;}

/* links */
a:link, a:visited, a:active {color: #99cccc; text-decoration: none;}
a:hover {color: #cc3333; text-decoration: none;}

/* Div */
div {text-align: center; margin-left: auto; margin-right: auto;}
.div_container {width: 840px; display: block; padding-bottom: 40px /* Height of the footer */; padding-top: 23px;}
.div_thumbnails, .div_navbuttons, .div_mainpict {min-width: 840px; display: inline-block; white-space: nowrap;}
.div_comments {min-width: 840px; display: block; height: 100%;}
.div_footer {position: absolute; bottom: 0; width:100%; height: 40px;}
.div_left_hold {height: 600px; width: 200px; float:left; position: absolute; display: inline-block;}
.div_right_hold {height: 600px; width: 200px; float:right; position: absolute; display: inline-block; margin-left: -200px;}

/* Table */
table             {border-collapse: collapse; margin: 0 auto;}
.table_mainmenu   {background-color: #FFFACD; border: 1px; width: 100%;}
.table_navmenu    {border-collapse: separate; border-spacing: 1px; background-color: #FFFACD; width: 840px; border: 1px solid #000000; font: 10pt Arial, sans-serif;}
.div_footer table {width: 100%;}

/* Table Data */
table td          {border-style: none; padding: 0;}
.td_home          {width: 45px;}
.td_listbox       {text-align: left;}
.td_position      {width: 130px;}
.td_arrow         {width: 30px;}
.th_footer_left   {text-align: left; width: 300px; font-size:12px;}
.th_footer_right  {text-align: right; width: 100px;}
.table_navmenu td {padding: 0; border: 1px solid #000000;}

/* Image */
img {cursor: pointer; border: 0px;}
.img_arrowbutton  {width:16px; height:16px;}
.img_thumbnail    {float:left;}
.img_navbutton    {width: 120px; height: 20px;}
.img_mainpic      {width: 800px; height: 600px;}
.img_left_arrow   {height:50px; width:50px; position:absolute; top:40%; left:20px; opacity:0; transition: all .2s ease-in-out 0s;}
.img_right_arrow  {height:50px; width:50px; position:absolute; top:40%; right:20px; opacity:0; transition: all .5s ease-in-out 0s;}

/* Properties that both side lists have in common */
div.div-list {width: 10.2em; position: absolute; top: 200px; font-size: 80%; padding-left: 1%; padding-right: 1%; margin-left: 0; margin-right: 0;}
/* and then we put each list on its place */
#div_container_left {left: 0;}
#div_container_right {right: 0;}

/* Footer */
footer {position: fixed; left: 0; bottom: 0; height: 100px; width: 100%;}

/* Effects */
.div_left_hold:hover .img_left_arrow {opacity:0.6;}
.div_right_hold:hover .img_right_arrow {opacity:0.6;}