html {
	overflow: auto;
	background: #333333 url('/images/bg.gif');	
}

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

body {
	font-family: "Droid Sans", "Arial"; 
	font-size: 1em;
	position: relative;
	min-width: 1200px;
	width: 1200px;
	margin: 0 auto;
}

img {
	border: 0;
}

h1 {
	font-size: 18pt;
	color:#333333;	
}

h2 {
	font-weight: bold;
	font-size: 12pt;
	text-align: center;
	color:#333333;
	padding-top: 20px;
	clear: both;
}

h2.portfolio_header {
	padding-top: 50px;
	padding-bottom: -20px;
}

h3 {
	font-weight: bold;
	font-size: 10pt;
	color:#333333;
}

#header {
	height: 300px;
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
}

.column {
	padding-top: 300px !important;
}

#main {
	padding-right: 240px;
	overflow: hidden;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: relative;
	background: white;	
}

#contmenu {
	padding: 0 20px;
	margin-top: -20px;
	clear: both;
}

* html #main { 
	overflow: visible;
}

#right, article {
	float: left;
	position: relative;
	padding-bottom: 150px !important;
}


#hat {
	height: 150px;
	width: 100%;  
	background: #333333; 
}

.top {
	position: absolute;
	z-index: 1;
	width: 100%; 	
	height: 150px;
	background: url('/images/head.jpg') no-repeat;
}

.responsive {
	display: none;
}

.middle {
	position: absolute;
	z-index: 1;
	width: 100%; 	
	top: 150px;
	height: 150px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;	
}

.middle img#logo {
	margin: 20px 20px 5px 20px;
	border: none;
}

.middle img#logo:hover {
	box-shadow: 0 0 8px #efefef;	
}

.middle span#slogan {
	color: #dadada;
	font-size: 16pt;
	padding-left: 100px;
}

.logo {
	float: left;
}

.menu {
	width: 82px;
	height: 80px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;
	text-align: center;
	line-height: 10pt;
	opacity:0.8;
	-moz-opacity: 0.8;
}

.menu:hover {
	opacity:1.0;
	-moz-opacity: 1.0;
}

.menu a {
	font-size: 8pt;
	font-weight: normal;
	color: #ebebeb;
	text-decoration: none;
}

.menu a:hover {
	color: #fcfcfc;
}

.menu a  img{
	padding: 0 0 5px 0;
}

.breadcrumbs {
	float: right;
	margin: 10px 20px;
	color: #ebebeb;
	font-size: 10pt;
}

.breadcrumbs  a {
	color: #ebebeb;
}

.clear {
	clear: both;
    visibility: hidden;
}

.main_header {
	background: #555555;
	padding: 5px;
	overflow: hidden;
}

.main_header  h1{
	color: #cccccc;
	margin: 10px 10px 5px 10px;
	font-size: 16pt;
}

.services {
	margin: 0;
	padding: 0;
}

.service_menu {
	width: 110px;
	text-align: center;
	margin: 5px;
	padding: 3px 8px 5px 8px;
	float: right;
	background: url('/images/grad.png') 0% 0% repeat-x;
	border: solid gray 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius:  5px;
	border-radius: 5px;		
	opacity:0.8;
	-moz-opacity: 0.8;	
}

.service_menu:hover {
	opacity:1.0;
	-moz-opacity: 1.0;	
}

.service_menu  a {
	color: #555555;
	font-weight: bold;
	font-size: 10pt;
	text-decoration: none;
	line-height: 2pt;
}

.service_menu  img {
	width: 16px;
	height: 16px;
	padding-right: 5px;
	margin-top: -2px;
	vertical-align: middle;
}

.service_menu div {
	position: absolute;
	display: block;
	margin-top: -1000px;
	background-image: linear-gradient(rgb(204,204,204) 0%, rgb(255,255,255) 50%, rgb(223,223,223) 100%);
	background-image: -o-linear-gradient(top, rgb(204,204,204) 0%, rgb(255,255,255) 50%, rgb(223,223,223) 100%);
	background-image: -moz-linear-gradient(top, rgb(204,204,204) 0%, rgb(255,255,255) 50%, rgb(223,223,223) 100%);
	background-image: -webkit-linear-gradient(top, rgb(204,204,204) 0%, rgb(255,255,255) 50%, rgb(223,223,223) 100%);
	background-image: -ms-linear-gradient(top, rgb(204,204,204) 0%, rgb(255,255,255) 50%, rgb(223,223,223) 100%);
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(204,204,204)),
		color-stop(0.5, rgb(255,255,255)),
		color-stop(1, rgb(223,223,223))
	);
}
	
.service_menu:hover > div {
	padding: 5px;
	margin: 6px 0 0 -8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-khtml-border-radius:  8px;
	border-radius: 8px;
	z-index: 100;
	box-shadow: 0 5px 2px 3px rgba(0,0,0,0.2);
}

.service_menu  div img {
	width: 32px;
	height: 32px;
	padding: 5px;
	float: left;
	border: none;
}

.webdesign {
	margin: 0;
	padding: 0;
}

.webdesign_menu {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	background: url('/images/grad.png') 0% 100% repeat-x;
	border-top: solid gray 1px;
	border-bottom: solid gray 1px;
}

.webdesign_menu:hover a{
	color: #333333;
	text-shadow: 0px -1px 2px #ffffff;
	transition: color 2s ease 0s;
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: ease;
    transition-delay: 0s;		
}

.webdesign_menu  a {
	color: #666666;
	text-shadow: 0px -1px 1px #ffffff;
	font-weight: bold;
	font-size: 14pt;
	text-decoration: none;
	display: inline-block;
	padding: 17px 0;
	width: 100%;
	line-height: 2pt;
}

.webdesign_menu_selected {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 10px 0;
	background: url('/images/gradd.png') 0% 100% repeat-x;
	color: #333333;
	text-shadow: 0px -1px 1px #ffffff;
	font-weight: bold;
	font-size: 14pt;
	line-height: 13pt;
	border-top: solid gray 1px;
	border-bottom: solid gray 1px;
}


.websitedesign {
	margin: 0;
	padding: 0;
}

.websitedesign_menu {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 10px 0;
	background: url('/images/grad.png') 0% 100% repeat-x;
	border: solid gray 1px;
	color: #666666;
	text-shadow: 0px -1px 1px #ffffff;
	font-weight: bold;
	font-size: 14pt;
	text-decoration: none;
	line-height: 2pt;
}

#languageselector {
	width: 100%;
	text-align: center;
	padding: 10px 0;
}

#languageselector  a {
	color: #dadada;
	font-weight: bold;
	text-decoration: none;
}

#languageselector  span {
	color: #999999;
	font-weight: bold;
	text-decoration: none;
}

#languageselector  img {
	vertical-align: middle;
	margin-top: -2px;
	padding: 0 5px 0 10px;
}

.portfolio {
	width: 220px;
	height: 150px;
	float: left;
	font-weight: bold;	
	text-align: center;
	padding: 10px;
	margin: 25px;
}

.portfolio img {
	border: solid 10px #dadada;
	padding: 0;	
}

.portfolio span {
	font-size: 10pt;	
	line-height: 12pt;
}

.portfolio1 {
	width: 220px;
	height: 150px;
	float: left;
	font-weight: bold;	
	text-align: center;
	padding: 10px;
	margin: 25px;
}

.portfolio1 img {
	border: none;
	padding: 0;	
}

.portfolio1 span {
	font-size: 10pt;	
	line-height: 12pt;
}

.portfolio2 {
	float: left;
	font-weight: bold;	
	text-align: center;
	padding: 10px;
	margin: 25px;
}

.portfolio2 img {
	border: none;
	padding: 0;	
}

#contacts {
	width: 100%;
	color: #dadada;
	clear: left;
	font-weight: bold;	
	text-align: center;
	padding: 10px 0;
}

#contacts p {
	color: #dadada;
	font-size: 10pt;
	padding: 0 10px;
}

#contacts a {
	color: #dadada;
	text-decoration: none;
}

.sapphire {
	width: 100%;
	color: #dadada;
	clear: left;
	font-weight: bold;	
	text-align: center;
	padding: 10px 0;	
}

.sapphire img {
	width: 240px;
	height: 494px;
	border: none;
}

.left {
	float: left;
	margin: 0 15px 15px 0;
	border: solid 10px #dadada;	
}

div.field { margin-bottom: 15px; padding: 0px; }
input[type=text] { color: #ffffff; background: #dadada; font-family: "Droid Sans", "Arial"; font-size: 1em; width: 300px; border: 5px; padding: 5px; box-sizing: border-box; }
textarea { color: #ffffff; background: #dadada; font-family: "Droid Sans", "Arial"; font-size: 1em; width: 300px; border: 5px; padding: 5px; box-sizing: border-box; }
input[type="submit"] { padding: 10px 20px; cursor: pointer; border: solid #336699 1px; background-color: #336699; color:#ffffff; display: block; }


@media all and (min-width: 0px) {
	#right, article {
		margin-bottom: 0 !important; 
		padding-bottom: 150px !important;
	}

	#right:before, article:before {
		content: '';
		display: block;
		background: inherit;
		padding-top: 1000em !important;
		margin-bottom: -1000em !important;
		height: 0;
	}
}

#main:after {
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

#right {
	width: 240px;
	background: #666666;
	margin-right: -100%;
}

article {
	width: 100%;
}

article div {
	padding: 20px 40px;
}

p {
	text-align: justify;
	font-size: 1em;
	color: #333333;	
}

p a {
	color: #333333;
}

a {
	color: #333333;
}

li {
	font-size: 10pt;
	color: #333333;	
	list-style-position: inside;
	padding: 5px;	
}

footer {
	height: 150px;
	background: gray url('/images/mirror.jpg') no-repeat;
	position: relative;
	margin-top: -150px;
	width: 100%;
}

footer div {
	padding: 10px;
}

footer div#copyright {
	font-size: 10pt;
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #cccccc;	
	background: #333333;
}

footer div#copyright a {			
	color: #cccccc;
}

footer div#copyright span {
	white-space: nowrap;
}

.stat {
	position: absolute;
	right: 20px;
	bottom: 10px;
	padding: 0;
}

.stat img {
	float: left;
	margin-left: 10px;
}

.error {
	width: 275px;
	border: solid red 1px;
	background-color: #ffcccc;
	padding: 10px;
	margin-bottom: 5px;
}

.errornotice {
	font-weight: bold;
	color: red;
	padding: 5px;
}

#spacer {
	display: none;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
body {
	min-width: 768px;
	width: 100%;
	margin: 0 auto;
}

.top {
	background: url('/images/head.jpg') no-repeat 50%;
}

footer {
	background: gray url('/images/mirror.jpg') no-repeat 50%;
}

.menu {
	width: 30px;
	background: none;
}

.menu span {
	display: none;
}

.menu:hover span{
	display: block;
	position: absolute;
	left: 400px;
	border-left: solid 5px gray;
	padding-left: 20px;
}

#slogan{
	display: block;
	position: absolute;
	left: 300px;
	top: 70px;
}

#spacer {
	display: block;
	width: 30px;
	height: 80px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
}

#ad {
	clear: left;
	padding: 0;
	height: 160px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;	
}

#ad p {
	padding: 0;
	margin: 0;
	text-align: center;
}

#ad img {
	display: inline-block;
	float: none;
	padding: 0;
	border: 0;
	margin: auto;
}

}

@media only screen and (min-width: 461px) and (max-width: 767px) {
body {
	min-width: 461px;
	width: 100%;
	margin: 0 auto;
}

#right, article {
	margin-bottom: 0 !important; 
	padding-bottom: 100px !important;
	clear: both !important; 
	position: relative;
	width: 100% !important;
}

article {
	padding-bottom: 0 !important;
}

#right {
	padding-top: 0 !important;
}

#main {
	padding-right: 0px;
}

.sapphire {
	display: none;
}

#hat {
	height: 150px;
}

.top {
	height: 100px;
	background: url('/images/head_1.jpg') no-repeat 50%;
}

.middle {
	top: 100px;
	height: 150px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;	
}

img#logo {
	width: 240px;
}

.column {
	padding-top: 250px !important;
}

.breadcrumbs {
	float: right;
	margin: 20px;
}

footer {
	height: 100px;
	background: gray url('/images/mirror_1.jpg') no-repeat 50%;
	margin-top: -100px;
}

.scroller {
	height: 100px !important;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;
	vertical-align: top;
}

.menu {
	float: none;
	display: inline-block;
	padding-top: 0;
	vertical-align: top;
}

.menu span {
	white-space: normal;
}

.menu img {
	margin-top: 10px;
}
	
#slogan{
	position: absolute;
	padding-left: 45px !important;
	left: 0;
	top: 75px;
	font-size: 10pt !important;
	font-weight: bold;
}

#spacer {
	display: block;
	width: 10px;
	height: 55px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
}

#copyright {
	margin-right: 130px;
}

h1 {
	font-size: 14pt !important;
}

.stat {
	width: 100px;
	bottom: 0;
}
.stat img {
	float: left;
	margin-left: 10px;
	margin-bottom: 4px;
}

iframe {
	width: 100% !important;
	margin-bottom: 20px;
}

#ad {
	padding: 0;
	height: 133px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;	
	background: url("/images/webdesign.png");
}

#ad p {
	padding: 0;
	margin: 0;
	text-align: center;
}

#ad img {
	display: inline-block;
	float: none;
	padding: 0;
	border: 0;
	width: 200px;
	height: 133px;
	margin: auto;
}

}

@media only screen and (min-width: 321px) and (max-width: 460px) {
body {
	min-width: 321px;
	width: 100%;
	margin: 0 auto;
}

#right, article {
	margin-bottom: 0 !important; 
	padding-bottom: 75px !important;
	clear: both !important; 
	position: relative;
	width: 100% !important;
}

article {
	padding-bottom: 0 !important;
}

article div {
	padding: 10px 20px !important;
}

#right {
	padding-top: 0 !important;
}

#main {
	padding-right: 0px;
}

.sapphire {
	display: none;
}

#hat {
	height: 150px;
}

.top {
	height: 75px;
	background: url('/images/head_2.jpg') no-repeat 50%;
}

.responsive {
	display: block;
	position: absolute;
	top: 35px;
	right: 20px;
}

.responsive img{
	border: none;
}

.middle {
	top: 75px;
	height: 150px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;	
}

img#logo {
	width: 240px;
}

.column {
	padding-top: 225px !important;
}

.breadcrumbs {
	float: right;
	margin: 20px;
	font-size: 8pt !important;
}

footer {
	height: 75px;
	background: gray url('/images/mirror_2.jpg') no-repeat 50%;
	margin-top: -75px;
}

.menu {
	display: none;
}

.menu span {
	display: none;
}

div.services {
	display: none;
}

#slogan{
	position: absolute;
	padding-left: 45px !important;
	left: 0;
	top: 75px;
	font-size: 10pt !important;
	font-weight: bold;
}

#spacer {
	display: block;
	width: 10px;
	height: 55px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
}

#copyright {
	margin-right: 130px;
	font-size: 9pt !important;
	bottom: 4px !important;
}

h1 {
	font-size: 12pt !important;
}

.stat {
	width: 100px;
	bottom: 0;
}
.stat img {
	float: left;
	margin-left: 10px;
	margin-bottom: 4px;
}

iframe {
	width: 100% !important;
	margin-bottom: 20px;
}

#ad {
	padding: 0 !important;
	height: 100px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;	
	background: url("/images/webdesign.png");	
}

#ad p {
	padding: 0;
	margin: 0;
	text-align: center;
}

#ad img {
	display: inline-block;
	float: none;
	padding: 0;
	border: 0;
	width: 150px;
	height: 100px;
	margin: auto;
}

}


@media only screen and (min-width: 241px) and (max-width: 320px) {
body {
	min-width: 241px;
	width: 100%;
	margin: 0 auto;
}

#right, article {
	margin-bottom: 0 !important; 
	padding-bottom: 50px !important;
	clear: both !important; 
	position: relative;
	width: 100% !important;
}

article {
	padding-bottom: 0 !important;
}

article div {
	padding: 5px 10px !important;
}

#right {
	padding-top: 0 !important;
}

#main {
	padding-right: 0px;
}

.sapphire {
	display: none;
}

#hat {
	height: 150px;
}

.logo {
	text-align: center;		
	width: 100%;
}

.top {
	height: 50px;
	background: url('/images/head_3.jpg') no-repeat 50%;
}

.responsive {
	display: block;
	z-index: 100;
	position: absolute;
	top: 65px;
	right: 20px;
}

.responsive img{
	border: none;
}

.middle {
	top: 50px;
	height: 150px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;	
}

img#logo {
	width: 240px;
	margin: 5px 0 !important;
}

.column {
	padding-top: 200px !important;
}

.breadcrumbs {
	float: right;
	margin: 20px;
	font-size: 7pt !important;
}

footer {
	height: 50px;
	background: gray url('/images/mirror_3.jpg') no-repeat 50%;
	margin-top: -50px;
}

.menu {
	display: none;
}

.menu span {
	display: none;
}

div.services {
	display: none;
}

#slogan{
	position: absolute;
	padding-left: 15px !important;
	padding-right: 50px !important;
	left: 0;
	top: 65px;
	font-size: 9pt !important;
	font-weight: bold;
}

#spacer {
	display: block;
	width: 10px;
	height: 10px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
}

#copyright {
	margin-right: 100px;
	padding: 4px !important;
	font-size: 7pt !important;
	bottom: 4px !important;
}

h1 {
	font-size: 10pt !important;
}

footer div {
	padding: 0 !important;
}

.stat {
	width: 50px;
	bottom: 0;
}
.stat img {
	float: left;
	width: 44px;
	margin-left: 0;
	margin-bottom: 8px;
}

.left {
	float: left;
	margin: 0 15px 15px 0;
	border: none !important;	
}

.portfolio, .portfolio1 , .portfolio2 {
	margin: 0 0 35px -10px !important;
}

.portfolio2  img, .portfolio2  embed {
	max-width: 300px;
}

iframe {
	width: 100% !important;
	margin-bottom: 20px;
}

#ad {
	padding: 0 !important;
	height: 80px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;	
	background: url("/images/webdesign.png");	
}

#ad p {
	padding: 0;
	margin: 0;
	text-align: center;
}

#ad img {
	display: inline-block;
	float: none;
	padding: 0;
	border: 0;
	width: 120px;
	height: 80px;
	margin: auto;
}

}

@media only screen and (max-width: 240px) {
body {
	min-width: 240px;
	width: 100%;
	margin: 0 auto;
}

#right, article {
	margin-bottom: 0 !important; 
	padding-bottom: 50px !important;
	clear: both !important; 
	position: relative;
	width: 100% !important;
}

article {
	padding-bottom: 0 !important;
}

article div {
	padding: 5px 10px !important;
}

#right {
	padding-top: 0 !important;
}

#main {
	padding-right: 0px;
}

.sapphire {
	display: none;
}

#hat {
	height: 150px;
}

.logo {
	text-align: center;		
	width: 100%;
}

.top {
	height: 50px;
	background: url('/images/head_3.jpg') no-repeat 50%;
}

.responsive {
	display: block;
	z-index: 100;
	position: absolute;
	top: 65px;
	right: 20px;
}

.responsive img{
	border: none;
}

.middle {
	top: 50px;
	height: 150px;
	background: #333333 url('/images/webdesign.png') 0% 0% repeat-x;	
}

img#logo {
	width: 240px;
	margin: 5px 0 !important;
}

.column {
	padding-top: 200px !important;
}

.breadcrumbs {
	float: right;
	margin: 20px;
	font-size: 7pt !important;
}

footer {
	height: 50px;
	background: gray url('/images/mirror_3.jpg') no-repeat 50%;
	margin-top: -50px;
}

.menu {
	display: none;
}

.menu span {
	display: none;
}

div.services {
	display: none;
}

#slogan{
	position: absolute;
	padding-left: 15px !important;
	padding-right: 50px !important;
	left: 0;
	top: 65px;
	font-size: 9pt !important;
	font-weight: bold;
}

#spacer {
	display: block;
	width: 10px;
	height: 10px;
	float: right;
	margin: 0 5px 0 10px;
	padding-top: 10px;
}

#copyright {
	margin-right: 100px;
	padding: 4px !important;
	font-size: 7pt !important;
	bottom: 4px !important;
}

h1 {
	font-size: 10pt !important;
}

footer div {
	padding: 0 !important;
}

.stat {
	width: 50px;
	bottom: 0;
}
.stat img {
	float: left;
	width: 44px;
	margin-left: 0;
	margin-bottom: 8px;
}

.left {
	float: left;
	margin: 0 15px 15px -10px;
	border: none !important;	
}

.portfolio, .portfolio1 , .portfolio2 {
	margin: 0 0 35px -10px !important;
}

.portfolio2  img, .portfolio2  embed {
	max-width: 220px;
}

iframe {
	width: 100% !important;
	margin-bottom: 20px;
}

#ad {
	padding: 0 !important;
	height: 80px;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	word-wrap: normal;	
	background: url("/images/webdesign.png");	
}

#ad p {
	padding: 0;
	margin: 0;
	text-align: center;
}

#ad img {
	display: inline-block;
	float: none;
	padding: 0;
	border: 0;
	width: 120px;
	height: 80px;
	margin: auto;
}

}