View bug fixes

This commit is contained in:
Ysolyne Gresille
2012-05-24 18:30:05 +02:00
parent 2210f02729
commit 6293f94715
9 changed files with 1009 additions and 721 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -3,7 +3,7 @@
<div class="popover-inner" style="width:auto;"> <div class="popover-inner" style="width:auto;">
<h3 class="popover-title"> <h3 class="popover-title">
{% if title %} {% if title %}
{{ title }} {{ title }}
{% endif %} {% endif %}
<button data-dismiss="modal" class="close tooltip_closer" style="display:none;">×</button> <button data-dismiss="modal" class="close tooltip_closer" style="display:none;">×</button>
</h3> </h3>

View File

@@ -1,43 +1,47 @@
<form target="_blank" name="formprintpage" method="POST" action="/prod/printer/print.pdf"> <form target="_blank" name="formprintpage" method="POST" action="/prod/printer/print.pdf">
<div id="printBox">
{% if printer.get_count_actionable() > 0 %} <div style="padding:10px;">
{% if printer.get_count_preview() > 0 %} {% if printer.get_count_actionable() > 0 %}
{% if printer.get_count_preview() > 0 %}
<u>{% trans 'phraseanet:: preview' %}</u><br/> <h4>{% trans 'phraseanet:: preview' %}</h4>
<input type="radio" name="lay" value="preview" id="RADI_PRE_LAB" /> <div style="margin: 10px 0 20px 0; padding: 0 10px;">
<label for="RADI_PRE_LAB"> <label for="RADI_PRE_LAB" class="radio">
{% trans 'print:: image de choix seulement' %} <input type="radio" name="lay" value="preview" id="RADI_PRE_LAB" />
</label><br/> {% trans 'print:: image de choix seulement' %}
<input type="radio" name="lay" value="previewCaption" id="RADI_PRE_CAP" /> </label>
<label for="RADI_PRE_CAP"> <label for="RADI_PRE_CAP" class="radio">
{% trans 'print:: image de choix et description' %} <input type="radio" name="lay" value="previewCaption" id="RADI_PRE_CAP" />
</label><br/> {% trans 'print:: image de choix et description' %}
<input type="radio" name="lay" value="previewCaptionTdm" id="RADI_PRE_TDM" /> </label>
<label for="RADI_PRE_TDM"> <label for="RADI_PRE_TDM" class="radio">
{% trans 'print:: image de choix et description avec planche contact' %} <input type="radio" name="lay" value="previewCaptionTdm" id="RADI_PRE_TDM" />
</label><br/> {% trans 'print:: image de choix et description avec planche contact' %}
</label>
<br /><br /> </div>
{% endif %} {% endif %}
{% if printer.get_count_thumbnail() > 0 %} {% if printer.get_count_thumbnail() > 0 %}
<h4>{% trans 'print:: imagette' %}</h4>
<u>{% trans 'print:: imagette' %}</u><br/> <div style="margin: 10px 0 20px 0; padding: 0 10px;">
<input type="radio" name="lay" value="thumbnailList" id="RADI_PRE_THUM" /> <label for="RADI_PRE_THUM" class="radio">
<label for="RADI_PRE_THUM"> <input type="radio" name="lay" value="thumbnailList" id="RADI_PRE_THUM" />
{% trans 'print:: liste d\'imagettes' %} {% trans 'print:: liste d\'imagettes' %}
</label><br/> </label>
<input type="radio" name="lay" checked value="thumbnailGrid" id="RADI_PRE_THUMGRI" /> <label for="RADI_PRE_THUMGRI" class="radio">
<label for="RADI_PRE_THUMGRI"> <input type="radio" name="lay" checked value="thumbnailGrid" id="RADI_PRE_THUMGRI" />
{% trans 'print:: planche contact (mosaique)' %} {% trans 'print:: planche contact (mosaique)' %}
</label><br/> </label>
</div>
{% endif %} {% endif %}
{% elseif printer.get_count_element_received() > 0 %} {% elseif printer.get_count_element_received() > 0 %}
{% trans 'None of the selected records can be printed ' %} {% trans 'None of the selected records can be printed' %}
{% else %} {% else %}
{% trans 'export:: erreur : aucun document selectionne' %} {% trans 'export:: erreur : aucun document selectionne' %}
{% endif %} {% endif %}
<input type="hidden" name="lst" value="{{ printer.get_serialize_list }}" /> <div style="margin-bottom: 10px; text-align: center;">
<button type="submit">{% trans 'boutton::imprimer' %}</button> <input type="hidden" name="lst" value="{{ printer.get_serialize_list }}" />
<button type="submit" class="btn btn-inverse">{% trans 'boutton::imprimer' %}</button>
</div>
</div>
</div>
</form> </form>

View File

@@ -376,23 +376,30 @@
<img src="/skins/icons/settings.png" title="{% trans 'Advanced Search' %}"/> <img src="/skins/icons/settings.png" title="{% trans 'Advanced Search' %}"/>
</a> </a>
<button type="submit" class="btn btn-inverse">{% trans 'boutton::rechercher' %}</button> <button type="submit" class="btn btn-inverse">{% trans 'boutton::rechercher' %}</button>
<div style="margin:5px 0"> <div class="control-group" style="margin:5px 0;">
{% if GV_multiAndReport %} <div class="controls">
<input type="radio" value="0" class="mode_type_doc_reg checkbox" name="search_type" {% if GV_defaultQuery_type == 0 %}checked="checked"{% endif %} id="mode_type_doc"/><label for="mode_type_doc">{% trans 'phraseanet::type:: documents' %}</label> {% if GV_multiAndReport %}
<input type="radio" value="1" class="mode_type_doc_reg checkbox" name="search_type" {% if GV_defaultQuery_type != 0 %}checked="checked"{% endif %} id="mode_type_reg"/><label for="mode_type_reg">{% trans 'phraseanet::type:: reportages' %}</label> <label for="mode_type_doc" class="radio inline">
{% else %} <input type="radio" value="0" class="mode_type_doc_reg" name="search_type" {% if GV_defaultQuery_type == 0 %}checked="checked"{% endif %} id="mode_type_doc"/>
<input type="hidden" value="0" name="search_type" /> {% trans 'phraseanet::type:: documents' %}
{% endif %} </label>
<select name="recordtype" id="recordtype_sel" class="input-small"> <label for="mode_type_reg" class="radio inline">
<option value="">{% trans 'Tout type' %}</option> <input type="radio" value="1" class="mode_type_doc_reg" name="search_type" {% if GV_defaultQuery_type != 0 %}checked="checked"{% endif %} id="mode_type_reg"/>
<option value="image">{% trans 'Image' %}</option> {% trans 'phraseanet::type:: reportages' %}
<option value="video">{% trans 'Video' %}</option> </label>
<option value="audio">{% trans 'Audio' %}</option> {% else %}
<option value="document">{% trans 'Document' %}</option> <input type="hidden" value="0" name="search_type" />
<option value="flash">{% trans 'Flash' %}</option> {% endif %}
</select> <select name="recordtype" id="recordtype_sel" class="input-small">
<option value="">{% trans 'Tout type' %}</option>
<option value="image">{% trans 'Image' %}</option>
<option value="video">{% trans 'Video' %}</option>
<option value="audio">{% trans 'Audio' %}</option>
<option value="document">{% trans 'Document' %}</option>
<option value="flash">{% trans 'Flash' %}</option>
</select>
</div>
</div> </div>
<input type="hidden" name="pag" id="formAnswerPage" value=""> <input type="hidden" name="pag" id="formAnswerPage" value="">
<input type="hidden" name="sel" value=""> <input type="hidden" name="sel" value="">
@@ -545,7 +552,7 @@
</div> </div>
<div id="idFrameT" class="PNB ui-corner-top" style="top:110px;"> <div id="idFrameT" class="PNB ui-corner-top" style="top:110px;">
<div class="tools PNB10 btn-toolbar" style="font-size:10px;z-index:200;height:28px;"> <div class="tools PNB10 btn-toolbar" style="font-size:10px; z-index:100; height:28px;">
<span class="dropdownButton"> <span class="dropdownButton">
<div class="btn-group"> <div class="btn-group">

View File

@@ -21,7 +21,7 @@
onDblClick="openPreview('RESULT',{{record.get_number}});"> onDblClick="openPreview('RESULT',{{record.get_number}});">
{% endif %} {% endif %}
<div style="padding: 4px;"> <div style="padding: 4px;">
<div style="height:40px; position: relative; z-index: 100;"> <div style="height:40px; position: relative; z-index: 95;">
<div class="title"> <div class="title">
{{record.get_title(highlight, searchEngine)|raw}} {{record.get_title(highlight, searchEngine)|raw}}
</div> </div>

View File

@@ -459,9 +459,9 @@ if ($sbasSet !== null) {
<input type="hidden" name="chg_status_son" value=""> <input type="hidden" name="chg_status_son" value="">
<input type="hidden" name="act" value="WORK" /> <input type="hidden" name="act" value="WORK" />
<input type="hidden" name="lst" value="<?php echo $parm["lst"] ?>" /> <input type="hidden" name="lst" value="<?php echo $parm["lst"] ?>" />
<div style="margin-top : 10px;text-align:center;"> <div style="margin-top:10px; text-align:center;">
<input type="button" class="input-button" value="<?php echo _('boutton::valider') ?>" onclick="doChgStat(true);" /> <input type="button" class="edit-btn" value="<?php echo _('boutton::valider') ?>" onclick="doChgStat(true);" />
<input type="button" class="input-button" value="<?php echo _('boutton::annuler') ?>" onclick="parent.hideDwnl();" /> <input type="button" class="edit-btn" value="<?php echo _('boutton::annuler') ?>" onclick="parent.hideDwnl();" />
</div> </div>
</form> </form>
</div> </div>
@@ -517,8 +517,8 @@ foreach ($types as $sbas_id => $typeBR) {
echo '<div style="with:100%;text-align:center;font-size:10px;float:left;width:100px;height:130px;">Record ' . $rec2[1] . "<br/>"; echo '<div style="with:100%;text-align:center;font-size:10px;float:left;width:100px;height:130px;">Record ' . $rec2[1] . "<br/>";
$thumbnail = $record->get_thumbnail(); $thumbnail = $record->get_thumbnail();
echo '<div style="height:60px;"><img src="' . $thumbnail->get_url() . '" width="' . ($thumbnail->get_width() / 3) . '" height="' . ($thumbnail->get_height() / 3) . '" /></div>'; echo '<div style="height:67px;"><img src="' . $thumbnail->get_url() . '" width="' . ($thumbnail->get_width() / 3) . '" height="' . ($thumbnail->get_height() / 3) . '" /></div>';
echo '<div style="height:28px;">' . $select . '</div></div>'; echo '<div style="height:26px;">' . $select . '</div></div>';
flush(); flush();
} }
} }
@@ -528,9 +528,9 @@ foreach ($types as $sbas_id => $typeBR) {
?> ?>
<input type="hidden" name="ACT" value="SEND" /> <input type="hidden" name="ACT" value="SEND" />
<input type="hidden" name="typelst" id="typelst" value="" /> <input type="hidden" name="typelst" id="typelst" value="" />
<div style="margin-top : 5px;text-align:center;"> <div class="editPropBox" style="margin-top: 5px; text-align: center;">
<input type="button" class="input-button" value="<?php echo _('boutton::valider') ?>" onclick="validChgType();" /> <input type="button" class="edit-btn" value="<?php echo _('boutton::valider') ?>" onclick="validChgType();" />
<input type="button" class="input-button" value="<?php echo _('boutton::annuler') ?>" onclick="parent.hideDwnl();" /> <input type="button" class="edit-btn" value="<?php echo _('boutton::annuler') ?>" onclick="parent.hideDwnl();" />
</div> </div>
</form> </form>
</div> </div>

View File

@@ -47,6 +47,10 @@ var p4 = p4 || {};
this.options.uploadBox = this.options.uploadBox.find('ul:first'); this.options.uploadBox = this.options.uploadBox.find('ul:first');
this.options.downloadBox.wrapInner('<ul />');
this.options.downloadBox = this.options.downloadBox.find('ul:first');
if($.isFunction($.fn.sortable)){ if($.isFunction($.fn.sortable)){
this.options.uploadBox.sortable(); this.options.uploadBox.sortable();
} }

View File

@@ -460,6 +460,13 @@ span.ww_winTitle {
color: #FFFFFF; color: #FFFFFF;
} }
#searchForm label {
color: #FFFFFF;
}
#searchForm #recordtype_sel {
margin-left: 10px;
}
/** PRESENTATION DE MINIATURES **/ /** PRESENTATION DE MINIATURES **/
@@ -1719,18 +1726,18 @@ H4 {
/** BOITES MODALES **/ /** BOITES MODALES **/
.bodyprofile { .bodyprofile {
background-color:transparent; background-color: transparent;
color:#404040; color: #404040;
} }
.bodyprofile .ui-tabs .ui-tabs-panel { .bodyprofile .ui-tabs .ui-tabs-panel {
background-color:#a3a3a3; background-color: #a3a3a3;
color:#404040; color: #333333;
} }
.bodyprofile .ui-tabs .ui-tabs-nav li.ui-tabs-selected { .bodyprofile .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background-color:#a3a3a3; background-color: #a3a3a3;
color:#404040; color: #404040;
} }
.bodyprofile .ui-tabs li.ui-state-active a, .bodyprofile .ui-tabs li.ui-state-active a,
@@ -1851,6 +1858,73 @@ H4 {
/** EXPORT **/
#printBox {
background-color: #404040;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#printBox h4,
#download h4,
#sendmail h4 {
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
text-decoration: none;
}
#printBox label,
#download label,
#sendmail label {
line-height: 18px;
color: #FFFFFF;
}
#sendmail p,
.buttons_line p {
margin: 20px 0 10px 0;
font-weight: bold;
}
#printBox .btn,
#download .btn,
#sendmail .btn {
font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#printBox .btn-inverse,
#download .btn-inverse,
#sendmail .btn-inverse {
*background-color: #393939;
background-image: -ms-linear-gradient(top, #444444, #393939);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#393939));
background-image: -webkit-linear-gradient(top, #444444, #393939);
background-image: -o-linear-gradient(top, #444444, #393939);
background-image: -moz-linear-gradient(top, #444444, #393939);
background-image: linear-gradient(top, #444444, #393939);
/*border: 1px solid #515151;*/
color: #AAAAAA;
}
#printBox .btn-inverse:hover,
#download .btn-inverse:hover,
#sendmail .btn-inverse:hover {
background-color: #393939;
*background-color: #393939;
color: #FFFFFF;
}
/** **/
@@ -2467,6 +2541,57 @@ DIV.thesaurus U.w {
color: #FFFFFF; color: #FFFFFF;
} }
.edit-btn {
margin: 2px;
font-weight: bold;
font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
display: inline-block;
*display: inline;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #EAEAEA;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: middle;
cursor: pointer;
background-color: #B1B1B1;
*background-color: #B1B1B1;
background-image: -ms-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B9B9B9), to(#A4A4A4));
background-image: -webkit-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -o-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -moz-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: linear-gradient(top, #B9B9B9, #A4A4A4);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#B9B9B9', endColorstr='#A4A4A4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.edit-btn:hover {
background-color: #A4A4A4;
*background-color: #A4A4A4;
color: #FFFFFF;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
#EDIT_WORKING { #EDIT_WORKING {
position: absolute; position: absolute;
top: 100px; top: 100px;

View File

@@ -478,6 +478,13 @@ span.ww_winTitle {
color: #FFFFFF; color: #FFFFFF;
} }
#searchForm label {
color: #FFFFFF;
}
#searchForm #recordtype_sel {
margin-left: 10px;
}
/*PRESENTATION DE MINIATURES*/ /*PRESENTATION DE MINIATURES*/
@@ -1745,47 +1752,47 @@ H4
/** /** BOITES MODALES **/
BOITES MODALES
**/
.bodyprofile{ .bodyprofile {
background-color:transparent; background-color: transparent;
color:#B1B1B1; color: #FFFFFF;
} }
.bodyprofile .ui-tabs .ui-tabs-panel
{ .bodyprofile .ui-tabs .ui-tabs-panel {
background-color:#a3a3a3; background-color: #a3a3a3;
color:#B1B1B1; color: #333333;
} }
.bodyprofile .ui-tabs .ui-tabs-nav li.ui-tabs-selected
{ .bodyprofile .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background-color:#a3a3a3; background-color: #a3a3a3;
color:#B1B1B1; color: #FFFFFF;
} }
.bodyprofile .ui-tabs li.ui-state-active a, .bodyprofile .ui-tabs li.ui-state-active a,
.ui-state-active a:link, .ui-state-active a:visited .ui-state-active a:link, .ui-state-active a:visited {
{ color: #FFFFFF;
color:#B1B1B1;
} }
.bodyprofile .ui-widget-content
{ .bodyprofile .ui-widget-content {
color:#B1B1B1; background-color: #666666;
background-color:#B1B1B1; color: #FFFFFF;
} }
.overlay, .ui-widget-overlay{
background-color:#B1B1B1; .overlay, .ui-widget-overlay {
opacity:0.7; background-color: #B1B1B1;
filter:alpha(opacity=70); opacity: 0.7;
filter: alpha(opacity=70);
} }
.overlay_box{
position:absolute; .overlay_box {
background-color:#999999; position: absolute;
display:none; background-color: #999999;
overflow-y:auto; display: none;
padding:5px; overflow-y: auto;
max-width:800px; padding: 5px;
max-height:400px; max-width: 800px;
max-height: 400px;
} }
@@ -1890,6 +1897,80 @@ BOITES MODALES
/** EXPORT **/
#printBox {
background-color: #B1B1B1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#printBox h4,
#download h4,
#sendmail h4 {
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
text-decoration: none;
}
#printBox label,
#download label,
#sendmail label {
line-height: 18px;
color: #FFFFFF;
}
#sendmail p,
.buttons_line p {
margin: 20px 0 10px 0;
font-weight: bold;
}
#printBox .btn,
#download .btn,
#sendmail .btn {
font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: bold;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#printBox .btn-inverse,
#download .btn-inverse,
#sendmail .btn-inverse {
background-color: #B1B1B1;
*background-color: #B1B1B1;
background-image: -ms-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B9B9B9), to(#A4A4A4));
background-image: -webkit-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -o-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -moz-linear-gradient(top, #B9B9B9, #A4A4A4);
/*border: 1px solid #666666;*/
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#B9B9B9', endColorstr='#A4A4A4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #EAEAEA;
}
#printBox .btn-inverse:hover,
#download .btn-inverse:hover,
#sendmail .btn-inverse:hover {
background-color: #A4A4A4;
*background-color: #A4A4A4;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #FFFFFF;
}
/** **/
DIV.finder DIV.finder
{ {
WHITE-SPACE: nowrap WHITE-SPACE: nowrap
@@ -2530,6 +2611,57 @@ DIV.thesaurus U.w
color: #FFFFFF; color: #FFFFFF;
} }
.edit-btn {
margin: 2px;
font-weight: bold;
font-family: verdana,"Helvetica Neue",Helvetica,Arial,sans-serif;
display: inline-block;
*display: inline;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #EAEAEA;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
vertical-align: middle;
cursor: pointer;
background-color: #B1B1B1;
*background-color: #B1B1B1;
background-image: -ms-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B9B9B9), to(#A4A4A4));
background-image: -webkit-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -o-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: -moz-linear-gradient(top, #B9B9B9, #A4A4A4);
background-image: linear-gradient(top, #B9B9B9, #A4A4A4);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #222222 #222222 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#B9B9B9', endColorstr='#A4A4A4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.edit-btn:hover {
background-color: #A4A4A4;
*background-color: #A4A4A4;
color: #FFFFFF;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
#EDIT_WORKING { #EDIT_WORKING {
position: absolute; position: absolute;
top: 100px; top: 100px;