我一直无法解决我的 CSS 代码遇到的 IE 7 和 8 兼容性问题。
该网站在这里。
在 IE 中,页眉消失了,应该突出显示文本(在单个页面中)的阴影框消失了,间距很糟糕,页脚未对齐,等等。
我尝试了z-index
and position
,但我只是没有编码来解决这个问题。
CSS
/**AGE VERIFICATION / SPLASH PAGE----
-------------------------------------------------------------*/
#Splash {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Open Sans';
}
#SplashHolder {
width: 650px;
height: 280px;
margin: 8% auto 0 auto;
background: rgba(0,0,0,.7);
padding: 15px;
border: 3px double rgba(102,102,102,.5);
}
#SplashLogo {
width: 182px;
height: 73px;
display: block;
margin: 0 auto;
background: url(../images/Logo_Splash.png) no-repeat;
}
#SplashBody h1, #SplashBody h2 {
color: #fff;
line-height: 24px;
margin: 10px 0 0 0;
padding: 0;
}
#SplashBody h2, .SplashAge li a {
font-size: 16px
}
.SplashAge li a, #SplashHolder {
box-shadow: 0 3px 5px rgba(0,0,0,.2)
}
.left {
float: left
}
.right {
float: right
}
.SplashAge li {
width: 300px;
display: inline;
}
.SplashAge li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
display: block;
background: rgba(206,55,34,.1);
padding: 8px 15px;
font-size: 16px;
font-weight: bold;
color: #fff;
border: 3px double rgba(206,55,34,.5);
}
.SplashAge li a:hover {
background: rgba(206,55,34,.5)
}
#SplashInfoBottom {
width: 450px;
margin: 0 auto;
}
#SplashInfoBottom ul li {
display: inline;
float: left;
margin: 5px 15px 0 0;
}
#SplashInfoBottom ul li h2 {
font-size: 12px
}
#EventSplash {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Open Sans';
}
#EventSplashHolder {
width: 750px;
height: 460px;
margin: 8% auto 0 auto;
background: rgba(0,0,0,.7);
padding: 15px;
border: 3px double rgba(102,102,102,.5);
}
#EventSplashLogo {
width: 182px;
height: 73px;
display: block;
margin: 0 auto;
background: url(../images/Logo_Splash.png) no-repeat;
}
#EventSplashBody h1, #EventSplashBody h2 {
color: #fff;
line-height: 24px;
margin: 10px 0 0 0;
padding: 0;
}
#EventSplashBody h2, .SplashAge li a {
font-size: 16px
}
.EventSplashAge li a, #EventSplashHolder {
box-shadow: 0 3px 5px rgba(0,0,0,.2)
}
.left {
float: left
}
.right {
float: right
}
.EventSplashAge li {
width: 350px;
display: inline;
}
.EventSplashAge li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
display: block;
background: rgba(206,55,34,.1);
padding: 8px 15px;
font-size: 16px;
font-weight: bold;
color: #fff;
border: 3px double rgba(206,55,34,.5);
}
.EventSplashAge li a:hover {
background: rgba(206,55,34,.5)
}
#EventSplashInfoBottom {
width: 450px;
margin: 0 auto;
}
#EventSplashInfoBottom ul li {
display: inline;
float: left;
margin: 5px 15px 0 0;
}
#EventSplashInfoBottom ul li h2 {
font-size: 12px
}
/*--HEADER, NAV AND SUB NAV-
----------------------------------------------------------*/
.main {
width: 100%;
margin-bottom: 0;
}
#EnjoyResponsibly {
position: absolute;
right: 15px;
top: 20px;
z-index: 1000;
}
#NavBack {
position: absolute;
left: 0px;
top: 0px;
background: rgba(35, 31, 32, .8);
height: 55px;
border-bottom: 9px solid #231f20;
width: 100%;
z-index: 800;
}
#NavBackBlue {
position: absolute;
left: 0px;
top: 56px;
border-bottom: 1px dotted #221b5e;
: ;
height: 3px;
width: 100%;
z-index: 800;
}
.nav_container {
position: absolute;
width: 100%;
z-index: 1000;
text-align: left;
}
.navWrap {
position: relative;
top: 0px;
left: 10px;
padding: 0px 3px 3px 3px;
width: 80%;
min-width: 600px;
height: 56px;
background: none;
}
.nav {
float: left;
width: 100%;
height: 57px;
}
a#logo {
float: left;
display: block;
width: 140px;
height: 47px;
text-indent: -9999px;
outline: none;
margin: 6px 23px 9px 11px;
background: url("../images/GTD_Logo.png") 0 0 no-repeat;
}
.nav ul {
list-style: none;
float: left;
width: 600px;
margin: 0px auto;
font-size: 11px;
}
.nav li {
float: left
}
.nav ul .MainNavigation {
width: 600px;
margin: 0 auto;
}
.nav a {
color: #ccc;
text-decoration: none;
text-transform: uppercase;
line-height: 1;
letter-spacing: .1em;
}
.nav a.navTrigger {
float: left;
position: relative;
z-index: 10;
display: block;
font-size: 16px;
padding: 0 7px;
font-size: 16px;
}
.nav a.navTrigger span {
padding: 23px 1px 23px;
float: left;
display: block;
outline: none;
z-index: 10;
position: relative;
text-align: center;
}
.nav a.Inner span {
width: 180px
}
.nav a.Products span {
width: 100px
}
.nav a.connect span {
width: 100px
}
.nav a.event span {
width: 135px
}
.nav a.open span, .nav a.active span {
color: #fff;
top: 1px;
padding: 22px 1px 24px 1px;
text-shadow: 0px 0px 1px #ccc;
}
.nav .subnav ul, .navWrap {
background: rgba(0, 0, 0, .8);
border-top: 0;
}
.navWrap {
border: 1px dotted #221b5e;
border-top: 0;
}
.nav .subnav ul, .nav {
border: 1px dotted #231f20;
border-top: 0;
}
.nav .subnav {
position: relative
}
.nav .subnav ul {
display: none;
position: absolute;
top: 57px;
left: 1px;
z-index: 1;
font-size: 11px;
width: 159px;
padding: 6px 6px 6px 0;
}
.navWrap, .nav .subnav ul {
box-shadow: 0px 3px 5px #000
}
.nav .subnav ul li {
display: block;
float: none;
padding: 3px 10px 3px 18px;
}
.nav .subnav ul li:first-child {
padding-top: 12px
}
.nav .subnav ul li:last-child {
padding-bottom: 12px
}
.nav ul li:hover .subnav ul li a {
margin: 0;
border: 0;
}
.nav .subnav ul li a {
margin: 0;
font-size: 12px;
}
.nav .subnav ul li:hover {
color: #000
}
.nav .subnav ul li:first-child:hover {
background: url("/assets/global/nav_indent.png") -5px 13px no-repeat
}
.nav .subnav ul li:hover a {
margin: 0;
border: 0;
background: 0;
}
#AboutDD ul {
width: 235px
}
#MakesDD ul {
width: 570px;
left: -292px;
height: 320px;
}
#MakesDD ul li {
width: 140px;
margin: 5px;
position: absolute;
}
#MakesDD ul li#middle {
margin: 24px 0 0 195px
}
#MakesDD ul li#Last {
margin: 24px 0 0 385px
}
#MakesDD ul li#BL {
margin: 184px 0 0 5px
}
#MakesDD ul li#BC {
margin: 184px 0 0 195px
}
#MakesDD ul li#BR {
margin: 184px 0 0 385px
}
#MakesDD ul li a img {
opacity: .6
}
#MakesDD ul li a img:hover {
opacity: 1
}
#MakesDD ul li a span {
font-size: 10px;
color: #ccc;
}
.subnav ul li h3, .subnav ul li span {
color: #fff
}
.subnav ul li h3 {
font-size: 18px
}
#MakesDD ul li a span.bottle {
float: left;
width: 55px;
height: 90px;
}
#ConnectDD ul {
width: 200px;
left: -22px;
}
#ConnectDD ul li {
width: 180px
}
#ConnectDD ul li.Distributor {
height: 80px
}
#EventsDD ul {
width: 600px;
left: -400px;
height: 400px;
}
#EventsDD ul li {
width: 600px;
margin: 5px;
position: absolute;
}
#EventsDD ul li a img {
opacity: .6
}
#EventsDD ul li a img:hover {
opacity: 1
}
#EventsDD ul li a span {
font-size: 10px;
color: #ccc;
}
.subnav ul li h3, .subnav ul li span {
color: #fff
}
.subnav ul li h3 {
font-size: 18px
}
#EventsDD ul li.ImagDrop {
width: 600px;
height: 400px;
}
#EventsDD ul li.ImagDrop {
margin-top: 15px;
position: absolute;
}
#EventsDD ul li#BMC {
margin: 24px 0 0 5px
}
.Menu_DD_Events {
position: absolute;
z-index: 10;
background: rgba(24, 24, 24, .7);
padding: 0;
margin: -20px 0 0 -20px;
}
.DDHeading {
margin-top: 80px;
position: absolute;
z-index: 10;
color: #ccc;
padding: 6px 8px;
}
#MakesDD ul li.ImagDrop {
width: 140px;
height: 114px;
}
.DDHeading {
margin-top: 80px;
position: absolute;
z-index: 10;
color: #ccc;
padding: 6px 8px;
}
.Menu_DD_Bottles {
position: absolute;
z-index: 10;
background: rgba(24, 24, 24, .7);
padding: 0;
margin: -20px 0 0 -20px;
}
#MakesDD ul li.ImagDrop {
margin-top: 15px;
position: absolute;
}
.social {
display: inline;
float: right;
height: 57px;
border-left: 1px solid #181818;
width: 24px;
margin-top: -5px;
margin-right: 4px;
}
.social a.twit, .social a.fb {
display: block;
outline: none;
text-indent: -9999px;
width: 20px;
background-repeat: no-repeat;
background-image: url("../images/social-icons-sprite.png");
}
.social a.twit {
height: 17px;
background-position: 2px 0;
margin: 9px 0 8px 4px;
}
.social a.twit:hover {
background-position: -19px 0
}
.social a.fb {
height: 21px;
background-position: 2px -23px;
margin: 0 0 0 4px;
}
.social a.fb:hover {
background-position: -19px -23px
}
.contentWrap {
width: 700px;
padding-bottom: 0px;
margin-left: 15px;
}
.contentWrapMed {
width: 900px;
padding-bottom: 0px;
margin-left: 15px;
}
.contentWrapBig {
width: 1000px;
padding-bottom: 0px;
margin-left: 15px;
}
.facebook_tab .contentWrap {
width: 492px;
background: none;
margin: 0;
padding: 0;
}
.content {
width: 700px;
padding: 110px 0 0 50px;
background: url("images/BottlesBack.png") top right;
min-height: 700px;
box-shadow: 0 0 8px #000;
}
.contentMed {
width: 900px;
padding: 110px 0 0 50px;
background: url("images/BottlesBack.png") top right;
min-height: 700px;
box-shadow: 0 0 8px #000;
}
.contentBig {
width: 1000px;
padding: 110px 0 0 50px;
background: url("images/BottlesBack.png") top right;
min-height: 700px;
box-shadow: 0 0 8px #000;
}
.contentBloody {
width: 900px;
padding: 50px 0 0 50px;
background: url("images/BloodyTexture.png") top right;
min-height: 700px;
box-shadow: 0 0 8px #000;
}
.facebook_tab .content {
width: 492px;
background: none;
margin: 0;
padding: 0;
}
.content h1 {
font-size: 23px;
color: #704a3c;
letter-spacing: 1px;
margin-bottom: 13px;
text-transform: uppercase;
max-width: 575px;
clear: both;
}
.facebook_tab .content h1 {
text-indent: -9999px;
margin-bottom: 0;
width: 492px;
height: 254px;
background: url("/assets/facebook_tab/main_heading.png");
}
.content h2 {
font-size: 24px;
color: #2c2c2c;
line-height: 30px;
margin-bottom: 30px;
max-width: 575px;
}
.content h3 {
font-size: 14px;
color: #704a3c;
line-height: 14px;
letter-spacing: 1px;
margin-bottom: 2px;
text-transform: uppercase;
max-width: 575px;
}
.content p {
max-width: 575px
}
.contentBloody h1 {
font-size: 23px;
color: #704a3c;
letter-spacing: 1px;
margin-bottom: 13px;
text-transform: uppercase;
max-width: 575px;
clear: both;
}
.contentBloody h2 {
font-size: 24px;
color: #2c2c2c;
line-height: 30px;
margin-bottom: 30px;
max-width: 575px;
}
.contentBloody h3 {
font-size: 14px;
color: #704a3c;
line-height: 14px;
letter-spacing: 1px;
margin-bottom: 4px;
text-transform: uppercase;
max-width: 575px;
}
.contentBloody p {
max-width: 575px
}
/*--PAGES----------------------------------------------------*/
.BottlePhoto {
display: inline;
float: right;
width: 300px;
height: 600px;
margin: 0 20px 0 0;
}
.BottlePhotoBig {
display: inline;
float: right;
width: 400px;
height: 700px;
margin: 0 100px 0 0;
}
.BottlePhotoMap {
display: inline;
float: right;
width: 500px;
height: 600px;
margin: 0 20px 0 0;
}
.BloodyEvent {
display: inline;
float: left;
width: 550px;
height: 200px;
margin: 0 100px 0 0;
}
#WireWorks {
background: url(../images/Wireworks_Side.jpg) top center
}
#Firepuncher {
background: url(../images/firetext.jpg) top center no-repeat
}
#MedfordRumBack {
background: url(../images/barrel1.jpg) center no-repeat
}
#SpecialReserveBack {
background: url(../images/SpecialReserve_Side.jpg) top center no-repeat
}
#Amandine {
background: url(../images/amandine_side.jpg) top center
}
#Craneberry {
background: url(../images/craneberry_side.jpg) top center
}
#Angelica {
background: url(../images/angelica_Side.jpg) top center
}
#AboutPage {
background: url(../images/About_Side.jpg) top center
}
#CraftPage {
background: url(../images/Craft_Side.jpg) top center
}
#LibationPage {
background: url(../images/Libation_Side.jpg) top center
}
#TheCraftBack {
background: url(../images/Background_Tub.jpg) center
}
#ContentPageBack {
background: url(../images/BottleBack.png) rgba(255,255,255,.9);
width: 100%;
height: 100%;
}
#ContentPageBackBloody {
background: url(../images/BloodyTexture.png) rgba(255,255,255,.9);
width: 100%;
height: 100%;
}
/*--TABLES--------------------------------------------------------*/
/*-FOOTER-----------------------------------------------------------*/
#ft_wrapper {
height: 15px;
clear: both;
}
#footer_top {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.touch #footer_top {
position: relative
}
.non_sticky #footer_top {
position: relative;
top: auto;
left: auto;
}
.anchorTab {
position: absolute;
top: -60px;
right: 30px;
}
.anchorTab a {
display: block;
outline: none;
text-indent: -9999px;
width: 324px;
height: 144px;
background: url(../images/Toggle.png) 0 0 no-repeat;
}
.anchorTab a.open {
background-position: 0 -200px
}
.footer {
float: left;
width: 100%;
background: url(../images/Menu_Back.jpg) repeat;
}
.FooterPattern {
height: 81px;
width: 100%;
}
.FooterPattern ul {
display: block;
margin: 0px 0 0 20px;
width: 100%;
}
.FooterPattern ul li {
display: inline;
float: left;
margin: 30px 25px 0 0;
}
.FooterPattern ul li a {
color: #f0f0f0
}
.FooterPattern ul li a:hover {
color: #be6045
}
#FooterContent {
height: auto;
min-height: 500px;
width: 950px;
margin-top: 55px;
}
#FooterHolder {
height: 600px;
width: 100%;
display: block;
}
#FeaturesHolder {
position: absolute;
z-index: -1;
margin: -100px 0 0 -100px;
}
#AnthemSobo {
position: absolute;
right: 20px;
font-size: 9px;
margin-top: 50px;
}
#AnthemSobo a {
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
}
#FooterTop {
background: url(../images/FooterTopBottom.png);
background-position: bottom;
height: 75px;
}
#FooterBottom {
background: url(../images/FooterBottomBottom.png) repeat
}
#FooterLeft, #FooterRight {
position: absolute
}
#FooterLeft {
z-index: 0;
width: 100%;
height: 485px;
margin: 15px;
left: 0;
}
#FooterLeft h1 {
font-size: 50px;
text-align: left;
margin: 0;
}
.FooterFeatureImage, .FooterFeatureCopy {
display: inline
}
.FooterFeatureCopy {
float: left;
margin-top: 30px;
width: 600px;
text-align: left;
}
.FooterFeatureCopy p {
width: 250px;
font-family: "Times New Roman", Times, serif;
}
.FooterFeatureImage {
float: left;
margin: 0;
}
.white {
color: #fff
}
.shadow {
color: #fff;
text-shadow: 0px 2px 3px #555;
}
.Background_white {
background: rgba(255,255,255,.8);
padding: 3px 8px;
width: 150px;
}
.top_15 {
margin-top: 150px
}
.Now {
background: url(../images/footer/now.jpg) no-repeat
}
.WireWorks {
background: url(../images/footer/WireWorks_Footer.jpg) repeat
}
.GinAndJuice {
background: url(../images/footer/Apparel.jpg) no-repeat
}
.BreweryTour {
background: url(../images/footer/BreweryTour_Footer.jpg) no-repeat
}
.MedfordRum {
background: url(../images/footer/MedfordRum_Footer.jpg) repeat
}
.Firepuncher {
background: url(../images/footer/Firepuncher_Footer.jpg) repeat
}
.AboutBack {
background: url(../images/About_Footer.jpg) no-repeat
}
.WireWorksMartini {
background: url(../images/footer/WireWorksMartini_Footer.jpg) no-repeat
}
.HankyPanky {
background: url(../images/footer/HankyPanky_Footer.jpg) no-repeat
}
#FooterRight {
z-index: 1;
right: 0px;
width: 400px;
height: 500px;
padding: 0px 30px;
overflow: hidden;
background: url(../images/Menu_Back.jpg);
}
#FooterRight p {
line-height: 20px;
line-height: 20px;
}
#FooterRight h1 {
margin-top: 40px
}
.D_inline {
display: inline
}
.right {
float: right
}
#twitter_div {
height: 200px;
width: 220px;
overflow: visible;
border: 1px solid #221b5e;
border-radius: 5px;
padding: 12px;
}
.TwitterFont {
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #fff;
}
.TwitterFont a {
color: #be6045
}
.Facebook iframe {
border: none;
height: 60px;
}
.Distilled {
display: inline-block;
width: 340px;
padding: 40px 20px 0 0;
vertical-align: top;
}
.Distilled2 {
display: inline-block;
width: 340px;
padding: 40px 20px 0 0;
vertical-align: top;
}
.DistilledMed {
display: inline-block;
width: 550px;
padding: 40px 20px 0 0;
vertical-align: top;
}
.DistilledBig {
display: inline-block;
width: 650px;
padding: 40px 20px 0 0;
vertical-align: top;
}
.DistilledBig p {
padding-right: 20px;
line-height: 150%;
text-align: justify;
}
.Distilled h1 {
font-size: 60px;
color: #231f20;
line-height: 60px;
}
.Distilled2 h1 {
font-size: 60px;
color: #231f20;
line-height: 60px;
}
.Distilled2 h3 {
padding-right: 20px;
color: #111;
font-size: 16px;
text-align: center;
}
.DistilledMed h1 {
font-size: 60px;
color: #ae1414;
line-height: 60px;
}
.DistilledMed h3 {
padding-right: 20px;
color: #111;
font-size: 16px;
text-align: justify;
}
.Distilled p {
padding-right: 20px;
line-height: 150%;
text-align: justify;
}
.Distilled2 p {
padding-right: 20px;
line-height: 150%;
text-align: justify;
}
.DistilledMed p {
padding-right: 20px;
line-height: 150%;
text-align: left;
}
.FooterFeatureCopy h1 {
line-height: 50px
}
.Photos {
display: inline-block;
width: 640px;
padding: 40px 20px 0 0;
vertical-align: top;
}
.dropdowns{float:left;width:690px;padding:0 0 10px;border-bottom:2px solid #d7d3c6}
.dropdowns a{float:left;width:190px;padding:5px 12px;color:#000;, georgia, serif;font-size:16px;background:#cdc1ab url("/assets/global/dropdown-bg.png") 190px 8px no-repeat;line-height:16px;text-decoration:none;margin-right:10px}
.pagination{margin-top:1em;clear:both}.pagination span{float:left;display:block;margin-right:5px}.pagination .page{padding-top:2px}.pagination a{color:#706B61;text-decoration:none}.pagination .current,.pagination a:hover{color:#386388;text-decoration:underline}.pagination .first,.pagination .last{display:none}.pagination .prev a,.pagination .next a{display:block;text-indent:-9999em;overflow:hidden;width:22px;height:22px;float:left}.pagination .prev a{background:url(/assets/pagination-left.gif) no-repeat}.pagination .next a{background:url(/assets/pagination-right.gif) no-repeat}.sitemap-col{float:left;width:250px}.sitemap-content ul{list-style:none}.navWrap{z-index:1000}
.flexslider .flex-control-nav{position:fixed;left:40px;bottom:20px;text-align:left;width:auto}
.flexslider .non_sticky{position:absolute; bottom:40px}
.flexslider .flex-control-nav li{margin-left:7px}
.flexslider .flex-control-nav li a{width:10px;height:9px;background:url("../images/footer-carousel-nav.png") 0 -9px no-repeat; }
.flexslider .flex-control-nav li a:hover,.flexslider .flex-control-nav li a.active{background-position:0 0}
.flexOverlay{height:120px;width:500px;position:absolute;top:200px;left:75px;}
.flexOverlay p{margin-top:0; color:#fff; padding:20px; width:280px; background:rgba(35, 31, 32, .8); }
.flexOverlay h1 {font-size:55px; line-height:50px; text-shadow:1px 1px 4px #333; margin:0; color:#f0f0f0;}
.flexOverlay h1 a{color:rgba(235, 205, 200,.9); font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; }
.flexOverlay h1 a:hover{color:rgba(190, 96, 69, .9)}
.flex-container a:active,.flexslider a:active{outline:none}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none}
.flexslider{width:100%;margin:0;padding:0}
.flexslider .slides > li{display:none}
.flexslider .slides img{max-width:100%; min-height:550px; display:block}
.flex-pauseplay span{text-transform:capitalize}
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .slides{display:block}
* html .slides{height:1%}
.no-js .slides > li:first-child{display:block}
.flexslider{position:relative;border-bottom:0;zoom:1}
.flexslider .slides{zoom:1}
.flexslider .slides > li{position:relative}
.flex-container{zoom:1;position:relative}
.flex-caption{background:none; zoom:1}
.flex-caption{width:96%; padding:2%; position:absolute; left:0;bottom:0;background:rgba(0,0,0,0.3);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.3);font-size:14px; line-height:18px}
.flex-direction-nav li a{width:52px;height:52px;margin:-13px 0 0;display:block;background:url(/assets/flexslider/theme/bg_direction_nav.png) no-repeat 0 0;position:absolute;top:50%;cursor:pointer;text-indent:-9999px}
.flex-direction-nav li .next{background-position:-52px 0;right:-21px}
.flex-direction-nav li .prev{left:-20px}
.flex-direction-nav li .disabled{opacity:.3;filter:alpha(opacity=30);cursor:default}
.flex-control-nav{width:100%;position:absolute;bottom:-30px;text-align:center}
.flex-control-nav li{margin:0 0 0 5px;display:inline-block;zoom:1;*display:inline}
.flex-control-nav li:first-child{margin:0}
.flex-control-nav li a{width:13px;height:13px;display:block;background:url(/assets/flexslider/theme/bg_control_nav.png) no-repeat 0 0;cursor:pointer;text-indent:-9999px}.flex-control-nav li a:hover{background-position:0 -13px}
.flex-control-nav li a.active{background-position:0 -26px;cursor:default}
a{text-decoration:none; font-family:"Times New Roman", Times, serif; text-transform:uppercase}
p{color:#181818; line-height:30px; }
ul, li, ul li {text-align:left}