/* Reset part */
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

/* Font families */
h1,h2,h3,h4,a,p,b,input,textarea,li,td,th,i,time {font-family: "Helvetica", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; color:#343432;}

b 								{font-weight:bold;}
a 								{text-decoration:none; color:#2a7ace;}
a:hover 					{text-decoration:underline;}
i 								{font-style:italic;}

/* Font sizes */
body 							{font-size:100%;		 line-height:normal; background-color:#f1f1f1;}
h1 								{font-size:2.0rem;	 line-height:normal;}
h2 								{font-size:1.8rem; 	 line-height:normal;}
h3 								{font-size:1.3rem;	 line-height:normal;}
h4 								{font-size:1.125rem; line-height:normal;}
td 								{font-size:1.125rem; line-height:normal;}

h1 a 							{text-decoration:none; color:#2a7ace;}
h1 a:hover				{text-decoration:underline;}
h2 a 							{text-decoration:none; color:#2a7ace;}
h2 a:hover 				{text-decoration:underline;}
h3 a 							{text-decoration:none; color:#2a7ace;}
h3 a:hover 				{text-decoration:underline;}
h4 a 							{text-decoration:none; color:#2a7ace;}
h4 a:hover				{text-decoration:underline;}

a,p,i,input,textarea,td,th,time {font-size:1.125rem; line-height:normal;}

/* Main container */
#main 						{padding:0 5% 0 5%;}
#header 					{width:100%;}
#content 					{width:100%; border:#ecebeb 2px solid; background-color:#ffffff;}
#footer 					{width:100%; min-height:60px; padding:20px 0 20px 0; border-left:#ecebeb 2px solid; border-right:#ecebeb 2px solid; background:#303030; text-align:center;}
#footer a 				{color:#fefefe; font-size:0.9em;}
#footer a:hover 	{color:#2a7ace; text-decoration:none;}

.spacer, .spacer2 {padding:12px 12px 12px 12px;}
.spacer_right 		{padding:0 0 0 30px;}

.headline 				{margin-top:22px; padding:2px 6px 2px 6px;}
.headline h2 			{color:white;}
.bg_yellow 				{background-color:#efa53b; border-bottom: 3px solid #d19035;}
.bg_blue 					{background-color:#3f8cd8; border-bottom: 3px solid #3779bb;}
.bg_green 				{background-color:#6a982e; border-bottom: 3px solid #4f7222;}
.bg_red 					{background-color:#ee5934; border-bottom: 3px solid #d6502e;}
.icon 						{color:white; padding:8px 4px 0 8px;}

/* Container classes */
.complete 				{width:100%; display:inline-block; vertical-align:top;}
.half 						{width:48%;  display:inline-block; vertical-align:top;}
.third 						{width:33%;  display:inline-block; vertical-align:top;}
.two_third 				{width:66%;  display:inline-block; vertical-align:top;}
.quarter 					{width:24%;  display:inline-block; vertical-align:top;}
.three_quarter		{width:74%;  display:inline-block; vertical-align:top;}
.directories 			{width:100%;  display:inline-block; vertical-align:top;}

/* Tables */
#listing th 								{border:1px solid #7a7979; border-collapse:collapse; padding:8px; background-color:#7a7979; color:white;}
#listing table 							{border:1px solid #d0d2d4; border-collapse:collapse;}
#listing td 								{border:1px solid #d0d2d4; border-collapse:collapse; padding:8px;}
#listing tr:nth-child(odd) 	{background-color: #eee;}
.oh_times 									{width:45%;}

/* Logo and menu */
.signin						{width:100%; padding-bottom: 6px;}
.signin a					{float:right;font-size:0.8em; text-decoration:none; margin-right:12px; color: #3f3f3f;}
.signin a:hover 	{color:#4998eb;}

#logo 						{float:left; 	width:30%; 	 height:90px;}
#menu 						{float:right; width:70%; 	 min-height:90px;}
#menu a						{font-size:0.8em; color:#fefefe; text-decoration:none; margin-right:8px;}
#menu a:hover 		{color:#4998eb;}
#menu ul 					{margin-top:13px;}
#search 					{float:right; width:100%;	 min-height:32px;	 margin-top:20px; padding:0px 0px 6px 0px; background-color:#343432; color:#0857cd}
#subnavi 					{padding:6px 6px 6px 6px; border-bottom:2px solid #1263c4; background:#3f8cd8;}
#subnavi .item 		{width:16%; text-align:center; display:inline-block;}
#subnavi a				{font-size:0.9em; color:white;}
#subnavi a:hover	{text-decoration:none; color:#fcb44c;}

/* Menu items */
#items_menu 			{float:left; height:28px; padding:2px 0 0 6px;}
#items_menu li		{float:right;margin-left: 10px;}
#items_language		{position:absolute; text-align:right; margin-top:28px; padding:0px 0px 6px 36px; display:none; background:#343432;z-index:2;}
#items_language a {margin-top:12px;}
#items_search 		{float:left;}
.input 						{float:left; width:220px; height:24px; margin:7px 0px 0px 6px; border:#61615e 4px solid; font-size:1.0em;}
.submit 					{float:left; width:auto;  height:34px; margin:7px 5px 0px 6px; border:#5b8726 2px solid; background:#86B404; color:#ffffff; font-size:0.8em; font-weight: bold;}
.submit:hover 		{background:#8fc84b;}

/* Menu buttons */
#button_menu 											{float:left; height:32px; margin:5px 0 0 6px;}
#button_menu a 										{margin-top:3px; font-size:1.5em; font-weight:bold;}
#button_search 										{float:left; height:32px; margin:5px 0 0 6px;}
#button_search a 									{margin-top:3px; font-size:1.5em; font-weight:bold;}
#button_language 									{float:left; margin:0px 0 0 6px;}
#button_menu a.close_menu 				{display:none;}
#button_search a.close_search 		{display:none;}
#button_language a.close_language {display:none;}

/* Company function buttons */
.function_button {
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 5px 16px 5px 16px;
  text-decoration: none;
  display: inline-block;
}

.btn_green {
  background: #7fbc20; text-decoration: none;
}

.btn_green:hover {
  background: #8ecc2b; text-decoration: none;
}

.btn_red {
  background: #ee5934; text-decoration: none;
}

.btn_red:hover {
  background: #ff772e; text-decoration: none;
}

.btn_blue {
  background: #3498db; text-decoration: none;
}

.btn_blue:hover {
  background: #3cb0fd; text-decoration: none;
}

.btn_purple {
  background: #9044fb; text-decoration: none;
}

.btn_purple:hover {
  background: #aa70fb; text-decoration: none;
}

.btn_yellow {
  background: #e2d220; text-decoration: none;
}

.btn_yellow:hover {
  background: #dcbf34; text-decoration: none;
}

/* Responsive actions */
#menu:target #items_menu														{display:block;}
#menu:target #button_menu a.open_menu								{display:none;}
#menu:target #button_menu a.close_menu							{display:block; color:#378de8;}

#search:target #items_search												{display:block;}
#search:target #button_search a.open_search 				{display:none;}
#search:target #button_search a.close_search 				{display:block; color:#378de8;}

#language:target #items_language										{display:block;}
#language:target #button_language a.open_language 	{display:none;}
#language:target #button_language a.close_language 	{display:block; color:#378de8;}

#subnavi:target  																		{display:block;}
#subnavi:target #button_subnavi a.open_subnavi 			{display:none;}
#subnavi:target #button_subnavi a.close_subnavi 		{display:block;}

/* Company preview */
.preview_company				{width:100%; padding:10px 0 10px 0; display:inline-block; vertical-align:top; border-bottom:1px solid #e6e9eb;}
.preview_company:hover  {background-color:#f7f7f3;}
.preview_heading 				{float:right; width:85%; 	 margin-left:8px;}
.preview_image 					{float:left; 	width:100px; height:100px;}
.preview_address				{float:right; width:85%; 	 margin-left:8px; margin-top:4px;}
.preview_addr1 					{width:50%; display:inline-block; vertical-align:top;}
.preview_addr2 					{width:40%; display:inline-block; vertical-align:top;}

/* Pagenation */
#pagenation .button {margin-left:20px;}

/* Alphabet */
#alphabet .letter 	{width:14px; margin-left:10px; margin-top:2px; text-align:center; display:inline-block;}

/* Rating */
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: gold;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ffb700;
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

/* Media queries for responsive webdesign */
@media only screen and (max-width:480px){
	#main 						{width:99%; padding:0 0 0 0;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:100%;}
	#menu 						{width:100%; min-height:46px;}
	#search 					{margin-top:0px;}
	#button_menu 			{display:block;}
	#button_search		{display:block;}
	#items_menu				{display:none; clear:both;}
	#items_search			{display:none; clear:both;}
	#subnavi .item		{width:100%; padding:8px 0 8px 0;}
	
	.complete 				{width:100%;}
	.half 						{width:100%;}
	.third 						{width:100%;}
	.two_third 				{width:100%;}
	.quarter 					{width:100%;}
	.three_quarter		{width:100%;}
	
	.spacer_right 		{padding:0 0 0 0;}
	
	.preview_company 	{}
	.preview_heading 	{width:100%;}
	.preview_image 		{width:80px; height:80px;}
	.preview_address 	{width:68%;}
	.preview_addr1 		{width:100%;}
	.preview_addr2 		{width:100%;}
	
	.oh_times 				{width:90%;}
}

@media only screen and (min-width:481px) and (max-width:640px){
	#main 						{width:99%; padding:0 0 0 0;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:100%;}
	#menu 						{width:100%; min-height:46px;}
	#search 					{margin-top:0px;}
	#button_menu 			{display:block;}
	#button_search		{display:block;}
	#items_menu				{display:none; clear:both;}
	#items_search 		{display:none; clear:both;}
	#subnavi .item 		{width:48%; padding:8px 0 8px 0;}
	
	.complete 				{width:100%;}
	.half 						{width:100%;}
	.third 						{width:100%;}
	.two_third 				{width:100%;}
	.quarter 					{width:100%;}
	.three_quarter		{width:50%;}
	
	.spacer_right 		{padding:0 0 0 0;}
	
	.preview_company 	{}
	.preview_heading 	{width:100%;}
	.preview_image 		{width:80px; height:80px;}
	.preview_address 	{width:79%;}
	.preview_addr1 		{}
	.preview_addr2 		{}
}

@media only screen and (min-width:641px) and (max-width:960px){
	#main 						{padding:0 5% 0 5%;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:44%;}
	#menu 						{width:56%;}
	#button_menu 			{display:block;}
	#button_search		{display:block;}
	#items_menu 			{display:none; clear:both;}
	#items_search 		{display:none; clear:both;}
	#subnavi .item		{width:32%; padding:8px 0 8px 0;}
	
	.input 						{width:240px;}
	
	.complete 				{width:100%;}
	.half 						{width:100%;}
	.third 						{width:100%;}
	.two_third 				{width:100%;}
	.quarter 					{width:49%;}
	.three_quarter		{width:75%;}
	.directories 			{width:49%;}
	
	.spacer_right 		{padding:0 0 0 0;}
	
	.preview_company 	{}
	.preview_heading 	{width:80%;}
	.preview_image 		{}
	.preview_address 	{width:80%;}
	.preview_addr1 		{}
	.preview_addr2 		{}
}

@media only screen and (min-width:961px) and (max-width:1024px){
	#main 						{padding:0 5% 0 5%;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:30%;}
	#menu 						{width:70%;}
	#button_menu 			{display:none;}
	#button_search		{display:none;}
	#items_menu				{display:block; clear:none;}
	#items_search 		{display:block; clear:none;}
	#subnavi .item 		{width:32%; padding:8px 0 8px 0;}
	
	.complete 				{width:100%;}
	.half 						{width:49%;}
	.third 						{width:49%;}
	.two_third 				{width:49%;}
	.quarter 					{width:33%;}
	.three_quarter		{width:75%;}
	
	.preview_company 	{}
	.preview_heading 	{width:100%;}
	.preview_image 		{width:80px; height:80px;}
	.preview_address 	{width:77%;}
	.preview_addr1 		{}
	.preview_addr2 		{}
}

@media only screen and (min-width:1025px) and (max-width:1280px){
	#main 						{padding:0 5% 0 5%;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:30%;}
	#menu 						{width:70%;}
	#button_menu 			{display:none;}
	#button_search		{display:none;}
	#items_menu				{display:block; clear:none;}
	#items_search 		{display:block; clear:none;}
	
	.complete 				{width:100%;}
	.half 						{width:49%;}
	.third 						{width:33%;}
	.two_third 				{width:66%;}
	.quarter 					{width:33%;}
	.three_quarter		{width:75%;}
	
	.preview_company 	{}
	.preview_heading 	{width:81%;}
	.preview_image 		{}
	.preview_address 	{width:81%;}
	.preview_addr1 		{}
	.preview_addr2 		{}
}

@media only screen and (min-width:1281px){
	#main 						{width:1200px; padding:0 0 0 0; margin-right:auto; margin-left:auto;}
	#header 					{width:100%;}
	#content 					{width:100%;}
	#footer 					{width:100%;}
	#logo 						{width:30%;}
	#menu 						{width:70%;}
	#button_menu 			{display:none;}
	#button_search		{display:none;}
	#items_menu				{display:block; clear:none;}
	#items_search 		{display:block; clear:none;}
	
	.complete 				{width:100%;}
	.half 						{width:49%;}
	.third 						{width:33%;}
	.two_third 				{width:66%;}
	.quarter 					{width:24%;}
	.three_quarter		{width:75%;}
	
	.preview_company 	{}
	.preview_heading 	{width:85%;}
	.preview_image 		{}
	.preview_address 	{}
	.preview_addr1 		{}
	.preview_addr2 		{}
}