/*******************************************************************************
////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
*/

@namespace basic "library://ns.apache.org/flexjs/basic";
@namespace "http://www.w3.org/1999/xhtml";

/*
//----------------------------
// Named styles
//----------------------------
*/
.glass {
    borderColor:		    #767473;
    fillAlphas: 		    .60, .60, .60, .60;
    fillColors: 		    #888888, #F3F3F3, #9E9E9E, #FCFCFC;
    highlightAlphas:	    .07, .45;
}

.glassSlider
{
    fillAlphas: 		    .80, .80, .80, .80;
    fillColors: 		    #F3F3F3, #BBBBBB, #FCFCFC, #CCCCCC;
}

.listItem
{
    paddingLeft:            4;
    paddingRight:           4;
    horizontalGap:          5;
    verticalAlign:          "middle";
    backgroundColor:        #FFFFFF;
    backgroundAlpha:        .5;
    borderStyle:            "outset";
}

.outer.inner {
  width: 512px;
}

.outer .inner {
  width: 512px;
}

.outer > .innerTitle {
  color: #fff;
  height: 176px;
  background: url('assets/welcome_card.jpg') center / cover;
}
.outer>.innerMenu {
  color: #fff;
}

.outer> .innerMenu > h4 {
  color: #fff;
}

.outerother.inner {
  width: 320px;
  height: 320px;
}

.outerother-square > .innerTitle {
  color: #fff;
  background: url('assets/dog.png') bottom right 15% no-repeat #46B6AC;
}

.usescalc {
  color: #fff;
  width: calc((100% - 50px)/3);
}