a:not([rel~="external"]) {
	text-decoration: none; border-bottom: dotted 1px;
}

a[type]		{padding: 0 5px 0 25px; text-decoration: none;
		 /* start with the default "unknown file-type" icon */
		 background: #dedede url("/design/icons/page_white.png") no-repeat 5px 50%;
		 /* rounded, borders. the bottom border is removed for if the link is internal */
		 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-bottom: 0 !important;}
a[type]:hover	{background-color: #eea;}

/* these icons © Mark James, <famfamfam.com/lab/icons/silk> */
a[href$=".gif"], a[href$=".jpg"], a[href$=".png"]
		{background-image: url("/design/icons/page_white_picture.png");}
a[href$=".pdf"]	{background-image: url("/design/icons/page_white_acrobat.png");}
a[href$=".zip"]	{background-image: url("/design/icons/page_white_zip.png");}
a[href$=".exe"]	{background-image: url("/design/icons/application_xp_terminal.png");}

/* Firefox users will get their own native icons from their OS.
   I’m sure this can be done in Safari, but I don’t know how */
@-moz-document url-prefix() {
	/* `@moz-document` isolates the following CSS for Firefox (gecko) only */
	/* get the "unknown file-type" icon from the OS */
	a[type]		{background-image: url("moz-icon://.?size=16");}
	/* and the other file type icons */
	a[href$=".gif"]	{background-image: url("moz-icon://.GIF?size=16");}
	a[href$=".jpg"]	{background-image: url("moz-icon://.JPG?size=16");}
	a[href$=".png"]	{background-image: url("moz-icon://.PNG?size=16");}
	a[href$=".pdf"]	{background-image: url("moz-icon://.PDF?size=16");}
	a[href$=".zip"]	{background-image: url("moz-icon://.ZIP?size=16");}
	a[href$=".exe"]	{background-image: url("moz-icon://.EXE?size=16");}
}

/* set the default external-link icon (this icon taken from Wikipedia) */
a[rel~="external"]:not([type]) {
	background: url('/design/icons/external.png') no-repeat 0 50%;
}
/* hide the icon when not hovering on the link (whilst keeping the icon on standby)
   `:not([type])` is needed to not break the file-links which already have an image */
a[rel~="external"]:not([type]):not(:hover) {
	background-image: none;
}
/* when you hover over the link, jut the favicon over the left side */
a[rel~="external"]:not([type]):hover {
	/* `background-color` is set to prevent text clashing with heavily transparent favicons, like Google’s */
	margin-left: -18px; padding-left: 18px; background-color: #fcfcfc;
}

/* some favicons for common websites I link to.
   the `:hover` is only required by Safari to prevent it from preloading these */
a[href*="apple."]:hover		{background-image: url('http://apple.com/favicon.ico');}
a[href*="archive.org"]:hover	{background-image: url('http://web.archive.org/favicon.ico');}
a[href*="deviantart."]:hover	{background-image: url('http://i.deviantart.com/icons/favicon.png');}
a[href*="google."]:hover	{background-image: url('http://google.com/favicon.ico');}
a[href*="osnews."]:hover	{background-image: url('http://osnews.com/favicon.ico');}
a[href*="php.net"]:hover	{background-image: url('http://static.php.net/www.php.net/favicon.ico');}
a[href*="slashdot."]:hover	{background-image: url('http://slashdot.org/favicon.ico');}
a[href*="tinyurl."]:hover	{background-image: url('http://tinyurl.com/favicon.ico');}
a[href*="wikipedia."]:hover	{background-image: url('http://en.wikipedia.org/favicon.ico');}
a[href*="youtube."]:hover	{background-image: url('http://s.ytimg.com/yt/favicon-vfl1123.ico');}

/* icons for other protocols */
a[href^="mailto:"]:hover	{background-image: url('/design/icons/email.png');}
a[href^="itms:"]:hover		{background-image: url('/design/icons/itms.png');}