@charset "utf-8";
/* CSS Document */

body {
	margin: 0px;
	background:url(images/bg.jpg) no-repeat top #163D66;
}


img { border:none; 0}

h1, h2  {margin:0; padding: 0; }


.right { float:right; margin-left:10px; position:relative; }

.left { float:left; margin-right: 10px; position:relative; }

.de a { background:url(images/de.jpg) no-repeat left center;}
.de a:hover { background:url(images/de.jpg) no-repeat left center;}

.is a { background:url(images/is.jpg) no-repeat left center;}
.is a:hover { background:url(images/is.jpg) no-repeat left center;}

/* =-=-=-=-=-=-=-[Menu Seven]-=-=-=-=-=-=-=- */
	
#menu7 {
	width: 180px;
	}

#menu7 ul { list-style: none;
	margin: 0;
	padding: 0;
	}

	
#menu7 li a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 22px;
	text-decoration: none;
	color: #fff;
	}	
	
#menu7 li a:link, #menu7 li a:visited {
	color: #fff;
	display: block;
	padding: 10px 0 0 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	
	}
	
#menu7 li a:hover {
	color: #fff;
	padding: 10px 0 0 10px;
	text-decoration:underline;
	}
	
#menu7 li a:active {
	color: #fff;
	padding: 10px 0 0 10px;
	}

/* end menu 7 */	

#box2 {
	position: absolute;
	width:520px;
	padding:10px;
	left: 181px;
	top: 200px;
	color: white;
	font: 13px Georgia, "Times New Roman", Times, serif;
	line-height: normal;
}

#box2 a, active, visited { color:#000000; font: 11px Tahoma, Arial;  }


#apdiv {
position:absolute;
top:0;left:0;bottom:0;
width:540px;
background:#fff;
border:1px solid #000;
opacity:.2; /* FX/Opera/Safari/Chrome */
-ms-filter:"alpha(opacity=20)"; /* IE8 */
filter:alpha(opacity=20); /* IE6/IE7 */
}

* html #apdiv{height:expression(this.parentNode.offsetHeight);}

#box2 p, #box2 h1, img, ol, li, a, div, td {
position:relative; margin:0;
}

.title { font-size:28px; position:relative; font-weight:normal; }



.cesit {
	color:#fff;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
}


/* Acoordion menu */
.glossymenu{
	margin: 5px 0;
	padding: 0;
	width: 200px;
	border-bottom-width: 0;
}

.glossymenu a.menuitem{
font: bold 11px Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding:0;
padding-left: 10px;
height: 30px;
line-height:30px;
text-decoration:none;
background:url(images/bg.png);
margin:2px 0;

}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background: #000;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: url(images/bg.png);
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 11px Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 5px 0 5px 20px;

}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;

}


/* end accordion */

.text1  {font: 14px Georgia, "Times New Roman", Times, serif; line-height: 16px; color:#FFFFFF;  }

#content {
	margin: 0 auto;
	position:relative;
	width: 950px;
	height: 900px;

}

#logo {
	position:absolute;
	background:url(images/logo.png) no-repeat;
	left: 339px;
	top: 33px;
	width:244px;
	height: 110px;
}

#logo h1  { text-indent: -1200px; }

#slogan  {
	position:absolute;
	left: 354px;
	top: 131px;
	width: 223px;
	height: 32px;
}

#slogan h2 { font-family: Georgia, "Times New Roman", Times, serif; font-style:italic; font-size: 22px; color:#FFFFFF; font-weight:normal; }

#menud  {
	position:absolute;
	left: 0px;
	top: 200px;
	width: 180px;
	height: 420px;
}

#main_image  {
	position:absolute;
	width:540px;
	top: 571px;
	padding: 10px;
	background: #fff;
	left: 183px;
	border:1px solid black;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	z-index:10;

}

#main_image p
  {
  font-weight:bold;
  color:#000000;
  	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
	z-index:100;

  }


#siparis  {
	position:absolute;
	right: 0px;
	top: 755px;
}

#menu_cont {
	position:absolute;
	right: 0px;
	top: 204px;
	width: 200px;
	height: 83px;
}

#menu {
	font-family: Arial, sans-serif;
	font-weight: bold;
	margin: 50px 0;
	padding: 0 0 0 10px;
	list-style-type: none;
	font-size: 13px;
	height: 40px;
}

#menu li {
	float: left;
	margin: 0;
	
}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 0 20px;
	line-height: 40px;
	color: #666;
}
#menu li a:hover, #menu li.active a {
	background-color: #f5f5f5;
	border-bottom: 2px solid #DDD;
	color: #999;
}

/* Blue Menu */
#menu.blue {
	
}
#menu.blue a {color: #fff; background: #3D7BBB url(images/menubg.gif) repeat-x; border-right: 1px solid #0066FF;}
#menu.blue li a:hover, #menu.blue li.active a {color: #90CDFF; background: #000000; border-bottom: 2px solid #356AA0;}

#navi {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 420px;
	position: relative;
}
#navi span {
	display: none;
	position: absolute;
}

#navi a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
	cursor: pointer;
}

#navi a:hover {
	background-position: left bottom;
}

#navi a:hover span{
	display: block;
}


#navi .about {
	width: 200px;
	height: 68px;
	background: url(images/btn1.png) no-repeat;
	left: 42px;
	top: -5px;
	
}


#navi .urun {
	width: 200px;
	height: 68px;
	background: url(images/btn2.png) no-repeat;
	left: 2px;
	top: 65px;
}


#navi .sabun {
	width: 200px;
	height: 68px;
	background: url(images/btn3.png) no-repeat;
	left: 42px;
	top: 134px;
	
}


#navi .atolye {
	width: 200px;
	height: 68px;
	background: url(images/btn4.png) no-repeat;
	left: 2px;
	top: 204px;
}


#navi .referans {
	width: 200px;
	height: 68px;
	background: url(images/btn5.png) no-repeat;
	left: 42px;
	top: 275px;
	
}

#navi .gokceada {
	width: 200px;
	height: 68px;
	background: url(images/btn6.png) no-repeat;
	left: 2px;
	top: 346px;
}

#social { padding:10px; }

#social img { padding-left:10px; }





/*--------------------------------------------------
  TABS
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 0px solid #778;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 2px;
 border: 0px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 0px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
 border-bottom: 0px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:0px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}