body.d{overflow-y:hidden;}
.right{float:right;} 
.left{float:left;} 
.center{margin:0 auto; text-align:center;}
.align_right{text-align:right}
.align_center{text-align:center}
.align_left{text-align:left}
h1{text-align:center}
h2, h3{font-size:1.0714285em; text-align:center;}
.bold, .mediumBold{font-weight:bold;}
.header{color:#000099; text-align:center; font-size:1.4285714em; font-weight:bold;}
.header_sm{color:#000099; text-align:center; font-size:1.2em; font-weight:bold;}
body {background-color: khaki; font-family:Arial; font-size:14px; padding:0px; margin:0px; background: linear-gradient(to left, skyblue, beige)}
a img {border: none}
.mainContainer{width:100%}
.category{font-weight:bold; background-color: #cbe0f3; border: solid 1px #000099; padding: 1.6%; margin-top: 7px; background: linear-gradient(to right, skyblue, beige)}
.childBlock{margin:0px 4%; border:solid 1px #000099; background-color:#dff3f8; background: linear-gradient(to top, skyblue, beige); overflow:auto; max-height:357px;}
.category, .childBlock div {font-family:Arial; font-size:1em; text-align:center; }
.childBlock div {padding:7px 0px;font-size:0.9285714em; }
.headerMenu {display:none; line-height:normal; padding:5px 5px 8px 5px; margin:3px; background-color:skyblue;border:solid 1px #000099; font-family:Arial; font-weight:bold; background: linear-gradient(to left, skyblue, beige)}

a{color:#000099;}
a:hover{color:Green}
.black_border{border: solid 2px #000}
.photoInstruction p{font-weight:bold}
.field-validation-error{color:Red; font-size:0.8571428em;}
.paging{margin:0px;}
.paging span {margin:0px 1.1%; line-height:40px; background-color: #dff3f8; border: solid 1px #000099; padding:2px 4px; border-radius: 0.3em; background: linear-gradient(to top, skyblue, beige)}
.paging span:hover{background-color: #cbe0f3}

.searchForm * {margin:2px 0px;}
.searchForm div{display:block; font-size:1em;}
body.m .searchForm div{display:inline-block; font-size:0.83em;}
.searchForm select {max-width: 100px;}
.searchForm #text, .searchForm #size {max-width: 75px;}
.templateList{ text-align:center; margin:auto; padding:6px 0px}
.red{color:Red;}
#SearchValue{width:350px;}
form #SearchValue, form #Email, TextArea {border: solid 1px grey}

.smallText{font-size:0.8571428em;}
.languageList{width:400px; text-align:right; padding:5px;}
.showHide { float:right; border: 1px solid red; padding:0px; margin:0px; background-color: #F5F9E3; font-size:1.1428571em; font-weight:bold; width:6%; height:6%; text-align:center;}
.showHide a {text-decoration:none; text-align:center; margin-top: -2px; display: block;}

.categoryMenu{width:22%; overflow-y:scroll; z-index:2000;}
.pageContent, main{width:78%; background-color: white; background: linear-gradient(to top, white, beige); overflow-y:scroll; float:left; display:block;}

body.m .categoryMenu{width:40%;}
body.m .pageContent{width:60%;}

body.d #pageContent.isRightMenu{width:50%;}
.hm .categoryMenu{display:none; position:absolute; background-color:white}
.hm .pageContent{width:100%; }

.rightMenu{width:28%; overflow-y:scroll;}
.smallPhoto{margin:0px 1% 10px 1%; width:48%;}
.top_header{width:100%;}
.top_banner{width: 72%;}
.top_header a{margin: 0px 5px 8px 0px; font-size: 1em; text-shadow: 1px 1px 1px black; text-decoration:none;}

.top_header .top_search{float:right;}
#EmailBody{width:90%;}

.bookTools * {margin: 1% 0.5% 1% 0.5%;}
.albumTools * {margin: 2% 1% 2% 1%;}
.bookTools div input[type = button] {font-size: 1.1em; margin: 1% 1.5% 1% 1.5%;}
.albumTools div input[type = button] {font-size: 1.1em; margin: 2% 3% 2% 3%;}

.albumToolsWide * {margin: 0.5%;}
.albumToolsWide div input[type = button], .albumToolsWide div .lofrbu {font-size: 1.1em; margin: 1%;}
#ToolDesc {margin:auto}

#to select {max-width: 95px;}
#Adusteba select, #ba .cutese {max-width: 115px;}
#to #CategoryList {max-width:220px; font-weight:700; text-align:center;}
#to #CategoryList option {font-weight:900;}
#pr {background-color:yellow; width:100%; height:100%; position: absolute; font-size:50px; font-weight:bold; padding-top:50px; opacity:0.5; top:0px;}

.alphaback{background-color:white; background-size:50px 50px; background-image:linear-gradient(45deg, skyblue 25%, transparent 25%, transparent 75%, skyblue), linear-gradient(135deg, skyblue 25%, transparent 25%, transparent 75%, skyblue);}
#editor #t, #editor #t *{position:absolute;}
#editor #t div[contenteditable = true] * {position:relative;}
div[contenteditable = true] * {padding: 0px; margin: 0px;}
.vf .smPhoto{width:69%;}
.vf .smText{width:30%; margin-top:20%;}
.hf .smPhoto{width:100%;}
.hf .smText{width:100%; }
.smallPhoto img{max-width: 100%; }

select, input {border-radius: 0.3em; cursor:pointer;}
input, #editor select{background: linear-gradient(to top, skyblue, beige); }
#to {overflow-y:auto; background: linear-gradient(to bottom, skyblue, beige); text-align:center;}
#to>div:nth-child(1){background: linear-gradient(to right, orange, beige)}
#to>div:nth-child(2){background: linear-gradient(to right, limegreen, beige)}
#to>div:nth-child(3){background: linear-gradient(to right, yellow, beige)}

#BapoElem, #editor #teBapoElem, #editor #BabaElem, #bameElem{width:100%; height:100%; left:0%; top:0%; min-height:300px; position:absolute; z-index:1999; background-color:yellow; opacity:0.1;}
#editor #BabaElem {opacity:0.01}
.po{width:90%; left:5%; top:5%; background-color:yellow; min-height:300px; position:absolute; border:1px solid blue; border-radius:1em; z-index:2000; text-align:center; }
body.d .posaco{width:30%; left:0%;height:90%;}
body.m .posaco{top:10%; font-size:0.8em; min-height:60%; }
body.m .posaco p {margin:0.5em;}

body.d .posaonse{width:50%; left:25%; top:25%; font-size:1.5em;}
body.d .safoonse{font-size:1.3em;}
.po .tobabu{display:none;}
#ba .basmre, .po .frsmre{float:left; margin:0.7%; border: 1px solid blue; cursor:pointer; background-color:green; position:relative}
.po .clsmre{float:left; margin:1%; cursor:pointer; width: 150px; height: 150px;}
.po .frsmre, .po .frsmre div{border:none; border-radius:0px;}
#ba .basmre .phtesm{ position:absolute; border: 1px solid green;}
#ba input[type=text]{width:35px;}
#editor #BabaElem {z-index:999;}
#editor #ba{width:43%; right:0%; top:5%; background-color:yellow; min-height:300px; position:absolute; border:1px solid blue; border-radius:1em; z-index:1000; text-align:center;}
.closePopup{float:right;}
div{border-radius: 0.5em;}
#Adusteba {background: linear-gradient(to top, limegreen, beige); font-size:0.8em;  font-weight:bold;}
#Adusteba input{ font-size:1em;}
#Adusteba>span {white-space:nowrap; display:inline-block;}

#Adusteba select, #Adusteba input {background: linear-gradient(to top, limegreen, beige);}

#Adfocoba {background: linear-gradient(to top, orange, beige); font-size:0.8em; font-weight:bold;}
#Adfocoba input{ font-size:1em; background: linear-gradient(to top, gold, beige);}
#Adfocoba>span, #Adfocoba input {white-space:nowrap; display:inline-block; margin: 0.5% 1%}
#Adfocoba .coba{display:none;}
.face #Adfocoba .coba{display:inline-block;}
.focoinfila{width:60%; height:60%; left:20%; top:20%; text-align:center; background-color:yellow; cursor:pointer; }
.coba .focoinfila{opacity:0.25;}
.lofrbu{border:1px solid blue; border-radius:0.3em; white-space:nowrap; }
.focoinfila span {top:25%; left:0%; width:100%; }
.po .frsmre *{position:absolute; }
#ba .focoinfila{opacity:1; z-index:1; font-weight: bold; font-size: 2em; padding:0.25em; border: 1px solid blue; border-radius: 0.3em;}
#ba .rephbu{font-size: 2em;}
#ba .exse{font-size: 1.5em;}
#ba .mafrco{border: 1px solid gold; background-color:lemonchiffon; margin: 1%;}
#ba .cltools{border: 1px solid gold; background-color:lemonchiffon; margin: 1%;}
#ba .cltools img{max-height:2em;}
#ba .Adtebu,#ba #Case, #ba #Logobu, #ba .phla {font-size:2em;}
 #ba .phla select {font-size:1em;}

.clElem{width:100%; height:100%;}
#editor #t .toba *, #editor #t .tetoba * {position:relative;}
#editor #t .toba .coba *{position:absolute;}

.toba input[type=button], .tetoba input[type=button], .toba label{ text-align:center; display:inline-block;  font-weight:900; background: linear-gradient(to top, gold, beige); border-radius:0.5em; animation: buttonAnimationBeige 2s infinite;} 
.tetoba input[type=button], .Adtebu{ background: linear-gradient(to top, limegreen, beige); animation: buttonAnimationGreen 2s infinite;}

#t .toba label, #t .toba .tobabu, #t .tetoba{ white-space:nowrap; padding:0.2em;}
#t .toba{text-align:center;}

.toba input[type=file], #Toba input[type=file]{width:0.1px; height:0.1px; }
.toba input:hover, .toba label:hover, .Adtebu:hover, #Satebu:hover, .tetoba input:hover, #Adfocoba input:hover, #Adusteba input:hover, input:hover {background: linear-gradient(to top, lightcyan, beige); cursor:pointer; animation:none;}

body.m .toba input[type=button], body.m .tetoba input[type=button] {display:none;}
body.d #Toba input[type=button], body.d #Tetoba input[type=button] {display:none;}

#Toba input, #Toba label, #Tetoba input{display:inline; white-space:nowrap; width:auto; font-weight:700;}
 #Toba label{ padding: 0.3em; display:inline-block;}
#Toba, #Tobabu, #Tetoba{display:inline; width:auto;}
#Tetoba>input:nth-child(4){display:none;}

.backAnim{animation: buttonAnimation 2s infinite;}
.backAnim10{animation: buttonAnimation 2s 10}
#Satebu{animation: buttonAnimationYellow 2s infinite; background: linear-gradient(to top, yellow, beige);}
.backAnimBeige{animation: buttonAnimationBeige 2s infinite;}

@keyframes buttonAnimation
{
    0%{background: linear-gradient(to top, skyblue, beige);}
    50%{background: linear-gradient(to right, skyblue, beige);}
    100%{background: linear-gradient(to top, skyblue, beige);}
}
@keyframes buttonAnimationBeige
{
    0%{background: linear-gradient(to top, gold, beige);}
    50%{background: linear-gradient(to right, gold, beige);}
    100%{background: linear-gradient(to top, gold, beige);}
}
@keyframes buttonAnimationGreen
{
    0%{background: linear-gradient(to top, limegreen, beige);}
    50%{background: linear-gradient(to right, limegreen, beige);}
    100%{background: linear-gradient(to top, limegreen, beige);}
}
@keyframes buttonAnimationYellow
{
    0%{background: linear-gradient(to left, yellow, white);}
    50%{background: linear-gradient(to right, yellow, white);}
    100%{background: linear-gradient(to left, yellow, white);}
}
#to a{background: linear-gradient(to top, skyblue, beige); border-radius:0.3em;}

#kp {position:absolute; top:0px; left: 0px; min-width:300px; background-color:yellow; text-align:center; z-index:2000; overflow:auto;}
#kp *{margin:1%; }
#kp a, #kp span{display:block;}
#kp span{color:red;}

.skyBeige{border: 1px solid blue; background-color: #FFFFFF; background: linear-gradient(to top, skyblue, beige);}

.footer {clear:both; margin:0 auto; padding-top:0px; text-align:center; width:800px;}
#to #inbu{font-size:0.7em; margin: auto;}
#to #Logobu, #to #Case{font-size:0.7em;}
#to .cose{max-width:20px;}
#poba .cose{max-width:20px;}
#poba span{margin:0.25em}
#poba .frpomala{white-space:nowrap; text-decoration:none;}

body.m #Adusteba, body.m #Adfocoba{display:none;}
body.d .newsSection span{display:block; margin:1%;}

@media screen and (max-height: 750px) and (orientation: landscape)
{
    body.m .albumFrame #ToolDesc, body.m .albumFrame #inbu{display:none;}
}
@media screen and (max-height: 500px) and (orientation: landscape)
{
    body.m .bookFrame #ToolDesc, body.m .bookFrame #inbu{display:none;}
}
@media screen and (orientation: portrait)
{
    body.m .bookFrame #ToolDesc, body.m .bookFrame #inbu{display:none;}
    #editor #ba{width:100%;}
}
@media screen and (max-height: 630px) and (orientation: portrait)
{
    body.m .albumFrame #ToolDesc, body.m .albumFrame #inbu{display:none;}  
}
@media screen and (max-height: 350px) and (orientation: portrait)
{
    #Toba input[type=button], #Tetoba input[type=button] {display:none;}
    #to select {max-width: 20px;}
    #Logobu{display:none;}
    .top_header a{display:none;}
}
@media screen and (max-width: 350px) and (orientation: landscape)
{
    #Toba input[type=button], #Tetoba input[type=button] {display:none;}
    #to select {max-width: 20px;}
    .top_header a{display:none;}
}
@media screen and (orientation: portrait)
{
.top_header, .top_banner{width:100%; }
.top_header a{float:none;}
.top_header select{max-width:12%;}
.top_header .top_search{max-width:47%;}
.top_header .top_search input[type=text]{max-width:75%;}
.top_header .top_search input[type=submit]{max-width:25%; padding:0px; margin:0px;}
}
@media screen and (orientation: landscape)
{
body.m .top_header{width:40%; float:left; text-align:center;}
body.m .top_banner{width:60%; text-align:center;}
body.m .top_header .top_search{float:none;}
body.m .top_header .top_search input[type=text]{max-width:50%;}
}
@media screen and (max-width: 250px) 
{
    #to .ph input[type=button], .frlo #to input[type=button]{max-width: 50px;}
}
@media screen and (max-width: 445px) 
{
    .top_header{width:100%;}
    .top_banner{width: 100%}
    .paging .pagesLabel{display:none;}
    .vf .smText{width:100%; margin-top:0px;}
    .po .clsmre{width: 50px; height: 50px;}
    .po .clsmre img{max-width: 50px; max-height: 50px;}

}
@media screen and (max-width: 650px) 
{
    body{font-size:12px;}
}
@media screen and (max-width: 1000px) 
{
    #to input[type = file]{max-width:100px;}
    .smallPhoto{width:98%;}
    #header1, .rcm {display:none;}
    .po .clsmre{width: 75px; height: 75px;}
    .po .clsmre img{max-width: 75px; max-height: 75px;}
    .header{font-size:1em;}
}

@media screen and (min-width: 1001px) 
{    
    
    body.m .categoryMenu{width:22%;}
    body.m .pageContent{width:78%; }
    .childBlock div {padding:2px}
    .header, h3, h2{margin:5px;}
    
    .top_banner{width: 80%;}
    .top_header a, .top_header input{font-size: 1.5em;}
    
    .category{margin: 3px 5px 0px 5px;}
    .headerMenu {display:block;}
}

@media screen and (min-width: 1400px) 
{
    body{font-size:16px;}
}

.clr_thin, .clr_thin_2 {clear: both; overflow: hidden; height: 1px; font-size:1px;}
.clr {clear: both; height:16px; font-size:1px; line-height:100%;}