@media screen {
	body {
		background-color: #ddd;
		margin: 10px;
		padding: 0;
	}

	/**
	 * Font styles
	 */
	a, div, p, span, input, select, textarea, li, body, h1, h2, h3, h4 {
		font-family: "Century Gothic", Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #000;		
	}	
	
	a {
		color: #c30;
	}
	
	a:hover {
		color: #33a;
	}
	
	h1, h2, h3, h4 {
		margin: 0;
		padding: 6px 0 6px 0;
		font-weight: normal;
	}
	
	h1 {
		font-size: 1.8em;
	}
	
	h2 {
		font-size: 1.6em;
	}
	
	h3 {
		font-size: 1.4em;
	}
	
	img {
		border: 0;
	}
	
	/**
	 * WRAPPER
	 */
	#wrapper {
		width: 960px;
		margin: 0 auto;
	}
	
	/**
	 * ATTIC
	 */
	#attic #catchphrase {
		float: left;
		font-size: 1.5em;
		max-width: 50%;
	}
	
	#attic #toptools {
		float: right;
		width: 50%;
	}

	#attic #loginballoon {
		float: left;
		height: 25px;
		/*width: 140px;*/
		background: transparent url(img/loginballoon-r.png) no-repeat scroll top right;
		position: relative;
	}
	
	#attic #langselector {	
		padding: 0 0 0 10px;
	}
	
	#attic #loginballoon .inside {	
		padding: 0 10px 0 10px;
	}	
	
	#attic #loginballoon .inside {
		height: 100%;	
		position: relative;
		background: transparent url(img/loginballoon-l.png) no-repeat scroll top left;	
	}
	
	#attic #loginballoon #loginballoon_tail {
		position: absolute;
		top: -10px;
		left: 10px;
		width: 10px;
		height: 10px;
		background: transparent url(img/loginballoon-tail.png) no-repeat scroll top left;	
	}
	
	#attic #loginballoon .inside .content {
		text-align: center;
		padding-top: 3px;
	}
	
	#attic #loginballoon .inside .content a {
		font-size: 0.9em;		
	}	
	
	#attic #langselector {
		float: right;
	}
	
	#attic form {
		padding: 0;
		margin: 0;
	}
	
	/**
	 * MAIN
	 */
	
	#main {
		display: block;
		background: #fff url(img/r.png) repeat-y scroll top right;
	}
	
	#maininside {
		background: transparent url(img/tr.png) no-repeat scroll top right;
	}
	
	#maintop, #mainbottom, #mainbottom .inside {
		width: 100%;
		height: 26px;		
	}
	
	#maintop {
		background: transparent url(img/tl.png) no-repeat scroll top left;
	}
	
	#attic, #basement, #mainhead, #maincontent, #mainfooter, .contentcontainer {
		padding: 0 26px;		
	}
	
	#attic #toptools {
		padding-bottom: 6px;
	}
	
	#mainhead, #maincontent, #mainfooter, .contentcontainer {
		background: transparent url(img/l.png) repeat-y scroll top left;		
	}
	
	#mainhead {
		height: 100%;
	}
	
	#mainhead #rslogo {
		float: left;
	}
	
	#maincontent {
		padding-top: 30px;
	}
	
	/**
	 * Topmenu
	 */
	#mainhead #topmenu {
		float: right;
	}
	
	#topmenu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#topmenu li {
		display: inline;
		background: #fff;
		padding: 0;
		margin: 0 0 0 10px;
		height: 30px;
	}

	#topmenu li a {
		position: relative;
		width: 100%;	
		height: 100%;
		margin: 0;
		padding: 5px 10px 5px 10px;
		font-size: 14px;
		text-decoration: none;
		color: #000;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	#topmenu li a:hover {
		background-color: #66c;
		color: #fff;
	}
	
	#topmenu li.active a, #topmenu li.active a:hover {
		background-color: #e60;
		color: #fff;		
	}
	
	#topmenu #user_menu {
		margin: 0 0 20px 0;
	}

	/**
	 * Main content
	 */
	#mainbottom {
		background: transparent url(img/br.png) no-repeat scroll bottom right;		
	}
	
	#mainbottom .inside {
		background: transparent url(img/bl.png) no-repeat scroll bottom left;		
	}
	

	
	/**
	 * Delimiter bar
	 */
	.delimiterbar, .delimiterbar .inside {
		height: 33px;
	}
	
	.delimiterbar {
		background: #66c url(img/delimiterbar-r.png) no-repeat scroll top right;
	}
	
	.delimiterbar .inside {
		background: transparent url(img/delimiterbar-l.png) no-repeat scroll top left;
	}
	
	.delimiterbar .label {
		color: #fff;
		font-size: 1.3em;
		padding: 5px 0 0 20px;
	}
	
	/* bottom menu */
	ul#front_menu_bottom {
		border: none;
		display: inline;
		margin-left: 0;
		padding-left: 0;
	}
	
	ul#front_menu_bottom li {
		border: none;
		display: inline;
		list-style: none;
		margin-left: 0;
		padding-left: 3px;
	}

	
	/**
	 * Big list
	 */
	.biglist {
		margin: 0;
		padding-left: 20px;
		list-style-image: url(img/bullet-asterisk.png);
	}
	
	.biglist li {
		margin-top: 10px;
		font-size: 1.4em;
	}
	
	/**
	 * Auxiliary classes
	 */
	.defloatalizer {
		clear: both !important;
	}
	
	.indented {
		padding-left: 20px;
	}
	
	/**
	 * Sort container
	 */
	.sort-container, .navigation {
		margin: 10px 0 10px 0;
		padding: 10px;
		background: #eee;
	}
	
	.sortingtools {
		float: left;
	}
	
	.sortingtools div, .expandcollapse div {
		display: inline;
	}
	
	.sort-label a, .sort-item a {
		text-decoration: none;
	}
	
	.sort-item {
		padding: 5px 10px 5px 10px;
		margin-left: 1em;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}
	
	.sort-item.active, .sort-item.active:hover {
		background: #e60;
	}
	
	
	.sort-item:hover {
		background: #66c;
	}
	
	.sort-item:hover a, .sort-item.active a, .sort-item.active:hover a {
		color: #fff;
	}
	
	.expandcollapse {
		float: right;
	}
	
	.expand-all {
		margin-right: 2em;
	}
	
	.expandcollapse a {
		text-decoration: none;
	}
	
	/**
	 * Formus and fieldsets
	 */
	form.inline-form {
	}
	
	fieldset {
		position: relative;
		background: transparent url(img/bg-form.png) repeat-x scroll top left;
		border: 1px solid #ccc;
		padding: 10px 5px 0 5px;
	}
	
	fieldset legend {
		position: absolute;
		top: -1em;
		left: 1em;
		padding: 2px 5px 2px 5px;
		border: 0;
		background-color: #fff;
	}
	
	fieldset.collapsible legend {
		padding-left: 18px;
		background: #fff url(img/bullet_arrow_up.gif) no-repeat scroll top left;
	}
	
	fieldset.collapsed legend {
		left: 1em;
		background: #fff url(img/bullet_arrow_down.gif) no-repeat scroll top left;
	}
	
	fieldset.collapsed {
		background: transparent none no-repeat scroll 0 0;
		padding: 0 0 0 5px;
	}
	
	fieldset.collapsed * {
		display: none;
	}
	
	fieldset.collapsed legend {
		display: block !important;
	}	
	
	form div.row, form div.field_set {
		margin-top: 6px;
		clear: both;
	}
	
	form div.row label, form div.field_set label {
		width: 10em;
		min-width: 10em;
		float: left;
		text-align: right;
	}

	form div.field_set input,
	form div.field_set select,
	form div.field_set textarea,	
	form div.row input,
	form div.row select,
	form div.row textarea {
		margin-left: 1em;
	}
	
	form div.field_set input:not([type]),
	form div.field_set input[type="text"],
	form div.field_set input[type="password"],
	form div.field_set select,
	form div.field_set textarea,
	form div.row input:not([type]),
	form div.row input[type="text"],
	form div.row input[type="password"],
	form div.row select,
	form div.row textarea {
		width: 20em;
		background: transparent url(img/shade.png) repeat-x scroll top left;
		border: 1px solid #aaa;
		padding: 3px;
	}
	
	form div.field_set select option,
	form div.row select option {
		background: #fff;
	}	
	
	form div.row select,
	form div.field_set select {
		width: 21em;
		padding: 1px;
	}
	
	form div.form-footer, form div.field_set.bottom {
		background: transparent url(img/bg-gradient.png) repeat-x scroll center left;
		border-top: 1px solid #ccc;
		padding: 5px;
		margin: 10px -5px 0 -5px;
		text-align: right;
	}
	
	form div.field_set.bottom input[type="submit"],
	form div.field_set.bottom input[type="button"], 
	form div.field_set.bottom button,	
	form div.form-footer input[type="submit"],
	form div.form-footer input[type="button"], 
	form div.form-footer button,
	.button {
		background: transparent url(img/bg-button.png) repeat-x scroll center left;
		padding: 5px 10px 5px 10px;
		border: 1px solid #e60;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		cursor: pointer;
		font-size: 1em;
		color: #000;
		text-shadow: 0 1px 2px rgba(255, 204, 153, 0.8);
		text-decoration: none;
		-moz-box-shadow: 0px 0px 5px #666;
		-webkit-box-shadow: 0px 0px 5px #666;
	}
	
	form div.field_set.bottom input[type="submit"] *,
	form div.field_set.bottom input[type="button"] *, 
	form div.field_set.bottom button *,
	form div.field_set.bottom input[type="submit"] *:hover, 
	form div.field_set.bottom input[type="button"] *:hover, 
	form div.field_set.bottom button *:hover,
	form div.form-footer input[type="submit"] *,
	form div.form-footer input[type="button"] *, 
	form div.form-footer button *,
	form div.form-footer input[type="submit"] *:hover, 
	form div.form-footer input[type="button"] *:hover, 
	form div.form-footer button *:hover,	
	.button *:hover,
	.button * {
		color: #000;
		text-decoration: none;
	}
	
	.button a {
		display: block;
	}	
		
	.loginform, .forgotform {
		width: 50%;
		margin: 50px auto;
	}
	
	/**
	 * Navigation - pagination
	 */
	.navigation {
		text-align: center;
	}
	
	ul#pagination {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul#pagination li {
		display: inline;
		color: #000;
		margin: 0 6px 0 0;
	}
	
	ul#pagination li.previous-on, ul#pagination li.previous-off {
		margin-right: 1em;
	}
	
	ul#pagination li.next-on, ul#pagination li.next-off {
		margin-left: 1em;
	}
	
	ul#pagination li.previous-on, ul#pagination li.next-on {
		
	}
	
	ul#pagination li.previous-off, ul#pagination li.next-off {
		color: #555;		
	}
	
	ul#pagination li.active {
		background: none;
	}
	
	ul#pagination li.of-total {
		margin-left: .5em;
	}
	
	/**
	 * Steps
	 */
    
    ul.steps {
        list-style-type: none;
        min-width: 880px;
        width: 100%;
        margin: 0;
        padding: 0;		
    }
    
    ul.steps li {
        float: left;
        background: url('img/steps_wr.png') left -22px no-repeat;
        min-height: 55px;
        height: 55px;
        min-width: 170px;
        width: 33%;
		color: #fff;
        line-height: 55px;
        font-weight: bold;
        font-size: 1.1em;
        margin-bottom: 1em;
        text-align: center;
        overflow: hidden;
    }
	
	ul.steps-4 li {
		width: 24% !important;
	}
	
	ul.steps-5 li {
		width: 19% !important;
	}
	
	ul.steps-6 li {
		width: 16% !important;
	}
	
    ul.steps li span {
    	color: #fff;
        margin: 0 5px 0 10px;
    }
    
    ul.steps li.empty {
        background-position: left -22px;
    }
    
    ul.steps li.start {
        color: #fff;
        background-position: left -522px;
    }
    
    ul.steps li.next {
        background-position: left -122px;
    }
    
    ul.steps li.current {
        color: #fff;
        background-position: left -222px;
    }
    
    ul.steps li.prevDone {
        color: #fff;
        background-position: left -422px;
    }
    
    ul.steps li.lastDone, ul.steps li.Done {
        color: #fff;
        background-position: left -322px;
    }
	
	/* ======== Platforms ======== */
	ul.platforms_list{
		font-size: 1.2em;
		margin: 5px 0;
		padding: 0;
		list-style: none;
		float: left;
		width: 100%;
	
	}
	ul.platforms_list li {
		float: left;
		background: #fefefe;
		width: 100%;
		padding: 5px 0;
		margin: 5px 0;
	}
	ul.platforms_list li .imgblock {
		border:none;
		font-weight: bold;
		float: left;
		width: 110px;
		padding: 0 5px;
		text-align: center;
	}
	ul.platforms_list li .imgblock img {
		border:none;
		padding: 5px;
		margin: 2px;
		background: #fff;
		border: 1px solid #ccc;
	}
	ul.platforms_list li .detail{
		padding-left: 140px;
	}
	ul.platforms_list li h3, ul.platforms_list li p {margin: 5px 0; padding: 5px 0;}
	
	/* ======= tooltip ====== */
	
	a.tip  {
		border-bottom: 1px dashed;
		text-decoration: none;
	}
	
	a:hover.tip  {
		position: relative;
		cursor:help;
	}
	
	 a.tip span {
		display: none;
	}
	
	 a:hover.tip span {
		display: block;
		min-width:200px;
	   	position: absolute; top: 10px; left: 0;
	   	padding: 10px; margin: 10px; z-index: 100;
	   	background: #ffffe1; border: 1px solid #bbb;
	}
		
	/**
	* Showcase
	*/
	.featured_showcase {
		padding: 0;
		margin: 0;
	}
	
	.featured_showcase li {
		list-style: none;
		background: #eee;
		margin: 20px 0 20px 0;
	}
	
	.showcase_block {
		position: relative;
		display: block;
		overflow: auto;
		max-height: 150px;
	}
	
	.showcase_image {
		position: relative;
		display: block;
		float: left;
		border: 0;
		background: #fff url(img/showcase-l.png) no-repeat scroll center right;
		padding-right: 20px;
		margin-right: 10px;
	}
	
	.showcase_image img {
		border: 0;
	}
	
	.showcase_image a {
		display: block;
	}
	
	.showcase_text {
		position: relative;
		display: block;
		width: auto;
		height: 100%;
		padding: 10px;
	}
	
	.showcase_title {
		font-size: 1.6em;
		font-weight: bold;
	}
	
	.showcase_url {
		font-size: 1.3em;
	}
	
	.showcase_desc {
		width: inherit;
	}
	
	.featured_showcase li.right .showcase_image {
		float: right;
		background: #fff url(img/showcase-r.png) no-repeat scroll center left;
		padding: 0 0 0 20px;	
		margin-right: 0;
	}
	
	/**
	* 10 Reasons containers
	*/
	ul.reasons {
		padding: 0;
		margin: 0;
	}
	
	ul.reasons li {
		float: left;
		display: block;
		position: relative;
		width: 434px;
		min-height: 200px;
		padding: 20px;
		margin: 20px 10px;
		background: transparent url(img/h-gradient.png) repeat-x scroll top left;	
		border: 1px solid #ccc;	
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-box-shadow: 0px 0px 5px #555;
		-webkit-box-shadow: 0px 0px 5px #555;		
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;		
	}
	
	ul.reasons li p {
		padding: 10px 0 0 0;
		margin: 0;
		font-size: 1.2em;
	}
	
	ul.reasons li div.figure {
		position: absolute;
		top: -20px;
		left: -10px;
		width: 40px;
		height: 40px;
		background: transparent url(img/circle-40.png) no-repeat scroll 0 0;
		color: #fff;
		font-size: 16px;
		text-align: center;
		padding-top: 8px;
		opacity: 0.8;
	}
	
	/**
	 * Voice samples
	 */
	ul.voices_showcase {
		margin: 0;
		padding: 0;
	}
	
	ul.voices_showcase li {
		float: left;
		display: block;
		position: relative;
		min-width: 200px;
		max-width: 250px;
		padding: 20px;
		margin: 10px 10px;
		background: transparent url(img/h-gradient.png) repeat-x scroll top left;	
		border: 1px solid #ccc;	
		-moz-border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-box-shadow: 0px 0px 5px #555;
		-webkit-box-shadow: 0px 0px 5px #555;		
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;				
	}
	
	ul.voices_showcase li h4 {
		font-weight: bold;
		float: left;
		margin: 0;
		padding: 0;
		height: 20px;
	}
	
	ul.voices_showcase li div.voice-box.male {
		margin: 0 0 20px 0;
	}
	
	ul.voices_showcase li .audioplayer {
		float: right;
	}
	
	ul.voices_showcase li div.voice-mp3link {
		clear: both;
	}
}