﻿/*
	Layout style for AutopujcovnaCZ
	Adam Horcica, Data3s, 2009
*/

/* === GLOBAL LAYOUT ======================================================= */


body {
	font-family: Verdana, 'Geneva CE', lucida, sans-serif;
	text-align: center;
	font-size: 90%;
	margin: 20px;
	background-color: #210F00;
	background-image: url(images/bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
}

#frame{
  width: 900px;
  margin: 0 auto;
  text-align: left;
	color: #4e3a2b;
}

hr.layout-separator{
  display: none;
}

div.cleaner{
	height: 0px;
	clear: both;
	overflow: hidden;
}

a img{
	border: none;
}

/* --- HEADER --- */

#header{
  height: 307px;
  position: relative;
	background-image: url(images/logobox-bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom left; 
  }
	
	#menu{
		color: #775d3d;
		background-image: url(images/menu-bg.png);
		height: 58px;
		background-repeat: no-repeat;
    }
		
		/* menu */
		
		#menu ul{
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
			right: 5px;
		}
		
		#menu li{
			margin: 0;
			padding: 0 3px 0 0;
			float: left;
			list-style: none;
			height: 58px;
			background-image: url(images/menu-sep.png);
			background-position: right 10px;
			background-repeat: no-repeat;
		  }
			
			#menu li.last{
				background-image: none;
			}
			
			#menu li a{
				display: block;
				height: 58px;
				text-decoration: none;
				color: #775d3d;
				background-position: bottom center;
				background-repeat: no-repeat;
			}
			
			#menu li.current a,
			#menu li.section a, 
			#menu li a:hover,
			#menu li a:focus{
				color: #eabf18;
			}
			
			#menu li.current a,
            #menu li.section a{
            	background-image: url(images/menu-bottom-active.png);
            }
			
			#menu li a span{
				display: block;
				padding: 17px 10px 0;
			}
			
			/* menu end */
			
		#menu h1{
			margin: 0;
			padding: 0;
			height: 58px;
			width: 229px;
			font-size: 14pt;
			position: absolute;
			top: 0;
			left: 35px;
		  }
			
			#menu h1 span{
				position: absolute;
				top: 0;
				left: 0;
				height: 58px;
        width: 229px;
				background-image: url(images/logo.png);
			}
			
#logobox{
  }

  #header-contact{
        position: absolute;
		bottom: 15px;
		right: 20px;
		color: #fff;
		font-size: 13px;
    }
	  #header-contact span{
	  	font-size: 17px;
	  }

  #action-offer{
  	position: absolute;
    bottom: 10px;
    left: 20px;
    color: #fff;
    }
		#action-offer h3{
			margin: 0;
			padding: 0;
			font-size: 90%;
		}
	
/* --- */

#crumb-line{
  position: relative;
  margin: 7px 3px 8px 3px;
  font-size: 85%;
  }
  
/* --- BODY --- */

#body{
  margin-top: 20px;
}
  
/* content */
  
#content{
   position: relative;
  background-repeat: repeat-y;
  background-position: center;
  background-image: url(images/body1-bg.png);
  }
	
	#content.with-sidebar{
	 background-image: url(images/body2-bg.png);	
	}
  
  #content-text{
      padding: 15px;
	  min-height: 380px;
	  background-repeat: no-repeat;
	  background-position: center top;
	  background-image: url(images/body2-top.png);	
  }
	
	#content.with-sidebar #content-text{
		padding-right: 285px;
	}
	
	#content-footer{
		background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(images/body2-bottom.png);
	}
	
	#cars-link{
		font-size: 110%;
		float: left;
	}
	

/* sidebar */  

#sidebar{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 245px;
  }
  
  #sidebar h3{
  	text-align: center;
    margin: 5px 0 10px 0;
    color: #5a2500;
    font-weight: normal;
  }
	

/* --- FOOTER --- */

#footer{
  margin: 20px 0 0 0;
	position: relative;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(images/footer-bg.png);
  }
  
  #footer p{
    margin: 0;
    padding: 14px 10px 0;
    color: #5e5e5e;
    font-size: 85%;
  }
	
  #d3s-logo{
		position: absolute;
		display: block;
		right: 10px;
		top: 8px;
		width: 150px;
		font-size: 12px;
		color: #5e5e5e;
		text-align: right;
	}
  
	
/* === INDIVIDUAL PAGES ==================================================== */
  
  
/* --- HomePage --- */

#home-buttons{
	   margin: 20px 0;
    }
	#home-buttons a{
		display: block;
		float: left;
		position: relative;
		margin: 4px;
		height: 118px;
		width: 291px;
		background-repeat: none;
		text-decoration: none;
		color: #1c1c1b;
		text-decoration: none;
		}
		
		#home-buttons a:hover,
		#home-buttons a:focus{
			background-position: -291px 0;
		}
		
		#home-buttons a strong{
			display: block;
			margin: 10px;
			font-size: 135%;
			font-weight: normal;
            }
			#home-buttons a:hover strong,
			#home-buttons a:focus strong{
				text-decoration: underline;
			}
		#home-buttons a span{
			display: block;
			position: absolute;
			top: 30px;
			right: 10px;
			width: 120px;
		}
		
		#home-buttons a.rent  { background-image: url(images/button_pujcovna.jpg); }
		#home-buttons a.sales { background-image: url(images/button_prodej-aut.jpg); }
		#home-buttons a.transport  { background-image: url(images/button_preprava-osob.jpg); }
		#home-buttons a.taxi  { background-image: url(images/button_auto-doprava.jpg); }

/* --- Rent --- */

#cars-tab{
	   float: right;
	   margin: 0 0 10px 10px;
	   display: block;
	   width: 191px;
	   height: 25px;
	   text-align: center;
	   background-position: 0 0;
	   background-repeat: no-repeat;
	   background-image: url(images/tab-btn.png);
	   text-decoration: none;
	   color: #fff;
    }
	#cars-tab:hover,
	#cars-tab:focus{
		background-position: -191px 0;
	}
	#cars-tab span{
		display: block;
		padding-top: 4px;
	}


/* -- Rent Home --- */

#category-list{
	   width: 600px;
    }
    #category-list .item{
    	margin: 3px 6px;
		padding: 0 5px;
    	float: left;
		width: 178px;
		height: 150px;
		border-bottom: solid #AFA793 1px;
        }
		#category-list .item h3{
			margin: 8px 1px;
			font-size: 105%;
			color: #2d2d2d;
			font-weight: bold;
		}
		
#back-link{
    position: absolute;
	padding: 3px 0 3px 35px;
    top: 15px;
    right: 288px;
    font-size: 118%;
    }
	
	#back-link span{
		display: block;
		width: 25px;
		height: 25px;
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: repeat;
		background-image: url(images/back-btn.png);
	}
    
/* --- Category --- */

#manufacturer-list{
    width: 600px;   
    }
	#manufacturer-list .item{
		
	   }
	   #manufacturer-list .item h3{
            margin: 15px 0;
			padding: 2px 0;
			font-size: 140%;
            color: #2d2d2d;
			border-bottom: solid #AFA793 1px;
			clear: both;
        }
    #manufacturer-list .item .car,
	#action-cars .car{
    	width: 118px;
		height: 120px;
		float: left;
		text-align: center;
        }
		#manufacturer-list .car .photo,
		.action-cars .car .photo{
			padding: 5px 3px;
		}
		#manufacturer-list .car .photo-inner,
		#action-cars .car .photo-inner{
            width: 106px;
			height: 76px;
			
			background-image: url(images/car-mini-left-frame.png);
			background-repeat: no-repeat;	
			}
			#manufacturer-list .car .photo-inner img,
			#action-cars .car .photo-inner img{
				margin-top: 7px;
	            width: 90px;
	            height: 60px;
	        }

/* --- action cars sidebar --- */

#action-cars .car{
	margin-left:53px;
}
		
/* --- Car Detail --- */

#car-detail{
	   color: #2e2e2c;
    }
	
	#car-detail h3{
		font-size: 100%;
		border-bottom: solid #AFA793 1px;
	}
	
	#car-detail th{
		font-weight: normal;
		padding-right: 15px;
	}
	
	#car-detail div.description{
		margin: 10px 0;
	}
	
	#car-detail .photos{
        float: right;
        width: 337px;
		margin-left: 10px; 
		background-color: #F0E8D4;
	}
	
	#car-detail .photos .big{
		position: relative;
		margin-left: 10px;
		width: 326px;
		height: 235px;
		background-repeat: no-repeat;
		background-image: url(images/car-big-left-frame.png);
        }
	    #car-detail .photos .big img{
	    	position: absolute;
			bottom: 6px;
			left: 6px;
		}
			
	#car-detail .contact{
		clear: both;
		margin: 20px 5px;
		width: 590px;
		height: 80px;
		font-size: 110%;
        background-image: url(images/contact-frame.png);
        }
        #car-detail .contact p{
            padding: 10px;	
		}
		#car-detail .contact strong{
			display: block;
			font-size: 150%;
			text-align: right;
			margin: 15px 0 0;
			text-align: center;
		}
		
	table.detail{
		width: 598px;
		font-size: 100%;
	    margin: 1px;
	    border: solid #AFA793 1px;
	    border-collapse: collapse;
	}

	table.detail td, table.detail th{
	    padding: 4px;
	    border: solid #AFA793 1px;
	}
	
	table.detail th{
	    
        text-align: center;
        background-color: #AFA793;
	}
	
  