/* This file is contains the following sections: Update: Revision: 20101102 by Martin Mulone - The new revision contains: - Html5, good practice and normalization support. - Diferent hacks. - The normalization and some tags come from diferent sites so i keep the credits and comments. but the base of support html5 come from: - ez.css (http://www.ez-css.org/layouts) - reset common tags - choose default fonts - choose link style - add bottom line to table rows - labels bold and occasionally centered - make all input fields the same size - add proper separation between h1-h6 and text - always indent the first line and add space below paragraphs - bullets and numbers style and indent - form and table padding - code blocks - left and right padding to quoted text - page layout alignment, width and padding (change this for spaces) - column widths (change this to use left_sidebar and right_sidebar) - backrgound images and colors (change this for colors) - web2py specific (.flash, .error) Notice: - even if you use a different layout/css you may need classes .flash and .error - this is all color neutral except for #349C01 (header, links, lines) - there are two backrgound images: images/background.png and images/header.png License: This file is released under BSD and MIT */ /* credit is left where credit is due. additionally, much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ /* File changed to meet needs of Control Applications LTD. */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } a:hover { text-decoration: underline } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ /* fonts.css from the YUI Library: developer.yahoo.com/yui/ Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages There are three custom edits: * remove arial, helvetica from explicit font stack * make the line-height relative and unit-less * remove the pre, code styles */ body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */ /*table { font-size:inherit; font:100%; }*/ select, input, textarea, button { font:99% sans-serif; } /* normalize monospace sizing * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* * minimal base styles */ /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ body, select, input, textarea { color:#444; } /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ /* www.aestheticallyloyal.com/public/optimize-legibility/ */ h1,h2,h3,h4,h5,h6 { font-weight: bold; } /* always force a scrollbar in non-IE */ html { overflow-y: scroll; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a, a:active, a:visited { color:#607890; } a:hover { color:#036; } ul, ol { margin-left: 1.8em; } ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; } small { font-size:85%; } strong, th { font-weight: bold; } td, td img { vertical-align:top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ .ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */ /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } /* input[type="checkbox"] { vertical-align: bottom; } */ .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea { margin: 0; } /* colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* These selection declarations have to be separate. No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink. */ ::-moz-selection{ background: #555; color:#fff; text-shadow: none; } ::selection { background:#555; color:#fff; text-shadow: none; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #555; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible;} /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* * Non-semantic helper classes */ /* for image replacement */ .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display:none; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */ .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ .clearfix { zoom: 1; } /*********** layout info (ez.css) ***********/ /* 2009 -2010 (c) | ez-css.org * ez-plug-min.css :: version 1.1 :: 01182010 */ .ez-wr:after,.ez-box:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ez-wr,.ez-box,.ez-last{display:inline-block;min-height:0}/* \*/ * html .ez-wr,* html .ez-box,* html .ez-last{height:1%}.ez-wr,.ez-box,.ez-last{display:block}/* */.ez-oh{overflow:hidden}* html .ez-oh{overflow:visible}.ez-oa{overflow:auto}.ez-dt{display:table}.ez-it{display:inline-table}.ez-tc{display:table-cell}.ez-ib{display:inline-block}.ez-fl{float:left}* html .ez-fl{margin-right:-3px}.ez-fr{float:right}* html .ez-fr{margin-left:-3px}.ez-25{width:25%}.ez-33{width:33.33%}.ez-50{width:50%}.ez-66{width:66.66%}.ez-75{width:75%}.ez-negmr{margin-right:-1px}* html .ez-negmr{margin-right:-4px}.ez-negmx{margin-right:-1px}.ez-negml{margin-left:-1px}* html .ez-negml{margin-left:-4px} /*********** add bottom line to table rows ***********/ th, td { padding: 0.1em 0.5em 0.1em 0.5em;} /*********** labels bold and occasionally centered ***********/ label { white-space: nowrap; } label, b, th { font-weight: bold; } thead th { text-align: center; border-bottom: 1px solid #444; } /*********** forms and table padding ***********/ form, table { padding: 5px 10px 5px 10px; } /*********** code blocks ***********/ code { padding: 3px 5px; font-family: Andale Mono, monospace; font-size: 0.9em; } /*********** left and right padding to quoted text ***********/ blockquote { background: #cccccc; border-left: 30px transparent; border-right: 30px transparent; /*padding: 5px;*/ } input[type=text], input[type=password], textarea, select { margin: 2px 15px 2px 5px; /* width: 280px; */ background: #fff; color: #555; border: 1px solid #dedede; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-size: 12px; } input[type=text], input[type=password] { height: 16px; } select[multiple=multiple] { height: 90px; } input[type=submit], input[type=button], button { margin: 0px; /*width: 85px;*/ height: 22px; background: #eaeaea; color: #555; border: 1px solid #dedede; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .w2p_fw input[type=submit], .w2p_fw .add_button, .del_device_button, #view_group_io_element_submit, #activate_button { margin: 10px 0 0 10px; float: right; } fieldset { border: 1px solid #dedede; padding: 6px; } legend { font-weight: bold; } input:focus, textarea:focus { background: #fafafa; } p {text-indent:30px;} p, blockquote { margin-bottom: 10px; } h1,h2,h3,h4,h5,h6 { line-height: 170%; } h1 {font-size: 2.0em;} h2 {font-size: 1.8em;} h3 {font-size: 1.4em;} h4 {font-size: 1.2em; margin-top: 30px;} h5 {font-size: 1.0em;} h6 {font-size: 0.8em;} optgroup { color: green; } optgroup option{ color: black; } /*********** page layout alignment, width and padding ***********/ /*body {background-color: #000;}*/ #container, #header, #page, #content, #statusbar, #footer, #wrapper { display:block; } #wrapper {width: 900px;} #container { margin: 0 auto; padding: 0; } #wrapper {margin: 0 auto;} #wrapper {background-color: transparent; padding: 5px;} #statusbar { margin: 5px 0px 20px 0px;} #footer { margin-top: 30px; padding: 5px; } .full_screen #footer { display: none; } #statusbar, #footer { background: #eaeaea; border-top: 1px #aaa solid; } #logo { } #appname { color: #cccccc; } /* sidebars */ #right_sidebar, #left_sidebar { position: absolute; top: 100px; /*-moz-transition:left 1s; /* Firefox 4 */ /*-webkit-transition:left 1s; /* Safari and Chrome */ /*-o-transition:left 1s; /* Opera */ z-index: 700; } #left_sidebar { left: 0px; width:200px; min-height: 10px; } #right_sidebar { left: auto; right: 0px; } #right_sidebar, #left_sidebar { width: 160px; display: none; margin: 4px; padding: 4px; background:white; border:1px solid orange; } #left_sidebar h6, #right_sidebar h6 { background-color: orange; margin-bottom: 4px; height: 10px; } #right_sidebar { float:left; } #left_sidebar { float:left; } #right_sidebar.closed, #left_sidebar.closed { height: 10px; width: 10px!important; overflow: hidden; } #content { float: left; position: relative; /*width: 740px;*//*width: 63%;*/ /*width: 640px; float:left;*/ } /* uncomment this if you are going to use sidebars */ .auth_navbar { top: 0px; float: right; padding: 3px 10px 3px 10px; } /*********** web2py specific ***********/ div.flash { font-weight: bold; display: none; position: fixed; padding: 10px; top: 40px; right: 10px; min-width: 280px; opacity: 0.85; margin: 0px 0px 10px 10px; color: #fff; vertical-align: middle; cursor: pointer; background: #000; border: 2px solid #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 2070; } div.error { background-color: red; color: white; padding: 3px; } /*************************** * CSS 3 Buttons * http://github.com/michenriksen/css3buttons * created by Michael Henriksen * License: Unlicense * * *******************/ a.button { display: inline-block; padding: 3px 5px 3px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; } a.button.primary { font-weight: bold } a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; } a.button:active, a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; } a.button:active { top: 1px } a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; } a.button.negative:active, a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; } a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 2px 10px 2px 10px; } a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; } a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; } a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; } a.button.left:active, a.button.middle:active, a.button.right:active { top: 0px } a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; } a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('images/css3buttons_icons.png'); background-repeat: no-repeat; } a.big.button span.icon { top: 0px } a.button span.icon.book { background-position: 0 0 } a.button:hover span.icon.book { background-position: 0 -15px } a.button span.icon.calendar { background-position: 0 -30px } a.button:hover span.icon.calendar { background-position: 0 -45px } a.button span.icon.chat { background-position: 0 -60px } a.button:hover span.icon.chat { background-position: 0 -75px } a.button span.icon.check { background-position: 0 -90px } a.button:hover span.icon.check { background-position: 0 -103px } a.button span.icon.clock { background-position: 0 -116px } a.button:hover span.icon.clock { background-position: 0 -131px } a.button span.icon.cog { background-position: 0 -146px } a.button:hover span.icon.cog { background-position: 0 -161px } a.button span.icon.comment { background-position: 0 -176px } a.button:hover span.icon.comment { background-position: 0 -190px } a.button span.icon.cross { background-position: 0 -204px } a.button:hover span.icon.cross { background-position: 0 -219px } a.button span.icon.downarrow { background-position: 0 -234px } a.button:hover span.icon.downarrow { background-position: 0 -249px } a.button span.icon.fork { background-position: 0 -264px } a.button:hover span.icon.fork { background-position: 0 -279px } a.button span.icon.heart { background-position: 0 -294px } a.button:hover span.icon.heart { background-position: 0 -308px } a.button span.icon.home { background-position: 0 -322px } a.button:hover span.icon.home { background-position: 0 -337px } a.button span.icon.key { background-position: 0 -352px } a.button:hover span.icon.key { background-position: 0 -367px } a.button span.icon.leftarrow { background-position: 0 -382px } a.button:hover span.icon.leftarrow { background-position: 0 -397px } a.button span.icon.lock { background-position: 0 -412px } a.button:hover span.icon.lock { background-position: 0 -427px } a.button span.icon.loop { background-position: 0 -442px } a.button:hover span.icon.loop { background-position: 0 -457px } a.button span.icon.magnifier { background-position: 0 -472px } a.button:hover span.icon.magnifier { background-position: 0 -487px } a.button span.icon.mail { background-position: 0 -502px } a.button:hover span.icon.mail { background-position: 0 -514px } a.button span.icon.move { background-position: 0 -526px } a.button:hover span.icon.move { background-position: 0 -541px } a.button span.icon.pen { background-position: 0 -556px } a.button:hover span.icon.pen { background-position: 0 -571px } a.button span.icon.pin { background-position: 0 -586px } a.button:hover span.icon.pin { background-position: 0 -601px } a.button span.icon.plus { background-position: 0 -616px } a.button:hover span.icon.plus { background-position: 0 -631px } a.button span.icon.reload { background-position: 0 -646px } a.button:hover span.icon.reload { background-position: 0 -660px } a.button span.icon.rightarrow { background-position: 0 -674px } a.button:hover span.icon.rightarrow { background-position: 0 -689px } a.button span.icon.rss { background-position: 0 -704px } a.button:hover span.icon.rss { background-position: 0 -719px } a.button span.icon.tag { background-position: 0 -734px } a.button:hover span.icon.tag { background-position: 0 -749px } a.button span.icon.trash { background-position: 0 -764px } a.button:hover span.icon.trash { background-position: 0 -779px } a.button span.icon.unlock { background-position: 0 -794px } a.button:hover span.icon.unlock { background-position: 0 -809px } a.button span.icon.uparrow { background-position: 0 -824px } a.button:hover span.icon.uparrow { background-position: 0 -839px } a.button span.icon.user { background-position: 0 -854px } a.button:hover span.icon.user { background-position: 0 -869px } /***************************************************** * HERE YOU CAN START TO WRITE YOUR OWN DIVS */ /* * Media queries for responsive design */ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you j.mp/textsizeadjust html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ } #header { background: url("images/header_grad.png") repeat-x scroll 0 -7px white; position: fixed; width: 100%; height: 66px; z-index: 2060; } .full_screen #header { display: none; } #header_state_button { position: fixed; top: 0; left: 0; z-index: 1010; width: 20px; height: 20px; /* background: url('images/ArrowDouble.png') 20px 0; */ cursor: pointer; } .full_screen #header_state_button { background: url('images/ArrowDouble.png') 0px 0; } #logo-floater img { position: absolute; left: 20px; top: -17px; } #footer { background: hsl(24%, 100%, 100%); border-top: 2px #25395B solid; height: 23px; border-bottom: 2px #25395B solid; } #wrapper { padding-top: 65px; width: 800px; min-height: 650px; } .full_screen #wrapper{ padding-top: 5px; } .auth_navbar a { color: #334969; } .sf-menu { position: absolute; top: 33px; left: 190px; } .sf-menu li { background: transparent!important } .sf-menu li a { color: #DDD; } .sf-menu a:hover { color: #FFF!important; } .sf-menu li a:visited { color: #DDD; } .web2py-menu-vertical a:visited { color: #DDD; } .sf-shadow ul { background: url(images/shadow.png) #4F719F!important; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: transparent!important; outline: 0; color: #FFF; } .sf-menu a { border: none!important; } .sf-shadow ul { background: url('images/shadow.png') no-repeat bottom right; padding: 0 8px 6px 0!important; -moz-border-radius-bottomleft: 6px!important; -moz-border-radius-topright: 6px!important; -moz-border-radius-bottomright: 2px!important; -moz-border-radius-topleft: 2px!important; -webkit-border-bottom-left-radius: 6px!important; -webkit-border-top-right-radius: 6px!important; -webkit-border-bottom-right-radius: 2px!important; -webkit-border-top-left-radius: 2px!important; } fieldset { border: none; } .editProjectButton { font-size: 10px; } #building_title{ width: 185px; } #building_image { width: 160px; } h2.ca_new { margin-left: 20px; } h2.ca_new a { color: #25256C; } .ca_user_details, .ca_user_tags { clear: both; } .ca_tag { float: left; font-size: 10px; margin: 2px; border: solid 2px #40597C; padding: 2px; line-height: 10px; background: #EEEE77; } /*.two-fields { width: 50%; float: left; }*/ #hidden { display: none; } #showMore a, .showMore a { text-decoration: none; } #showMore, .showMore { padding-left: 10px; background: url("images/demo-spindown-closed.gif") no-repeat scroll 0 7px transparent } #showMore.open, .showMore.open { background: url("images/demo-spindown-open.gif") no-repeat scroll 0 7px transparent } .submitButton { text-align: right; } table.full_size { width: 100%; } table.fixed_size { width: 400px; } table.full_size input, table.fixed_size input, table.full_size select, table.fixed_size select, table.full_size button, table.fixed_size button { width: 95%; } table.fixed_size input.add_button, table.fixed_size input.del_device_button, table.full_size input.add_button, table.full_size input.del_device_button { margin-left: 5px; width:auto; margin-top:5px; margin-bottom:5px; } table.fixed_size input.del_device_button, table.full_size input.del_device_button { float: right; } table.elements_table { margin-top: 5px; } input.fixed_size label, table.full_size label{ width: 100px; } table.elements_table th a { text-decoration: none; } table.elements_table thead th { background-color: #e5e5e5; } table.elements_table td, table.elements_table th { border: solid 1px #eee; } table.elements_table tbody tr:nth-child(even) { background-color: #f5f5f5; } /* full size table colums*/ .controls_chkbox { width: 13px; } table.full_size td.select_cell { padding: 0 5px 0 0; } table.full_size td.small, table.full_size th.small { width: 40px; } table.full_size td.medium, table.full_size th.medium { width: 60px; } table.full_size td.wide, table.full_size th.wide { width: 150px; } table.full_size tr.hidden_row{ display: none; } table.full_size tr.hidden_row table{ margin: 15px 0px; } table.full_size tr.hidden_row table th{ background-color: white; } table.program_ios input { width: 90%; } table.full_size select, table.full_size input { margin: 2px 5px 2px 5px; } #auth_user_is_manager, #auth_user_is_tech, #auth_user_is_set_point { margin-bottom: 4px; margin-left: 5px; width: auto; } .datetimeField { width: 167px; } .page_nav { clear: none; font-size: 10px; } .page_next, .page_prev { width: 40px; text-align: center; } .page_next { float: right; } .page_prev { float: left; } .page_next a, .page_prev a { display: block; border: solid 1px #eee; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; text-decoration: none; background-color: #f5f5f5; } .page_next a:hover, .page_prev a:hover { background-color: #eee; } .page_num { text-align: right; font-size: 12px; color: #486286 } .port_devices { float: left; margin-left: 0px; width: 25%; } .port_devices li { list-style: none; /* width: 185px; */ overflow: hidden; border: solid 2px #E6E6E6; margin-left: 3px; margin-bottom: 3px; background-color: #F0F0F0; border-radius: 5px 0 0 0; line-height: 16px; height: 16px; font-size: 10px; padding-left: 5px; } .port_devices li:hover { border-color: #F0F0FF; } .port_devices li.active { border-color: green; } .port_devices li.active:hover { border-color: #AAEEAA; } .not_checkbox { float: left; width: 80%; /* width: 163px; */ } .port_devices input[type=checkbox] { float: right; margin-right: 5px; margin-top: 2px; } .ie6 .port_devices input[type=checkbox], .ie7 .port_devices input[type=checkbox], .ie8 .port_devices input[type=checkbox] { margin-top: 0px; } .port_devices li.off { border-color: #E6E6E6; background-color: #F0F0F0; } .port_devices li input { padding: 3px; } .port_devices li.changed { background-image: url("images/updating.png"); background-repeat: no-repeat; } .port_devices li.on_undefined { border-color: green; background-color: yellow; } .port_devices li.sleep1 { border-color: #FFCCCC; background-color: #FFCCCC; color: black; } .port_devices li.sleep2 { border-color: #FF6666; background-color: #FF6666; color: black; } .port_devices li.error { border-color: red; background-color: red; color: black; } .port_devices li.on { border-color: green; background-color: #11EE11; color: black; } .port_devices li.on_unconfirmed { border-color: green; background-color: #DFA; color: black; } #point_popup, #load_form { display: none; } #load_form table, #load_form form { margin: 0; padding: 0; } #load_form input[type="text"], #load_form input[type="password"], #load_form select { width: 100%; } .settings_builder table { border: solid 1px #eee; padding: 0px; width: 280px; margin-left: 5px; } .settings_builder tr td:first-child { width: 70px; } .settings_builder tr td input, .settings_builder tr td select { width: 185px; } #port_line3_active__row .w2p_fw { padding-bottom: 10px; } .port_line { float: left; } .port_line_buttons { float: right; margin: 5px; text-indent: 0; } .port_line_select_all { border: none!important; background: transparent!important; font-size: 13px!important; } .port_line_select_all .port_line_buttons { margin: 0!important; } .clr { clear: both; } .server_connection_failed { border: solid 2px red; } .status_fail { color: red; } .status_ok { color: green; } #port_device_stats_buttons { margin-top: 20px; } #port_device_stats_buttons button.active { background-color: #AAAAAA; } #port_device_stats_buttons button { background-color: #EAEAEA; } #locked_col { width: 30px; } .file_td input { width: 40px!important; } h4.io_table { margin-top: 30px; margin-bottom: 0px; zoom: 1 /* IE 6-8 floats clear */ } h4.io_table:after { /* Clearing floats on all browser but IE */ content: "."; height: 0; visibility: hidden; display: block; clear: both; } .clickme { cursor: pointer; } #alarms_status { width: 200px; height: 100px; position: absolute; top: 0px; left: 0px; } #alarms_status.waiting { background: url('images/ramzor.png') no-repeat white; } .alarms { margin-top: 10px!important; } h4.device_heading { border-bottom: 1px solid #ddd; padding-top: 20px; margin-bottom: 10px; width: 100%; } table.program_ios { margin-bottom: 5px; } table.program_ios td,table.program_ios th { border: 1px solid #cacaca; } table.program_ios th { background-color:#e5e5e5; } table.program_ios input { border: solid 1px #FFF; margin-left: 3px; } div.io_heading { float: left; } div.io_table_buttons { float: right; } .file_td { width: 70px; } .is_active_td, .point_number_td, .placement_td, .port_number_td { width: 20px; } .ordering_td { width: 20px; text-align: center; } table.full_size td.ordering_td input { width: 35px; } .type_td { width: 35px; } .level_td { width: 45px; } .trend_td{ width: 20px; } .a_td, .b_td, .min_val_td, .max_val_td{ width: 55px; } .controls { width: 100px; text-align: center; } #events .controls input { width: 80px; } #events .controls { width: 75px; padding-left: 25px; } table.program_ios tr.changed td.events_td_controls{ background: url("images/askterix.png") no-repeat scroll 4px 3px transparent; } td.events_td_type { width: 80px; } #events tr.changed .controls { background: url("images/askterix.png") no-repeat scroll 2px 3px transparent; } table.program_ios tr.changed td.controls, table.program_ios tr.added td.controls { background: url("images/askterix.png") no-repeat scroll 26px 3px transparent; } td.events_td_point_number,td.events_td_port_number,td.events_td_placement{ background-color: #F4F4FA; } th.events_td_group { width: 195px; } td.events_td_alarm input { color: red; } table.program_ios td input:focus { border: solid 1px orange; } .io_update_button { margin-left: 10px; } .io_table_buttons { margin-top: 5px; font-size: 15.45px; } .port_settings_hidden { display: none; } .web2py_paginator { margin-top: 20px; } .web2py_paginator li span{ text-decoration: underline; } .web2py_paginator li a { background-color: #EEE; text-decoration: none; } .web2py_paginator li.points { border: none; background-color: transparent; } .web2py_paginator li { float: left; list-style: none; width: auto; margin-right: 10px; padding: 0 5px 0; text-align: center; border-radius: 3px; border: 1px solid #ccc; background-color: #eee; } .web2py_console input[type=submit]{ margin-right: 5px; } #program_import_select { width: 300px; } #import_from_form { display: none; } input[type=text][disabled],input[type=submit][disabled],select[type=text][disabled] { color: grey; } .device_cpu_td, .device_port_td { width: 20px; } .events_td_point_number,.events_td_active, .events_td_priority, .events_td_level, .events_td_category, .events_td_group_num { width: 20px; } .events_td_controls { width: 10px; } form#search_form { padding: 0; margin-bottom: 20px; border: none; } form#search_form table { width: 100%; } form#search_form table td { border: none; } form#search_form table input[type=text] { width: 130px; } #event_nonactive, #device_nonactive { margin-bottom: 4px; margin-left: 10px; } #search_event_type { width: 100px; } #log_entries_search:after, #log_entries_search div:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } #log_entries_search, #log_entries_search div { zoom: 1; } #log_entries_search label { width: 80px; } #log_entries_search input[type=text] { width: 180px; } #log_entries_search label, #log_entries_search input[type=text] { display: block; float: left; } .element_off { color: red; } .element_on { color: green; } .event_log_search .advanced_form { display: none; } .event_log_search select{ width: 150px; } #port_settings_form { display: none; } #activate_button:disabled { color: grey; } .notes_button { background-color: #DDF; } .ack_button { background-color: #FEE; } #event_log_note_note { width: 99%; height: 40px; } .log_note_user{ width: 70px; } .log_note_time { width: 113px; } .log_note_table, .log_note_table td, .log_note_table th { border: solid 1px #ddd; } .server_controls { width: 60px; } .server_number { width: 20px; } .server_state { width: 115px; } .server_last_run { width: 115px; } .server_No_com { font-weight: bold; } .server_Off { color: red; } .server_On { color: green; } #event_note__row .w2p_fw, #event_note__row .w2p_fw textarea { width: 100%; } .device_view_button_edit { width: 100px; text-align: center; } .device_view_button_edit button{ background-color: #FFEEEE; } .inactive td{ color: #999; } .values_td { width: 150px; } .error { color: red; } .ok { color: green; } .set_param { background-color: #FFEEEE; } .grey_button { background-color: #EEE!important; } .pink_button { background-color: #FFEEEE!important; } .green_button { background-color: #EEFFEE!important; } .blue_button { background-color: #EEEEFF!important; } a.grey_button, a.pink_button, a.blue_button, a.green_button { width: 100px; display: inline-block; text-decoration: none; color: #555; padding: 2px 6px; text-align: center; border: solid 1px #DEDEDE; border-radius: 2px; box-sizing: border-box; -moz-box-sizing: border-box; } .green_button.debug_button { border: solid 1px #F0B5B5; } a.rc_button { border: dashed 4px #FF0000!important; padding: 0px 4px!important; } .element_off { color: #606060; } .element_on { color: blue; } input.button_auto { background-color: #EEEEFF; float: right; } input.button_on { background-color: #EEFFEE; } input.button_off { background-color: #FFEEEE; } .io_setable { cursor: pointer; } .point_set { border: dashed 3px yellow; } .point_force { border: solid 3px yellow; } .point_overflow { border: solid 3px blue; } .point_regular { border: solid 3px black; } #group_device_list, #group_device_io_list, #device_list_in_graph_group { float: left; background-color: #E5E5E5; margin: 0px; padding: 5px; border-top: solid 2px #5072A0; border-right: solid 2px #5072A0; border-bottom: solid 2px #5072A0; border-left: solid 2px #5072A0; box-shadow: 2px 2px 2px #999; min-height: 33px; } #group_device_list, #device_list_in_graph_group { padding-left: 30px; border-radius: 0px 7px 7px 0px; } #device_list_in_graph_group { display: none; } #group_device_io_list { margin-top: 20px; display: none; position: relative; /* right: 2px; */ left: 5px; border-radius: 7px 7px 7px 7px; } #group_device_io_list li, #group_device_list li, #device_list_in_graph_group li { cursor: pointer; color: #036; list-style: none; border: solid 1px #E5E5E5; padding: 0 2px; } #group_device_io_list li:hover, #group_device_list li:hover, #device_list_in_graph_group li:hover { border: solid 1px #036; background-color: #EEEEFF; } .device_group_number_td { width: 10px; } #group_device_io_list li{ display: none; } .sending_io_group_data, .sending_io_group_data:hover { background-color: #FFEEEE!important; } #add_io_to_group { position: absolute; top: 100px; left: 0px; padding-top: 20px; padding-bottom: 20px; z-index: 80; } #group_io_add_close { left: 0; position: absolute; top: 20px; } #group_io_add_close { background: url("images/device_menu.png") no-repeat scroll -23px 7px transparent; height: 40px; margin-left: 2px; margin-top: 0px; width: 28px; } .closed #group_io_add_close { background: url("images/device_menu.png") no-repeat scroll 3px 5px transparent; border-radius: 0 7px 7px 0; border-top: solid 2px #5072A0; border-right: solid 2px #5072A0; border-bottom: solid 2px #5072A0; box-shadow: 2px 2px 2px #999; background-color: #E5E5E5; padding-top: 4px; } .closed #group_device_list { display: none; } .clickable { cursor: pointer; } #main_graphic_view { position: relative; margin: auto; } #main_graphic_view img#main_background { position: absolute; top: 0; left: 0; } /* for those that don't speak CSS > means a direct decendent of the element. please learn css */ #main_graphic_view>div { position: absolute; } #toolbar_box { margin-bottom: 13px; } #toolbar_box div#toolbar { margin: 0px auto 10px; display: block; margin-left: 100px; } #toolbar_no_io button { height: 30px; } .io_element { text-align: center; cursor: no-drop; } .edit_mode .io_element { cursor: pointer; } #set_value_slider { margin-top: 10px; margin-bottom: 20px; } #toolbar_grid { float: right; } .graphic_edit_recycle_bin { position: absolute; width: 200px; background: none; border: none; } .graphic_edit_recycle_bin_hover { background: url("images/bin-blue-full-icon.png") no-repeat scroll 2px 2px; } .graphic_edit_recycle_bin_on { background: url("images/bin-blue-icon.png") no-repeat scroll 2px 2px; } #properties_form_animation #ranges_div, #properties_form_digital #ranges_div, #properties_form_number #ranges_div { width: 240px; margin-bottom: 20px; } #properties_form_digital .range_number input, #properties_form_digital .range_text input, #properties_form_digital .range_background input{ width: 120px; } #properties_form_animation .range_number input, #properties_form_animation .range_text input, #properties_form_animation .range_background input{ width: 100px; } #properties_form_animation .range_image { width: 40px; padding: 3px; } #properties_form_animation .range_image img { max-height:20px; max-width:20px; position: absolute; } #properties_form_animation .range_image img:hover { max-height:200px; max-width:200px; z-index: 10; } #properties_form_number .range_number input, #properties_form_number .range_text input, #properties_form_number .range_background input, #properties_form_number .range_image input { width: 130px; } #properties_form_number .range_number input { margin-right: 5px; } #properties_form_number .ranges_div label{ display: block; } #properties_form_number .ranges_div:after { content: "."; display: block; visibility: hidden; } #properties_form_number .ranges_div { text-align: center; border-top: solid 1px #DDD; } #properties_form_number .ranges_div:first-child { border-top: none; } #properties_form_number .range_number { float: none; clear: both; } /*.properties_form { width: 530px; }*/ #numbers_div, #ranges_div { float: left; } #numbers_div { margin-top: 35px; } #numbers_inner_div>div { height: 27px; } #numbers_inner_div>div input { float: left; } #add_numbers,.add_numbers { background: url("images/plusIcon.gif"); height: 16px; width: 16px; cursor: pointer; margin: 8px; } .minus_range { background: url("images/minusIcon.gif"); height: 16px; width: 16px; cursor: pointer; float: left; } #graphic_edit_style_pallet li a { cursor: pointer; } #color_presets { position: absolute; top: 300px; left: 20px; background-color: #e5ebe5; height: 100px; width: 100px; z-index: 10000; border: 1px solid #aaa; border-radius: 5px; } .color_preset { width: 15px; height: 15px; border: solid 3px #fff; margin: 2px; float: left; cursor: pointer; } .color_cancel, .color_transparent { height: 28px; width: 42px; margin: 2px; margin-top: 4px; font-size: 11px; padding-left: 4px; float: left; cursor: pointer; } .w2p_fw span { float: right; } ul.image_browser, ul.animation_browser, ul.background_list, ul.font-browser{ margin: auto; margin-left: 0; } ul.font-browser li, ul.image_browser li, ul.animation_browser li, ul.background_list li { list-style: none; float: left; width: 60px; margin: 10px; padding: 10px; height: 80px; border: solid 1px black; background-color: white; } ul.font-browser li { margin: 5px; } ul.font-browser li { padding: 10px; overflow: hidden; background: url("images/squares.png"); } ul.font-browser li.font-family { background-image: none; background: white; } ul.elements_browser li div.font-color { height: 100%; width: 100%; } ul.elements_browser li { background-color: #DDD; } .five-colors div{ height: 20px; width: 20px; float: left; } ul.animation_browser li div.img_div img, ul.image_browser li div.img_div img { background: url("images/squares.png"); } ul.elements_browser li div.img_div img { background: url("images/squares.png"); max-height: 20px; max-width: 100px; } ul.elements_browser { margin-left: 0px; } ul.elements_browser:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; } ul.elements_browser { zoom: 1 /* IE 6-8 floats clear */ } ul.elements_browser li { list-style: none; width: 100px; height: 20px; border: solid 1px #ddd; margin: 5px; padding: 5px; text-align: center; float: left; } ul.image_browser li img, ul.animation_browser li img{ max-width: 56px; max-height: 66px; display: block; border: solid 2px black; margin: auto; } ul.animation_browser li img { margin-bottom: 3px; } ul.image_browser li div.img_div, ul.animation_browser li div.img_div{ height: 70px; } ul.image_browser li.folder, ul.animation_browser li.folder { background: url("images/folder.png") no-repeat 5px 5px #FFF; text-align: center; cursor: pointer; } ul.image_browser li.folder.up, ul.animation_browser li.folder.up { background: url("images/folder-up.png") no-repeat 5px 5px #FFF; } ul.animation_browser li.folder a, ul.image_browser li.folder a{ padding-top: 80px; display: block; height: 10px; } ul.image_browser li div.filename_div, ul.animation_browser li div.filename_div{ margin: 2px; text-align: center; width: 126; background-color: #5276BA; color: white; font-size: 10px; overflow: hidden; height: 14px; } h2.font-browser-head { clear: both; } div.ui-dialog-titlebar { height: 10px; padding-top: 0px!important; padding-bottom: 8px!important; } .ui-dialog .ui-dialog-title { float: left; margin: 0; } .ui-front { z-index: 1002; } .animation_browser a { text-decoration: none; } #group_device_io_list .in_group { color: grey; cursor: text; } .fix_floats:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; } .group_list_line { min-width:46%; max-width:46.1%; } .group_view_line { min-width:48%; max-width:49%; } .fix_floats { zoom: 1 /* IE 6-8 floats clear */ } #label_format input { width: 95%; } ul#related_links { border: solid 1px #E78F08; background-color: #F6A828; border-radius: 5px; margin-left: 0px; margin-bottom: 15px; } ul#related_links li{ list-style: none; width: 85px; float: left; font-size: 14px; text-align: center; } ul#related_links li a { text-decoration: none; color: white; } ul#related_links li a.selected { color: black; } .small_image { max-width: 50px; max-height: 60px; } .lower_tabs { max-height: 240px; overflow-y: scroll; } .side_tabs { overflow-y: scroll; } img.range_image { position: absolute; top: 0; left: 0; } img.full_image, div.full_image { position: absolute; bottom: 0; left: 0; } div.full_image { overflow: hidden; z-index: 10; } .group_seperator { margin-left: 30px!important; } ul.background_list li { float: left; width: 60px; height: 70px; list-style: none; margin: 5px; cursor: pointer; } ul.colors_list li>div, ul.background_list li>div { border: solid 1px black; } ul.background_list li>div>div{ height: 14px; width: 100%; } ul.colors_list li>div>div{ height: 100px; width: 100%; } ul.colors_list li { float: left; width: 69px; height: 100px; list-style: none; margin: 5px; cursor: pointer; } ul.font_list li { cursor: pointer; } .static_element.has_link { z-index: 10; } .static_element img.static_img { position: absolute; top: 0; left: 0; } .static_element.linkable { cursor: pointer; background: url('images/transparent.gif'); } .static_element.linkable span{ width: 100%; height: 100%; display: block; } .select_static_element { border: solid 1px black; background-color: white; } #example_label { margin: auto; width: 100px; } .selected:after { position: absolute; content: url("images/ok.png"); top: -10px; left: -10px; } .selected_last:after { position: absolute; content: url("images/error.png"); top: -10px; left: -10px; } /* .io_element .text, .static_element .text { position: absolute; } These lines were here when text ios could show images too. for now - text ios cannot show images. * */ .io_element .number_input { width: 90%; height: auto; margin: 0; } /* for table */ form table tr { height: 25px; } form table tr .boolean{ margin-right: 10px; margin-left: 10px; } .sidebar_panel_top { background-color: #5072A0; } #left_sidebar.close .sidebar_panel_top { display: block; } .send_discontinuos button { margin: 2.5px; } span.set_hour_div input { width: auto; margin-left: auto; margin-right: auto; } .date_value_form input { width: 100px; } input.hour_input { width: 20px; margin: 0; } input.date_nodialog_input { width: 100px; } table.ca_calendar { width: 100%; } table.ca_calendar td{ background-color: #EEEEEE; } table.ca_calendar th { width: 14.28%; } table.ca_calendar td { width: 14.28%; height: 30px; } table.ca_calendar td.has_date { background-color: #fff; } table.ca_calendar td.has_date.specialday { background-color: yellow; } #main_calendar_window { height: 340px; } .calendar_datepicker { margin-top: 10px; } .ca_calendar { margin-top: 5px!important; } .calendar_title { text-align: center; } ul#calendar_menu { background-color: white; border: solid 1px black; margin: 0; position: absolute; } table.ca_calendar .has_date:hover, ul#calendar_menu li:hover { background-color: #999; } ul#calendar_menu li { list-style: none; padding: 0 10px; } #calndar_date_set{ float: left; } #calndar_date_set th{ border-bottom: none; text-align: left; } .caltype_buttons { float: right; margin-top: 21px; } table.ca_calendar .has_date, #calendar_menu li { cursor: pointer; } table.ca_calendar .has_date.specialday.Pre-weekend { background-color: #EEEEAA; } table.ca_calendar .has_date.specialday.Weekend { background-color: #FFFFAA; } .Pre-weekend .event_text, .Weekend .event_text { display: none; } .working_group { display: none; } .working_group h3 { cursor: pointer; } .working_group.selected_event { display: block; } h3.workgroup_event a { text-decoration: none; } .working_group table { margin-top: 5px; } .working_group h4 { margin-top: 10px; } .working_group_title h3{ cursor: pointer; float: left; font-size: 14px; width: 130px; border: solid 1px #eee; background-color: #faa; border-radius: 5px; text-align: center; margin-right: 15px; } .working_group_title h3.selected_event_title { background-color: #afa; } .marked_date { background-color: #ff0000; } .marking_date { background-color: #ff9999; } #working_hours table { margin-bottom: 3px; } #working_hours table th { vertical-align: middle; } #working_hours table td { padding: 0px; } #working_hours table tr.first td { padding-top: 20px; } #view_group_io_element_dialog_type__row.show_dialog #view_group_io_element_no_dialog_type{ display: none; } #view_group_io_element_dialog_type__row.show_dialog #view_group_io_element_dialog_type{ display: inline-block; } #view_group_io_element_dialog_type__row #view_group_io_element_no_dialog_type{ display: inline-block; } #view_group_io_element_dialog_type__row #view_group_io_element_dialog_type{ display: none; } .full_form #view_group_io_element_dialog_type__row #view_group_io_element_no_dialog_type, .full_form #view_group_io_element_dialog_type__row #view_group_io_element_dialog_type{ display: inline-block; } .full_form #view_group_io_element_link_url__row, .full_form #view_group_io_element_default_value__row, .full_form #view_group_io_element_increment_value__row { display: table-row; } #tank_images_form { width: 210px; margin: auto; } #tank_backgrounds input{ width: 100px; } #properties_form_tank tr#tank_images td { height: 100px; } #properties_form_tank img { position: absolute; max-height: 95px; max-width: 95px; } #properties_form_tank img:hover { max-height: 200px; max-width: 200px; } /*.edit_mode .static_element_Zoom */ .edit_mode .static_element_Label { border: dashed 1px #333!important; } .edit_mode .io_element_Fill { border-top: solid 2px green!important; border-left: solid 2px green!important; } #floating_right_sidebar { padding: 0!important; } #floating_right_sidebar_accordion .ui-accordion-content { padding: 0px; } .port_head { float: left; } #port-status-button { float: right; } #port-status-button { width: 70px; } #port-status-button { margin-left: 20px; margin-top: 13px; width: auto; } #main_background, #add_io_to_group { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } #winbak_file_num { width: 20px; } .sidebar_items a { display: block; padding: 5px; text-decoration: none; } .sidebar_items li.back a{ color: red; } .sidebar_items, .sidebar_subitems{ list-style: none; margin: 2px; } .sidebar_subitems{ list-style: none; margin-left: 0px; } .sidebar_items li, .sidebar_subitems li{ margin-top: 3px; background: lightgray; border: 1px solid gray; border-radius: 4px; width: 98%; } .sidebar_subitems li{ background: #f0f0f0; } #workgroup_settings { display: none; } #group_device_io_list .device_check_all { color: red; } #contextMenu { position: absolute; top: 20px; left: 20px; z-index: 90000; background-color: white; border: solid 1px #eee; display: none; margin-left: 0px; box-shadow: 3px 3px 6px #aaa; } #contextMenu li { list-style: none; padding: 3px; cursor: pointer; border-top: solid 1px white; border-bottom: solid 1px white; } #contextMenu li a { text-decoration: none; } #contextMenu li:hover { background-color: #eee; border-top: solid 1px #aaa; border-bottom: solid 1px #aaa; } .file_browser_img { font-size: 10px; position: relative; } .file_browser_img div.filename_div { position: absolute; width: 105px; top: 29px; left: 0px; z-index: 3; overflow: hidden; } .file_browser_img.add_static div.filename_div { top: 24px; } .file_browser_img.animation { border: solid 1px #aaa; } #exit_full_screen { height: 20px; border-radius: 8px; border: solid 1px #E78F08; background-color: #F6A828; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; text-align: center; } #exit_full_screen a { color: #fff; text-decoration: none; } .param_val_table th { width: 80px; } .param_val_table { width: 100%; direction: ltr; } .param_val_table th, .param_val_table td{ text-align: left; background-color: #fff; border: solid 1px orange; } #left_sidebar form { padding: 10px 10px; } div.input_helper { float: left; margin-left: 3px; padding: 2px; border: solid 1px red; background-color: #FFFFCC; width: 10px; height: 10px; font-size: 10px; line-height: 10px; text-align: center; border-radius: 10px; cursor: default; } div.input_helper:hover div { display: block; } div.input_helper div { border-radius: 0px 10px 10px 10px; background-color: #FFFFCC; border: solid 1px red; width: 160px; position: absolute; top: 36px; left: 5px; text-align: left; font-size: 12px; padding: 10px; display: none; } div.input_helper div p { text-indent: 0; } #sidebar_search input[type=text]{ width: 135px; margin: 0; display: block; float: left; } .sidebar_panel { padding: 5px } .sidebar_panel input[type=button] { background-color: #FFEEEE!important; float: left; } .sidebar_panel input[type=button].show_button, .sidebar_panel input[type=button].hide_button { background-color: #EEFFEE!important; float: right; } .sidebar_panel input[type=button].show_button { display: none; } #left_sidebar.close input[type=button].hide_button { display: none; } #left_sidebar.close input[type=button].show_button { display: block; } .sidebar_extra_data { color: black; font-size: 10px; } ul.sidebar_items li.sidebar_extrenal_data { border: none; background: transparent; padding-left: 5px; } #timetable { width: 760px; margin: auto; } #attachched_device_io tr td{ border: solid 1px #000; height: 25px; width: 120px; } #time_element_par tr td .small_helper{ height: 25px; width: 120px; overflow: hidden; } #time_element_par tr td .small_helper.empty { background-color: white; } #time_element_par tbody th div { height: 25px; } #time_element_par tr td, #time_element_par tr th{ width: 120px; height: 25px; } #time_element_par tr td { position: relative; } #time_element_par tr td img { display: none; position: absolute; top: 0px; right: 0px; } #time_element_par tr td:hover img { display: block; } #attachched_device_io_cell .small_helper{ margin: auto; min-height: 25px; width: 120px; } .small_helper { width: 75px; background: lightgray; margin-top: 3px; background: lightgray; border: 1px solid gray; border-radius: 4px; } .small_helper a{ display: block; padding: 5px; text-decoration: none; } /* base.css Created by Yair Eshel on 2012-01-24. Copyright 2012 Yair Eshel. All rights reserved. */ .under_element { background-color: #FFFFCC!important; } #time_table_device_io_id {display: none;} #drag_io_location { background-color: lightgrey; margin-left: 5px; padding: 5px; margin-right: 15px; } #drag_io_location .small_helper { margin: auto; width: 190px; } input.error { background-color: red; } .timetable { margin-bottom: 10px; direction: ltr; } .timetable tr td select{ width: 90%; display: block; } .timetable .slider_div { margin-top: 6px; margin-right: 5px; } .timetable tr.first { border-top: solid 1px #4F6F99; } .timetable tr.first td { padding-top: 20px; } .timetable td.day_type_cell { width: 100px; } .timetable td.slider_cell { width: auto; position: relative; z-index: 0; } .timetable td input{ xfont-size: 18px; direction: ltr; text-align: right; } .time_param_slider { font-size: 12px; } .float_otherside { float: right; } select.day_type, input.day_type { display: none; margin: 0; } #new_timetable_form select.day_type, #new_timetable_form input.day_type{ display: inline; margin: 0; } #new_timetable_form .day_type_cell div { display: none; } #new_timetable_form .check_to_delete input { display: none; } #uniart_group_table_view ul, #uniart_group_view ul { float: left; margin-bottom: 15px; margin-top: 15px; width: 360px; border-top: solid 1px #000; } #uniart_group_view.uniart_group_view_edit ul { width: 360px; } #uniart_group_view.uniart_group_view_edit ul .green_button, #uniart_group_view.uniart_group_view_edit ul .pink_button { width: 20px; } #uniart_group_view.uniart_group_view_edit ul div.group_edit { width: 50px; float: right; } #uniart_group_table_view ul { width: 390px; margin-left: 5px; border-bottom: solid 1px #000; border-top: solid 1px #000; } #uniart_group_table_view ul li .io_value { float: right; border-left: solid 1px #DDD; width: 100px; height: 18px; clear: right; padding: 0px 2px!important; } #uniart_group_table_view ul li { height: 18px; } #uniart_group_table_view ul li, #uniart_group_view ul li { list-style: none; border-bottom: solid 1px #000; border-left: solid 1px #000; border-right: solid 1px #000; font-weight: bold; zoom: 0; height: 27px; } #uniart_group_table_view ul li { border-bottom: none; font-weight: normal; border-bottom: solid 1px #DDD; } #uniart_group_table_view ul li:nth-child(even) { background-color: #EEE; } #uniart_group_table_view ul li .group_number { width: 1.5em; height: 27px; } #uniart_group_table_view ul li.active, #uniart_group_view ul li.active { cursor: pointer; } #uniart_group_table_view ul li:hover, #uniart_group_view ul li:hover { background-color: #FFFFDD; } #uniart_group_table_view ul li:after, #uniart_group_view ul li:after { content: "."; visibility: hidden; height: 0; display: block; clear: both; } #uniart_group_table_view .page, #uniart_group_view .page { margin-bottom: 5px; text-align: center; } #uniart_group_view ul li div { padding: 3px 5px; } .group_number { float: left; width: 32.5px; border-right: solid 1px #DDD; background-color: #DDDDDD; height: 20px; } .group_title { text-align: center; } #uniart_nav { clear: both; text-align: center; margin-bottom: 5px; } #uniart_nav table{ padding: 0; margin: auto; } #uniart_nav table span { font-weight: bold; } #uniart_nav #next { float: right; } #uniart_nav #prev { float: left; } #uniart_nav #next, #uniart_nav #prev { display: block; } .expert { display: none; } #add_button { float: left; margin-top: 5px; } div.tank_full, div.tank_full>img { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } div.tank_full { overflow: hidden; } .ui-button .ui-button-text { font-size: 12px; line-height: 12px; } li.ui-board-element { text-align: center; } li.unsetable { cursor: no-drop!important; } li.setable { cursor: pointer!important; } #ui-datepicker-div { font-size: 12px; } input.broken { width: 40px; } div.broken { width: 40px; height: 40px; border: solid 1px #000; float: left; margin-left: 20px; background-color: white; } div.broken img { width: 100%; height: 100%; } .ui-ios-list { cursor: pointer; } .gallery li img { height: 46px; width: 66px; font-size: 12px; border: solid 1px orange; } .color-gallery-item div, .ui-ios-list div { height: 46px; width: 64px; font-size: 12px; border: solid 1px orange; margin-left: 1px; margin-right: 1px; } .io-gallery div { width: 134px; padding-top: 5px; height: 17px; } li .ui-board-element-text, li .ui-board-element-img { position: absolute; top: 0; left: 0; background-color: transparent; width: 100%; height: 100%; } .ui-board-element-full-tank img, .ui-board-element-image img { width: 100%; height: 100%; } .ui-board-element-full-tank img { position: absolute; background-color: transparent; bottom: 0; left: 0; } .ui-board-element-full-tank { position: absolute; height: 0; width: 100%; bottom: 0; overflow: hidden; } li div.ui-element-hover { position: absolute; top: 0; left: 0; background-color: black; width: 100%; height: 100%; opacity: 0.0; filter: alpha(opacity = 0); cursor: pointer; } li div.ui-element-hover:hover { opacity: 0.1; filter: alpha(opacity = 10); } .ui-helper-reset { line-height: 1; font-size: 12px; } #devices.ui-accordion .ui-accordion-content, #browsers.ui-accordion .ui-accordion-content { padding:5px; height: 600px; overflow-y: auto; } .gallery.custom-state-active { background: #eee; } .gallery li { float: left; width: 68px; padding: 1px; margin: 1px; text-align: center; background: white; } .io-gallery li { width: 138px;} .gallery li h5 { margin: 1px; cursor: move; } .gallery li a { float: right; } .gallery li a.ui-icon-zoomin { float: left; } .gallery { width: 100%; margin: auto; } li.drop_item { z-index : 99999; list-style : none; padding : 1px; margin : 1px; float: left; width: 70px; text-align: center; } li.drop_item img { width: 70px; cursor: move; background-color: white; margin-top: 5px} li.drop_item a { float: right; } li.drop_item a.ui-icon-zoomin { float: left; } #browsers .ui-accordion-content, #devices .ui-accordion-content { text-align: center; } #browsers .ui-accordion-content input, #devices .ui-accordion-content input{ margin: 2px 5px; } .midnight_slider { background-color: lightgray; width: 88.888%; /* the main slider shows 27 hours. (24 + 3) / 24 = 88.8888888*/ height: 100%; } form.ca_search button{ vertical-align: middle; } .delete_button { float: right; } #main_graphic_view .ui-board-element .ui-board-element-text { direction: ltr; } .ui-timepicker-div { margin-left: 20px; margin-right: 20px; } .ui-datepicker { width: 250px; } #hidden_form { display: none; } div.legend td.legendLabel { width: 150px; } .force_ltr_form form input[type=password], .force_ltr_form form input[type=text], .force_ltr_form form textarea{ width: 250px; direction: ltr; } /* taken from web2py css, as is */ div.w2p_export_menu {margin:5px 0} div.w2p_export_menu a, div.w2p_wiki_tags a, div.w2p_cloud a {margin-left:5px; padding:2px 5px; background-color:#f1f1f1; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} div.error_box { background-color: #E6BABA; border: solid 1px #990000; } .loglevel_ERROR { color: red; } .loglevel_DEBUG { color: blue; } .loglevel_DEBUG.extra_in { color: green; } .loglevel_DEBUG.extra_out { color: #0000AA; } .loglevel_INFO { color: black; } #ca_reason { display: none; } .send_discontinuos .ca_reason_textarea, .send_number .ca_reason_textarea, .io_element_dialog .ca_reason_textarea, #ca_reason .ca_reason_textarea{ width: 345px; height: 60px; resize: none; } .io_element_dialog .ca_reason_textarea { width: 255px; } .io_element_dialog .ca_reason_select { width: 261px; } .send_number .ca_reason_select, .send_discontinuos .ca_reason_select { width: 246px; } .send_number .ca_reason_textarea, .send_discontinuos .ca_reason_textarea { width: 239px; } #ca_reason .ca_reason_select { width: 351px; } .ca_reason_error { display: none; } #logout_timer { margin: 3px; } .edit_graph_buttons a { float: right; width: 100px; margin: 5px; } .timetable .start_hour,.timetable .start_minute, .timetable .end_hour,.timetable .end_minute { width: 45px; height: 21px; font-size: 14px; margin: 2px 0px; display: inline; } .timetable .time_cell { width: 102px; } td.ui-board-element { border: solid 1px #000; } #footer #uniweb_web2py { float: left; direction: ltr; vertical-align: middle; line-height: 20px; } #footer #uniweb_web2py img{ float: left; } .little_buttons a { float: left; width: auto; margin-left: 2px; margin-right: 2px; } #port_status_table .state1 { background-color: #3F6; } #port_status_table .state2 { background-color: #9F9; } #port_status_table .state3 { background-color: #F99; } #port_status_table .state4 { background-color: #F44; } #port_status_table .state5 { background-color: #F00; } table#table_time_table_days input { text-align:left; width:47px; } table#table_time_table_specials input {text-align:left; width:47px; } table.timetable td input.ui-spinner-input { text-align:left; width:47px; font-size: 12px;} form.form_with_labels_and_spinners >fieldset>span>input { text-align:left; width:47px; } form.form_with_labels_and_spinners label { width:200px; display: inline-block;} .helpIcon { border: solid 2px red; border-radius: 10px; width: 19px; display: inline-block; cursor: help; text-align: center; } #event_actions input{ width: auto; } #event_actions select { width: 145px; } #event_actions .events_td_interval { width: 120px; } #event_actions .interval_select { width: 100px; } .deleted {text-decoration: line-through; color:red;} .deleted * {text-decoration: line-through; color:red;} .deleted input {text-decoration: line-through; color:red;} .changed {text-decoration: underline; font-weight:bold;} .changed * {text-decoration: underline; font-weight:bold;} .changed input {text-decoration: underline; font-weight:bold;} div.container { max-height:500px; overflow:auto;} div.label_input_container { display: inline-block; width:30%;} div.label_input_container >label { width:40%; display: inline-block; } div.label_input_container >input {width:50%;} div.lightbox { background-color:rgba(0,0,0,0.5); position:fixed; top:70px; left:50px; right:50px; bottom:50px; z-index:100; display:block; overflow:auto;} div.cpus_div {margin: auto; width:640px; background-color: #EEE} table.device_list { margin:0px;padding:0px; width:100%; background-color:white; } table.device_list tr{ margin:0px;padding:0px; height:auto;} table.device_list>tbody>tr>td{ margin:0px;padding:0px; } table.device_list>tbody>tr>th{ margin:0px;padding:0px; } table.device_list>thead>tr>th{ margin:0px;padding:0px; } table.device_list>tbody>tr>td>*{ margin:0px;padding:0px; width:100%; border:1px solid #DEDEDE;} table.device_list>tbody>tr>th>*{ margin:0px;padding:0px; width:100%; border:1px solid #DEDEDE;} table.device_list>thead>tr>th>*{ margin:0px;padding:0px; width:100%; border:1px solid #DEDEDE;} table.device_list>tbody>tr>td>*:focused{ border:1px solid #DEDEDE;} div.container_tcp_widget { display:inline-block; width:49%; border:1px solid #DEDEDE;} div.container_tcp_widget > label { width:20px; display:inline-block } div.container_tcp_widget > input[type="checkbox"] { width: 20px; } div.container_tcp_widget > input { width:auto; width:40%; } input.cpu_ip { background-color:rgbs(0,0,0,0); max-width:73%; } input.cpu_ip:focus {background-color:#f0f0ff; max-width:73%; } input.cpu_desc { background-color:rgbs(0,0,0,0); max-width:25%; } input.cpu_desc:focus {background-color:#f0f0ff; max-width:73%; } input.cpu_desc:focus + input {max-width:25%; } .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-rtl{ direction: rtl; } .ui-timepicker-rtl dl { text-align: right; } .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; } input.medium { max-width:50%; } input.small { max-width:50px; } /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ .onlyprint { display: none; } @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } /* a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } */ abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } div.pagebreak { page-break-before: always } #related_links { display: none} .web2py_search_actions, form .working_group_title, .io_table_buttons { display: none!important;} h4 { margin-top: 10px!important} #wrapper { padding-top: 5px!important; } #header, #footer, #left_sidebar, #add_io_to_group, #showMore { display: none!important} table.elements_table { border-collapse: separate!important; border: 0; } table.elements_table td, table.elements_table th { border: solid 1px #000!important; } .noprint { display: none!important; } .onlyprint { display: block!important; } }