Eurosim – Mobile Roaming Provider

CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	}
body {
	line-height: 1;
	}
blockquote, q {
	quotes: none;
	}

/* remember to define focus styles! */
:focus {
	outline: 0;
	}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

html {
	height: 100%;
	background: #e6e6e6 url(../images/bg.jpg) no-repeat center top;
	}
	body {
		position: relative;
		width: 100%;
		min-height: 100%;
		height: auto!important;
		height: 100%;
		font: normal 12px/18px Arial, Helvetica, Sans-serif;
		}

		#header,
		#content,
		#footer .wrap {
			width: 1000px;
			margin: 0 auto;
			}

		a {color: #f8981d}

		button,
		.button,
		.button input,
		.field input,
		.field select,
		.field textarea,
		.field {
			font: normal 12px/18px Arial, Helvetica, Sans-serif;
			}
		button,
		.button,
		.button input {
			cursor: pointer;
			}

		.clear-bottom {clear: both; height: 105px;}
/* Header
--------------------------------------------------------------------------------------- */
#header {
	position: relative;
	overflow: hidden;
	padding-bottom: 14px;
	}
	#header ul {
		list-style: none;
		}
	#header .logo {
		float: left;
		width: 223px;
		height: 80px;
		text-indent: -9999em;
		background: url(../images/logo.png) no-repeat left top;
		}

	#header .nav {
		float: left;
		margin-left: 22px;
		padding-top: 52px;
		width: 574px;
		height: 28px;
		font-size: 15px;
		background: url(../images/top-nav-bg.png) no-repeat left top;
		text-align: center;
		}
		#header .nav li {
			display: inline;
			list-style: none;
			}
			#header .nav li a {
				padding: 2px 10px 8px 8px;
				text-decoration: none;
				background: url(../images/top-nav-spacer.png) repeat-y right top;
				color: #000;
				}
			#header .nav li a:hover {
				text-decoration: underline;
				}
			#header .nav li.active a {
				font-weight: bold;
				}
			#header .nav li.last a {
				background: none;
				}

	#header .button {
		position: relative;
		float: left;
		margin-right: 5px;
		width: auto;
		height: 31px;
		line-height: 31px;
		background: url(../images/header-button.png) no-repeat left top;
		}
		#header .button span {
			position: absolute;
			top: 0;
			right: -5px;
			width: 5px;
			height: 31px;
			background: url(../images/header-button.png) no-repeat right -31px;
			}
		#header .button a {
			padding: 5px 9px 5px 38px;
			font-size: 14px;
			text-decoration: none;
			color: #fff;
			}
		#header .button a:hover {
			text-decoration: underline;
			}
		#header .button.personal-account {
			position: absolute;
			top: 49px;
			right: 0;
			}

		#header .button.personal-account a {background: url(../images/ico/lock.png) no-repeat 9px center}
		#header .button.balance-increase a {background: url(../images/ico/dollar.png) no-repeat 9px center}
		#header .button.send-sms a {background: url(../images/ico/envelope.png) no-repeat 7px center}

	#header .h-bottom .button {
		clear: both;
		}
		#header .h-bottom .button a {
			text-transform: uppercase;
			}

	#header .h-bottom .button.send-sms {background-position: left -62px}
		#header .h-bottom .button.send-sms span {background-position: right -93px}

	#header .h-bottom {
		clear: both;
		position: relative;
		padding-top: 12px;
		font-size: 14px;
		}
		#header .sub-nav {
			position: absolute;
			top: 31px;
			left: 267px;
			text-transform: uppercase;
			}
			#header .sub-nav li {
				display: inline;
				list-style: none;
				}
				#header .sub-nav li a {
					float: left;
					margin-right: 20px;
					padding-bottom: 3px;
					text-decoration: none;
					background: url(../images/dashed-line-orange.png) repeat-x left bottom;
					color: #000;
					}
				#header .sub-nav li a:hover {
					font-weight: bold;
					}
				#header .sub-nav li.active a {
					font-weight: bold;
					}

/* Middle
--------------------------------------------------------------------------------------- */
	#content .bottom-info {
		clear: both;
		padding-bottom: 20px;
		}
		#content .bottom-info .title {
			position: relative;
			float: left;
			margin-left: -7px;
			margin-bottom: 2px;
			height: 24px;
			line-height: 24px;
			font-size: 14px;
			text-indent: 7px;
			text-transform: uppercase;
			background: url(../images/bottom-info-title.png) no-repeat left top;
			color: #fff;
			}
			#content .bottom-info .title span {
				position: absolute;
				top: 0;
				right: -7px;
				width: 7px;
				height: 24px;
				background: url(../images/bottom-info-title.png) no-repeat right bottom;
				}
		#content .bottom-info p {
			clear: both;
			font-size: 14px;
			line-height: 20px;
			padding: 10px 0;
			}

	#sidebar {
		float: left;
		width: 301px;
		padding-bottom: 30px;
		}
		#sidebar .banner {
			margin-bottom: 22px;
			}
		#sidebar .info {
			margin-left: -32px;
			padding: 10px 10px 0 43px;
			width: 280px;
			height: 311px;
			background: url(../images/sidebar-info.png) no-repeat left top;
			color: #fff;
			}
			#sidebar .info .title {
				line-height: 33px;
				font-size: 29px;
				font-weight: normal;
				white-space: nowrap;
				}
				#sidebar .info .title span {
					color: #000;
					}
			#sidebar .info p {
				padding: 12px 0 0 10px;
				}

			#sidebar .info .special {
				margin: 23px 0 0 133px;
				font-size: 16px;
				font-weight: bold;
				line-height: 25px;
				list-style: none;
				}
				#sidebar .info .special li {
					padding-left: 14px;
					background: url(../images/list-bullets/bullet1.png) no-repeat left 8px;
					}
			#sidebar .info .button {
				margin: 27px 0 0 93px;
				width: 189px;
				height: 41px;
				line-height: 38px;
				background: url(../images/sidebar-button.png) no-repeat left top;
				}
				#sidebar .info .button a {
					display: block;
					width: 100%;
					font-size: 24px;
					font-weight: bold;
					text-indent: 69px;
					text-transform: uppercase;
					text-decoration: none;
					background: url(../images/ico/cart-b.png) no-repeat 10px center;
					color: #fff;
					}

		#sidebar .news .header {
			padding-bottom: 11px;
			font-size: 14px;
			text-transform: uppercase;
			}
		#sidebar .news .post {
			background: #f2f2f2;
			margin-bottom: 2px;
			padding: 3px 10px;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-ms-border-radius: 2px;
			border-radius: 2px;
			}
			#sidebar .news .post .date {
				font-weight: bold;
				text-decoration: none;
				}
			#sidebar .news .post .date:hover {
				text-decoration: underline;
				}
		#sidebar .news .all {
			text-align: right;
			padding-top: 10px;
			}
			#sidebar .news .all a {
				font-weight: bold;
				text-decoration: none;
				color: #000;
				}
			#sidebar .news .all a:hover {
				text-decoration: underline;
				}

	#article {
		float: right;
		padding: 16px 0 10px;
		margin-bottom: 30px;
		width: 672px;
		background: #f2f2f2;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		border-radius: 10px;
		}
		#article .header {
			padding: 0 0 3px 20px;
			font-size: 14px;
			font-weight: bold;
			}
		#article .header-info {
			padding: 0 20px 18px 20px;
			line-height: 20px;
			font-size: 14px;
			font-weight: normal;
			}
		#article p.header-info {
			padding: 8px 20px 10px 26px;
			}
		#article p.list-top {
			padding: 0 10px 3px 20px;
			}
			#article p.list-top span {
				font-weight: bold;
				color: #e06b0a;
				}

		#article .image-container {
			margin-top: -40px;
			margin-bottom: -15px;
			padding-left: 20px;
			}

		#article .list2,
		#article .list {
			list-style: none;
			line-height: 22px;
			padding: 0 30px 18px 35px;
			}
			#article .list li {
				text-indent: -29px;
				padding-left: 55px;
				background: url(../images/list-bullets/bullet-stripe.png) no-repeat left 11px;
				}
		#article .list2 {
			padding-left: 20px;
			line-height: 20px;
			}

	#content.main #sidebar {
		padding-bottom: 20px;
		}
	#content.main #article {
		padding-top: 0;
		background: none;
		margin-bottom: 0;
		}
		#content.main #article .block {
			margin-top: -49px;
			padding-top: 69px;
			width: 654px;
			height: 253px;
			background: url(../images/block-bg.png) no-repeat left top;
			}
		#content.main #article .block .top {
			overflow: hidden;
			margin-left: 82px;
			line-height: 24px;
			font-size: 14px;
			}
			#content.main #article .block .top .title {
				float: left;
				text-transform: uppercase;
				}
			#content.main #article .block .top label {
				float: left;
				padding: 0 11px;
				}
			#content.main #article .block .top .select {
				position: relative;
				float: left;
				width: 166px;
				height: 24px;
				background: url(../images/form/select-special.png) no-repeat left top;
				}
				#content.main #article .block .top .select select {
					width: 100%;
					height: 100%;
					opacity: 0;
					}
				#content.main #article .block .top .select .s-label {
					position: absolute;
					top: 0;
					left: 8px;
					display: block;
					width: 156px;
					white-space: nowrap;
					color: #f18716;
					}

	#article .block table {
		margin: 18px 0 10px 26px;
		font-size: 14px;
		text-align: center;
		}
		#article .block table col.c1 {width: 88px}
		#article .block table col.c2 {width: 118px}

		#article .block table tbody th div {
			padding-top: 10px;
			margin-left: 10px;
			height: 25px;
			}
		#article .block table div.incoming {background: url(../images/ico/calls-incoming.png) no-repeat center center;}
		#article .block table div.outgoing {background: url(../images/ico/calls-outgoing.png) no-repeat center center;}
		#article .block table div.sms {background: url(../images/ico/sms.png) no-repeat center center;}

		#article .block table td {
			vertical-align: middle;
			padding: 9px 0;
			line-height: 16px;
			}
		#article .block table thead td {
			padding-top: 5px;
			padding-bottom: 4px;
			}
		#article .block table tr.top td {
			padding-top: 20px;
			}
		#article .block table tbody tr.top th div{
			padding-top: 20px;
			}
		#article .block table tr.top td.special strong {
			padding-top: 20px;
			}

		#article .block table thead td.special,
		#article .block table tbody td.special {
			padding: 0;
			}
			#article .block table thead td.special strong {
				float: left;
				width: 80px;
				height: 24px;
				line-height: 24px;
				background: url(../images/table-special-h.png) no-repeat left top;
				}
			#article .block table tbody td.special span,
			#article .block table tbody td.special strong {
				float: left;
				padding: 9px 0;
				width: 80px;
				background: #eee;
				}

	#promo,
	#article .slider {
		overflow: hidden;
		position: relative;
		margin-left: -1px;
		width: 672px;
		height: 297px;
		}
		#article .slider li {
			list-style: none;
			white-space: nowrap;
			}
			#article .slider li img {
				width: 672px;
				height: 297px;
				}
	#nav {
		z-index: 10;
		position: absolute;
		bottom: 10px;
		right: 114px;
		overflow: hidden;
		height: 12px;
		}
		#nav a {
			float: left;
			padding: 0 2px;
			height: 12px;
			width: 12px;
			list-style: none;
			text-indent: -9999em;
			background: url(../images/ico/slider-option.png) no-repeat left top;
			cursor: pointer;
			}
		#nav a.activeSlide {
			background-position: left bottom;
			}

		#article .map {
			padding-bottom: 5px;
			padding-left: 20px;
			}
			#article .map a {
				text-decoration: none;
				}
				#article .map a img {
					display: block;
					}

		#article .contacts {
			overflow: hidden;
			padding: 5px 0 5px 20px;
			}
			#article .contacts,
			#article .contacts ul {
				list-style: none;
				}
			#article .contacts .column {
				float: left;
				margin-right: 16px;
				padding-right: 16px;
				width: 195px;
				line-height: 20px;
				font-size: 13px;
				border-right: 1px solid #b5b3b0;
				}
				#article .contacts .column .title {
					font-weight: bold;
					padding-bottom: 15px;
					}
			#article .contacts .column.last {
				margin-right: 0;
				padding-right: 0;
				border-right: none;
				}

		#article .c-block {
			overflow: hidden;
			width: 600px;
			padding: 12px 31px 12px 41px;
			}
		#article .c-block.odd {
			background: #f9f9f9;
			}
			#article .c-block .l {
				float: left;
				padding-right: 10px;
				width: 280px;
				border-right: 1px solid #e3e3e3;
				}
			#article .c-block .r {
				float: left;
				padding-left: 29px;
				width: 280px;
				margin-left: -1px;
				border-left: 1px solid #e3e3e3;
				}
				#article .c-block .title {
					padding-bottom: 2px;
					font-weight: bold;
					color: #e06b0a;
					}
				#article .c-block p {
					line-height: 22px;
					}

		#article .faq {
			margin: 0 56px 0 20px;
			padding: 9px 0;
			border-bottom: 1px solid #b5b3b0;
			}
			#article .faq dt {
				margin-right: 4px;
				line-height: 40px;
				font-weight: bold;
				background: url(../images/ico/arrow-down-b.png) no-repeat right center;
				color: #e06b0a;
				cursor: pointer;
				}
			#article .faq dd {
				padding-left: 26px;
				padding-right: 77px;
				line-height: 14px;
				}
				#article .faq dd p {
					padding: 0 0 16px 0;
					}
				#article .faq dd ol,
				#article .faq dd ul {
					padding: 0 0 16px 0;
					padding-left: 23px;
					}
		#article .faq.open {
			padding: 0;
			}
			#article .faq.open dt {
				background: url(../images/ico/arrow-up-b.png) no-repeat right center;
				}

	#article .b-bottom {
		margin-top: 20px;
		margin-left: -14px;
		}
		#article .b-bottom ul {
			list-style: none;
			}
		#article .b-bottom .title {
			padding-bottom: 5px;
			font-size: 14px;
			font-style: italic;
			font-weight: bold;
			color: #fff;
			}

		#article .b-bottom .block {
			position: relative;
			padding-top: 17px;
			line-height: 20px;
			padding-left: 34px;
			color: #fff;
			}
			#article .b-bottom .block a {
				color: #fff;
				}
			#article .b-bottom .block .title {
				padding-bottom: 9px;
				margin-left: -10px;
				}
			#article .b-bottom .block p.list-top {
				padding-left: 0;
				padding-bottom: 9px;
				}
		#article .b-bottom .block.info {
			height: 83px;
			background: url(../images/bottom-block-bg1.png) no-repeat left top;
			}
		#article .b-bottom .block.info2 {
			padding-top: 10px;
			height: 135px;
			background: url(../images/bottom-block-bg2.png) no-repeat left top;
			}

		#article .c-form {
			overflow: hidden;
			padding-right: 56px;
			}
			#article .c-form form {
				float: left;
				margin-right: 18px;
				padding: 12px 0 0 25px;
				width: 427px;
				height: 275px;
				background: url(../images/bottom-block-bg.png) no-repeat left top;
				}
				#overlay form fieldset,
				#article .c-form form fieldset {
					position: relative;
					padding: 2px 0 3px 9px;
					width: 342px;
					}
					#overlay form label,
					#article .c-form form label {
						line-height: 29px;
						vertical-align: top;
						font-weight: bold;
						}

					#overlay form .field,
					#article .c-form form .field {
						position: relative;
						float: right;
						width: 266px;
						height: 29px;
						line-height: 29px;
						background: url(../images/form/field-text.png) no-repeat left top;
						vertical-align: top;
						}

						#overlay form .field input,
						#article .c-form form .field input,
						#overlay form .field textarea,
						#article .c-form form .field textarea {
							position: absolute;
							top: 0;
							left: 14px;
							display: block;
							width: 100%;
							margin: 0;
							padding: 7px 0;
							line-height: 16px;
							background: transparent url(../images/form/field-text.png) no-repeat right -29px;
							border: none;
							}
					#overlay form .field.textarea,
					#article .c-form form .field.textarea {
						height: 89px;
						background-image: url(../images/form/field-textarea.png);
						}
						#overlay form .field textarea,
						#article .c-form form .field textarea {
							height: 74px;
							background-image: url(../images/form/field-textarea.png);
							background-position: right -89px;
							}
					#overlay form .actions,
					#article .c-form form .actions {
						clear: both;
						width: 358px;
						padding-top: 6px;
						}
						#overlay form .actions input.button,
						#article .c-form form .actions input.button {
							float: right;
							padding: 0 0 4px 0;
							width: 113px;
							height: 29px;
							line-height: 27px;
							font-size: 14px;
							background: url(../images/form/button.png) no-repeat left top;
							border: none;
							color: #fff;
							}
					#article .c-form form .select {
						position: relative;
						float: right;
						margin-right: -14px;
						width: 280px;
						height: 29px;
						background: url(../images/form/select.png) no-repeat left top;
						}
						#article .c-form form .select .s-label {
							position: absolute;
							top: 0;
							left: 0;
							width: 256px;
							font-weight: bold;
							text-indent: 14px;
							white-space: nowrap;
							color: #ec9015;
							}
						#article .c-form form .select select {
							width: 100%;
							height: 29px;
							line-height: 29px;
							vertical-align: top;
							opacity: 0;
							}

					#article .c-form form .checkbox {
						margin-left: 121px;
						width: 17px;
						height: 17px;
						background: url(../images/form/checkbox.png) no-repeat left top;
						cursor: pointer;
						}
					#article .c-form form .checkbox.c-checked {
						background-position: left -17px;
						}
						#article .c-form form .checkbox input {
							visibility: hidden;
							}

					#article .c-form.balance-increase form .payment {
						height: 34px;
						line-height: 34px;
						width: 216px;
						}
						#article .c-form form .payment .payment-field {
							float: right;
							padding: 6px 0 0 11px;
							width: 103px;
							height: 28px;
							background: url(../images/form/payment-bg.png) no-repeat left top;
							}
							#article .c-form form .payment .payment-field img {
								float: left;
								margin-right: 4px;
								}

			#article .c-form .hint {
				padding: 3px 0 11px;
				font-size: 11px;
				line-height: 13px;
				}

	#article .balance-increase form {
		height: 380px;
		background: url(../images/bottom-block-bg3.png) no-repeat left top;
		}
		#article .c-form.balance-increase form fieldset {
			width: 368px;
			}
			#article .c-form.balance-increase form fieldset a {
				color: #fff;
				}
		#article .c-form.balance-increase form fieldset.actions {
			width: 381px;
			}

	#overlay form {
		overflow: hidden;
		padding: 20px 0 0 30px;
		}
		#overlay form .title {
			padding-bottom: 16px;
			font-size: 14px;
			text-transform: uppercase;
			}
		#overlay form fieldset {
			width: 400px;
			}
		#overlay form fieldset.captcha {
			float: left;
			width: 249px;
			padding-top: 39px;
			}
			#overlay form fieldset.captcha .text {
				float: left;
				width: 114px;
				line-height: 19px;
				text-align: right;
				}
			#overlay form fieldset.captcha .code {
				float: right;
				position: relative;
				margin-top: 16px;
				margin-right: -8px;
				}
			#overlay form fieldset.captcha .field {
				width: 116px;
				}

			#overlay form .field {background-image: url(../images/form/field-text2.png);}
				#overlay form .field input {background-image: url(../images/form/field-text2.png);}
			#overlay form .field.textarea {background-image: url(../images/form/field-textarea2.png);}
				#overlay form .field textarea {background-image: url(../images/form/field-textarea2.png);}

		#overlay form fieldset.actions {
			clear: none;
			float: left;
			margin-top: 99px;
			width: 157px;
			}

#overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/overlay-bg.png) repeat left top;
	}
	#overlay .ov {
		position: fixed;
		top: 0;
		left: 50%;
		margin: 150px auto 0;
		}
		#overlay .ov .close {
			z-index: 10;
			position: absolute;
			top: -13px;
			right: -13px;
			display: block;
			width: 28px;
			height: 28px;
			text-indent: -9999em;
			background: url(../images/ico/close.png) no-repeat left top;
			}
		#overlay .ov .close-bottom {
			position: absolute;
			bottom: 7px;
			right: 7px;
			font-size: 11px;
			text-decoration: none;
			}
	#overlay #o-map {
		margin-left: -460px;
		width: 921px;
		}
	#overlay #o-sms {
		margin-left: -255px;
		width: 511px;
		height: 365px;
		background: url(../images/form/form-bg.png) no-repeat left top;
		}
		#overlay #o-sms .close-bottom {
			bottom: 3px;
			}
/* Footer
--------------------------------------------------------------------------------------- */
#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	clear: both;
	padding: 33px 0 33px 0;
	width: 100%;
	height: 39px;
	font-size: 11px;
	font-family: Tahoma, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
	background: #f5f5f5;
	color: #666666;
	}
	#footer .wrap {
		overflow: hidden;
		font-style: normal;
		}
		#footer span {
			float: left;
			}
			#footer span a,
			#footer span span {
				float: none;
				display: block;
				}

		#footer .logo {
			margin-left: 25px;
			}
			#footer .logo a {
				width: 65px;
				height: 27px;
				text-indent: -9999em;
				background: url(../images/logo-smarttelecom.png) no-repeat left top;
				}

		#footer .phone {
			margin-left: 95px;
			}
			#footer .phone .code {
				clear: both;
				display: inline;
				float: left;
				line-height: 16px;
				font-size: 12px;
				vertical-align: top;
				color: #231F20;
				}
			#footer .phone .number {
				float: left;
				line-height: 20px;
				font-size: 18px;
				color: #231F20;
				}

		#footer .e-mail {
			margin-left: 51px;
			}
			#footer .e-mail a {
				padding-top: 2px;
				font-size: 18px;
				line-height: 19px;
				text-decoration: none;
				}
			#footer .e-mail a:hover {
				text-decoration: underline;
				}

		#footer .map {
			margin-left: 56px;
			}
			#footer .map a {
				font-size: 12px;
				text-decoration: none;
				border-bottom: 1px dashed #f8981d;
				}
			#footer .map a:hover {
				border-bottom: 0 none;
				}

		#footer .social {
			margin-left: 147px;
			}
			#footer .social a {
				float: left;
				margin-right: 9px;
				width: 38px;
				height: 39px;
				text-indent: -9999em;
				}
			#footer .social .facebook {
				background: url(../images/ico/footer-facebook.png) no-repeat left top;
				}
			#footer .social .twitter {
				background: url(../images/ico/footer-twitter.png) no-repeat left top;
				}