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

.homepage_body {
 margin-top: 0px;
 padding-top: 0px;
}

#homepage_slideshow {
	position: relative;
	width: 960px;
	height: 382px;
}

#homepage_slideshow_button {
	position: relative;
	width: 960px;
	height: 51px;
}

#homepage_spot1 {
	position: absolute;
	left: 0px;
}

#homepage_spot2 {
	position: absolute;
	left: 242px;
}

#homepage_spot3 {
	position: absolute;
	left: 484px;
}

#homepage_spot4 {
	position: absolute;
	left: 726px;
}

.homepage_footer {
	position:relative;
	top:250px;
	color:#333;
	font-family:arial,tahoma,sans-serif;
	font-size:11px;
	font-weight:normal;
	letter-spacing:1px;
	background:url("../images/site/subpage/services_dots.png") repeat-x top transparent;
	width:960px;;
}

img.footer_flag {
	position:relative;
	top:4px;
	padding-left:2px;
}

p.footer {
	padding-top:10px;
}

p.footer a:link, a:visited {
	color:#DB0048;
	text-decoration:none;
}

p.footer a:hover, a:active {
	text-decoration:underline;
}

/* CSS common in all subpages starts here */

a:link img, a:visited img, a:hover img, a:active img {
	border:0px;
}

#menu_item {
 margin-bottom:10px;
}

#subpage_bg {
 top: 0px;
 position: absolute;
 width:960px;
}

#subpage_main_box {
 position: relative;
 top: 14px;
 width: 960px;
}

#portfolyo_detay_main_box {
 position: relative;
 top: 14px;
 left: -7px;
 width: 960px;
}

img#float_left { 
    float: left; 
    margin-right: 20px;
	margin-top: -10px; /* This lifts the IMG 10px higher than the text. */
	margin-bottom: 10px;
}
img#float_right { 
    float: right; 
    margin-left: 20px;
	margin-top: -10px; /* This lifts the IMG 10px higher than the text. */
	margin-bottom: 10px;
}

a.thumbs_opacity:link img { 
 border:1px solid #EFEFEF;
 padding:3px 3px 3px 3px;
 width:92px;
 margin-right:-2px;
 filter:alpha(opacity=50); 
 -moz-opacity: 0.5; 
 opacity: 0.5;
 }
 
 #subpage_menu_factsheet {
 position: absolute;
 top: -3px;
 left: 727px;
 width:232px;
 height:300px;
}

/* CSS common in all subpages ends here */

/* Portfolio Detail CSS starts here */

#portfolyo_detay_prevnext_pos {
 position:absolute;
 top: 200px;
 width:409px;
 }
 
 #portfolyo_detay_large_pos {
 position: absolute;
 top: 24px;
 left: 0px;
 border: 1px solid #EFEFEF; /* This border overrides the frameborder="0" inside the iframe for Firefox */
 padding:3px;
 }
 
 #portfolyo_detay_large_pos2 {
 position: relative;
 top: 14px;
 left: 0px;
 border: 1px solid #EFEFEF; /* This border overrides the frameborder="0" inside the iframe for Firefox */
 padding-left:30px;
 padding-top:3px;
 padding-bottom:3px;
 text-align:center;
 }


 #portfolyo_detay_thumbs_pos {
 position: absolute;
 top: 327px;
 width:409px;
 }

a.thumbs_opacity:link img { 
 border:1px solid #EFEFEF;
 padding:3px 3px 3px 3px;
 width:92px;
 margin-right:-2px;
 filter:alpha(opacity=50); 
 -moz-opacity: 0.5; 
 opacity: 0.5;
 }
 
 a.thumbs_opacity:visited img { 
 border:1px solid #EFEFEF;
 padding:3px 3px 3px 3px;
 width:92px;
 margin-right:-2px;
 filter:alpha(opacity=100); 
 -moz-opacity: 1; 
 opacity: 1;
 }

a.thumbs_opacity:hover img {
 border:1px solid #EFEFEF;
 padding:3px 3px 3px 3px;
 width:92px;
 margin-right:-2px; /* These offset the default margins between images. */
 filter:alpha(opacity=100); 
 -moz-opacity: 1; 
 opacity: 1;
 }
 
 a.thumbs_opacity:active img {     /* "Active" is not "You are Here". It means "While loading the link, show this." */
 border:1px solid #EFEFEF;
 padding:3px 3px 3px 3px;
 width:92px;
 margin-right:-2px; /* These offset the default margins between images. */
 filter:alpha(opacity=100); 
 -moz-opacity: 1; 
 opacity: 1;
 }
 
 #portfolyo_detay_reference_dots_bottom_pos {
    bottom:3px;
	left:530px;
	position: absolute;
	width:368px;
	background:url(../images/site/subpage/portfolio_dots.png) repeat-x bottom;
	padding-bottom:1px; /* Without padding, the dots will not appear. */
 }
 
 #portfolyo_detay_reference_pos {
 position: absolute;
 bottom: 10px;
 width:368px;
 }
 
 #portfolyo_detay_reference_dots_top_pos {
	position: absolute;
	top:-10px;
	width:368px;
	background:url(../images/site/subpage/portfolio_dots.png) repeat-x top;
    padding-top:1px;
 }

#portfolyo_detay_content_pos {
 position: absolute;
 top: 28px;
 left: 463px;
 width:463px;
 }
 
 /* Portfolio Detail CSS ends here */
 
 
 /* Hizmetler CSS starts here */
 
 #subpage_hizmetler_tumu_box {
	position: absolute;
	top:220px;
	left:0px;
	width:913px;
 }
 
  /* Hizmetler CSS ends here */


 /* Case Study Details CSS starts here */
 
#casestudy_details_main_box {
	position:absolute;
	top:185px;
	left:0px;
	width:438px;
 }
 
#casestudy_details_pic_pos {
	position:absolute;
	top:230px;
	right:0px;
	border: 1px solid #EFEFEF; /* This border overrides the frameborder="0" inside the iframe for Firefox */
	padding:3px;
 }
 
  /* Case Study Details CSS ends here */
 
 
  /* Case Study Overview CSS starts here */
 
#casestudy_overview_main_pos {
	position:relative; /* Relative position means, "From where it would normally start". So it's logical to say start after 30 px from the last menu item. But the last menu item has a td height of 24. So even if you were to set it as "top:0px" there is some space. */
	top:26px; 
	left:0px;
	width:932px;
 }
 
#casetudy_overview_box_pos {
	background-image: url(../images/site/subpage/casestudy_overview_box.png);
	width:206px;
	height:354px;
}

#casetudy_overview_logo { /* IMPORTANT: Slice the logos from their dots so you get a consistent widhth and height for each logo, and so that the dots can be overlayed to get accurate positioning. */
	position:relative; /* IMPORTANT: Position must be set as relative, otherwise, when copying/pasting the div inside multiple table data, all of the logos will be left at one place, on top of each other. */
	top:0px;
	left:2px;
}
 
  /* Case Study Overview CSS ends here */


  /* Portfolio Overview CSS starts here */

 #portfolio_overview_box_pos {
	background-image: url(../images/site/subpage/portfolio_overview_box.png);
	width:206px;
	height:354px;
}
 
#portfolio_overview_logo { /* IMPORTANT: Slice the logos from their dots so you get a consistent widhth and height for each logo, and so that the dots can be overlayed to get accurate positioning. */
	position:relative; /* IMPORTANT: Position must be set as relative, otherwise, when copying/pasting the div inside multiple table data, all of the logos will be left at one place, on top of each other. */
	top:1px;
	left:15px;
}
 
#portfolio_overview_thumbnail {
	position:relative;
	top:17px;
}

/* CONTACT FORM BEGINS HERE */

em { 
	font-family: arial, tahoma, sans-serif;
	letter-spacing: 1px;
	color: #DE2562; 
	font-weight: normal;
}

#contact_form_container  {
	position:absolute; /* This begins 184px down from where it writes cemgoknil.com */
	top:184px;
	left:0px;
	font-family: arial, tahoma, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	color: #333333; 
	font-weight: normal;
}

#contact_form_container_english  {
	position:absolute; /* This begins 184px down from where it writes cemgoknil.com */
	top:206px;
	left:0px;
	font-family: arial, tahoma, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	color: #333333; 
	font-weight: normal;
}

#contact_form_information  { 
	position:absolute; /* If the position had been set relative, there would be a natural linebreak with the new div. Therefore, the position is set as absolute, so that the text begins exactly 204px down from where it writes cemgoknil.com */
	top:0px;
	left:0px;
	width:898px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	color: #747474; 
	font-weight: normal;
}

.mailto_style { 
	color: #000000; 
	font-weight: normal;
}

.mailto_style:hover { 
	color: #DE2562; 
	font-weight: normal;
}


/* The FONTS of contact form fields and contact form field titles are INHERITED from contact_form_container */

#adiniz_container {
	position:relative; /* This is set relative to contact_form_information, meaning it begins 56px after contact_form_information. */
	left:0px;
	top:86px;
}

.adiniz_title  {
	position:relative;
	display:block; /* This makes title, input and textarea appear as a BLOCK element. Without this property, the inputbox would be placed next to the title rather than under it. */
}

.adiniz_box input, .adiniz_box textarea  {
	position:relative;
	top:4px;
	background:url(../images/site/iletisim/adiniz.png) no-repeat;
	border:none;
	width:429px;
	height:20px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px; /* This property clears the line-height property set for mesajiniz_box. */	
	color: #333333;
	letter-spacing: 1px;
	font-weight: normal;
	padding-top:4px;
	padding-left:3px;
}

.adiniz_box input:focus { /* Because input is used (in html), here input:focus is used */
	background:url(../images/site/iletisim/adiniz_on.png) no-repeat;
}

#epostaniz_container {
	position:relative;
	top:48px; /* The strange number is caused by relative positioning of div containers. Top:0 for this container means, first place the previous container at top:0, THEN position this container relatively at 0, leaving a 21px difference in heights. */
	left:469px;
}

.epostaniz_title  {
	position:relative;
	display:block;
}

.epostaniz_box input, .epostaniz_box textarea  {
	position:relative;
	top:4px;	
	left:0px;
	background:url(../images/site/iletisim/adiniz.png) no-repeat;
	border:none;
	width:429px;
	height:20px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px; /* This property clears the line-height property set for mesajiniz_box. */	
	color: #333333;
	letter-spacing: 1px;
	font-weight: normal;
	padding-top:4px;
	padding-left:3px;
}

.epostaniz_box input:focus {
	background:url(../images/site/iletisim/adiniz_on.png) no-repeat;
}

#sirketiniz_container {
	position:relative;
	left:0px;
	top:60px;
}

.sirketiniz_title  {
	position:relative;
	display:block;
}

.sirketiniz_box input, .sirketiniz_box textarea  {
	position:relative;
	top:4px;
	background:url(../images/site/iletisim/adiniz.png) no-repeat;
	border:none;
	width:429px;
	height:20px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px; /* This property clears the line-height property set for mesajiniz_box. */	
	color: #333333;
	letter-spacing: 1px;
	font-weight: normal;
	padding-top:4px;
	padding-left:3px;
}

.sirketiniz_box input:focus {
	background:url(../images/site/iletisim/adiniz_on.png) no-repeat;
}

#websiteniz_container {
	position:relative;
	top:21px;
	left:469px;
}

.websiteniz_title  {
	position:relative;
	display:block;
}

.websiteniz_box input, .websiteniz_box textarea  {
	position:relative;
	top:4px;	
	left:0px;
	background:url(../images/site/iletisim/adiniz.png) no-repeat;
	border:none;
	width:429px;
	height:20px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px; /* This property clears the line-height property set for mesajiniz_box. */	
	color: #333333;
	letter-spacing: 1px;
	font-weight: normal;
	padding-top:4px;
	padding-left:3px;
}

.websiteniz_box input:focus {
	background:url(../images/site/iletisim/adiniz_on.png) no-repeat;
}

#mesajiniz_container {
	position:relative;
	left:0px;
	top:33px;
}

.mesajiniz_title  {
	position:relative;
	display:block;
}

#mesajiniz_box_outline  {
	position:relative;
	top:4px;
	left:0px;
	border: 1px solid #CECECE;
	width:897px;
	height:179px;
}

.mesajiniz_box input, .mesajiniz_box textarea  {
	position:relative;
	top:-1px;
	left:-1px;
	border: 1px solid #000000;
	background:url(../images/site/iletisim/mesajiniz_dots.png) repeat-y top;
	border:none;
	width:897px;
	height:176px;
	padding-left:3px; /* This padding defines where the text begins inside its box. */
	padding-top:1px;
	padding-bottom:2px;
	font-family: arial, tahoma, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	color: #333333; 
	font-weight: normal;
	line-height:25px;
}

.mesajiniz_box textarea:focus { /* Because textarea is used (in html), here textarea:focus is used */
	background:url(../images/site/iletisim/mesajiniz_dots_on.png) repeat-y top;
}

#submit_container {
	position:relative;
	left:0px;
	top:47px;
}

.submit_button  {
	cursor:pointer;
	clear: both;
	position:relative;
	top:4px;
	left:0px;
	background:url(../images/site/iletisim/gonder.png) no-repeat;
	border:none;
	width:127px;
	height:20px;
}

#mytest  {
color:#FF0000;
}

/* CONTACT FORM ENDS HERE */

#akademik_test {
	float:right;
}

#akademik_test_left {
	float:left;
}

.img_akademik_right {
	border: 1px solid #CCC;
	padding:3px;
	margin-left:14px;
	margin-bottom:8px;
}

.img_akademik_left {
	border: 1px solid #ccc;
	padding:3px;
	margin-right:14px;
	margin-bottom:8px;
}

/* MEKTUPLAR BEGINS HERE */

.mektuplar {
	background:url(../images/site/subpage/mektuplar_bg.png) no-repeat;
	padding:11px 0 0px 13px;
	width:200px;
	height:330px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
}

.mektuplar img {
	height:260px;
	}

.mektuplar span {
	color:#464646;
	font-size:11px;
}