.trnPanel
{
	/*
	width:70%;
	height:70%;
	position:absolute;
	left:15%;
	top:15%;
	*/
	
	width:90%;
	height:80%;
	position:absolute;
	left:5%;
	top:10%;	
	
	z-index:996;
	overflow: hidden;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	
	
	/*yatay-konum, dikay-konum, bulanıklık,yayılma,renk*/
	-webkit-box-shadow: 0 1px 10px #333;
	-moz-box-shadow: 0 1px 10px #333;
	box-shadow: 0 1px 10px #333;
}

.trnPanel .trnPanelHeader
{
	width:100%;
	height:75px;
	position:absolute;
	top:0;
	z-index:920;
	background-color:white;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader
{
	width:100%;
	height:35px;
	color:#000;	
	font-size:12px;
	background-color:white;	
	cursor:move;
	border-bottom:5px solid #CCCCCC;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelTitle
{
	width:auto;
	height:35px;
	line-height:35px;
	padding-left:5px;
	float:left;
	font-size:12px;
	font-weight:bold;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav
{
	width:auto;
	float:right;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnHiddenPanelBtn
{
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
	margin:0;
	padding:0;
	color:#666;
	background-color:transparent;
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnHiddenPanelBtn i
{
	font-size:14px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnClosePanelBtn
{
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
	margin:0 10px 0 10px;
	padding:0;
	color:red;
	background-color:transparent;
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnClosePanelBtn i
{
	font-size:14px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnRestorePanelBtn
{
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#666;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnRestorePanelBtn i
{
	font-size:14px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignLeftPanelBtn
{
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#666;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignLeftPanelBtn i
{
	font-size:14px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignRightPanelBtn
{
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
	margin:0 0 0 10px;
	padding:0;
	color:#666;
	background-color:transparent;	
	border:none;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav .trnAlignRightPanelBtn i
{
	font-size:14px;
}

.trnPanel .trnPanelHeader .trnPanelTopHeader .trnPanelHeaderNav button:hover
{
	color:#FFF;
	background-color:#666;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent
{
	height:40px;
	color:#666;
	border-bottom:3px solid #EEE;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelTitle
{
	width:auto;
	height:40px;
	float:left;
	padding-left:15px;
	font-size:14px;
	font-weight:bold;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelTitle label
{
	width:auto;
	height:40px;
	line-height:40px;
	float:left;
	font-size:18px;
	margin: 0 0 0 10px;
	padding: 0;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelTitle i
{
	width:auto;
	height:40px;
	line-height:40px;
	float:left;
	font-size:24px;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelFilter
{
	width:auto;
	height:40px;
	float:right;
	padding-left:15px;
	font-size:14px;
	font-weight:bold;
	display:none;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelFilter span
{
	width:auto;
	height:40px;
	line-height:40px;
	float:left;
	font-size:18px;
	margin: 0 10px 0 10px;
	padding: 0;
}

.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelFilter i
{
	width:auto;
	height:40px;
	line-height:40px;
	float:left;
	font-size:24px;
	color:#CCCCCC;
}

.trnPanel .trnPanelContent
{
	width:100%;
	height:100%;
	position:absolute;
	z-index:900;
	color:#666;
	background-color:white;	
}

.trnPanel .trnPanelContent .trnScrollContainer
{
	width:100%;
	height:100%;
	padding:75px 0 0 0;
	position:absolute;
	overflow:hidden;
}

.trnPanel .trnPanelContent .trnScroll
{
	width:100%;
	height:100%;
	overflow-y: auto;
}

.trnPanel .trnPanelContent .trnScroll .trnBtn
{
	float:left;
}

.trnPanel .trnPanelContent .trnShowFooter
{
	width:100%;
	height:100%;
	padding:75px 0 40px 0;
	position:absolute;
	overflow:hidden;
}


.trnPanel .trnPanelContent .panelFooter
{
	width:100%;
	height:40px;
	position:absolute;
	right:0;
	bottom:0;
	z-index:5;
	background-color:#EEE;
	color:#000;
}

.panelFooter label
{
	width:auto;
	height:40px;
	line-height:40px;
}

.trnPanel .trnPanelContent .panelFooter ul
{
	width:auto;
	height:40px;
	padding:5px;
	margin:0;
	list-style:none;
	float:right;
}

.trnPanel .trnPanelContent .panelFooter ul li
{
	width:auto;
	height:30px;
	line-height:30px;
	padding:0;
	margin:0 0 0 5px;
	list-style:none;
	float:left;
	cursor:pointer;
}

.trnPanel .trnPanelContent .panelFooter ul li button
{
	width:auto;
	height:30px;
	line-height:30px;
	padding:0 8px 0 8px;
	border:none;
}

.trnPanel .trnPanelContent .panelFooter input
{
	height:30px;
	line-height:30px;
	padding:0 8px 0 8px;
	margin:5px;
	border:none;
	color:#7F8796;
}

.trnPanel .trnPanelContent .panelFooter input:focus
{
	outline:none !important;
}

.trnPanel .trnPanelContent .panelFooter ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #7F8796;
}
.trnPanel .trnPanelContent .panelFooter ::-moz-placeholder { /* Firefox 19+ */
	color: #7F8796;
}
.trnPanel .trnPanelContent .panelFooter :-ms-input-placeholder { /* IE 10+ */
	color: #7F8796;
}
.trnPanel .trnPanelContent .panelFooter :-moz-placeholder { /* Firefox 18- */
	color: #7F8796;
}




.trnPanel .trnPanelContent .w5
{
	width:5%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w10
{
	width:10%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w15
{
	width:15%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w20
{
	width:20%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w25
{
	width:25%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w30
{
	width:30%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w35
{
	width:35%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w40
{
	width:40%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w45
{
	width:45%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#CCC;
	color:#666;
}

.trnPanel .trnPanelContent .w50
{
	width:50%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w55
{
	width:55%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w60
{
	width:60%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w65
{
	width:65%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w70
{
	width:70%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w75
{
	width:75%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w80
{
	width:80%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w85
{
	width:85%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w90
{
	width:90%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w95
{
	width:95%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .w100
{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .ls5
{
	left:5%;
}

.trnPanel .trnPanelContent .ls10
{
	left:10%;
}

.trnPanel .trnPanelContent .ls15
{
	left:15%;
}

.trnPanel .trnPanelContent .ls20
{
	left:20%;
}

.trnPanel .trnPanelContent .ls25
{
	left:25%;
}

.trnPanel .trnPanelContent .ls30
{
	left:30%;
}

.trnPanel .trnPanelContent .ls35
{
	left:35%;
}

.trnPanel .trnPanelContent .ls40
{
	left:40%;
}

.trnPanel .trnPanelContent .ls45
{
	left:45%;
}

.trnPanel .trnPanelContent .ls50
{
	left:50%;
}

.trnPanel .trnPanelContent .ls55
{
	left:55%;
}

.trnPanel .trnPanelContent .ls60
{
	left:60%;
}

.trnPanel .trnPanelContent .ls65
{
	left:65%;
}

.trnPanel .trnPanelContent .ls70
{
	left:70%;
}

.trnPanel .trnPanelContent .ls75
{
	left:75%;
}

.trnPanel .trnPanelContent .ls80
{
	left:80%;
}

.trnPanel .trnPanelContent .ls85
{
	left:85%;
}

.trnPanel .trnPanelContent .ls90
{
	left:90%;
}

.trnPanel .trnPanelContent .ls95
{
	left:95%;
}

.trnPanel .trnPanelContent .ls100
{
	left:100%;
}

.trnPanel .trnPanelContent .trnPanelIframe
{
	width: 100%;
	height: 100%;
	padding-top:75px;
	border: none;
}

.trnPanel .trnPanelContent iframe
{
	width: 100%;
	height: 100%;
	border: none;
}

.trnPanel .trnPanelContent .trnLeftContent
{
	width:20%;
	height:100%;
	position:absolute;
	padding:90px 0;
	left:0;
	overflow-y: auto;
	background-color:#CCCCCC;
	color:#FFF;
}

.trnPanel .trnPanelContent .trnRightContent
{
	width:80%;
	height:100%;
	position:absolute;
	right:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

.trnPanel .trnPanelContent .trnRightContent .trnScrollContainer
{
	width:100%;
	height:100%;
	padding:75px 0 0 0;
	position:absolute;
	overflow:hidden;
}

.trnPanel .trnPanelContent .trnRightContent .trnScroll
{
	width:100%;
	height:100%;
	overflow-y: auto;
	background-color:#FFF;
}

.trnPanel .trnPanelContent .trnRightContent .trnShowFooter
{
	padding:75px 0 40px 0;
}


.trnPanel .trnPanelContent .trnRightContent .panelFooter
{
	width:100%;
	height:40px;
	position:absolute;
	right:0;
	bottom:0;
	z-index:5;
	background-color:#EEE;
	color:#000;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter ul
{
	width:auto;
	height:40px;
	padding:5px;
	margin:0;
	list-style:none;
	float:right;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter ul li
{
	width:auto;
	height:30px;
	line-height:30px;
	padding:0;
	margin:0 0 0 5px;
	list-style:none;
	float:left;
	cursor:pointer;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter ul li button
{
	width:auto;
	height:30px;
	line-height:30px;
	padding:0 8px 0 8px;
	border:none;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter input
{
	height:30px;
	line-height:30px;
	padding:0 8px 0 8px;
	margin:5px;
	border:none;
	color:#7F8796;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter input:focus
{
	outline:none !important;
}

.trnPanel .trnPanelContent .trnRightContent .panelFooter ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #7F8796;
}
.trnPanel .trnPanelContent .trnRightContent .panelFooter ::-moz-placeholder { /* Firefox 19+ */
	color: #7F8796;
}
.trnPanel .trnPanelContent .trnRightContent .panelFooter :-ms-input-placeholder { /* IE 10+ */
	color: #7F8796;
}
.trnPanel .trnPanelContent .trnRightContent .panelFooter :-moz-placeholder { /* Firefox 18- */
	color: #7F8796;
}

.trnPanel .trnPanelContent .trnFullContent
{
	width:100%;
	height:100%;
	position:absolute;
	right:0;
	overflow: hidden;
	background-color:#FFF;
	color:#666;
}

@media only screen and (max-width: 1024px),(min-device-width: 768px) and (max-device-width: 1024px)
{
	.trnPanel
	{
		width:100%;
		height:100%;
		position:absolute;
		left:0%;
		top:42px;
		z-index:999;
		overflow: hidden;
	}
	
	.trnPanel .trnPanelHeader .trnPanelHeaderContent .trnPanelFilter
	{
		display:block;
	}
	
	
	.trnPanel .trnPanelContent .trnLeftContent
	{
		width:100%;
		height:100%;
		position:relative;
		float:left;
		overflow-y: auto;
		background-color:#CCCCCC;
		color:#FFF;
		display:none;
	}

	.trnPanel .trnPanelContent .trnRightContent
	{
		width:100%;
		height:100%;
		position:relative;
		float:right;
		overflow-y: auto;
		background-color:#FFF;
		color:#666;
	}	
	
}


.trnMediaCenter .mediaSelectButton
{
	width:100%;
	height:200px;
	padding:10px;
	text-align:center;
	background-color:#EDF2F6;
	border:3px solid #EEEEEE;
}

.trnMediaCenter .mediaSelectButton figure
{
	width:100%;
	height:100px;
	line-height:100px;
}

.trnMediaCenter .mediaSelectButton figure img
{
	max-height:100px;
	max-width:100%;
}

.trnMediaCenter .mediaSelectButton figure .frontText
{
	max-width:100%;
	height:100px;
	line-height:100px;
	font-size:32px;
}

.trnMediaCenter .trnActive
{
	border:3px solid #F00;
}

.trnMediaCenterReturn 
{
	width:100%;
	text-align:center;
}

.trnMediaCenterReturn  img
{
	max-width:100%;
	max-height:200px;
}

.trnRemoveItem
{
	width:20px;
	height:20px;
	position:absolute;
	right:0;
	line-height:20px;
	text-align:center;
	font-size:12px;
	background-color:red;
	color:#FFF;
	cursor:pointer;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;			
}

.trnRemoveItem:hover
{
	color:#FFF;
	background-color:gray;
}

.trnDeleteItem
{
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	line-height:20px;
	text-align:center;
	font-size:12px;
	background-color:red;
	color:#FFF;
	cursor:pointer;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;			
}

.trnDeleteItem:hover
{
	color:#FFF;
	background-color:gray;
}

.trnPictureResult
{
	width:100%;
	height:130px;
	line-height:130px;
	text-align:center;
	background-color:#EEF0F1;
	border:1px solid #CCC;
	font-size:18px;
}

.trnPictureResult img
{
	max-width:100%;
	max-height:100%;
}

.trnPictureResult i
{
	font-size:18px;
}

.trnPictureResult .frontText
{
	max-width:100%;
	height:130px;
	line-height:130px;
	font-size:32px;
}

.trnAddObject
{
	width:100%;
	height:130px;
	padding:35px 0 35px 0;
	text-align:center;
	background-color:#EEF0F1;
	border:1px solid #CCC;
	font-size:18px;
}

.trnAddObject div
{
	height:30px;
	line-height:30px;
}

.trnAddObject i
{
	font-size:28px;
}

.trnObjectList
{
	width:100%;
	height:130px;
	text-align:center;
	background-color:#EEF0F1;
	border:1px solid #CCC;
	font-size:12px;
}

.trnObjectList div
{
	height:30px;
	line-height:30px;
	background-color:#CCC;
}

.trnObjectList img
{
	max-width:100%;
	height:100px;
}

.trnObjectList .frontText
{
	max-width:100%;
	height:100px;
	line-height:100px;
	font-size:32px;
}

.trnIconResult
{
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	background-color:#EEF0F1;
	border:1px solid #CCC;
}

.trnIconResult img
{
	max-width:100%;
	max-height:100%;
}

.trnFormElementContainer
{
	width:100%;
	height:300px;
	padding:5px;
	border:1px solid #CCC;
}

.trnFormElementContainer .trnFormElementScroll
{
	width:100%;
	height:100%;
	overflow-y: auto;
}