@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.flat {
  background-image: none;
  box-shadow: none;
  border: none;
  text-shadow: none
  opacity: .8;
}

.social_user{
  border:1px solid #aaa;
  -moz-box-shadow: 0 0 2px #888;
  -webkit-box-shadow: 0 0 2px#888;
  box-shadow: 0 0 2px #888;
}

.social_info{
/*margin-top:-20px;*/
text-shadow:0 1px 1px #fff;
font:bold 50px tahoma;
}

#facebook_user{position:absolute; bottom:-27px; left:23px;}
#twitter_user{position:absolute; bottom:5px; left:5px;}
#linkedin_user{position:absolute; bottom:5px; left:5px;}
#youtube_user{position:absolute; bottom:5px; left:5px;}
#googleplus_user{position:absolute; bottom:5px; left:5px;}
#pinterest_user{position:absolute; bottom:5px; left:5px;}
#social_user{position:absolute; bottom:5px; left:5px;}

.facebook_inset{color:rgba(68, 104, 179,0.8);}
.twitter_inset{color:rgba(16, 195, 255,0.8);}
.linkedin_inset{color:rgba(30, 113, 176,0.8);}
.youtube_inset{color:rgba(235, 42, 44, 0.8);}
.googleplus_inset{color:rgba(221, 75, 57, 0.8);}
.pinterest_inset{color:rgba(203, 32, 39, 0.8);}
.social_inset{color:#FF624D;}


#canvasBorder{
position:relative;  
margin-top:1px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

#canvas {
background:#fff;
margin-right: auto;
margin-left: auto;
}

#snapshotImageElement {
position: absolute;
left: 10px;
top: 1.5em;
margin: 20px;
border: thin solid #aaaaaa;
}


#editor:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
}

.imgField {
display:none;
}   

.pull-up{margin-top:10px;}
.pull-up-20{margin-top:20px;}
.pull-up-30{margin-top:30px;}

.attrib{
font:normal 9px tahoma;
color:#bbb;
margin-right:10px;
}

.fname{
font:normal 11px tahoma;
color:#bbb;
text-align:center;
}

.wbtn{margin-left:1px;width:80px; font:normal 13px arial; color:#333;text-shadow:none;padding-top:10px; }
.pbtn{padding:10px 12px;}
.ibtn{padding:10px 10px 6px 10px;}

/* override boostrap modal */
.modal-wide {
  width: 825px;  
}

.modal-body-search {
    max-height: 620px;
}

.modal-body-image {
    max-height: 520px;
    overflow-y: auto;
}

.imagedropdown{
max-height:520px;
overflow: hidden;
overflow-y: auto; 
background:#f7f7f7;
color:#000;
}

.rightDropDown
{
float:right; 
text-align: right; 
margin-right:10px;
}

#imageModal, #searchModal {
top:40%;
left:40%;
outline: none;
display:none; /* enable toolbar buttons to be clicked */
}

.modalBtn { font-family: verdana;}

.icons { display:block;background: url(https://www.i2symbol.com/css/i2picture/icons.png) no-repeat;}
.back { display:block;width: 16px; height: 16px; background-position: 0 0; }
.circle { display:block;width: 16px; height: 16px; background-position: 0 -16px; }
.clear { display:block;width: 16px; height: 16px; background-position: 0 -32px; }
.clone { display:block;width: 16px; height: 16px; background-position: 0 -48px; }
.download { display:block;width: 16px; height: 16px; background-position: 0 -64px; }
.front { display:block;width: 16px; height: 16px; background-position: 0 -80px; }
.line { display:block;width: 16px; height: 16px; background-position: 0 -96px; }
.picture { display:block;width: 16px; height: 16px; background-position: 0 -112px; }
.polygon { display:block;width: 16px; height: 16px; background-position: 0 -128px; }
.rectangle { display:block;width: 16px; height: 16px; background-position: 0 -144px; }
.redo { display:block;width: 16px; height: 16px; background-position: 0 -160px; }
.rounded { display:block;width: 16px; height: 16px; background-position: 0 -176px; }
.star { display:block;width: 16px; height: 16px; background-position: 0 -192px; }
.text { display:block;width: 16px; height: 16px; background-position: 0 -208px; }
.undo { display:block;width: 16px; height: 16px; background-position: 0 -224px; }
.rotate { display:block;width: 16px; height: 16px; background-position: 0 -240px; }
.zoomout { display:block;width: 16px; height: 16px; background-position: 0 -256px; }
.zoomin { display:block;width: 16px; height: 16px; background-position: 0 -272px; }
.fliph { display:block;width: 16px; height: 16px; background-position: 0 -288px; }
.flipv { display:block;width: 16px; height: 16px; background-position: 0 -304px; }
.crop { display:block;width: 16px; height: 16px; background-position: 0 -320px; }
.cropno { display:block;width: 16px; height: 16px; background-position: 0 -336px; }
.cropyes { display:block;width: 16px; height: 16px; background-position: 0 -352px; }
.save { display:block;width: 16px; height: 16px; background-position: 0 -368px; }
.del { display:block;width: 16px; height: 16px; background-position: 0 -336px; }
.deselect { display:block;width: 16px; height: 16px; background-position: 0 -384px; }

/*.geomtry { display:block;background: url(/css/i2picture/geomtry.png) no-repeat;}
.fliph{ display:block;background-position: 0 0; width: 32px; height: 32px; } 
.flipv{ display:block;background-position: 0 -33px; width: 32px; height: 32px; } 
.rotate{ display:block;background-position: 0 -66px; width: 32px; height: 32px; } 
.wand{ display:block;background-position: 0 -99px; width: 32px; height: 32px; } 
.zoomin{ display:block;background-position: 0 -132px; width: 32px; height: 32px; } 
.zoomout{ display:block;background-position: 0 -165px; width: 32px; height: 32px; } */

.filters { display:block;background: url(https://www.i2symbol.com/css/i2picture/filters.jpg) no-repeat;}
.blur{ display:block;background-position: 0 0; width: 150px; height: 150px; } 
/*.border{ display:block;background-position: 0 -151px; width: 150px; height: 150px; } */
.contrast{ display:block;background-position: 0 -302px; width: 150px; height: 150px; } 
.displace{ display:block;background-position: 0 -453px; width: 150px; height: 150px; } 
.emboss{ display:block;background-position: 0 -604px; width: 150px; height: 150px; } 
.equalize{ display:block;background-position: 0 -755px; width: 150px; height: 150px; } 
.grayscale{ display:block;background-position: 0 -906px; width: 150px; height: 150px; } 
.master{ display:block;background-position: 0 -1057px; width: 150px; height: 150px; } 
.median{ display:block;background-position: 0 -1208px; width: 150px; height: 150px; } 
.sharpen{ display:block;background-position: 0 -1359px; width: 150px; height: 150px; } 
.solarize{ display:block;background-position: 0 -1510px; width: 150px; height: 150px; } 
.swirl{ display:block;background-position: 0 -1661px; width: 150px; height: 150px; } 
.vignette{ display:block;background-position: 0 -1812px; width: 150px; height: 150px; } 



.floating{
  position:absolute; 
  display:none;  
}

#textCtrl{
-moz-box-shadow: 0 0 5px rgba(0, 120, 190, .5);
-webkit-box-shadow: 0 0 5px rgba(0, 120, 190, .5);
box-shadow: 0 0 5px rgba(0, 120, 190, .5);    
background:#E3F4FF;
}

.mydropdown{
max-height:200px;
overflow: hidden;
overflow-y: auto; 
background:#f7f7f7;
color:#000;
}

.social{
padding:50px 0;
cursor: pointer;
box-shadow: 0 1px 25px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 25px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 25px rgba(34,25,25,0.4);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.social:hover{
box-shadow: 1px 1px 10px rgba(154,132,132,0.75);
-moz-box-shadow: 1px 1px 10px rgba(154,132,132,0.75);
-webkit-box-shadow: 1px 1px 10px rgba(154,132,132,0.75);
}

.facebook{background:#445E9F;}
.twitter{background:#55B1E1;}
.pinterest{background:#B8242A;}
.google{background:#C9402E;}

.symbol{
  font-size: 70px;
  color:#fff;
  text-shadow:0 1px 1px #999;  
}

.symbol-txt{
  font-size: 36px;
  font-weight:bold;
  color:#fff;
  text-shadow:0 1px 1px #999;  
  padding-top:20px;
}

.symbol-txt-s{
  font-size: 21px;
  font-weight:normal;
  color:#fff;
  text-shadow:0 1px 1px #999;  
  padding-top:20px;
}

.symbol-p{
  font: normal 17px arial;
  color:#eee;
  text-shadow:none;
  padding-top:20px;
}


.symbol-p-s{
  font: normal 13px arial;
  color:#eee;
  text-shadow:none;
  padding-top:20px;
}

#loading, #saving{
position:absolute;
display:none;
top:45%;
left:42%;
background: url(https://www.i2symbol.com/css/i2picture/loading.gif) no-repeat scroll 0 0 transparent;
width:128px;
height:100px;
}

#sizel, #sizer{
  font:normal 9px tahoma;
  color:#000;
}

.lbl{
  color:#aaa;  
  font-weight:normal;
}

.pin{
position:relative;
text-align:center;
}

.pinLarge{
position:relative;
background:#fff;
text-align:center;  
box-shadow: 0 0 1px rgba(34,25,25,0.4);
-moz-box-shadow: 0 0 1px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 0 1px rgba(34,25,25,0.4);
padding:40px 0 0 0;
}

.img_preview{
position:relative;
background:#fff;
text-align:center;  
box-shadow: 0 0 1px rgba(34,25,25,0.4);
-moz-box-shadow: 0 0 1px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 0 1px rgba(34,25,25,0.4);
}

.img_preview:hover{
    -webkit-filter: brightness(50%);
}


/*.pinLarge:hover{
box-shadow: 0 0 25px rgba(34,25,25,0.4);
-moz-box-shadow: 0 0 25px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 0 25px rgba(34,25,25,0.4);
}*/

.flatBtn {
display: inline-block;
margin: 0 5px;
border-radius: 3px;
font:normal 11px arial;
padding: 6px 14px;
border: 0;
cursor: pointer;
color:#000;
outline: 0;
text-shadow:0 1px 1px #fff;
}

.flatBtn:hover {
background:#FF5B92;
color:#fff;
text-shadow:none;
}

.sRibbon{
  position:absolute;
  top:-60px;
  left:0;  
  width:100%;
  height:46px;
  padding:12px 0 5px 0;
  /*background:rgba(0,0,0,0.75);*/
  display: block;
  display:none;
  text-align: center;
  margin:0 auto;
}

.hRibbon{
  position:absolute;
  display: block;
  bottom:-20px;
  left:0;  
  width:100%;
  height:50px;
  padding:12px 0 5px 0;
  /*background:rgba(82, 201, 241, 0.85);*/
  background:rgba(48, 63, 126, 0.75);
  /*background:rgba(192,192,192,0.5);*/
  display:none;
  text-align: center;
  margin:0 auto;
  border-top:1px solid #273E9F;  
  border-bottom:1px solid #273E9F;  
}

.round{
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

.vRibbon{
  position:absolute;
  top:0px;
  left:40px;  
  width:60px;
  height:120px;
  padding:20px 0 10px 20px;
  border-top:2px solid #333;  

  border-radius: 8px 8px 100px 100px;
  -webkit-border-radius: 8px 8px 100px 100px;
  -moz-border-radius: 8px 8px 100px 100px;

  background:rgba(0, 0, 0, 0.70);

  display:none;
  text-align: center;
  margin:0 auto;
  
  box-shadow: 0 0 15px rgba(34,25,25,0.4);
-moz-box-shadow: 0 0 15px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 0 15px rgba(34,25,25,0.4);  
}

.attribute{  
  height:30px;
}

.icostat {background: url(https://www.i2symbol.com/css/i2picture/ico.png) no-repeat;}
.delete, .undelete:hover{ background-position: 0 0; width: 24px; height: 24px; } 
.downloads{ background-position: 0 -25px; width: 24px; height: 24px; } 
.edit, .unedit:hover{ background-position: 0 -50px; width: 24px; height: 24px; } 
.fav, .unfav:hover{ background-position: 0 -75px; width: 24px; height: 24px; } 
.like, .unlike:hover{ background-position: 0 -100px; width: 24px; height: 24px; } 
.post{ background-position: 0 -125px; width: 24px; height: 24px; } 
.tag{ background-position: 0 -150px; width: 24px; height: 23px; } 
.undelete, .delete:hover{ background-position: 0 -174px; width: 24px; height: 24px; } 
.unedit, .edit:hover{ background-position: 0 -199px; width: 24px; height: 24px; } 
.unfav, .fav:hover{ background-position: 0 -224px; width: 24px; height: 24px; } 
.unlike, .like:hover{ background-position: 0 -249px; width: 24px; height: 24px; } 
.user{ background-position: 0 -274px; width: 24px; height: 24px; } 
.views{ background-position: 0 -299px; width: 24px; height: 24px; } 


.ico{
  display:inline-block;
  width:24px;
  height:24px;
  cursor: pointer;
  margin-right:30px;  
}

/*.unlike{background:transparent url(/css/i2picture/img/unlike.png);}
.unlike:hover{background:transparent url(/css/i2picture/img/like.png);}
.edit{background:transparent url(/css/i2picture/img/unedit.png);}
.edit:hover{background:transparent url(/css/i2picture/img/edit.png);}
.unfav{background:transparent url(/css/i2picture/img/unfav.png);}
.unfav:hover{background:transparent url(/css/i2picture/img/fav.png);}
.delete{background:transparent url(/css/i2picture/img/undelete.png);}
.delete:hover{background:transparent url(/css/i2picture/img/delete.png);}*/

.foto{  
  position:relative;  
  /*display:inline-block;*/
}

#ipage{

text-align:center;
background:#eee; 
margin-top:10px;
}

.ilink{
font:normal 11px tahoma;
color: #999;
padding:3px 8px;
background:#ddd;
text-decoration: none;
cursor:pointer;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.ilink:hover{
color:#fff;
background:#666;
text-shadow:none;
text-decoration:none;
}

.clink{
font:normal 11px tahoma;
color: #fff;
padding:3px 8px;
background:#04AADD;
text-decoration: none;
cursor:pointer;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.clink:hover{
color:#fff;
background:#04AADD;
text-shadow:none;
text-decoration:none;
}

.tercoize{color:#009BD5;}

.label
{
color:#333;
background:#eee;
text-shadow:none;
width:24px; 
height:12px;
font:normal 9px tahoma;
text-align: left;
margin-left:10px;
}

.user{
color:#52C9F1;
font-weight:bold;
}

.comic-alert{
padding:20px 0;
}

.nPosts{
color:#ccc; 
font:normal 31px tahoma;
}

#errorResult{
  padding:20px;
  font:normal 17px verdana;
}

.infoStat{
font-weight:normal;
color:#bbb;
padding-left:5px;
font-size:15px;
display: inline-block;
}

.tags{
font-size:15px;
}

.ribbon-menu
{
  margin-top:20px; 
  padding:20px 0 40px 0; 
  border:1px solid #fff;
  background:rgba(220,20,60, 0.1);
  -moz-box-shadow:inset 0 0 15px rgba(220,20,60, 0.5);
  -webkit-box-shadow: inset 0 0 15px rgba(220,20,60, 0.5);
  box-shadow:inset 0 0 15px rgba(220,20,60, 0.5);
}

.action_btn{
margin:15px 2px 10px 2px; 
font:normal 15px tahoma; 
letter-spacing:1px; 
padding:8px 20px;
}

.subHeadline{
  font:normal 13px verdana; 
  color:#999; 
  text-shadow:0 1px 1px #fff;
}

.arSubHeadline{
  font-size:15px;
}

.headline{
  font:normal 50px tahoma;
  color:#000; 
  text-shadow:0 1px 1px #fff;
}

.arHeadline{
  font:normal 60px arabic1;
}

.petrol_btn
{
padding:10px 10px; 
background:#2C3E50;
}

.nudge_top{margin-top:15px;}

.labelCtrl{font:bold 13px tahoma; color:#555;}
.checkCtrl{font:normal 12px tahoma; color:#aaa;}
.pull-left-30{margin-left:30px;}


.lower-tab{
background:#fff;
padding:10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border:none;
margin-top:-1px;
}

.lower-tab.nav-tabs > .active > a{
color:#fff;
background-color: #4F5A8A;
cursor: default;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.radius{
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}