You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
nextcloud-server/core/css/styles.css

986 lines
22 KiB

/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
This file is licensed under the Affero General Public License version 3 or later.
See the COPYING-README file. */
15 years ago
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
html, body { height:100%; }
15 years ago
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
body { line-height:1.5; }
table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
caption, th, td { text-align:left; font-weight:normal; }
table, td, th { vertical-align:middle; }
a { border:0; color:#000; text-decoration:none;}
12 years ago
a, a *, input, input *, select, .button span, label { cursor:pointer; }
15 years ago
ul { list-style:none; }
body {
background-color: #ffffff;
font-weight: 400;
font-size: .8em;
line-height: 1.6em;
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
color: #000;
height: auto;
}
#body-login {
13 years ago
text-align: center;
background-color: #0082c9;
background-image: url('../img/background.jpg?v=1');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.two-factor-header {
text-align: center;
}
.two-factor-provider {
text-align: center;
width: 258px !important;
display: inline-block;
margin-bottom: 0 !important;
background-color: rgba(0,0,0,0.3) !important;
border: none !important;
}
.two-factor-link {
display: inline-block;
padding: 12px;
color: rgba(255, 255, 255, .75);
}
.float-spinner {
height: 32px;
display: none;
}
#body-login .float-spinner {
margin-top: -32px;
padding-top: 32px;
}
#nojavascript {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 9000;
text-align: center;
background-color: rgba(0,0,0,0.5);
color: #fff;
line-height: 125%;
font-size: 24px;
}
#nojavascript div {
display: block;
position: relative;
width: 50%;
top: 35%;
margin: 0px auto;
}
#nojavascript a {
color: #fff;
border-bottom: 2px dotted #fff;
}
#nojavascript a:hover,
#nojavascript a:focus {
color: #ddd;
}
/* SCROLLING */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
/* Searchbox */
.searchbox input[type="search"] {
position: relative;
font-size: 1.2em;
padding: 3px;
padding-left: 25px;
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
color: #fff;
border: 0;
border-radius: 3px;
margin-top: 9px;
float: right;
width: 0;
cursor: pointer;
-webkit-transition: all 100ms;
transition: all 100ms;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
.searchbox input[type="search"]:focus,
.searchbox input[type="search"]:active,
.searchbox input[type="search"]:valid {
color: #fff;
width: 155px;
max-width: 50%;
cursor: text;
background-color: #0082c9;
border: 1px solid rgba(255, 255, 255, .5);
}
/* CONTENT ------------------------------------------------------------------ */
#controls {
box-sizing: border-box;
position: fixed;
top: 45px;
right: 0;
left: 0;
height: 44px;
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(255, 255, 255, .95);
z-index: 50;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* position controls for apps with app-navigation */
#app-navigation+#app-content #controls {
left: 250px;
}
.viewer-mode #app-navigation+#app-content #controls {
left: 0;
}
#controls .button,
#controls button,
#controls input[type='submit'],
#controls input[type='text'],
#controls input[type='password'],
#controls select {
box-sizing: border-box;
display: inline-block;
height: 36px;
padding: 7px 10px
}
#controls .button.hidden {
display: none;
}
#content {
position: relative;
height: 100%;
width: 100%;
}
#content .hascontrols {
margin-top: 45px;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow-x: hidden; /* prevent horizontal scrollbar */
padding-top: 45px;
box-sizing:border-box;
}
/* allow horizontal scrollbar for personal and admin settings */
#body-settings:not(.snapjs-left) .app-settings {
overflow-x: auto;
}
#emptycontent,
.emptycontent {
color: #888;
text-align: center;
margin-top: 30vh;
width: 100%;
}
#emptycontent.emptycontent-search,
.emptycontent.emptycontent-search {
position: static;
}
#emptycontent h2,
.emptycontent h2 {
margin-bottom: 10px;
line-height: 150%;
}
#emptycontent [class^="icon-"],
.emptycontent [class^="icon-"],
#emptycontent [class*=" icon-"],
.emptycontent [class*=" icon-"] {
background-size: 64px;
height: 64px;
width: 64px;
margin: 0 auto 15px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
opacity: .4;
}
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
/* Some whitespace to the top */
13 years ago
#body-login #header {
padding-top: 100px;
}
#body-login {
background-attachment: fixed; /* fix background gradient */
height: 100%; /* fix sticky footer */
}
/* Dark subtle label text */
#body-login p.info,
#body-login form fieldset legend,
#body-login #datadirContent label,
#body-login form fieldset .warning-info,
#body-login form input[type="checkbox"]+label {
text-align: center;
color: #fff;
}
/* overrides another !important statement that sets this to unreadable black */
#body-login form .warning input[type="checkbox"]:hover+label,
#body-login form .warning input[type="checkbox"]:focus+label,
#body-login form .warning input[type="checkbox"]+label {
color: #fff !important;
}
#body-login .update h2 {
margin: 0 0 20px;
}
#body-login .update a {
color: #fff;
border-bottom: 1px solid #aaa;
}
#body-login .infogroup {
margin-bottom: 15px;
}
#body-login p#message img {
vertical-align: middle;
padding: 5px;
}
11 years ago
#body-login div.buttons {
text-align: center;
}
#body-login p.info {
width: 22em;
13 years ago
margin: 0 auto;
padding-top: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#body-login p.info a {
font-weight: 600;
padding: 13px;
margin: -13px;
}
11 years ago
#body-login form {
position: relative;
width: 280px;
margin: 16px auto;
11 years ago
padding: 0;
}
#body-login form fieldset {
margin-bottom: 20px;
text-align: left;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#body-login form #sqliteInformation {
margin-top: -20px;
margin-bottom: 20px;
}
11 years ago
#body-login form #adminaccount {
margin-bottom: 15px;
}
#body-login form fieldset legend, #datadirContent label {
width: 100%;
}
#body-login #datadirContent label {
display: block;
margin: 0;
}
#body-login form #datadirField legend {
margin-bottom: 15px;
}
#body-login #showAdvanced {
padding: 13px; /* increase clickable area of Advanced dropdown */
}
#body-login #showAdvanced img {
vertical-align: bottom; /* adjust position of Advanced dropdown arrow */
margin-left: -4px;
}
#body-login .icon-info-white {
padding: 10px;
}
/* strengthify wrapper */
#body-login .strengthify-wrapper {
display: inline-block;
position: relative;
left: 15px;
top: -23px;
width: 250px;
}
/* tipsy for the strengthify wrapper looks better with following font settings */
#body-login .tipsy-inner {
font-weight: bold;
color: #ccc;
}
/* General new input field look */
#body-login input[type="text"],
#body-login input[type="password"],
#body-login input[type="email"] {
border: none;
font-weight: 300;
}
/* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#body-login .grouptop input,
.grouptop input {
margin-bottom: 0 !important;
border-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#body-login .groupmiddle input,
.groupmiddle input {
margin-top: 0 !important;
margin-bottom: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
#body-login .groupbottom input,
.groupbottom input {
margin-top: 0 !important;
border-top: 0 !important;
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
#body-login .groupbottom input[type=submit] {
box-shadow: none !important;
}
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield {
display: none;
}
#body-login form input[type="checkbox"]+label {
position: relative;
margin: 0;
padding: 14px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;}
#body-login #showAdvanced > img {
padding: 4px;
box-sizing: border-box;
}
13 years ago
#body-login p.info a, #body-login #showAdvanced {
color: #fff;
}
#body-login #remember_login:hover+label,
#body-login #remember_login:focus+label,
#body-login #forgot-password:hover,
#body-login #forgot-password:focus,
#body-login p.info a:hover,
#body-login p.info a:focus {
opacity: .6;
}
#body-login footer .info {
white-space: nowrap;
}
/* Show password toggle */
#show, #dbpassword {
position: absolute;
right: 1em;
top: .8em;
float: right;
}
#show, #dbpassword, #personal-show {
display: none;
}
#show + label, #dbpassword + label {
right: 21px;
top: 15px !important;
margin: -14px !important;
padding: 14px !important;
}
#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: .8;
}
#show + label, #dbpassword + label, #personal-show + label {
position: absolute !important;
height: 20px;
width: 24px;
background-image: url('../img/actions/toggle.svg?v=1');
background-repeat: no-repeat;
background-position: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: .3;
}
#show + label:before, #dbpassword + label:before, #personal-show + label:before {
display: none;
}
#pass2, input[name="personal-password-clone"] {
padding: .6em 2.5em .4em .4em;
width: 8em;
}
#personal-show + label {
height: 14px;
margin-top: -25px;
left: 295px;
display: block;
}
#passwordbutton {
margin-left: .5em;
}
/* Database selector */
#body-login form #selectDbType { text-align:center; white-space: nowrap; }
#body-login form #selectDbType .info {
white-space: normal;
}
#body-login form #selectDbType label {
position:static; margin:0 -3px 5px; padding:.4em;
font-size:12px; background:#f8f8f8; color:#888; cursor:pointer;
border: 1px solid #ddd;
}
#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; }
/* Warnings and errors are the same */
11 years ago
#body-login .warning,
#body-login .update,
#body-login .error {
display: block;
padding: 10px;
background-color: rgba(0,0,0,.3);
color: #fff;
text-align: left;
border-radius: 3px;
cursor: default;
}
#body-login .update {
width: inherit;
text-align: center;
}
#body-login .update .appList {
list-style: disc;
text-align: left;
margin-left: 25px;
margin-right: 25px;
}
#body-login .v-align {
width: inherit;
}
#body-login .update img.float-spinner {
float: left;
}
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
background: #fdd;
border-radius: 3px;
}
.warning legend,
.warning a,
.error a {
color: #fff !important;
font-weight: 600 !important;
}
.error a.button {
color: #555 !important;
display: inline-block;
text-align: center;
}
.error pre {
white-space: pre-wrap;
text-align: left;
}
.error-wide {
width: 700px;
margin-left: -200px !important;
}
.error-wide .button {
color: black !important;
}
.warning-input {
border-color: #ce3702 !important;
}
/* Fixes for log in page, TODO should be removed some time */
#body-login ul.error-wide {
margin-top: 35px;
}
#body-login .warning {
margin: 0 7px 5px 4px;
}
#body-login .warning legend {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
#body-login a.warning {
cursor: pointer;
}
/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
#body-login .updateProgress .error {
margin-top: 10px;
margin-bottom: 10px;
}
/* Alternative Logins */
#alternative-logins legend { margin-bottom:10px; }
#alternative-logins li { height:40px; display:inline-block; white-space:nowrap; }
/* Log in and install button */
#body-login input {
font-size: 20px;
margin: 5px;
padding: 11px 10px 9px;
}
#body-login input[type="text"],
#body-login input[type="password"] {
width: 249px;
}
#body-login input.login {
width: 269px;
background-position: right 16px center;
}
#body-login input[type="submit"] {
padding: 10px 20px; /* larger log in and installation buttons */
}
#remember_login {
margin: 18px 5px 0 16px !important;
}
#body-login .remember-login-container {
display: inline-block;
margin: 10px 0;
text-align: center;
width: 100%;
}
#body-login #forgot-password {
padding: 11px;
float: right;
color: #fff;
}
13 years ago
/* Sticky footer */
#body-login .wrapper {
min-height: 100%;
margin: 0 auto -70px;
width: 300px;
13 years ago
}
#body-login footer, #body-login .push {
height: 70px;
}
13 years ago
/* round profile photos */
.avatar,
.avatar img,
.avatardiv,
.avatardiv img {
border-radius: 50%;
}
td.avatar {
border-radius: 0;
}
#notification-container {
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
#notification {
margin: 0 auto;
max-width: 60%;
z-index: 8000;
background-color: #fff;
border: 0;
padding: 1px 8px;
display: none;
position: relative;
top: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
opacity: .9;
}
#notification span {
cursor: pointer;
margin-left: 1em;
}
#notification {
overflow-x: hidden;
overflow-y: auto;
max-height: 100px;
}
#notification .row {
position: relative;
}
#notification .row .close {
display: inline-block;
vertical-align: middle;
position: absolute;
right: 0;
top: 0;
margin-top: 2px;
}
#notification .row.closeable {
padding-right: 20px;
}
tr .action:not(.permanent),
.selectedActions a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
}
tr:hover .action,
tr:focus .action,
tr .action.permanent,
.selectedActions a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
}
tr .action {
width: 16px;
height: 16px;
}
.header-action {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: .8;
}
tr:hover .action:hover,
tr:focus .action:focus,
.selectedActions a:hover,
.selectedActions a:focus,
.header-action:hover,
.header-action:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
tbody tr:hover,
tbody tr:focus,
tbody tr:active {
background-color: #f8f8f8;
}
code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", monospace; }
#quota {
cursor: default;
margin: 30px !important;
position: relative;
padding: 0 !important;
}
#quota div {
padding: 0;
background-color: rgb(220,220,220);
font-weight: normal;
white-space: nowrap;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
min-width: 1%;
max-width: 100%;
}
#quotatext {padding:.6em 1em;}
#quota div.quota-warning {
background-color: #fc4;
}
14 years ago
.pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; }
.pager li { display:inline-block; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { overflow:hidden; text-overflow:ellipsis; }
.separator { display:inline; border-left:1px solid #d3d3d3; border-right:1px solid #fff; height:10px; width:0px; margin:4px; }
a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;padding-top:0px;padding-bottom:2px; text-decoration:none; margin-top:5px }
.exception{color:#000;}
.exception textarea{width:95%;height:200px;background:#ffe;border:0;}
.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg?v=1'); }
.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg?v=1'); }
.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }
/* ---- DIALOGS ---- */
#oc-dialog-filepicker-content .dirtree {
width:92%;
float: left;
margin-left: 15px;
overflow:hidden;
}
#oc-dialog-filepicker-content .dirtree div:first-child a {
background-image:url('../img/places/home.svg?v=1');
background-repeat:no-repeat;
background-position: left center;
}
#oc-dialog-filepicker-content .dirtree span:not(:last-child) { cursor: pointer; }
#oc-dialog-filepicker-content .dirtree span:last-child { font-weight: bold; }
#oc-dialog-filepicker-content .dirtree span:not(:last-child)::after { content: '>'; padding: 3px;}
#oc-dialog-filepicker-content .filelist-container {
box-sizing: border-box;
display: inline-block;
overflow-y: auto;
height: 321px;
width: 100%;
padding-bottom: 55px;
}
#oc-dialog-filepicker-content .emptycontent {
color: #888;
text-align: center;
margin-top: 80px;
width: 100%;
display: none;
}
#oc-dialog-filepicker-content .filelist {
background-color:white;
width:100%;
}
#oc-dialog-filepicker-content #filestable.filelist {
/* prevent the filepicker to overflow */
min-width: initial;
}
#oc-dialog-filepicker-content .filelist td {
padding: 14px;
border-bottom: 1px solid #eee;
}
#oc-dialog-filepicker-content .filelist tr:last-child td {
border-bottom: none;
}
#oc-dialog-filepicker-content .filelist .filename {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background-size: 32px;
background-repeat: no-repeat;
padding-left: 51px;
background-position: 7px 7px;
cursor: pointer;
}
#oc-dialog-filepicker-content .filelist .filesize,
#oc-dialog-filepicker-content .filelist .date {
width: 80px;
}
#oc-dialog-filepicker-content .filelist .filesize {
text-align: right;
}
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
.ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;}
.move2trash { /* decrease spinner size */
width: 16px;
height: 16px;
}
/* ---- TOOLTIPS ---- */
.extra-data {
padding-right: 5px !important;
}
.tipsy-inner {
max-width: 400px !important;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- TAGS ---- */
#tagsdialog .content {
width: 100%; height: 280px;
}
#tagsdialog .scrollarea {
overflow:auto; border:1px solid #ddd;
width: 100%; height: 240px;
}
#tagsdialog .bottombuttons {
width: 100%; height: 30px;
}
#tagsdialog .bottombuttons * { float:left;}
#tagsdialog .taglist li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; transition:background-color 500ms; }
#tagsdialog .taglist li:hover, #tagsdialog .taglist li:active { background:#eee; }
#tagsdialog .addinput { width: 90%; clear: both; }
/* ---- APP SETTINGS - LEGACY, DO NOT USE THE POPUP! ---- */
.popup {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px #aaa;
color: #333;
padding: 10px;
position: fixed !important;
z-index: 100;
}
.popup.topright { top:7em; right:1em; }
.popup.bottomleft { bottom:1em; left:33em; }
.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg?v=1') no-repeat center; }
.popup h2 { font-size:20px; }
.arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; }
.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); }
.arrow.up { top:-8px; right:6px; }
.arrow.down { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
/* ---- BREADCRUMB ---- */
div.crumb {
float: left;
display: block;
background-image: url('../img/breadcrumb.svg?v=1');
background-repeat: no-repeat;
background-position: right center;
height: 44px;
background-size: auto 24px;
}
div.crumb.hidden {
display: none;
}
div.crumb a,
div.crumb > span {
position: relative;
top: 12px;
padding: 14px 24px 14px 17px;
color: #555;
}
div.crumb.last a {
padding-right: 0;
}
div.crumb:first-child a {
position: relative;
top: 13px;
padding-right: 14px;
}
div.crumb.last {
font-weight: 600;
margin-right: 10px;
}
div.crumb a.ellipsislink {
padding: 0 !important;
position: relative;
top: 8px !important;
}
/* some feedback for hover/tap on breadcrumbs */
div.crumb:hover,
div.crumb:focus,
div.crumb a:focus,
div.crumb:active {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity:.7;
}
.appear {
opacity: 1;
-webkit-transition: opacity 500ms ease 0s;
-moz-transition: opacity 500ms ease 0s;
-ms-transition: opacity 500ms ease 0s;
-o-transition: opacity 500ms ease 0s;
transition: opacity 500ms ease 0s;
}
.appear.transparent {
opacity: 0;
}
/* public footer */
#body-public footer {
position: relative;
text-align: center;
}
#body-public footer .info {
color: #777;
text-align: center;
margin: 0 auto;
padding: 20px 0;
}
#body-public footer .info a {
color: #777;
font-weight: 600;
padding: 13px;
margin: -13px;
}
/* LEGACY FIX only - do not use fieldsets for settings */
fieldset.warning legend, fieldset.update legend {
top: 18px;
position: relative;
}
fieldset.warning legend + p, fieldset.update legend + p {
margin-top: 12px;
}
/* for IE10 */
@-ms-viewport {
width: device-width;
}
/* hidden input type=file field */
.hiddenuploadfield {
width: 0;
height: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}