Hello,
I am supposed to change the fonts in this menu bar so that only the word Gyrotonic is in Times New Roman. The rest can be in Helvetica or whatever. Someone else programmed this (a far better programmer than myself) and I haven’t been able to change the font for a single list item. I can change all of the fonts on the list, but to change only one has proven too challenging for me to figure out.
Here is the code:
[php]
and here is the CSS
body{
background: url('../images/bg.jpg') no-repeat center top #241b17;}
body, th, td{
font:12px/14px Segoe Ui,Arial,sans-serif;}
#page .stretch{
text-align: left;
}
#main .main-body{
width:960px;
margin:0 auto;
position:relative;
overflow:hidden;
}
.main-body .top-part{
background:url('../images/gr_top_part.png') no-repeat left top;
height:20px;
overflow:hidden;
}
.main-body .bttm-part{
overflow:hidden;
background:url('../images/gr_bttm_part.png') no-repeat left top;
height:20px;
}
.main-body .mid-part{
position:relative;
background:url('../images/gr_mid_part.png') repeat-y transparent;
height:450px;
overflow:hidden;
}
.main-body .longer{
height:auto;
min-height:400px !important;
}
.main-body .specials{
height:auto;
}
.main-body .pricing{
height:auto;
}
.main-body .specials #container-regular{
background:url('../images/gr_specials_bg.jpg') no-repeat left bottom;
height:653px;
position:relative;
}
.pricing #container-regular h1,
.specials #container-regular h1{
position:absolute;
left:43px;
top:50px;
display:block;
}
.pricing #container-regular .boxed-in,
.specials #container-regular .boxed-in{
width:666px;
position:absolute;
top:50px;
height:555px;
left:216px;}
.boxed-in li{
display:block;
width:327px;
height:174px;
margin-right:12px;
margin-bottom:12px;
background:#000;
float:left;
}
.pricing .boxed-in li{
display:block;
width:327px;
height:627px;
margin-right:12px;
background:#000;
float:left;
}
.main-body .pricing #container-regular{
background:url('../images/gr_pricing_bg.jpg') no-repeat left bottom;
height:725px;
position:relative;
}
.boxed-in li.even{
margin-right:0px !important;}
#flash-container-One,
#flash-container-Two,
#flash-container-Three{
position:relative;
z-index:0;
width: 100%;
}
#flash-container-one,
#flash-container-two,
#flash-container-three{
position:relative;
z-index:0;}
#flash-container-one{
top:8px;
left:25px;
width:910px;
height:430px;
background: transparent;
position:absolute;
margin-right:15px;}
#container-regular{
margin:8px 15px 8px 25px;
width:910px;
min-height:420px;
background:#ece7e4;
}
#body-container{
float:left;
width:617px;
margin:0px !important;
padding:0px !important;
min-height:420px;}
#body-container .push{
padding:40px 30px 40px 40px;}
.logo{
margin-top:50px;}
.push div p{
margin:0px;
}
.xtend{
background-image: url(../images/gr_xtend_bg.png);
background-repeat: no-repeat;
background-position: left top;
background-color: #ECE7E4;
}
.push h1{
font:36px/40px Segoe Ui,Arial,sans-serif;
margin:0 0 15px 0;}
.push h2{
font:22px/30px Segoe Ui,Arial,sans-serif;
display:block;
font-weight:bold;
color:#800000;
margin:0 0 10px 0;}
.push h3{
display:block;
font:18px/26px Segoe Ui,Arial,sans-serif;
margin:0 0 10px 0}
.push h4{
display:block;
font:16px/26px Segoe Ui,Arial,sans-serif;
margin:20px 0 10px 0;
font-weight:bold;}
.push p{
display:block;
font:14px/24px Segoe Ui,Arial,sans-serif;
margin:0 0 10px 0;}
.push .quote{
display:block;
font:16px/28px Segoe Ui,Arial,sans-serif;
margin:10px 0 20px 0;
color:#800000}
.push .quote strong{
font-size:16px;
font-style:italic;}
.push ul{}
.push li{
display:block;
font:13px/16px Segoe Ui,Arial,sans-serif;
margin:0 0 10px 0;}
#print{
position:absolute;
right:30px;
bottom:10px;
height:32px;
width:132px;
background:url('../images/print.png') no-repeat left top;}
#print:hover{
background:url('../images/print.png') no-repeat left bottom;}
.the-instructors li{
display:block;
padding-left: 20px;
height:20px;
margin-bottom:5px;
line-height:20px;
background: url('../images/gr_bullet_instructors.png') left top no-repeat;}
object{
margin:0px !important;
padding:0px !important}
#flash-container-small{
overflow:hidden;
margin:0px;
width:293px;
min-height:420px;
float:left;
background-color: #ECE7E4;
}
#flash-container-small img{
display:block;
margin:-3px 0 0 0;}
#heading{
z-index:0;}
#heading .header{
height:115px;
width:960px;
position:relative;
margin:0 auto;
}
.appointment-btn{
position:absolute;
left:393px;
top:15px;
}
.trans-logo{
position:absolute;
left:65px;
top:15px;
width:215px;
height:95px;
display:block;}
#nav{
position:absolute;
padding-left:11px;
right:0px;
top:58px;
width:564px;
height:55px;
background:url('../images/gr_nav_bg.png') no-repeat left top;
z-index:25 !important;
}
#nav li{
display:block;
float:left;
margin-top:12px;
}
#nav li a{
display:block;
height:32px;
line-height:32px;
margin:0px;
padding:0px;
}
li#home{
width:57px;}
li#home a{
background: url('../images/nav_bg.png') no-repeat 0 0}
li#home a.current,
li#home a:hover{
background: url('../images/nav_bg.png') no-repeat 0 -32px}
li#studio{
width:104px;}
li#studio a{
background: url('../images/nav_bg.png') no-repeat -57px 0}
li#studio a.current,
li#studio a:hover{
background: url('../images/nav_bg.png') no-repeat -57px -32px}
li#class{
width:134px;}
li#class a{
background: url('../images/nav_bg.png') no-repeat -161px 0}
li#class a.current,
li#class a:hover{
background: url('../images/nav_bg.png') no-repeat -161px -32px}
li#pricing{
width:75px;}
li#pricing a{
background: url('../images/nav_bg.png') no-repeat -295px 0}
li#pricing a.current,
li#pricing a:hover{
background: url('../images/nav_bg.png') no-repeat -295px -32px}
li#specials{
width:84px}
li#specials a{
background: url('../images/nav_bg.png') no-repeat -370px 0}
li#specials a.current,
li#specials a:hover{
background: url('../images/nav_bg.png') no-repeat -370px -32px}
li#contact{
width:100px;}
li#contact a{
background: url('../images/nav_bg.png') no-repeat -454px 0}
li#contact a.current,
li#contact a:hover{
background: url('../images/nav_bg.png') no-repeat -454px -32px}
#footing-bar .foot-bar{
height:75px;
width:960px;
overflow:hidden;
margin:5px auto 0;
position:relative !important;
background:url('../images/gr_foot_bar_bg.png') no-repeat left top;
}
.address-bar{
margin-top:11px;
margin-left:11px;
float:left;
height:55px;
width:572px;
background: url('../images/gr_address_bar.png') no-repeat left top;
clear:none;
}
.special-bns{
margin-top:11px;
margin-left:2px;
float:left;
height:55px;
}
.address-bar p{
font:12px/15px Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 1px #000;
color:#6e5c55;
text-transform:uppercase;
display:block;
position:relative;
left:10px;
top:10px;
width: 300px;
}
.shop-bn{
display:block;
float:left;
height:55px;
width:94px;
background: url('../images/gr_shop_bn.png') no-repeat left bottom;}
.shop-bn:hover{
background: url('../images/gr_shop_bn.png') no-repeat left top;}
.appt-bn{
margin-right:2px;
float:left;
display:block;
height:55px;
width:146px;
background: url('../images/gr_appt_bn.png') no-repeat left bottom;}
.appt-bn:hover{
background: url('../images/gr_appt_bn.png') no-repeat left top;}
.class-bn{
margin-right:2px;
float:left;
display:block;
height:55px;
width:122px;
background: url('../images/gr_class_bn.png') no-repeat left bottom;}
.class-bn:hover{
background: url('../images/gr_class_bn.png') no-repeat left top;}
#footing .footer{
height:115px;
width:940px;
margin:15px auto 0;
padding-top:14px;
border-top:1px solid #7EA7D9;
position:relative;
}
.copy-info{
font:12px/14px Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 1px #000;
text-transform:uppercase;
display:block;
color:#6e5c55;
position:absolute;
left:0px;
}
.footer-links{
display:block;
position:absolute;
overflow:hidden;
right:0px;
width: 600px;
}
.footer-links li{
display:block;
float:right;
min-width:2px;}
.footer-links li a{
font:12px/14px Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 1px #000;
text-transform:uppercase;
font-weight:bold;
color:#6e5c55;
display:block;
height:14px;
text-decoration:none;
padding:2px 5px 2px 5px;}
.footer-links li a.current{
color:#7EA7D9;
border-bottom:2px solid #7EA7D9;}
.footer-links li a:hover{
color:#7EA7D9;
}
.sf-menu li ul{
z-index:30;}
.sf-menu li ul{
margin:0px;
display:block;
background:#000 !important;
width:140px;
margin-top:1px;
}
.sf-menu li ul li{
margin:0px !important; padding:0px !important;
padding-left:15px;
}
.sf-menu li ul li a{
padding-left:15px !important;
background:none #19120f !important;
font:12px/20px Helvatica, sans-serif;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
color:#bebcaa;
border-bottom:1px solid #433532;
}
.sf-menu li ul li a:hover{
background:none #251c18 !important;
color:#7ea7d8;}
.sf-menu a{
margin:0px !important;
padding:0px !important;}
.sfHover ul{
margin-top:33px;
display:block;
background:#000;
}
.sfHover ul li a{
display:block;
background:#000;
padding:5px;
text-decoration:none;
font-size:11px;
color:#69B9D4;
}
.sfHover ul li a:hover{
background:#69B9D4;
color:#000;}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
/**/
.healcode{
border:none !important;}
.healcode h1{
display:block;
padding-left:15px;
margin-bottom:10px;}
.day_links{
display:block;
line-height:20px;
height:20px;}
.week_links{
color:#bbb;}
.hc_class{
padding:5px !important;
border:1px solid #b5b5b5;}
select{
font-size:12px;}
.hc_day{
text-align:center;
border-bottom:1px solid #b5b5b5;
border-right:1px solid #b5b5b5;}
.day_links span{
display:block;
float:left;}
.day_links span a:hover{
color:#333;}
.next_week a,
.today a,
.previous_week a{
text-decoration:none;
color:#b5b5b5;
font-size:12px;
}
.day_links span a{
border:#b5b5b5 1px solid;
text-transform:uppercase;
font-weight:bold;
color:#888;
background:#ccc;
margin:0 3px 0 0 !important;
text-decoration:none;
padding:5px 8px 5px 8px;}
div.healcode table.schedule{
border: none !important;}
.class_name a{
text-decoration:none !important;
color:#7EA7D8 !important;}
.schedule_header th{
font-size:12px !important;
background:#241B17 !important;}
.schedule_header th .hc_day{
border:none !important;}
.class_name,
.hc_daypart{
background:#241B17 !important;
border:none !important;
font-size:20px !important;
font-weight:bold;
line-height:26px;}
.class_offered_link,
.class_description{
padding:2px 10px 2px 10px;}
I am sorry I know that is a lot of CSS code but this is what the other programmer left me with and what I have to sift through to try and solve this problem. Any help would be appreciated- thanks!