/**
 * Project Name:		Dinamik Pano
 * Filename:			layout.css
 * Type:			Transitional
 * Version:			1.0
 * Agency:			Master Ajans
 * Agency URI:			http://www.masterajans.com/
 * Developer:			Fatih Caylak
 * Developer URI:		http://www.fatihcaylak.com
 * Browsers:			Windows: 	Internet Explorer 7+, Opera 7+, Firefox 1+
 *				MacOS:		Safari2+, Firefox 2+
 * Created Date:		09-12-2012 06:29
 * License: 			GNU General Public License version 3.0
 * License URI: 		http://www.gnu.org/licenses/gpl-3.0.html

 All files, unless otherwise stated, are released under the GNU General Public License
 version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
-------------------------------------------------------------------------------------
/* CSS ID & Class List
 * 	0.  General Items (include css, body, wrapper etc.)
 * 	1.  Header
 *  	1a. Header -> Top
 * 		1b. Header -> Logo
 *		1c. Header -> Searchbar 
 * 		1d. Header -> Navigation
 *  02. Page
 * 		02a. Page -> Slider
 * 03. Footer
 * 		03a. Footer -> Copyright
 * 		03b. Footer -> Menu
 * 		03c. Footer -> Contact
 * 04. Page Left
 * 05. Sidebar
 * 06. Form
 * 07. Products
 * 08. Fonts
 ----------------------------------------------------------*/


/* 0. General Items
----------------------------------------------------------*/
body {
	font: normal 12px/normal Tahoma, Arial, sans-serif;
	background: #fff url(../images/bg.jpg) repeat-x;
	border-top: 5px solid #0044bd;
}

/* 1. Header
----------------------------------------------------------*/
header{
	float: left;
	width: 100%;
	margin: 15px 0 0 0;
}

	/* 1a. Header -> Logo
	----------------------------------------------------------*/
	header #logo {
		float: left;
		width: 170px;
		height: 145px;
		margin: 0 0 0 -6px;
	}
	header #logo h1 a {
		display: block;
		width: 170px;
		height: 145px;
		background: url(../images/logo.png) no-repeat;
		text-indent: -999em;
	}
	header #logo p {
		display: none;
	}

	/* 1b. Header -> Links
	----------------------------------------------------------*/

	/* 1c. Header -> Links
	----------------------------------------------------------*/
	header #links {
		float: right;
		width: 80%;
		margin-top: 30px;
		font-size: 14px;
	}
	header #links li {
		float: right;
		margin: 0 0 0 20px;
		padding: 0 0 0 20px;
		color: #909090;
	}
	header #links li:hover, header #links li a:hover{
		color: #023da7;
	}
	header #links li a {
		color: #909090;
	}
	header #links li.mail {
		background: url(../images/icon/mail.png) no-repeat left center;
	}
	header #links li.phone {
		background: url(../images/icon/phone.png) no-repeat left center;
	}
	header #links li.mail:hover {
		background: url(../images/icon/mail_hover.png) no-repeat left center;
	}
	header #links li.phone:hover {
		background: url(../images/icon/phone_hover.png) no-repeat left center;
	}

	/* 1d. Header -> Search
	----------------------------------------------------------*/
	header #searchbar {
		float: right;
	}
	header #searchbar #search_form {
		float: left;
		margin: 55px 0 0 0;
	}
	header #searchbar #search_form input {
		float: left;
		width: 180px;
		height: 29px;
		padding: 0 0 0 5px;
		color: #ccc;
		font-size: 12px;
		border: 1px solid #eee;
		border-radius: 3px;
		background: #fff url(../images/input.png);
	}
	header #searchbar #search_form #searchsubmit {
		float: left;
		width: 15px;
		height: 15px;
		margin: 7px 0 0 -30px;
		border: 0 none;
	}

	/* 1e. Header -> Navigation
	----------------------------------------------------------*/
	#menu					{ float: left; width: 100%; height: 45px; background: #043793 url(../images/nav.png); border-radius: 5px; }
	#menu:before,
	#menu:after 				{ content: ""; display: table; }
	#menu:after 				{ clear: both; }
	#menu 					{ zoom:1; }
	#menu li 				{ position: relative; float: left; background: url(../images/nav_seperator.png) right no-repeat; }
	#menu a 				{ float: left; height: 45px; padding: 0 10px 0 10px; color: #fff; font-family: Century Gothic, Tahoma, sans-serif; font-weight: bold; font-size: 18px; line-height: 40px; }
	#menu li:hover > a 			{ color: #fafafa; }
	#menu ul 				{ margin: 20px 0 0 0; opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: url(../images/nav.png); }
	#menu li:hover > ul 			{ opacity: 1; visibility: visible; margin: 0; }
	#menu ul ul 				{ top: 0; left: 150px; margin: 0 0 0 20px; }
	#menu ul li 				{ float: none; display: block; border: 0; padding: 0 !important; }
	#menu ul li:last-child			{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
	#menu ul a 				{ width: 130px; display: block; white-space: nowrap; float: none; text-transform: none; }

	/* 1f. Header -> Social
	----------------------------------------------------------*/
	header  #social {
		float: right;
		margin: -32px 20px 0 0;
	}
	header  #social li {
		float: left;
		width: 21px;
		height: 21px;
		margin: 0 0 0 5px;
	}
	header  #social li a {
		display: block;
		width: 21px;
		height: 21px;
		overflow: hidden;
	}
	header  #social span {
		position: relative;
		left: -10000px;
	}
	header #social .facebook {
		background: url(../images/icon/facebook.png) no-repeat;
	}
	header #social .facebook:hover {
		background: url(../images/icon/facebook_hover.png) no-repeat;
	}
	header #social .twitter {
		background: url(../images/icon/twitter.png) no-repeat;
	}
	header #social .twitter:hover {
		background: url(../images/icon/twitter_hover.png) no-repeat;
	}

/* 2. Content
----------------------------------------------------------*/
	
	/* 2a. Content -> Slides
	----------------------------------------------------------*/
	#slides{
		float: left;
		width: 700px;
		height: 280px;
		background: url(../images/banner_bg.png);
	}
	.slides_container{
		display: none;
		position: relative;
		width: 700px;
		height: 280px;
		overflow: hidden;
	}
	.slides_container a{
		display: block;
		width: 700px;
		height: 280px;
	}
	.slides_container a img {
		display: block;
	}
	.controls{
		position: relative;
		float: left;
		width: 100%;
		height: 23px;
		margin: -160px 0 0 0;
		z-index: 9999;
	}
	.control img{
		width: 15px;
		height: 23px;
	}
	.controls .next{
		float: right;
		margin-right: 10px;
	}
	.controls .prev{
		float: left;
		margin-left: 10px;
	}
	.pagination {
		position: relative;
		float: left;
		width: 100%;
		height: 26px;
		padding: 5px 0 0 315px;
		margin: -26px 0 0 0;
		background: url(../images/icon/pagination.png) no-repeat;
		z-index: 9999;
	}
	.pagination li {
		float:left;
		margin:0 1px;
		list-style:none;
	}
	.pagination li a {
		display:block;
		width:12px;
		height:0;
		padding-top:12px;
		background-image:url(../images/pagination.png);
		background-position:0 0;
		float:left;
		overflow:hidden;
	}

	.pagination li.current a {
		background-position:0 -12px;
	}

	/* 2b. Content -> News
	----------------------------------------------------------*/
	#news{
		float: right;
		width: 277px;
		height: 280px;
		background:url(../images/news.png) repeat-x;
	}
	#news .titr{
		float: left;
		width: 255px;
		margin: 10px 0 0 10px;
		font-family: 'MyriadPro', 'MyriadPro-Regular', sans-serif;
		font-size: 18px;
		font-weight: bold;
		color: #023da7;
	}
	#news ul{
		float: left;
		width: 255px;
		height: 225px;
		margin: 0 0 0 10px;
		overflow: hidden;
	}
	#news ul li{
		float: left;
		width: 100%;
		margin: 5px 0 0 0;
	}
	#news ul li a{
		color: #7a7a7a;
	}
	#news ul li a:hover{
		color: #023da7;
	}
	#news ul li .title{
		float: left;
		width: 100%;
		font-weight: bold;
	}
	#news ul li .public{
		float: left;
		width: 100%;
	}
	#news .all{
		position: relative;
		float: left;
		width: 100%;
		margin: 5px 0 0 10px;
		color: #0044bd;
		font-weight: bold;
		z-index: 999999;
	}
	#news .all:hover{
		text-decoration: underline;
	}
	.news-box{
        float: left;
        width: 100%;
        margin: 10px 0 0 0;
        border-bottom: 1px dotted #ccc;
    }
    .news-box strong{
        float: left;
        width: 100%;
        margin: 0 0 10px 0
    }
    .news-box span{
        float: left;
        width: 100%;
    }
    .news-box .detail{
        float: left;
        width: 100%;
        text-align: right;
    }
    .news-box .detail{
        font-size: 11px;
        margin: 0 0 10px 0;
    }
    .news-box .detail:hover{
        text-decoration: none;
        color: #fc0000;
    }
	/* 2c. Content -> Main
	----------------------------------------------------------*/
	#main{
		float: left;
		width: 100%;
		margin: 10px 0 0 0;
		background: #fff url(../images/main.png) repeat-x;	
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	#main .box{
		float: left;
		width: 470px;
		margin: 15px 0 0 15px;
	}
	#main .box img{
		float: left;
		width: 215px;
		height: 145px;
		border-radius: 3px;
	}
	#main .box .title{
		float: left;
		width: 230px;
		margin: 0 0 0 10px;
		color: #033ca2;
		font-weight: bold;
		font-size: 18px;
	}
	#main .box .title:hover{
		text-decoration: underline;
	}
	#main .box .public{
		float: left;
		width: 230px;
		margin: 0 0 0 10px;
		color: #7a7a7a;
	}
	#main .box .public:hover{
		float: left;
		width: 230px;
		margin: 0 0 0 10px;
		color: #033ca2;
	}	
	#main #sellers{
		float: left;
		width: 970px;
		height: 80px;
		margin: 45px 0 35px 10px;
		border-top: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
	}
	#main #sellers strong{
		float: left;
		width: 100%;
		margin: 30px 0 0 0;
		color: #033ca2;
		font-weight: bold;
		font-family: Century Gothic, Tahoma, sans-serif;
		font-size: 18px;
	}
	#main #sellers .title{
		float: left;
		margin-top: 35px;
	}
	#main #sellers ul{
		float: right;
		margin: 23px 0 0 0;
	}
	#main #sellers ul li{
		float: left;
		margin: 0 3px 0 0;
	}
	#main #sellers ul li img{
		width: 100px;
		height: 35px;
	}
	#main #products{
		float: left;
		width: 100%;
		height: 145px;
		margin: 0 0 0 0;
	}
	#main #products .left{
		float: left;
		width: 215px;
		height: 125px;
		margin: 0 0 0 25px;
	}
	#main #products .left strong{
		float: left;
		width: 100%;
		color: #033ca2;
		font-weight: bold;
		font-family: Century Gothic, Tahoma, sans-serif;
		font-size: 18px;
		margin: 0 0 50px 0;
	}
	#main #products .left span{
		float: left;
		margin: 10px 0 20px 0;
		color: #7a7a7a;
	}

	.jcarousel-skin-tango .jcarousel-container {
		float: right;
	}
	.jcarousel-skin-tango .jcarousel-direction-rtl {
		direction: rtl;
	}
	.jcarousel-skin-tango .jcarousel-container-horizontal {
		float: right;
		width: 665px;
		height: 145px;
	}
	.jcarousel-skin-tango .jcarousel-clip {
		overflow: hidden;
	}
	.jcarousel-skin-tango .jcarousel-clip-horizontal {
		width: 665px;
		height: 145px;
		background: url(../images/carousel.png);
	}
	.jcarousel-skin-tango .jcarousel-item {
		float: left;
		width: 175px;
		height: 125px;
		background: transparent url(../images/carousel_bg.png);
	}
	.jcarousel-skin-tango .jcarousel-item img {
		width: 160px;
		height: 104px;
		margin: 8px 0 0 8px;
	}
	.jcarousel-skin-tango .jcarousel-item-horizontal {
		margin: 10px 0 0 36px;
	}
	.jcarousel-skin-tango .jcarousel-next-horizontal {
		position: absolute;
		top: 60px;
		right: -20px;
		width: 45px;
		height: 119px;
		cursor: pointer;
		background: transparent url(../images/icon/arrow-next.png) no-repeat;
	}
	.jcarousel-skin-tango .jcarousel-prev-horizontal {
		position: absolute;
		top: 60px;
		left: 20px;
		width: 15px;
		height: 23px;
		cursor: pointer;
		z-index: 9999999999;
		background: transparent url(../images/icon/arrow-prev.png) no-repeat;
	}

/* 3. Footer
----------------------------------------------------------*/
footer{
	float: left;
	width: 100%;
	height: 45px;
	margin: 20px 0 20px 0;
	border-radius: 4px;
	background: url(../images/footer.png);
}
footer span{
	float: left;
	margin: 13px 0 0 20px;
	color: #959595;
}
footer img{
	float: right;
	margin: 3px 5px 0 0;
}
footer a{
	color: #747474;
}
footer a:hover{
	color: #000;
}

/* 4. Aside
----------------------------------------------------------*/
aside{
	float: right;
	width: 277px;
	min-height: 136px;
	background: #fff url(../images/aside.png) repeat-x;
	border-radius: 5px;
}
aside .aimg{
	float: left;
	width: 257px;
	height: 150px;
	margin: 10px 0 0 10px;
	border-radius: 5px;
}

/* 5. Sub Pages
----------------------------------------------------------*/
.PageLeft{
	float: left;
	width: 670px;
	min-height: 130px;
	padding: 15px;
	background: #f3f3f3 url(../images/page.png) no-repeat;
	border-radius: 5px;
}
.PageLeft a{
	color: #000;
	text-decoration: underline;
}
.PageLeft a:hover{
	text-decoration: none;
}
.PageLeft .title{
	float: left;
	width: 100%;
	margin: 0 0 15px 0;
	color: #033ca2;
	font-weight: bold;
	font-size: 18px;
}
.PageLeft article{
	float: left;
	line-height: 25px;
	color: #7a7a7a;
}

	/* 5a. Sub Pages -> Contact
	----------------------------------------------------------*/
	.maps{
		float: left;
		width: 675px;
		height: 190px;
	}
	.maps iframe{
		width: 675px;
		height: 150px;
	}
	.address{
		float: left;
		width: 675px;
		margin: 5px 0 5px 0;
	}

	
	.dialog {
		float: left;
		width: 555px;
		height: 60px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		margin-bottom: 20px;
		color:#ffffff;
	}
	.dialog h1{
		float: left;
		width: 85%;
		margin: 10px 0 5px 0;
	}
	.dialog p{
		float: left;
		width: 85%;
	}
	.dialog .icon {
		width: 34px;
		height: 34px;
		display: block;
		margin: 12px 14px 0px 14px;
		float:left;
	}
	.close {
		display:block;
		height:14px;
		width:14px;
		background:transparent url('../images/icon/close.png') no-repeat;
		position:relative;
		float:right;
		margin:5px 5px 0px 0px;
		cursor:pointer;
	}
	.success {
		background-color: #7f8f19;
		background-image: -moz-linear-gradient(top, #93A11F 0%, #6E8114 100%);
		background-image: linear-gradient(top, #93A11F 0%, #6E8114 100%);
		background-image: -o-linear-gradient(top, #93A11F 0%, #6E8114 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #93A11F), color-stop(1, #6E8114));
		background-image: -webkit-linear-gradient(top, #93A11F 0%, #6E8114 100%);
		background-image: -ms-linear-gradient(top, #93A11F 0%, #6E8114 100%);
		border-top: 1px solid #b9c22a;
	}
	.success .icon {
		background: transparent url('../images/icon/success.png') no-repeat;
	}
	
	.info {
		background-color: #ffc800;
		background-image: -moz-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
		background-image: linear-gradient(top, #ffcc00 0%, #ffb500 100%);
		background-image: -o-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffcc00), color-stop(1, #ffb500));
		background-image: -webkit-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
		background-image: -ms-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
		border-top: 1px solid #ffe300;
		color:#dd220d;
	}
	.info .icon {
		background: transparent url('../images/icon/info.png') no-repeat;
	}
	.info p {
		color:#000000;
	}
	.warning {
		background-color: #d61c0b;
		background-image: -moz-linear-gradient(top, #dc220d 0%, #d01609 100%);
		background-image: linear-gradient(top, #dc220d 0%, #d01609 100%);
		background-image: -o-linear-gradient(top, #dc220d 0%, #d01609 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dc220d), color-stop(1, #d01609));
		background-image: -webkit-linear-gradient(top, #dc220d 0%, #d01609 100%);
		background-image: -ms-linear-gradient(top, #dc220d 0%, #d01609 100%);
		border-top: 1px solid #ee3314;
	}
	.warning .icon {
		background: transparent url('../images/icon/warning.png') no-repeat;
	}









	#contact_form {
		float: left;
		width: 97%;
        margin: 4% 0 0 0;
	}
	#contact_form fieldset {
		float: left;
		width: 100%;
		margin-bottom: 10px;
	}
	#contact_form label {
		float: left;
		width: 170px;
	}
	#contact_form input {
		float: left;
		width: 57.5%;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}
	#contact_form .pcode {
		float: left;
		width: 40px;
		padding: 5px;
		margin-right: 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}
	#contact_form .pnumber {
		width: 303px;
	}
	#contact_form textarea {
		float: left;
		width: 57.5%;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}
	#contact_form .button {
		float: right;
		width: 100px;
		margin: 0 95px 0 0;
		cursor: pointer;
	}

	/* 5b. Sub Pages -> Referances
	----------------------------------------------------------*/
	.referances {
		float: left;
		width: 670px;
		color: #939393;
		border-collapse: collapse;
	}
	.referances tr:hover{
		background: #969696;
		color: #fff;
	}
	.col1 {
		width: 185px;
		height: 25px;
		padding-left: 10px;
		border: 1px solid #ced3dd;
	}
	.col2 {
		width: 160px;
		padding-left: 10px;
		border: 1px solid #ced3dd;
	}
	.col3{
		width: 330px;
		padding-left: 10px;
		border: 1px solid #ced3dd;
	}	
	.odd {
		background: #e2e2e3;
	}
	
	
	/* 5c. Sub Pages -> Technical
	----------------------------------------------------------*/
	.technical{
		float: left;
		width: 215px;
		margin: 0 6px 6px 0;
	}
	.technical .product-name{
		float: left;
		width: 100%;
		height: 25px;
		margin: 5px 0 0 0;
		color: #fff;
		text-align: center;
		line-height: 25px;
		text-decoration: none;
		background: #0044bd;
		border-radius: 5px;
	}
	.technical img{
		float: left;
		width: 215px;
		height: 120px;
		border-radius: 5px;
	}

	/* 5d. Sub Pages -> Product
	----------------------------------------------------------*/
	.thumb{
		float: left;
		width: 245px;
		height: 235px;
		border: 1px solid red;
	}
	.thumb img{
		width: 245px;
		height: 235px;
	}
	.product-info{
		float: left;
		width: 410px;
		height: 235px;
		margin: 0 0 0 10px;
	}
	.product-info strong{
		float: left;
		width: 100%;
	}	
	.product-info span{
		float: left;
		width: 100%;
		margin: 10px 0 0 0;
	}
	.sizes{
		float: left;
		width: 100%;
		margin: 10px 0 0 0;
	}
	.sizes strong{
		float: left;
		width: 100%;
		color: #7a7a7a;
	}
	.sizes strong img{
		float: left;
		width: 265px;
		height: 120px;
	}	
	.thumbs{
		float: left;
		width: 100%;
		margin: 10px 0 0 0;
	}
	.thumbs strong{
		float: left;
		width: 100%;
		margin-bottom: 10px;
		color: #7a7a7a;
	}
	.thumbs img{
		float: left;
		width: 105px;
		height: 95px;
		margin: 0 6px 6px 0;
	}



	#cats{
		float: left;
		width: 110%;
	}
	.categories{
		float: left;
		width: 210px;
		margin: 20px 20px 0 0;
		background: #c4eafc;	
		border-radius: 10px;
	}
	.categories:hover{
		background: #023fad;
	}
	.categories img{
		float: left;
		width: 181px;
		height: 100px;
		margin: 15px;
		border-radius: 10px;
	}
	.categories .cats{
		float: left;
		width: 85%;
		margin: 0 15px 15px 15px;
		font-size: 15px;
		text-align: center;	color: #000;
		text-decoration: none;
	}
	
	
	

/* 08. Fonts
----------------------------------------------------------*/
@font-face {
	font-family: 'MyriadPro-Regular';
	src: url('fonts/myriadpro-regular.eot');
	src: url('fonts/myriadpro-regular.eot?#iefix') format('embedded-opentype'), url('fonts/myriadpro-regular.woff') format('woff'), url('fonts/myriadpro-regular.ttf') format('truetype'), url('fonts/myriadpro-regular.svg#myriadpro-regular') format('svg');
	font-weight: normal;
	font-style: normal;
}


#gallery{
}
#gallery li{
	float: left;
	width: 200px;
	height: 200px;
	margin: 0 5px 5px 0;
}
#gallery li img{
	width: 200px;
	height: 200px;
	border-radius: 10px;
}


.product-b{
	float: left;
	width: 670px;
	margin: 0 0 20px 0;
}
.product-b img{
	float: left;
	width: 670px;
	margin: 0 0 20px 0;
}