/* ******************************************************************** */ 
/*                       CSS for hosting-pack.com                       */
/* ******************************************************************** */
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background: #e1e1e1 url(../img/bg.jpg) repeat-x 0 0;} 
html { 
	font: normal 12px Arial, Verdana, Tahoma, sans-serif;
 	color: #000; }
 
 
/* --------- Links --------- */
a, a:link, a:visited {
	text-decoration: none;
	color: #0033cc;}
	
a:hover, a:active, a:focus {
	text-decoration: none;	
	color: #3366ff;
	outline:none;}
 
/* --------- Typography --------- */
h1 {
	font: normal 11px Arial,Verdana, Tahoma;
	color: #000;	
	margin:0; padding:4px 0 0 3px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);}	
h2 {
	font: normal 11px Arial,Verdana, Tahoma;
	color: #666;	
	margin:0; padding:0;
	text-transform: uppercase;
	letter-spacing: 1px;}	
h3 {
	font: bold 12px Verdana, Tahoma, Georgia;
	color: #0033cc;
	margin: 0;}	
h4 {
	font: bold 14px Verdana, Tahoma,Georgia;
	color: #000;
	font-variant: small-caps; 
	margin:0;
	padding-top: 15px;}
	
	
/* --------- Layout Structure --------- */
#pagewidth{ 
 	width:1002px; 
 	text-align:left; 
 	margin:0 auto; } 
#pagewidth p, #footer p {
	margin:0;
	padding:6px 0;
	line-height: 1.4;}	
#wrapper {
 	background-color: #f2f2f2; 
 	border: 1px solid #333; 
 	width:1000px; 
 	text-align:left; 
 	margin:0 auto;}
	
 
/* --------- Header --------- */
#header{
 	position:relative; 
 	height:110px; 
 	background-color:transparent; 
 	width:100%;
 	display:block;} 
#header a, #header a:visited {color:#000;text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);}
#header a:hover, #header a:active {color:#0033cc;}
	
#logo {
	float: left;
	position: relative;
	width: 700px;
	height:110px; }
#logo .logo {
	padding: 30px 0 0 20px;
	width: 220px;
	position: relative;
	height:110px; }
#logo .topnav {
	width: 450px;
	display: inline;
	position: relative;
	height:110px; }
.links {
	color:#999;
	/*text-align: right;*/}
.links a {
	margin: 0 7px;
	font: normal 11px Verdana;
	border-bottom:1px dotted #666;}
.links a:hover {
	border-bottom:1px dotted #0033cc;}
	
/* Grey buttons */
#logo div.greybuttons {
	width: 260px;
	float: right;
	height: 30px;
	position: relative;
	top: 51px;
	right:-3px;}
#logo div.greybuttons a, #logo div.greybuttons a:visited {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;}
#logo div.greybuttons a.cpanel {
	background: url(../img/grey-btn-long.gif) no-repeat 0 0;
	width:154px;
	float: left;
	height: 30px;
	line-height: 34px;
	text-indent: 11px;}
#logo div.greybuttons a.webmail {
	background: url(../img/grey-btn-short.gif) no-repeat 0 0;
	width:104px;
	float: right;
	height: 30px;
	line-height: 34px;
	text-indent: 15px;}
	
/* Rukovodstvo */
#rukovodstvo {
	float: right;
	position: relative;
	right:30px;
	top: 0;	
	width: 240px;
	height: 152px;
	/*background: #fff url(../img/www.jpg) no-repeat 0 0;*/
	background: #fff url(../img/web-design-studio.jpg) no-repeat 0 0;
	padding-bottom: 20px;
	-moz-border-radius-bottomright: 0.5em; 
	-moz-border-radius-bottomleft: 0.5em;}
#rukovodstvo a.manual {
	font-weight: normal;	
	position: absolute;
	z-index: 100;	
	top: 125px;
	left:18px;}
#rukovodstvo p a, #rukovodstvo p a:link {
	margin: 0;
	line-height: 1.6;}
#rukovodstvo a:link, #rukovodstvo a:visited {
	font:normal 11px Verdana;
	color:#0033cc;}
#rukovodstvo a:hover {color:#3366ff;}
 
 
/* --------- Maincol --------- */
#maincol{ 
 position: relative;
 width:1000px; 
 z-index: 90;}
.content {
	padding: 20px 30px 10px 30px;	
	margin: 0 auto;
	/* total width 940px*/}
	
/* ------------- Hosting Price Table ------------- */
table,tr,td,th {
	margin: 0;
	padding: 0;
	text-align: center;}
table.hosting {
	width:900px; 
	margin: 0 auto;
	margin-bottom: 10px;}
th.none {
	width: 180px;
	border-right: 1px solid #f1f1f1;}
td.noborder{
	width: 120px;
	text-align: left;
	text-indent: 15px;}
	
table.hosting-content {
	border: 1px solid #dadada;
	background: #fff;}
table.hosting-content td {
	padding: 4px 0;
	text-align: center;
	border-bottom: 1px dotted #fff;}
table.hosting-content th {
	width: 180px;	
	text-align: left;
	text-indent: 10px;
	font: normal 13px Verdana,Arial;
	font-variant: small-caps;
	/*border-right: 1px solid #dadada;*/
	border-bottom: 1px dotted #dadada;}
	
	
td.param1,
td.param2 {
	width: 120px;
	text-align: center;}
td.noborder {background:transparent;border-right:1px solid #f1f1f1;}
td.param1 {background: #dadada;border-right:1px solid #fff;}
td.param2 {background: #ededed;border-right:1px solid #fff;}
	
	/* ---- */
td.noborder div.order-btn {
	background: url(../img/order-btn.gif);
	width: 88px;
	height: 30px;
	margin:0 auto;
	margin-top: 10px;}
td.noborder div.order-btn a, td.noborder div.order-btn a:link {
	font-size: 10px;
	text-transform: uppercase;}
td.noborder div.order-btn a, td.noborder div.order-btn a:link {
	line-height: 34px;}
	
	/* ---- */
td.param1 div.blue-btn,
td.param2 div.blue-btn {	
	width: 86px;
	height: 43px;
	margin: 0 auto;
	margin-top:-4px;
	margin-bottom: 10px;
	padding: 0;}

td.param1 div.blue-btn {background: url(../img/blue-btn-dark.gif);}
td.param2 div.blue-btn {background: url(../img/blue-btn-light.gif);}

td.param1 div.blue-btn a, td.param1 div.blue-btn a:link,
td.param2 div.blue-btn a, td.param2 div.blue-btn a:link {
	color: #fff;
	font:bold 11px Verdana;}
td.param1 div.blue-btn a, td.param1 div.blue-btn a:link,
td.param2 div.blue-btn a, td.param2 div.blue-btn a:link {
	line-height: 43px;}

	/* ----- */
td.param1 div.price-btn,
td.param2 div.price-btn {	
	width: 88px;
	height: 44px;
	margin: 0 auto;
	margin-top:10px;
	margin-bottom:-5px;
	padding: 0;}
td.param1 div.price-btn {background: url(../img/price-btn-dark.gif);}
td.param2 div.price-btn {background: url(../img/price-btn-light.gif);}
td.param1 div.price-btn a, td.param1 div.price-btn a:link,
td.param2 div.price-btn a, td.param2 div.price-btn a:link {
	line-height: 44px;}

	/* ----- */
td.noborder div.price-btn-month {	
	width: 88px;
	height: 44px;
	margin: 0 auto;
	margin-top:0px;
	margin-bottom:20px;
	padding: 0;
	text-align: center;
	text-indent: 0;}
td.noborder div.price-btn-month {background: url(../img/price-btn-over.gif);}
td.noborder div.price-btn-month a, td.noborder div.price-btn-month a:link {
	line-height: 44px;}
	
/* ---- */
span.invisible {
	visibility: hidden;
	display: none;}
span.price-godina {
	font:normal 20px Arial;
	color:#00359f;}
span.price-month {
	font:normal 20px Arial;
	color:#3366ff;}
small {
	font-size: 8px;
	color:#333;}
	

/* ---- Other maincol classes ---- */	
.domain {
	background: #dadada;
	width: 580px;
	padding: 20px 30px;
	margin-left: 20px;}
#maincol  p.domainsearch {
	padding: 15px 0;}

#maincol table.checkboxes p {
	margin: 0;
	padding:2px 0;}
table.checkboxes,
table.checkboxes td {
	margin: 0;
	padding: 0;
	text-align: left;}
input {
	background: #fff;
	border: 1px solid #4b4b4b;}
input[type="text"] {
	font: normal 11px Verdana, Arial,Tahoma;
	color: #4b4b4b;}	
input.searchbox  {
	background: #fff url(../img/blue-btn-search.jpg) no-repeat 464px 1px;
	padding: 1px 0 1px 7px;
	height: 27px;
	line-height: 27px;	
	width:560px;}	
input.searchbtn {
	background:none;
	border: none;
	width: 102px;
	height: 27px;
	text-transform: uppercase;
	font: normal 11px Arial,Verdana, Tahoma;
	color: #fff;	
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: left;
	cursor: pointer;
	margin-left:-95px;	}	
input[type="checkbox"] {
	width:auto;
	height:auto;}
	
/* -- contacts --- */
.contacts {
	background: transparent url(../img/phone.jpg) no-repeat center top;
	width: 200px;
	text-align: center;
	margin-right:40px;}
.contacts img {
	margin-top: 110px;}





/* ---- Main menu ---- */
#maincol #nav {
	margin: 0;
	padding: 0;
	padding-bottom: 1px;
	margin-bottom: 20px;
	float: left;
	width:701px;
	height: 58px;
	background: url(../img/menu.jpg) repeat-x 0 0;
	border-bottom:1px solid #e1e1e1; }
#maincol ul#menu {
	z-index: 90;
	margin: 0;
	padding: 0;	
	list-style: none;
	list-style-image:none;
	height:58px;}
#maincol ul#menu li {
	float: left;
	margin:0;
	height: 58px;
	background: url(../img/vline.jpg) repeat-y 100% 0;}
#maincol ul#menu li.webdesign {
	background: url(../img/kalinka.png) no-repeat 95% 20%;
	border-right:1px solid #fff;}
#maincol ul#menu li.webdesign a {
	color: #aa0000;}
#maincol ul#menu a {
	float: left;
	height: 58px;
	line-height:1.4;
	padding:15px 46px 0 20px;}

#maincol ul#menu li:hover {
	border-top:2px solid #3366ff;
	margin-top: -2px;	}
#maincol ul#menu li:hover a {
	color: #3366ff;}
	
#maincol ul#menu li.current {
	border-top:6px solid #fff;
	margin-top: -5px;	}
#maincol ul#menu li.current a {
	color: #0033cc;
	height: 43px;}
	
ul#menu a, ul#menu a:visited {
	font: bold 11px Verdana;
	color: #000;}
ul#menu a:hover, ul#menu a:active {
	color: #0033cc;}
	
	
/* --------- Footer --------- */
#footer {
	clear: both;
	position: relative;
	display: block;
	height: auto;
	padding: 10px 0 20px 0;}
#footer p {
	font: normal 10px Verdana, Arial;
	color: #999;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
	margin-left:50px;}
#footer a {
	margin: 0 4px;
	color: #333;}
#footer a:hover {
	color: #0033cc;}
	
 
/* --------- List Style --------- */
ul, ol {
	margin: 0;
	margin-left:20px;
	padding: 0;
	list-style: outside none;
	list-style-image: url(../img/bullet.gif);}
ol {
	list-style: decimal;}
li {
	padding-left:2px;
	line-height: 1.6;}
 
/* --------- Common Styles --------- */
.left {float: left;}
.right {float: right;}
.text13 {
	font-size: 13px;
}

 
/* ******************************************************************** */ 
/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
/* ******************************************************************** */
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden; }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */