@charset "UTF-8";

/* LIVE-DEMO BASE
---------------------------------------- */
#livedemo { margin: 0; padding: 0; color: #999; background-color: #ccc; 
background-image: url(../images/livedemo/naomishow_bg.gif); background-repeat: repeat-x; }
#livedemocam { margin: 0; padding: 0; color: #999; background-color: #000; }
#livedemo a, #livedemocam a { text-decoration: none; }
#livedemo a:hover, #livedemocam a:hover { color: #08c; text-decoration: underline; }
#livedemo img, #livedemocam img { _behavior: url(../js/iepngfix/iepngfix.htc); border: 0; } 
#livedemo h1, #livedemo h2 { color: #fff; margin-bottom: 3px; }
#livedemo h3, #livedemo h5 { color: #ccc; margin-bottom: 3px; }
#livedemo h4, #livedemo h6  { color: #999; margin-bottom: 3px; }
#livedemo h4.attention { color: #08c; }
#livedemo p { color: #999; }

/* LIVE-DEMO LAYOUT
---------------------------------------- */
#wrapper { position: relative; margin: 0 auto; padding:0; border: 0; width: 800px; text-align: left; }
#header, #breadcrumbs, #footer, #technavigation { position: relative; margin: 0 auto; padding: 0; border: 0; width: 800px; clear: both; }
#header { margin-bottom: 10px; height: 90px; }
#breadcrumbs { margin-bottom: 25px; font-size: 10px; line-height: 15px; color: #999; text-decoration: none; text-indent: 5px; }
#breadcrumbs a { color: #999; }
#footer { margin: 80px auto; }

/* TECH-FOOTER */
#global_footer a { color: #08c; text-decoration: none; }
#global_footer a:hover { text-decoration: underline; }

/* LIVE-DEMO NAVIGATION
---------------------------------------- */
#livedemo_navigation { margin: 0 auto 5px; width: 780px; height: 40px; zoom: 1; }
#livedemo_navigation:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#livedemo_navigation h1 { line-height: 40px; display: inline; float: left; margin: 0; padding: 0; }
#livedemo_navigation h1 a { line-height: 40px; background-position: 0 0; background-repeat: no-repeat; color: #ccc; display: block; font-weight: normal; width: 200px; height: 40px; position: relative; outline: none; text-decoration: none; text-indent: -9999px; background-image: url(../images/livedemo/naomishow_logo.png); _behavior: url(../js/iepngfix/iepngfix.htc); cursor: pointer; }
#livedemo_navigation ul { display: inline; float: right; margin: 0; font-weight: normal; font-size: 10px; line-height: 15px; }
#livedemo_navigation ul li { display: inline; }
#livedemo_navigation ul li a { color: #ccc; float: left !important; margin-top: 25px; margin-left: 25px; margin-right: 5px; padding: 0; text-decoration: none; }
#livedemo_navigation ul li.on a { color: #fff; font-weight: bold; }
#livedemo_navigation ul li a:hover { color: #08c; }

/* LIVE-DEMO CONTAINER
---------------------------------------- */
#livedemo-container { position: relative; width: 800px; margin: 0; padding-top: 40px; 
background-image: url(../images/livedemo/bgtable_head.png); 
_background-image: url(../images/livedemo/bgtable_head.gif); background-repeat: no-repeat; background-position: 0 0; }
#livedemo-main { position: relative; width: 800px; margin: 0; padding-bottom: 40px; 
background-image: url(../images/livedemo/bgtable_btm.png); 
_background-image: url(../images/livedemo/bgtable_btm.gif); background-repeat: no-repeat; background-position: 0 100%; }
#livedemo-content { position: relative; width: 800px; margin: 0; padding: 0; 
background-image: url(../images/livedemo/bgtable_body.png); 
_background-image: url(../images/livedemo/bgtable_body.gif); background-repeat: repeat-y; }

/* LIVE-DEMO BOX
---------------------------------------- */
#livedemo-content #livedemo-box { margin: 0 40px; padding: 0 0 1px; }
#livedemo-content #livedemo-box .box { position: relative; margin-bottom: 40px; padding: 0; zoom :1; }
#livedemo-content #livedemo-box .box:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#livedemo-content #livedemo-box .box.top { padding-top: 40px; }
#livedemo-content #livedemo-box .box.bottom { margin-bottom: 0; }

/* ********** */
img.livedemoindex { margin: 0 0 40px; }
img.btn_live { float: left; margin: 0 20px 0 0; }
img.btn_appli { float: left; margin: 0; }
ul.explanation { list-style: inside decimal; padding-left: 5px; margin-bottom: 0; }

/* CAMERA LAYOUT */
#container { position: relative; display: inline; float: left; width: 800px; height: 650px; margin: 0; padding: 0; border: 0; background: url(../images/livedemo/mainscreen.gif) no-repeat 0 0; }
#camera01, #camera02, #camera03, #camera04 
{ width: 320px; height: 240px; margin: 0; padding: 0; border: 0; position: absolute; z-index: 1; } 
#zoom01, #zoom02, #zoom03, #zoom04 
{ width: 120px; height: 30px; margin: 0; padding: 0; border: 0;  position: absolute; left: 220px; top: 230px; z-index: 100; } 
#camera01 { left: 50px; top: 65px; } 
#camera02 { left: 425px; top: 65px; } 
#camera03 { left: 50px; top: 350px; } 
#camera04 { left: 425px; top: 350px; } 

/* CAMERA ZOOM */
#livedemocamera { margin: 0; padding: 0; color: #666; background-color: #fff; }
#livedemocamera #wrapper { position: relative; margin: 0; padding:0; border: 0; width: auto; text-align: left; }
#zoomcamera { position: relative; width: 650px; height: 490px; margin: 0; padding: 0; border: 0; background: url(../images/livedemo/camframe.gif) 0 0 no-repeat; }
#zoomcamera #cam { position: relative; left: 5px; top: 5px; width: 640px; height: 480px; margin: 0; padding: 0; border: 0; }
#zoomcamera #cam iframe { width: 640px; height: 480px; background: none; }