Alert messages with CSS

* @group Special Styles */
/* This is based on styles from the Sawchuk scheme for K2 */
/* http://www.deanjrobinson.com/wordpress/redoable */
.download, .code, .note,
.alert, .new, .construction,
.information {
	background-position: 15px 10px;
	background-repeat: no-repeat;
	font-size: 1.2em !important;
	line-height: 115%;
	margin: 10px auto;
	padding: 10px 10px 10px 50px;
	text-align: left;
}
 
ul.download, ul.code, ul.note,
ul.alert, ul.new, ul.construction,
ul.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px 10px 10px 50px;
}
 
ol.download, ol.code, ol.note,
ol.alert, ol.new, ol.construction,
ol.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 10px 10px 65px;
}
 
dl.download, dl.code, dl.note,
dl.alert, dl.new, dl.construction,
dl.information {
	font-size: 1em !important;
	line-height: 115%;
	padding: 10px 10px 10px 50px;
}
 
dl.download dt, dl.code dt, dl.note dt,
dl.alert dt, dl.new dt, dl.construction dt,
dl.information dt {
	font-size: 1.2em !important;
	font-weight: bold;
	line-height: 115%;
}
 
dl.download dd, dl.code dd, dl.note dd,
dl.alert dd, dl.new dd, dl.construction dd,
dl.information dd {
	line-height: 115%;
	list-style-type: disc;
}
 
.download {
	background-color: #353;
	background-image: url('images/package_go.png');
	border-bottom: 2px solid #383;
	border-top: 2px solid #383;
}
 
.download a, .download a:visited {
	border-bottom: 2px dotted #3F3;
	color: #3F3;
	text-decoration: none !important;
}
 
.download a:hover {
	border-bottom: 2px dotted #3C3;
	color: #3C3;
	text-decoration: none !important;
}
 
.code { /* use p class=code when you want to fake it, sometimes handy */
	background-color: #444;
	background-image: url('images/application_osx_terminal.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
	font-family: 'Courier New', Courier, Fixed;
}
 
.alert {
	background-color: #533;
	background-image: url('images/exclamation.png');
	border-bottom: 2px solid #F33;
	border-top: 2px solid #F33;
}
 
.new {
	background-color: #643;
	background-image: url('images/new.png');
	border-bottom: 2px solid #F93;
	border-top: 2px solid #F93;
}
 
.construction {
	background-color: #553;
	background-image: url('images/error.png');
	border-bottom: 2px solid #FF3;
	border-top: 2px solid #FF3;
}
 
.information {
	background-color: #335;
	background-image: url('images/information.png');
	border-bottom: 2px solid #33F;
	border-top: 2px solid #33F;
}
 
.note {
	background-color: #444;
	background-image: url('images/page_white_text.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
}
 
.callout {
	border-bottom: 2px solid #CCC;
	border-top: 2px solid #CCC;
	color: #CCC;
	font-size: 1.4em !important;
	margin: 10px auto;
	padding: 10px;
	text-align: justify;
}
/* @end */
 
/* based on xTypo for joomla: http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,2087/Itemid,35/ */
 
.info {
background: url(icon/info.gif) center no-repeat;
background-color:#F8FAFC ;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#5E6273;
border-top: 2px solid #B5D4FE ;
border-bottom: 2px solid #B5D4FE;
}
 
.warning {
background: url(icon/warning.gif) center no-repeat;
background-color: #FBEEF1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#8E6A64;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}
 
.sticky {
background: url(icon/sun.gif) center no-repeat;
background-color: #E6FFE1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#48793F;
border-top: 2px solid #FEABB9 ;
border-bottom: 2px solid #FEABB9;
}
 
.feed {
background: url(icon/feed.gif) center no-repeat;
background-color: #E0E0E8;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#333333;
border-top: 2px solid #85BBDB ;
border-bottom: 2px solid #85BBDB;
}
 
.donwload {
background: url(icon/download.gif) center no-repeat;
background-color: #F0F0F0;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#666666;
border-top: 2px solid #c0c0c0 ;
border-bottom: 2px solid #c0c0c0;
}
 
.code {	
background: #F0F0F0 url(icon/_no-image.gif) 10px 5px no-repeat;
padding:5px 20px 5px 10px;
font-family: Courier New, Courier, mono, times new roman;
line-height:150%;
border-left: 5px solid #C3D7EA;	 
color:#666666;
}
 
.quote {
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}
 
.quote_left {
float:left;
width: 200px;;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}
 
.quote_right {
float:right;
width: 200px;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}
 
.dropcap{
float: left;
text-transform:uppercase;
line-height:80%;
padding:0px 8px 4px 0px;
display: block;
color:#333333;
font-size: 70px;
font-family: Georgia, Times New Roman, Trebuchet MS;
}