/* Filename: page-style.css
 * Description: CSS dla strony "ŚW Poligrafia"
 * 
 * Last revison:
 * $Revision: 1 $
 * $Date: 2009-12-02 $
 * $LastChangeBy: Przemysław Szpiler $
 */

 /* COMMON ======================= */
body, html {
	height: 100%;
	margin: 0 0 1px;
	padding: 0;
	}
body {
	font-family: tahoma; font-size: 11px;
	background: #FFFFFF url("../img/body-bg.jpg") repeat-x top;
	}
	
div {
	border: 0px solid red;
	}
	
/* MAIN CONTAINER ======================== */
div.main-container {
	width: 980px; margin: 0 auto;
	}
	
/* head section --------------------------- */
div.head-section {
	height: 120px;
	}
	/* head-logo -------------- */
	a.head-logo, 
	a.head-logo:hover {
		top: 22px; left: 16px;
		width: 217px; height: 58px;
		background: transparent url("../img/logo.png") no-repeat;
		}
		
	div.head-bar {
		top: 8px; right: 8px;
		}
		
	/*user-box --------------- */
	div.user-box { }
		div.head-button-box {
			margin: 0px 0px 0px 8px;
			}
	/*main-menu-box -------------- */
	div.main-menu-box {
		bottom: 28px; right: 0px;
		}
		ul.main-menu {
			}
			ul.main-menu li {
				margin: 0px 25px 0px 25px;
				}
				a.main-menu-item {
					display: block;
					padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px;
					color: #6E6F71; text-transform: uppercase; text-decoration: none; line-height: 29px; font-weight: bold;
					background: #FFFFFF url("../img/main-menu-item-bg.png") repeat-x bottom;					
					}
				a.main-menu-item-active,
				a.main-menu-item-active:hover,
				a.main-menu-item:hover {
					display: block;
					padding: 0px 10px 0px 10px; margin:0px;
					color: #FFFFFF; text-transform: uppercase; text-decoration: none; line-height: 29px; font-weight: bold;
					background: #C4122F;								
					}
	
/* content section ---------------------------- */
div.content-section {
	}
	/* content-left ------------------------ */
	div.content-left {
		width: 305px; padding: 0px 0px 0px 20px;
		}
		div.content-left-about-intro {
			padding: 0px 10px 0px 0px;
			color: #B3B3B3; font-family: georgia; font-size: 11px; line-height: 17px;			
			}			
			a.more-link {
				padding: 0px 0px 0px 10px; margin: 0px 10px 0px 0px;
				background: #FFFFFF url("../img/icon-small-cross.png") no-repeat left center;
				color: #C4122F; text-decoration: none;
				}
		div.content-left-individual-projects-link {
			margin: 35px 0px 25px 0px;
			}
				
	/* content-right ----------------------- */
	div.content-right {
		width: 618px; padding: 0px 0px 0px 36px;
		}
		div.title-box {
			height: 35px; 
			}
			span.title {
				padding: 0px 0px 0px 22px;
				color: #6E6F71; font-size: 17px;
				background: #FFFFFF url("../img/icon-cross.png") no-repeat left center;
				}
		div.sub-title-box {
			height: 30px; margin: 0px 0px 20px 0px;
			}
			h1.sub-title {
				display: inline;
				padding: 2px 2px 2px 2px;
				color: #C4122F; font-size: 24px; text-transform: uppercase;
				background: #FFFFFF;
				}
		
	/* SUBPAGE =============== */
	div.sub-content-left {
		width: 267px; padding: 0px 0px 0px 35px;
		}
		/* banner box --------- */						
		div.banner-box {
			margin: 20px 0px 0px 0px;
			}
	
	/* sub content right ------------------ */		
	div.sub-content-right {
		overflow: visible;
		width: 672px; padding: 0px 0px 0px 0px;
		}
		div.sub-path {
			margin: 0px 0px 5px 0px;
			}
			div.sub-path span {
				background: #FFFFFF; font-weight: bold;
				}
				span.red-slash {
					color: #C4122F; font-size: 11px; 
					}
				div.sub-path a {
					color: #555555; text-decoration: none; text-transform: uppercase; font-size: 11px;
					}
				div.sub-path a:hover {
					color: #929496; text-decoration: none;  font-size: 11px;
					}
		div.content-right-categories-list {
			padding: 5px 0px 10px 0px;
			}
			
			/*category-item -----------------------*/
			div.category-item-canvas {
				overflow: visible;
				height: 82px; 			
				border-left: 3px solid #C4122F;
				border-top: 1px solid #EDEDED;
				border-bottom: 1px solid #EDEDED;
				border-right: 1px solid #EDEDED;
				background: transparent url("../img/category-bg.png") repeat;
				}
				div.category-item-content {
					overflow: visible; 
					width: 100%; height: 100%;
					background: transparent no-repeat right center;									
					}
					a.category-item-name,
					a.category-item-name:hover {
						display: block;
						height: 40px; padding : 25px 0px 18px 30px;
						color: #6E6F71; font-size: 17px; text-decoration: none; 
						}
			div.main-canvas {
				width: 282px; margin: 0px 9px 9px 0px;	
				}
			div.main-canvas 
			a.category-item-name,
			a.category-item-name:hover {
				width: 272px; 	
				} 		
				
			div.sub-canvas {
				width: 301px; margin: 0px 29px 9px 0px;	
				}
			div.sub-canvas 
			a.category-item-name,
			a.category-item-name:hover {
				width: 272px;
				} 
			
			/*-- category-item -----------------------*/
			div.subcategory-item-canvas {
				overflow: visible;
				width: 202px; height: 142px; margin: 0px 20px 20px 0px;
				border: 1px solid #E7E8E9;
				background: #FFFFFF; 
				}
				div.subcategory-item-content {
					width: 100%; height: 100%;
					background: transparent no-repeat center top;	
					}
					a.subcategory-link {
						display: block; 
						width: 100%; height: 100%;
						}
					a.subcategory-item-name {
						display: block; z-index: 100;
						width: 187px; padding: 7px 5px 5px 10px; 
						bottom: 0px; left: 0px;
						border-left: 2px solid #F0F0F0; background: #F0F0F0; 
						color: #555555; font-size: 12px; font-weight: bold; text-decoration: none; text-transform: uppercase;
						}
					a.subcategory-item-name-active {
						display: block; z-index: 100;
						width: 185px; padding: 7px 5px 5px 10px; 
						bottom: 0px; left: 0px;
						border-left: 2px solid #C4132F; background: #F0F0F0; 
						color: #C4132F; font-size: 12px; font-weight: bold; text-decoration: none; text-transform: uppercase;
						}
				div.cat-item-numebr-container {
					top: 0px; left: 0px; z-index: 10;
					}
				a.cat-item-number {
					display: block;
					height: 82px; width: 70px;
					color: #FFFFFF; line-height: 82px; text-align: center; font-size: 15px; font-weight: bold; text-decoration: none;
					background: #C4122F; 
					}
					
				div.cat-item-subcats-container {
					left: -3px; z-index: 100; top: -1px;
					}
				div.cat-item-subcats {
					width: 280px; padding: 2px 0px 2px 5px;
					background: #C4122F; 
					}
				div.subpage-cat-item-subcats{
					width: 290px; padding: 10px;
					background: #C4122F; 
					}
					div.subcat-slide-item {
						width: 130px; padding: 2px 5px 2px 5px; 
						font-size: 11px; line-height: 12px;
						}
						div.subpage-subcat-slide-item {
							width: 100%; padding: 2px 5px 2px 5px; 
							}
						div.subcat-slide-item a,
						div.subpage-subcat-slide-item a {
							color: #FFFFFF; text-decoration: none; font-size: 12px; line-height: 10px; font-family: tahoma;	
							}
						div.subcat-slide-item a:hover,
						div.subpage-subcat-slide-item a:hover {
							text-decoration: underline;
							}
						
		/* window (products slider) ---------------------- */
		div.window-container {
			width: 665px;
			}
			div.products-widnow {
				overflow: hidden;
				width: 665px; height: 320px;
				}	
				div.products-tape {
					width: 9999px; height: 320px;
					}	
					div.products-frame {
						width: 665px; height: 320px;
						}
						/*-- product-item -----------------------*/
						div.product-item-canvas {
							overflow: visible;
							width: 155px; height: 160px; margin: 0px 8px 0px 0px;
							background: #FFFFFF; 
							}
							div.product-item-canvas img { border: 1px solid #E7E8E9; }
							div.product-item-content {
								width: 100%; height: 100%;
								background: transparent no-repeat right center;	
								}
								a.product-link {
									display: block; margin: 0px;
									color: #555555; text-decoration: none; text-align: center;
									}
								a.product-link:hover {
									color: #C4122F; text-decoration: none;
									}
			/* big arrows ---------------- */
			a.left-big-arrow {
				display: block; top: 0px; left: -30px;
				width: 20px; height: 320px;
				background: transparent url("../img/left-big-arrow.png") no-repeat 0px 120px;
				}
			a.left-big-arrow:hover {
				display: block; top: 0px; left: -30px;
				width: 20px; height: 320px;
				background: transparent url("../img/left-big-arrow-active.png") no-repeat 0px 120px;
				}
			a.right-big-arrow {
				display: block; top: 0px; right: -15px;
				width: 20px; height: 320px;
				background: transparent url("../img/right-big-arrow.png") no-repeat 0px 120px;
				}
			a.right-big-arrow:hover {
				display: block; top: 0px; right: -15px;
				width: 20px; height: 320px;
				background: transparent url("../img/right-big-arrow-active.png") no-repeat 0px 120px;
				}
				
		/* products input ---------- */
		table.products-input-table {
			height: 30px; margin: 0 auto;
			}
			a.small-left-arrow {
				display: block;
				width: 20px; height: 28px;
				background: transparent url("../img/left-small-arrow.png") no-repeat center;
				}
			a.small-left-arrow:hover {
				display: block;
				width: 20px; height: 28px;
				background: transparent url("../img/left-small-arrow-active.png") no-repeat center;
				}
			
			a.small-right-arrow {
				display: block;
				width: 20px; height: 28px;
				background: transparent url("../img/right-small-arrow.png") no-repeat center;
				}
			a.small-right-arrow:hover {
				display: block;
				width: 20px; height: 28px;
				background: transparent url("../img/right-small-arrow-active.png") no-repeat center;
				}
			input.navigation-input {
				width: 113px; height: 16px; padding: 2px 0px 0px 0px; 
				border: 1px solid #CCCCCC;
				color: #6E6F72; font-size: 11px; text-align: center;
				background: #FFFFFF;
				}
				
		/* product-view --------------- */
		div.product-view {
			width: 700px;
			}
			div.product-view-left {
				width: 350px;
				}
				div.product-photo {
					min-height: 310px;
					}
					
				div.product-photos{
					width: 352px; height: 280px;
					overflow:hidden;
					}
					div.product-photos-bar{
						width: 1100px; height: 280px;
					}
					div.product-photos-entry{
						width: 360px; height: 280px;
					}
					div.product-photos-entry img{
						border: 1px solid #E7E8E9;
					}
				div.product-photos-navigation{
					padding:0px 0px 10px 0px;
					font-size:1px; text-align:right;
				}
					div.product-photos-navigation a{
						padding:4px 8px 4px 8px; margin-left:0px;
						background:#6e6f73;
						color:#FFFFFF; font-size:11px;
						cursor:pointer;
					}
					div.product-photos-navigation a:hover{
						background:#999999; text-decoration:none;
					}
					div.product-photos-navigation a.product-photos-navigation-active{
						background:#c61935;
					}
				
			div.product-view-right {
				padding: 0px 0px 0px 20px;
				}
				div.order-label {
					margin: 0px 0px 10px 0px;
					color: #6E6F72; font-size: 20px; text-transform: uppercase; text-align: right;
					}
				div.field-box {
					height: 35px;
					}	
					div.field-label {
						width: 110px; height: 35px;
						color: #6E6F72; text-transform: uppercase; text-align: right; line-height: 20px; font-weight:normal;
						}
					div.field-value {
						width: 170px;
						text-align: right;
						}
						select.product-select-field {
							width: 160px; height: 23px;
							border: 1px solid #555555;
							background: #FFFFFF;
							color: #555555; font-size: 11px;
							}
						input.product-input-field {
							width: 158px; height: 18px; padding: 5px 0px 0px 0px;
							border: 1px solid #555555;
							background: #FFFFFF;
							color: #555555; font-size: 11px;
							}	
				div.view-button {
					width: 85px; margin: 0px 20px 0px 0px;
					}		
				div.view-price-box {
					margin: 7px 0px 0px 0px;
					}
					span.price-label, 
					span.price-value {
						
						color: #C4122F; text-transform: uppercase; font-size: 14px;						
						}
					
	
/* FOOTER CONTAINER ======================= */
div.footer-container {
	width: 100%; height: 65px; margin: 50px 0px 50px 0px;
	background: transparent url("../img/footer-bg.gif") repeat-x top;
	}
/* footer section --------------------- */
div.footer-section {
	width: 980px; margin: 0px auto 0px auto;
	}
	
	/* footer menu --------------- */
	div.footer-menu-box {		
		margin: 20px 0px 0px 23px;
		}
		ul.footer-menu {
			list-style: none; padding: 0px; margin: 0px;
			}
			ul.footer-menu li {
				margin: 0px 22px 0px 23px; padding: 0px;
				}
				a.footer-menu-item {
					display: block;
					height: 23px; padding: 0px 8px 0px 8px;
					color: #555555; font-size: 10px; text-decoration: none; text-transform: uppercase; line-height: 23px; font-weight: bold;
					}
				a.footer-menu-item-active,
				a.footer-menu-item-active:hover,
				a.footer-menu-item:hover {
					display: block;
					height: 23px; padding: 0px 8px 0px 8px;
					color: #C4122F; font-size: 10px; text-decoration: none; text-transform: uppercase; line-height: 23px; font-weight: bold;
					background: #FFFFFF; 
					}
	/*footer copyright --------- */
	div.footer-copyright-box {
		bottom: -35px; left: 55px; color: #AAAAAA;	
		}
		div.footer-copyright-box span {
			color: #CCCCCC;
			}
	/* footer author -------------- */
	div.footer-author-box {
		bottom: -35px; right: 40px;
		font-size: 10px; font-weight: bold;
		}
		a.footer-author-label {
			margin: 0px 10px 0px 0px;
			color: #CCCCCC; text-decoration: none; text-transform: uppercase; 
			}
		a.footer-author-label:hover {
			color: #AAAAAA; text-decoration: none;
			}
		a.footer-author-value {
			color: #C4122F; text-decoration: none; text-transform: uppercase;
			}
		a.footer-author-value:hover {
			color: #94011F; text-decoration: none;
			}

/* BUTTONS ==================== */
a.simple-button {
	display: block;
	height: 30px; padding: 0px 15px 0px 15px;
	color: #FEFEFE; text-decoration: none; text-transform: uppercase; line-height: 30px; text-align: center;
	background: #6D6F72;
	}
a.simple-button-active {
	display: block;
	height: 30px; padding: 0px 15px 0px 15px;
	color: #FEFEFE; text-decoration: none; text-transform: uppercase; line-height: 30px; text-align: center;
	background: #C4122F;
	}
a.simple-button-active:hover {
	background: #E51230;
}

a.simple-button:hover {
	background: #C4122F;
	}
	
a.photo-pagination-button {
	display: block;
	height: 24px; padding: 0px 10px 0px 10px; margin: 0px 1px 0px 0px;
	color: #FEFEFE; text-decoration: none; text-transform: uppercase; line-height: 24px;
	background: #6D6F72;
	}
a.photo-pagination-button:hover {
	background: #C4122F;
	}
	
div.test {
	width: 100px; height: 100px; 
	background: #AAAAAA;	
}

/* SONGS ========================== */
td.song-groups {
	width: 150px;
	vertical-align: top;
	}
td.song-songs {
	width: 157px;
	vertical-align: top;
	}
td.song-texts {
	vertical-align: top; 
	padding: 10px 0px 0px 25px;
	}
	
a.songs-link {
	display: block; margin: 1px; padding: 7px 0px 7px 0px;
	line-height: 14px;
	color: #FEFEFE; text-align: center; text-transform: uppercase;
	background: #6D6F72;
	}
a.songs-link-active,
a.songs-link-active:hover {
	display: block; margin: 1px; padding: 7px 0px 7px 0px;
	line-height: 14px;
	color: #FEFEFE; text-align: center; text-transform: uppercase; text-decoration: none;
	background: #C4122F;
	}
a.songs-link:hover {
	display: block; margin: 1px; padding: 7px 0px 7px 0px;
	line-height: 14px;
	color: #FEFEFE; text-align: center; text-transform: uppercase; text-decoration: none;
	background: #94979C;
	}

a.icon-del {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-del.gif") no-repeat center;
	}
a.icon-del:hover {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-del-hover.gif") no-repeat center;
	}
	
a.icon-pos-up {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-position-up.gif") no-repeat center;
	}
a.icon-pos-up:hover {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-position-up-hover.gif") no-repeat center;
	}

a.icon-pos-down {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-position-down.gif") no-repeat center;
	}
a.icon-pos-down:hover {
	display: block;
	width: 23px; height: 24px; margin: 0px 1px 0px 0px;
	background: transparent url("../img/icon-position-down-hover.gif") no-repeat center;
	}
td.songs-label, 
span.songs-label {
	font-size: 17px; color: #6E6F72; text-transform: uppercase; 
	}
td.song-name {	
	font-weight: bold; color: #000000; text-transform: uppercase; font-size: 12px;
	}
td.text-content {
	line-height: 20px; vertical-align: top; text-transform: uppercase; color: #6E6F72; 
	}
td.songs-checkbox {
	vertical-align: top; 
	width: 20px; padding-top: 6px;
	}
td.songs-separator {
	height: 1px; background: #DCDDDF;
	}

/*====== TIP ================ */
.myTip  {
	background: #FFFFFF; padding: 5px; font-size: 9px;
	}
.myTip div.tip-title {
	background: #DDDDDD; 
	font-weight: bold;
	}
.myTip div.tip-text {
	}
	
td.product-form-value {
	text-align: right;
	padding: 5px;
	}
	
div.product-desc hr {
	border: 0px;
	border-top: 1px solid #E7E8E9;
	}
span.price-info {
	top: 5px;
	color: #666666; line-height: 12px;
	}