/* BONUS TYPOGRAPHY STYLES
--------------------------------------------------------- */
pre, .code {
	background: #0F0F0F;
	border-left: 5px solid #2D2D2D;
	font: 1em/1.5 "Courier News", monospace;
	margin: 5px 0 15px;
	padding: 10px 15px;
}

blockquote {
	padding: 1em 40px 1em 15px;
	font-style: italic;
}

blockquote span.open {
	background: url(../images/so-q.gif) no-repeat left top;
	padding: 0 0 0 20px;
}

blockquote span.close {
	background: url(../images/sc-q.gif) no-repeat bottom right;
	padding: 0 20px 0 0;
}

blockquote.testimonial {
	padding: 0;
}

blockquote.testimonial span.author {
	background: url(../images/icon-user.gif) no-repeat left center;
	display: block;
	font-size: 90%;
	font-weight: bold;
	margin-top: 5px;
	padding-left:20px;
	text-transform: uppercase;
}

/* Drropcap */
.dropcap {
	color: #4B4B4B;
	display: block;
	float: left;
	font: 50px/40px Georgia, Times, serif;
	padding: 4px 8px 0 0;
}

/* Tips, Error, Message, Hightlight*/
p.error {
	background: url(../images/icon-error.gif) no-repeat top left;
	color: #A80106;
	padding-left: 25px;
}

p.message {
	background: url(../images/icon-info.gif) no-repeat top left;
	color: #006699;
	padding-left: 25px;
}

p.tips {
	background: url(../images/icon-tips.gif) no-repeat top left;
	color: #EE9600;
	padding-left: 25px;
}

.highlight {
	background: #FFFF80;
	font-weight: bold;
	padding: 1px 5px;
}

/* Note Style */
p.stickynote {
	background: url(../images/sticky-bg.gif) no-repeat 5px center #000000;
	border: 1px solid #1E1E1E;
	padding: 10px 0px 10px 40px;
}

p.download {
	background: url(../images/download-bg.gif) no-repeat 5px center #000000;
	border: 1px solid #1E1E1E;
	padding: 10px 0px 10px 40px;
}

.blocknumber {
	clear: both;
	padding: 5px 15px 10px;
	position: relative;
}

/* Check list */
ul.checklist {
	list-style: none;
}

ul.checklist li {
	background: url(../images/icon-checklist.gif) no-repeat 0 4px;
	margin-left: 15px;
	padding: 0 0 0 20px;
}

/* Check list (star) */
ul.stars {
	list-style: none;
}

ul.stars li {
	background: url(../images/icon-star.gif) no-repeat 0 5px;
	margin-left: 15px;
	padding: 0 0 0 20px;
}

/* List arrow */
ul.arrow {
	list-style: none;
}

ul.arrow li {
	background: url(../images/icon-arrow.gif) no-repeat 3px 5px;
	margin-left: 15px;
	padding: 0 0 0 20px;
}

/* Bignumber */
.bignumber {
	background: url(../images/ol-bg.gif) no-repeat top left;
	color: #FFFFFF;
	display: block;
	float: left;
	font: bold 20px/normal Arial, sans-serif;
	margin-right: 8px;
	padding: 6px 7px;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
	margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
	font-weight: bold;
	margin-left: 15px;
	padding-left: 0;
}

div.bubble1 div {
	background: url(../images/bub1-br.gif) no-repeat bottom right;
	margin: 0;
	width: 100%;
}

div.bubble1 div div {
	background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
	background: url(../images/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
	background: url(../images/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
	margin: 0;
	padding: 10px 15px 20px;
	width: auto;
}

div.bubble2 div {
	background: url(../images/bub2-br.gif) no-repeat bottom right;
	margin: 0;
	width: 100%;
}

div.bubble2 div div {
	background: url(../images/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
	background: url(../images/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
	background: url(../images/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
	margin: 0;
	padding: 10px 15px 25px;
	width: auto;
}

div.bubble3 div {
	background: url(../images/bub3-br.gif) no-repeat bottom right;
	margin: 0;
	width: 100%;
}

div.bubble3 div div {
	background: url(../images/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
	background: url(../images/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
	background: url(../images/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
	margin: 0;
	padding: 10px 15px 45px;
	width: auto;
}

div.bubble4 div {
	background: url(../images/bub4-br.gif) no-repeat bottom right;
	margin: 0;
	width: 100%;
}

div.bubble4 div div {
	background: url(../images/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
	background: url(../images/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
	background: url(../images/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
	margin: 0;
	padding: 10px 15px 45px;
	width: auto;
}

/* Legend */
.legend-title {
	background: #000000;
	display: block;
	float: left;
	font-weight: bold;
	left: 7px;
	margin: 0;
	padding: 0 3px;
	position: absolute;
	top: -13px;
}

.legend {
	border: 1px solid #1E1E1E;
	margin: 20px 0;
	padding: 0 10px;
	position: relative;
}

/* Blockbuttons (on frontpage) */
.block-xlarge {
	color: #000000;
	width: 350px;
	height: 328px;
	padding: 10px;
	overflow:auto;
	background: #FFFFFF;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=0,  FinishX=100, StartY=0, FinishY=100);	
}

.block-xlarge a {
	color: #000000;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 200%;
	font-weight: bold;
}
.block-xlarge a:hover,
.block-xlarge a:active,
.block-xlarge a:focus {
	color: #000000;
}

.block-large {
	color: #FFFFFF;
	width: 190px;
	height: 150px;
	padding: 10px;
	overflow:auto;
	background: #000000;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=0,  FinishX=100, StartY=0, FinishY=100);	
}

.block-large a {
	color: #CCCCCC;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 160%;
	font-weight: bold;
}
.block-large a:hover,
.block-large a:active,
.block-large a:focus {
	color: #FFFFFF;
}

.block-medium {
	color: #FFFFFF;
	width: 81px;
	height: 150px;
	padding: 10px;
	overflow:auto;
	background: #000000;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=0,  FinishX=100, StartY=0, FinishY=100);	
}

.block-medium a  {
	color: #CCCCCC;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 120%;
	font-weight: bold;
}
.block-medium a:hover,
.block-medium a:active,
.block-medium a:focus {
	color: #FFFFFF;
}

/*Taglines*/
.tagline {
	height: 24px;
	display: block;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: right;
	font-weight: bold;
	font-family: Futura, 'Century Gothic', 'Gill Sans', Tahoma;
}
.tagline a {
	color: #EEEEEE;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 100%;
	font-weight: bold;
}
.tagline a:hover,
.tagline a:active,
.tagline a:focus {
	color: #FFFFFF;
}
.tagline-footer {
	margin-top: 4px;
	display:block;
	color: #FFFFFF;
	background: none;
	text-align: right;
	padding-right: 30px;
}

.tagline-footer a {
	color: #FFFFFF;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 70%;
	font-weight: bold;
}
.tagline-footer a:hover,
.tagline-footer a:active,
.tagline-footer a:focus {
	color: #FFFFFF;
}


/* BEGIN XXXXXXXXXXXXXXXXXX Dropshadow elements XXXXXXXXXXXXXXX*/

.outerpair1 {
background: url(../images/dropshadow/small_upper_right.png) right top no-repeat;
}
/* .outerpair1 must be given a width contraint, via either a width,
or by floating or absolute positioning. In this demo these are
applied from the second class name on the .outerpair1 DIV's.
This box also has one of the corner .png's. */


.outerpair2 {
background: url(../images/dropshadow/small_lower_left.png) left bottom no-repeat;
padding-top: 8px;
padding-left: 8px;
}
/* .outerpair2 has padding equal to the shadow
thickness, and also has one of the corner .png's */


.shadowbox {
background: url(../images/dropshadow/small_shadow.png) bottom right;
}
/* .shadowbox holds the main shadow .png */


.innerbox {
position: relative;
left: -8px;
top: -8px;
}
/* .innerbox is made "relative" and is "pulled" up and to
the left, by a distance equal to the thickness of the shadow.
Because this is a relative-based shift, the box retains its
exact dimensions without change. */


.shadowbox img {
border: 10px solid #fff;
vertical-align: bottom;
}
/* Shadowed images should not be made "block" for eliminating the baseline
space under the images, because this may trigger IE background bugs.
Instead, use "vertical-align: bottom;" for this purpose. */


/*XXXXXXXXXXXXXXXXXX Custom width constraints and extra styling XXXXXXXXXXXXXXX*/

.floatimage {
float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
margin: 130px 0 0 450px;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
}

.flashbox { /* Absolute positioning also causes the shrinkwrap behavior. */
position: absolute;
left: 377px;
top: 30px;
}

.flashbox .innerbox {
background: #eed;
border: 1px solid #ccb;
}

.absoluteimage { /* Again, absolute positioning causes shrinkwrapping. */
position: absolute;
left: 40px;
top: 200px;
}

.textbox {
position: absolute; /* AP once more... */
left: 20px;
top: 1.8em;
}

.textbox .innerbox {
border: 1px solid #ccc;
background: #e8e8e8;
width: 330px;
height: 210px;
overflow: auto;
}
/* Unlike the other items, the .textbox content is just text without a natural
width, and so shrinkwrapping fails, unless .innerbox is given a specific width.
All shadowed text elements will need a width of some kind to avoid a full-width
shadowed box, unless that is the desired effect. The width may be appied to
div.inner, div.outerpair1, or an external wrapper element. */

.linkbox {
position: absolute; /* AP once more... */
left: 10px;
top: 6px;
}

.linkbox .innerbox {
display: block;
background: #fff;
border: 1px solid #ccc;
padding: 3px 5px;
}

/* BEGIN XXXXXXXXXXXXXXXXXX Dropshadow elements XXXXXXXXXXXXXXX*/


/* BEGIN CHRONOFORM
Licenses
To be able to continue working at our components and provide the excellent support on forums we decided to get a small profit out of them but at the same time don't force everybody to pay in order to use our components!
Every component has a link at the bottom of every page created, the link text is "Joomla Professional Work" OR "Joomla Professional Solutions", the link will be to us here htttp://www.chronoengine.com, its illegal to remove this link from the source code unless you have a license.
So a License of some component is a license to a link free version of it!
For ChronoForms Component ONLY, you can style the div element which contains the link through CSS to hide it if you can't pay the license fee, the link will still be there in the page source but it will be hidden for visitors!
http://www.chronoengine.com/licenses.html
*/
.chronoform {
	display:none;
}
.validation-advice {
	color: red;
	font-weight: bold;
}
/* END CHRONOFORM */