@charset "utf-8";

/* CSS Document */



/* common styling */



a {

	color:#000;

}

a:hover {

	text-decoration:none;

}

/*a:visited {

	color:#111;

}*/



/* >>>>>>>>>>  ONLY ADD THIS PART TO THE FILE ATT_IMAGES.CSS  <<<<<<<<<< */

/* ======================================= Ramy start */



.hope {

	float:left;

	clear:both;

	/*border:dashed;*/

	/*height:170px;*/

	width:600px;

	margin-bottom: 30px;

}

.opImg {

	float:right;

	width:50px;

	margin:10px;

}

.opImg img {

	border: 1px solid #666;

}



.hideMe{

display:none

}



.chosen{

	border: 1px solid #666666;

	float:left;

	width:70px;

	height:80px;

	margin-bottom: 50px;

	margin-left: 30px;

	margin-top: 10px;

	background-color: #CCCCCC;

	text-align: center;

	color: #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	font-weight: bold;

	}

	

.opTitle {

	display:block;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #333;

	clear:both;

	width:auto;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #333;

	font-weight: bold;
	direction:rtl;
	text-align:right;

}

/* ====================================== Ramy stop */



.photo {

	width:420px;

	text-align:left;

	position:relative;

}

.photo ul.topic {

	padding:0;

	margin:0;

	list-style:none;

	width:450px;

	height:auto;

	position:relative;

	z-index:10;

}

/* the following: width and height changes the tab width and height*/

.photo ul.topic li {

	display:block;

	width:120px;

	height:31px;

	float:left;

}

.photo ul.topic li a.set {

	display:block;

	font-size:11px;

	width:120px;

	height:30px;

	text-align:center;

	line-height:30px;

	color:#000;

	text-decoration:none;

	border:1px solid #fff;

	border-width:1px 1px 0 0;

	background:#ccc;

	font-family:verdana, arial, sans-serif;

}

.photo ul.topic li, .photo ul.topic li a {

	color:#fff;

	background:#aaa;

}

/* changes the container height and width, and the padding will change internal distance of thumbnails from container */

.photo ul.topic li a ul, .photo ul.topic li ul {

	display:block;

	/*position:relative;*/

	left:0;

	top:31px;

	list-style:none;

	padding:0;

	margin:0;

	height:95px;

	background:#ddd url(lbox/close.gif) no-repeat right top;

	width:450px;

	padding:10px 10px;

	border:2px solid #aaa;

}

}

/*changes each thumbnail container parameters, H & W should be larger with 2px than the following group dimensions*/

.photo ul.topic li a ul li, .photo ul.topic li ul li {

/*	display:inline;*/

	display:block  width:62px;

	height:97px;

	float:left;

	border:1px solid #fff;

	margin:4px;

}

/*changes width and height of thumbnails (internally) H & W should be larger with 10px than the following group dimensions*/

.photo ul.topic li a ul li a, .photo ul.topic li ul li a {

	display:block;

	width:60px;

	height:65px;

	cursor:default;

	float:left;

	text-decoration:none;

	background:#444;

	border:1px solid #888;

}

/*changes the internal border of the image*/

.photo ul.topic li a ul li a img, .photo ul.topic li ul li a img {

	display:block;

	width:50px;

	height:55px;

	border:5px solid #eee;

}