Webtrees theme - use CSS ID instead of CSS CLASS to identify menu icons.

1 files changed, 54 insertions, 91 deletions

diff --git a/themes/webtrees/style.css b/themes/webtrees/style.css
index 48bfd88ba6..45d058f118 100644
--- a/themes/webtrees/style.css
+++ b/themes/webtrees/style.css
@@ -1488,25 +1488,56 @@ td.descriptionbox  a {color:#ffffff;}/* this keeps the tag color the same when i
 .logo {text-align:center;}
 
 /* ======= Main menu items ========== */
+/*
 #topMenu {float:left; width:100%; position:relative;}
 html[dir='rtl'] #topMenu {float:right;}
-#topMenu ul {clear:left; float:right; list-style:none; margin:0; padding:0; position:relative; right:50%; text-align:center;}
-#topMenu ul li {display:block; float:left; list-style:none; margin:0; min-width:100px; padding:5px 0; position:relative; left:50%;}
-html[dir='rtl'] #topMenu ul li {float:right; }
-#topMenu ul li a {margin:auto; padding-top:52px; width:100%;}
-#topMenu ul li:hover ul {display:block;}
-#topMenu ul li.separator span {background: url('images/hline.png') repeat-x; display:block; height:3px; margin:0;}
-#topMenu ul ul {background:none; display:none; font-weight:normal; position:absolute; left:0px; right:auto; top:70px; background-color:#FFF; border:thin solid #AAA; z-index:999; padding-top:5px;}
-html[dir='rtl'] #topMenu ul ul {left:auto; right:0px;}
-#topMenu ul ul li {clear:left; left:auto; margin:0; padding:0; text-align:left; width:100%;}
-html[dir='rtl'] #topMenu ul ul li {right:auto; clear:right; text-align:right;}
-#topMenu ul ul li a {font-size:11px; height:20px; padding:1px 6px; text-indent:27px; white-space:nowrap;}
-#topMenu ul ul ul {display:none !important; left:100%; position:absolute; top:0px;}
-html[dir='rtl'] #topMenu ul ul ul {right:100%;}
-#topMenu ul ul li:hover ul {display:block !important;}
+#main-menu {clear:left; float:right; list-style:none; margin:0; padding:0; position:relative; right:50%; text-align:center;}
+#main-menu li {display:block; float:left; list-style:none; margin:0; min-width:100px; padding:5px 0; position:relative; left:50%; height:60px; background:url('images/large_menu_sprite.png') no-repeat;}}
+html[dir='rtl'] #main-menu li {float:right;}
+#main-menu li a {margin:auto; padding-top:52px; width:100%;}
+#main-menu li:hover ul {display:block;}
+#main-menu li.separator span {background: url('images/hline.png') repeat-x; display:block; height:3px; margin:0;}
+#main-menu ul {background:none; display:none; font-weight:normal; position:absolute; left:0px; right:auto; top:70px; background-color:#FFF; border:thin solid #AAA; z-index:999; padding-top:5px;}
+html[dir='rtl'] #main-menu ul {left:auto; right:0px;}
+#main-menu ul li {clear:left; left:auto; margin:0; padding:0; text-align:left; width:100%; text-indent:27px; white-space:nowrap; height:24px; background:url('images/small_menu_sprite.png') no-repeat;}
+html[dir='rtl'] #main-menu ul li {right:auto; clear:right; text-align:right;}
+#main-menu ul li a {font-size:11px; height:20px; padding:1px 6px;}
+#main-menu ul ul {display:none !important; left:100%; position:absolute; top:0px;}
+html[dir='rtl'] #main-menu ul ul {right:100%;}
+#main-menu ul li:hover ul {display:block !important;}
+*/
+
+#topMenu {float:left; width:100%; padding:5px 0; position:relative;}
+html[dir='rtl'] #topMenu {float:right;}
+#main-menu  {clear:both; position:relative; z-index:500; float:right; right:50%;}
+html[dir='rtl'] #main-menu li {float:right;}
+#main-menu,
+#main-menu   ul  {padding:0; margin:0; list-style-type:none; }
+#main-menu   ul ul {z-index:600;margin-left:-6px;}
+#main-menu   li  {float:left; position:relative; left:50%;}
+html[dir='rtl'] #main-menu li {float:right;}
+#main-menu li li { clear:both; }
+#main-menu   li:hover > ul {display:block; position:absolute; top:0; left:120px;}
+#main-menu > li:hover > ul {left:0; top:64px;}
+#main-menu   a {display:block; white-space:nowrap; overflow:hidden;}
+#main-menu   ul {position:absolute; display:none; background:#ffffff; border:thin solid #aaaaaa; padding:5px 0; z-index:999;}
+#main-menu li a {margin:auto; padding-top:52px; width:100%;}
+#main-menu  li li a {font-size:11px; line-height:1.5; padding:1px 6px;}
+
+/* Menu icons */
+#main-menu  > li {background-image:url(images/large_menu_sprite.png); background-repeat:no-repeat; min-width:100px; height:64px; text-align:center;}
+#main-menu li li {background-image:url(images/small_menu_sprite.png); background-repeat:no-repeat; height:24px; left:auto; line-height:24px; text-align:left; text-indent:26px;}
+
+/* Separators */
+#main-menu li.separator {background: url(images/hline.png) repeat-x; display:block; height:3px; width:100%;}
+
+/* Reverse left and right on RTL pages */
+html[dir=rtl] #main-menu   li            {float:right;}
+html[dir=rtl] #main-menu   li:hover > ul {left:auto; right:120px;}
+html[dir=rtl] #main-menu > li:hover > ul {left:auto; right:0;}
+html[dir=rtl] #main-menu   li         li {text-align:right;}
 
 /* Main menu icons */
-/*
 #menu-calendar  {background-position:center -350px;}
 #menu-chart     {background-position:center -140px;}
 #menu-clippings {background-position:center -560px;}
@@ -1522,10 +1553,8 @@ html[dir='rtl'] #topMenu ul ul ul {right:100%;}
 #menu-search    {background-position:center -420px;}
 #menu-sour      {background-position:center -700px;}
 #menu-tree      {background-position:center    0px;}
-*/
 
 /* Sub-menu icons */
-/*
 #menu-admin                 {background-position:left     0px;} html[dir=rtl] #menu-admin                 {background-position:right     0px;}
 #menu-branches              {background-position:left  -450px;} html[dir=rtl] #menu-branches              {background-position:right  -450px;}
 #menu-calendar-day          {background-position:left   -60px;} html[dir=rtl] #menu-calendar-day          {background-position:right   -60px;}
@@ -1621,7 +1650,6 @@ html[dir='rtl'] #topMenu ul ul ul {right:100%;}
 #menu-sour-savechan         {background-position:left  -960px;} html[dir=rtl] #menu-sour-savechan         {background-position:right  -960px;}
 #menu-sour-undochan         {background-position:left  -960px;} html[dir=rtl] #menu-sour-undochan         {background-position:right  -960px;}
 #menu-tree li               {background-position:left  -240px;} html[dir=rtl] #menu-tree li               {background-position:right  -240px;}
-*/
 
 /* ========= Login|Favorites|Theme|Language menu items ========== */
 #extra-menu {float:right;white-space:nowrap;	margin:20px 10px 0 0;}
@@ -1631,10 +1659,10 @@ html[dir='rtl'] #extra-menu.makeMenu li ul {left:0px;right:auto;}
 #extra-menu a {background:none; display:inline;}
 .makeMenu {color:#555555; font-weight:bold;}
 .makeMenu li {display:inline; position:relative; white-space:nowrap;}
-.makeMenu li ul { display:none;	font-weight:normal;	position:absolute; left:0px; right:auto; top:1.1em;	background-color:#FFF; border:thin solid #AAA; z-index:999;}
-html[dir='rtl'] .makeMenu li ul { left:auto; right:0px;}
+.makeMenu li ul {display:none;	font-weight:normal;	position:absolute; left:0px; right:auto; top:1.1em;	background-color:#FFF; border:thin solid #AAA; z-index:999;}
+html[dir='rtl'] .makeMenu li ul {left:auto; right:0px;}
 .makeMenu li ul li {padding:2px;	display:block; text-align:left;}
-html[dir='rtl'] .makeMenu li ul li { text-align:right;}
+html[dir='rtl'] .makeMenu li ul li {text-align:right;}
 .makeMenu, .makeMenu li ul {list-style:none; margin:0;	padding:1px;}
 .makeMenu li:hover > ul {display:block;}
 
@@ -1651,9 +1679,9 @@ html[dir='rtl'].field  .editlink, html[dir='rtl'].field  .deletelink  {float:lef
 
 /* =========== Indi header ================== */ 
 #indi_header {float:left; width:98%; border-radius: 3px; border: 1px solid #B2C7D7; margin:5px 0; padding:10px;}
-html[dir='rtl'] #indi_header { float:right;}
+html[dir='rtl'] #indi_header {float:right;}
 #indi_header h3 {color: #555555; font-size: 90%; font-weight:bold; margin: 0; padding: 0 10px 0 30px; text-align:left;}
-html[dir='rtl'] #indi_header h3 { padding: 0 30px 0 10px; text-align:right;}
+html[dir='rtl'] #indi_header h3 {padding: 0 30px 0 10px; text-align:right;}
 #indi_header h3.name_one {overflow:hidden; position:relative; font-size:1.5em;}
 #indi_header h3 .details1 {font-size:1.0em;}
 #indi_header h3.person_box, #indi_header h3.person_boxF , #indi_header h3.person_boxNN  {border:1px solid #2694E8;}
@@ -1670,7 +1698,7 @@ html[dir='rtl'] #indi_mainimage {float:right;}
 html[dir='rtl'] #indi_mainimage a img {float:right;}
 #indi_name_details {	margin:0; padding: 5px;}
 #indi_name_details a {color:#333377;}
-#indi_name_details dt:after { content:":"; }
+#indi_name_details dt:after {content:":";}
 #name1 {}
 #indi_note {margin:	0 0 5px 0;}
 html[dir='rtl'] #indi_note .fact_NOTE {float:right; margin:00 0 10px;}
@@ -1699,77 +1727,13 @@ html[dir='rtl']  dd .editlink, html[dir='rtl']  dd .deletelink  {float:left;}
 .copyicon {background-position: -70px -32px; width: 24px; height:16px;}
 .deleteicon {background-position: -100px -32px; width: 24px; height:16px;}
 
-/* Large menu icons sprite */
-.icon_large_gedcom, .icon_large_pedigree, .icon_large_indis, .icon_large_reports, .icon_large_search, .icon_large_help, .icon_large_calendar, .icon_large_mypage, .icon_large_clippings, .icon_large_edit_indi, .icon_large_edit_source, .icon_large_edit_fam, .icon_large_edit_media, .icon_large_edit_notes, .icon_large_edit_repo {display: block; background: url('images/large_menu_sprite.png') no-repeat left 0;}
-
-.icon_large_gedcom {background-position: center 0px;}
-.icon_large_mypage {background-position: center -70px; width:64px;}
-.icon_large_pedigree {background-position: center -140px; width:64px;}
-.icon_large_indis {background-position: center -210px; width:64px;}
-.icon_large_reports {background-position: center -280px; width:64px;}
-.icon_large_calendar {background-position: center -350px; width:64px;}
-.icon_large_search {background-position: center -420px; width:64px;}
-.icon_large_help {background-position: center -490px; width:64px;}
-.icon_large_clippings {background-position: center -560px; width:64px;}
-.icon_large_edit_indi {background-position: center -630px; width:64px;}
-.icon_large_edit_source {background-position: center -700px; width:64px;}
-.icon_large_edit_fam {background-position: center -770px; width:64px;}
-.icon_large_edit_media {background-position: center -840px; width:64px;}
-.icon_large_edit_notes {background-position: center -910px; width:64px;}
-.icon_large_edit_repo {background-position: center -980px; width:64px;}
-
-/* Small menu icons sprite */
-.icon_small_add_clip, .icon_small_add_fam, .icon_small_admin, .icon_small_ancestry, .icon_small_calendar, .icon_small_cfamily, .icon_small_clippings, .icon_small_contact, .icon_small_delete, .icon_small_descendant, .icon_small_fambook, .icon_small_fanchart, .icon_small_fav, .icon_small_gedcom, .icon_small_hourglass, .icon_small_indis, .icon_small_map, .icon_small_menu_help, .icon_small_menu_media, .icon_small_menu_repository, .icon_small_menu_source, .icon_small_edit_indi, .icon_small_edit_fam, .icon_small_edit_notes, .icon_small_edit_raw, .icon_small_edit_repo, .icon_small_edit_sex, .icon_small_edit_source , .icon_small_add_indi, .icon_small_reord_fam, .icon_small_mypage, .icon_small_notes, .icon_small_patriarch, .icon_small_pedigree, .icon_small_place, .icon_small_relationship, .icon_small_reports, .icon_small_search, .icon_small_statistic, .icon_small_timeline, .icon_small_wiki, .icon_small_edit_media, .icon_small_medialink, .icon_arrow {display: block; background: url('images/small_menu_sprite.png') no-repeat left 0;}
-
-.icon_small_admin {background-position: left 0px;} html[dir='rtl'] .icon_small_admin {background-position: right 0px;}
-.icon_small_ancestry {background-position: left -30px;} html[dir='rtl'] .icon_small_ancestry {background-position: right -30px;}
-.icon_small_calendar {background-position: left -60px;} html[dir='rtl'] .icon_small_calendar {background-position: right -60px;}
-.icon_small_cfamily {background-position: left -90px;} html[dir='rtl'] .icon_small_cfamily {background-position: right -90px;}
-.icon_small_contact {background-position: left -120px;} html[dir='rtl'] .icon_small_contact {background-position: right -120px;}
-.icon_small_descendant {background-position: left -150px;} html[dir='rtl'] .icon_small_descendant {background-position: right -150px;}
-.icon_small_fambook {background-position: left -180px;} html[dir='rtl'] .icon_small_fambook {background-position: right -180px;}
-.icon_small_fanchart {background-position: left -210px;} html[dir='rtl'] .icon_small_fanchart {background-position: right -210px;}
-.icon_small_gedcom {background-position: left -240px;} html[dir='rtl'] .icon_small_gedcom {background-position: right -240px;}
-.icon_small_hourglass {background-position: left -270px;} html[dir='rtl'] .icon_small_hourglass {background-position: right -270px;}
-.icon_small_indis {background-position: left -120px;} html[dir='rtl'] .icon_small_indis {background-position: right -120px;}
-.icon_small_menu_help {background-position: left -300px;} html[dir='rtl'] .icon_small_menu_help {background-position: right -300px;}
-.icon_small_menu_media {background-position: left -330px;} html[dir='rtl'] .icon_small_menu_media {background-position: right -330px;}
-.icon_small_menu_repository {background-position: left -360px;} html[dir='rtl'] .icon_small_menu_repository {background-position: right -360px;}
-.icon_small_menu_source {background-position: left -180px;} html[dir='rtl'] .icon_small_menu_source {background-position: right -180px;}
-.icon_small_mypage {background-position: left -390px;} html[dir='rtl'] .icon_small_mypage {background-position: right -390px;}
-.icon_small_notes {background-position: left -420px;} html[dir='rtl'] .icon_small_notes {background-position: right -420px;}
-.icon_small_patriarch {background-position: left -450px;} html[dir='rtl'] .icon_small_patriarch {background-position: right -450px;}
-.icon_small_pedigree {background-position: left -480px;} html[dir='rtl'] .icon_small_pedigree {background-position: right -480px;}
-.icon_small_place {background-position: left -510px;} html[dir='rtl'] .icon_small_place {background-position: right -510px;}
-.icon_small_relationship {background-position: left -540px;} html[dir='rtl'] .icon_small_relationship {background-position: right -540px;}
-.icon_small_reports {background-position: left -570px;} html[dir='rtl'] .icon_small_reports {background-position: right -570px;}
-.icon_small_search {background-position: left -600px;} html[dir='rtl'] .icon_small_search {background-position: right -600px;}
-.icon_small_statistic {background-position: left -630px;} html[dir='rtl'] .icon_small_statistic {background-position: right -630px;}
-.icon_small_timeline {background-position: left -660px;} html[dir='rtl'] .icon_small_timeline {background-position: right -660px;}
-.icon_small_wiki {background-position: left -690px;} html[dir='rtl'] .icon_small_wiki {background-position: right -690px;}
-.icon_small_map {background-position: left -720px;} html[dir='rtl'] .icon_small_map {background-position: right -720px;}
-.icon_small_edit_indi {background-position: left -750px;} html[dir='rtl'] .icon_small_edit_indi {background-position: right -750px;}
-.icon_small_add_indi {background-position: left -780px;} html[dir='rtl'] .icon_small_add_indi {background-position: right -780px;}
-.icon_small_edit_sex {background-position: left -810px;} html[dir='rtl'] .icon_small_edit_sex {background-position: right -810px;}
-.icon_small_edit_fam {background-position: left -90px;} html[dir='rtl'] .icon_small_edit_fam {background-position: right -90px;}
-.icon_small_edit_raw {background-position: left -240px;} html[dir='rtl'] .icon_small_edit_raw {background-position: right -240px;}
-.icon_small_delete {background-position: left -840px;} html[dir='rtl'] .icon_small_delete {background-position: right -840px;}
-.icon_small_fav {background-position: left -870px;} html[dir='rtl'] .icon_small_fav {background-position: right -870px;}
-.icon_small_clippings {background-position: left -900px;} html[dir='rtl'] .icon_small_clippings {background-position: right -900px;}
-.icon_small_add_clip {background-position: left -930px;} html[dir='rtl'] .icon_small_add_clip {background-position: right -930px;}
-.icon_small_edit_source {background-position: left -960px;} html[dir='rtl'] .icon_small_edit_source {background-position: right -960px;}
-.icon_small_edit_repo {background-position: left -990px;} html[dir='rtl'] .icon_small_edit_repo {background-position: right -990px;}
-.icon_small_edit_notes {background-position: left -1020px;} html[dir='rtl'] .icon_small_edit_notes {background-position: right -1020px;}
-.icon_small_add_fam {background-position: left -1050px;} html[dir='rtl'] .icon_small_add_fam {background-position: right -1050px;}
-.icon_small_reord_fam {background-position: left -1080px;} html[dir='rtl'] .icon_small_reord_fam {background-position: right -1080px;}
-.icon_small_edit_media {background-position: left -1110px;} html[dir='rtl'] .icon_small_edit_media {background-position: right -1110px;}
-.icon_small_medialink {background-position: left -1140px;} html[dir='rtl'] .icon_small_medialink {background-position: right -1140px;}
+.icon_arrow {display: block; background: url('images/small_menu_sprite.png') no-repeat left 0;}
 .icon_arrow {background-position: right -1170px; float: right; margin-top: -12px;} html[dir='rtl'] .icon_arrow {background-position: left -1190px;  float: left;}
 
 /* ========= jquery-ui.custom.css changes ============ */
 .ui-tabs {padding:0;}
 .ui-tabs .ui-tabs-panel {padding:1em 0;}
-html[dir='rtl'] .ui-tabs { direction:rtl;}
+html[dir='rtl'] .ui-tabs {direction:rtl;}
 html[dir='rtl'] ui-tabs .ui-tabs-nav li.ui-tabs-selected, html[dir='rtl'] .ui-tabs .ui-tabs-nav li.ui-state-default {float:right;}
 .ui-accordion .ui-accordion-content {overflow:visible;}
 .ui-accordion .ui-accordion-header {text-align:center; margin-top:0;}
@@ -1809,7 +1773,6 @@ html[dir='rtl'] .flyout2 {text-align:right; right:40px;}
 .flyout4 {color:#000000;	text-align:left; margin-top:0px;margin-left:0px; padding:3px;}
 #flyout3, #flyout3 a, #phusb, #pwife, #shusb, #swife, #spouse {background:none; border:none; text-decoration:none; text-align:left; margin-top:0px; left:0px; padding:0px;}
 html[dir='rtl'] #flyout3 {text-align:right;}
-.famnav_link {font:12px tahoma, arial, helvetica, sans-serif; padding:0px; width:100%;}
 
 /* Descendancy */
 #sb_content_descendancy {margin-top:5px;}