CSS - Css And Browser Problem

I have recently changed my web site from being totally formatted using tables to being CSS based. I am not an expert at CSS so I have probably got some pretty bad code, so I cower somewhat in asking for help. Please don't be upset with me.

I have a problem with my web site displaying on IE 5.2 on a Mac OS X (10.3.6). I have no assess to this but a user has sent me a screen capture, and it doesn't seem to even be recognising the CSS. It displays okay on IE6 for Windows.

My web site is at:
http://www.elviscostello.info/

Your help would be greatly appreciated.
Thanks a lot,
JohnE

hi,

In my site, I'm trying to make the menu in a table.
The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him).

Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it?

here is the html for the menu:


<div id="menu">
<table width="679" border="0" cellpadding="0" cellspacing="4">
<tr>
<td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td>
<td background="../../images/1.jpg">&nbsp;</td>
<td background="../../images/2.jpg">&nbsp;</td>
<td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td>
<td background="../../images/3.jpg">&nbsp;</td>
<td background="../../images/4.jpg">&nbsp;</td>
<td background="../../images/5.jpg">&nbsp;</td>
<td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td>
<td background="../../images/6.jpg">&nbsp;</td>
</tr>
<tr>
<td background="../../images/7.jpg">&nbsp;</td>
<td background="../../images/8.jpg">&nbsp;</td>
<td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td>
<td background="../../images/9.jpg">&nbsp;</td>
<td background="../../images/10.jpg">&nbsp;</td>
<td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td>
<td background="../../images/11.jpg">&nbsp;</td>
<td background="../../images/12.jpg">&nbsp;</td>
<td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td>
</tr>
</table>
</div>


and here is the css:


/* Regular menu items */

#nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;}
#nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;}

/* Hovered menu items */

#nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;}
#nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;}

/* Active menu items */

body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;}
body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;}


I really need help...

Thanks a lot!!

Hi there folks, Im about to go insane with this one.
My site is akamarketing.com and you will notice on the left there is various elements about me & my blog which display fine in IE but the text continues across (without confining to its parent div width specification) in opera and firefox. According to my stats 25% are firefox so I do of course need to fix this issue.

The css and html for one broken section is

Code:

 <div align=center style="text-align:CENTER; border:<?=$bordersize ?>px dashed #000000; margin:2px; width:185px; padding:2px; margin-top:2px; margin-bottom:0px; padding 7px; float:left; margin-left:7px; padding-bottom:0px;">
				 
<table border=0 style="border:0px dashed black;"><tr><td style="text-align:left;"><img title="David Callan" style="margin: 0px 5px 0px 0px; padding-top: 0px; border: #000000 1px solid" alt="David Callan" src="http://www.akamarketing.com/images/davesmall.gif" align="left" vspace="0" hspace="0"/>Welcome. I'm <a href="http://www.akamarketing.com/blog/about-dave/" title="Read more about Dave on our blog"><font color="#22229C">Dave Callan</font></a>, a 24 year old SEOer & Web developer from Ireland. I've been doing design, development, seo, ppc, Internet marketing etc. since I was about 15. This site is my canvas!</td></tr></table>
				
</div>

Can anyone help me with this? I've tried a couple of things mostly around float properties but no joy. Thanks in advance for any help.

http://www.testers.info/webdesign/viva/aktuelles/

Both boxes in the centre are placed inside a table cell and are positioned via a <div> Tag using "position:relative":

Code:

.parent {
	left: auto;
	top: auto;
	position: relative;
}

basically everything works fine but when you're using Internet Explorer and resize the page vertically (horizontally works fine) the boxes behave like they're positioned static.

What declarations do I need to write in my style sheet to make the boxes stay in their table cell?

P.S.:
I already searched the web for about 2 hours on this topic.

Hi all

I'm just wondering if anyone can help me with a few corrections I need to make on a site I'm developing ?

I've recently developed a site on Mac OS X and been viewing it using Firefox whilst working on it, the site should look like this : http://www.timetraveltours.net/firefox.jpg

However when viewed in Safari I have found that there is a problem with the menu bar as seen here : http://www.timetraveltours.net/safari.jpg

To add to that I have noticed that there is also a problem at the bottom of the page, as seen here : http://www.timetraveltours.net/explorer.jpg

I'm guessing that I just have to change some of the positioning or something in the CSS but don't really want to it without some help/advice first incase I mess the whole thing up.

The CSS code can be found here http://www.timetraveltours.net/base.css

Other style sheets are :
http://www.timetraveltours.net/ie5mac.css http://www.timetraveltours.net/ie5win.css
http://www.timetraveltours.net/netscape.css
http://www.timetraveltours.net/screen.css
http://www.timetraveltours.net/style.css
(if needed)

I'm also wondering if these problems appear in 3 different browsers on a Mac what problems there are when viewed with various browsers on Windows and would very much appreciate anyone to beta test the site for me on the Windows platform.

I hope that I have explained myself cleary and given the correct information ? Many thanks in advance

The site can be found at : http://www.timetraveltours.net

the site seems to work perfectly in IE. it gets garbled in netscape. i know its something to do with the box conventions and the way the browsers interpret margin/border/padding etc..
heres the link to my site

http://ccc.1asphost.com/pacemakerproject/final%20website%20folder/index.htm

is there an easy way to resolve this problem..

Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc..

Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea?

I'm new to CSS layouts, and being a relic who was always happy using tables, it's causing me some headaches!

My latest conundrum involves trying to align a row of text to the bottom of an otherwise empty div. Here is my attempt, using colors for illustration only.

(This is of course only a simplified version of my design, so while the "outer" DIV might look superfluous it has to be there. In my real design it is wider and contains three DIVs side by side - "box3" being just one of them.)

Code:

<html>
<head>

<style type="text/css">
#outer {
	position: absolute;
	float: left;
	width: 228px;
	height: 196px;
	margin-top: 0px;
}
#box3 {
    float:left;
    width:228px;
    height:196px;
    background-color: green;
    text-align:right;
    display: table;
    #position: relative;
    overflow: hidden;
    font-weight:bold;
 }
</style>
</head>
<body>
 
<div id="outer">
<div id="box3">
<div style=" #position: absolute;  #top: 50%;display: table-cell; ">
<div style="  #position: relative;  #top: -50%; background-color: yellow;">
<p style="bottom:0;right:0;position:absolute; background-color: red;">
some <i>text goes here</i>
</p>
</div>
</div>
</div>
</div>

</body>
</html>

It looks fine in Firefox and Chrome, even if I don't quite understand why the text is elevated slightly from the bottom - that's okay. But in Internet Explorer, the text is nearer the top, and squashed to the right-hand side so that it's forced to wrap onto multiple lines.

The forum won't let me post an image so see if you can decipher this URL:
ht tp :// i49 .tiny pic. com /j8znti.png

Can anyone help me adjust the code so that it displays in IE the same way as in Firefox and Chrome? I'd really like to understand why it's so different and how to prevent a similar problem in future.

Many thanks!

My web page use some CSS syntax to control the color of hyperlinks, they are listed as below:

Code:

.row1 {
	background: #e7f6fe;
	/*background: #e1f4ff;*/
}
.row1 td{
    padding: 4px;
    border-bottom: 1px solid #c3c3c3;
    font-size: 12px;
    font-family: "Arial", "Helvetica", "sans-serif";
}
.row1 a:visited {
	color: blue;
	text-decoration: none;
}

--------------
My problem is, whatever the version of IE or other browsers, some users encountered the situation that when they clicked the hyperlink, the link becomes blue, but after closing the browser and restart IE again, some users will see the link color STILL IN BLUE, while some will see the link AS A NEW LINK WITH BLACK color again.

My boss asks for the reason of this difference, in addition, he wants all users will see the link as new link again after they restart the IE.

-------------
In my point of view, I think we can't set anything using program, javascript or css, it SHOULD BE DEPENDED on browser setting.

Can anyone provide me some answers about this questions? Thx.

So I've got a page on which a menu exists (or will) that is a certain width, I believe 854px. Now I know that this isn't the best idea, but I'm following someone's specific orders so meh. Now, my problem is that I want the page to resize according to the browser size and fill the page, so if the browser size is 1054 then I want the background image at the top to run the entire width of the page, and the menu, I'd want to center. Now if the browser is 854px or wider, then the page looks fine, but when the browser is anything less, then the menu, because it is a specific width, expands as it should as well as centers itself forcing a horizontal scroll bar, but the rest of the page is acting like it is ONLY 854px and therefore it cuts off and is now no longer centered with the menu.

It must be possible to do, right?
Here's a link to the page I'm using for debugging purposes
http://www.agentjeff.com/headerv10.html

hey all

i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page

Go Here To See What I Mean

the css can be found here

any ideas...cus im stumped

thanks very much

RF

I'm working on a little project here, trying to design a table-less page using XHTML and style sheets.

The first version worked only in IE, Mozilla and Opera didn't display them the way I wanted to. So I rebuilt the stylesheet from scratch with cross-browser compatibility in mind and it sort of works in all three browsers, except for one little bit:

http://gosh.ex.ac.uk/~cs01kb/lg_sample/

Stylesheet: http://gosh.ex.ac.uk/~cs01kb/lg_sample/css/main.css

IE6 and Opera 7 correctly display the little bar at the bottom with all the links, but Mozilla Firefox 0.8 doesn't - it displays it under the two main content boxes. I'm just out of ideas on how to try and make it work, it should be so simple.

Any help on how to get around it would be appreciated.

P.S.: If you're using any other browser out there (especially on a Mac) just a quick note or a screenie of what the page looks like would be nice... thanks!

I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE.

<a href="(URL address blocked: See forum rules)">Link</a>

I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers.

Any guidance is very appreciated. thanks.

My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out.

That being said

I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes

(I know I can post my url here, how can I redirect you guys to veiw my site??)


/********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/
Quote:
/* general */
body {background: url((MyBGJPEGforbackground)); margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
a, a:link, a:visited {color:white; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:black; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:30px;}
.mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:1px auto; width:750px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;}
.reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;}