fetr
@media all and (min-width: 768px) { menu-button, .sidebar-button { display: none; }
  [role="complementary"] { width: 20%; margin-left: 0; float: left; padding: 0 15px; }
  [role="main"] { width: 80%; padding: 0 15px; }
  .paneled [role="main"] { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
  .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
  .hide-extras [role="main"] { width: 100%; }
  .hide-extras [role="complementary"] { display: none; }
  [role="navigation"]#topMenu { display: none; } }

.lt-ie9 [role="complementary"] { width: 20%; margin-left: 0; float: left; padding: 0 15px; }
.lt-ie9 [role="main"] { width: 80%; padding: 0 15px; }
.lt-ie9 .paneled [role="main"] { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
.lt-ie9 .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
.lt-ie9 .hide-extras [role="main"] { width: 100%; }
.lt-ie9 .hide-extras [role="complementary"] { display: none; }
.lt-ie9 [role="navigation"]#topMenu { display: none; }

/* Normal Buttons ---------------------- */
.button { width: auto; background: #2ba6cb; border: 1px solid #1e728c; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; -moz-transition: background-color 0.15s ease-in-out; -o-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out; /* Hovers */ /* Sizes */ /* Colors */ /* Radii */ /* Layout */ /* Disabled ---------- */ }
.button:hover, .button:focus { color: white; background-color: #2284a1; }
.button:active { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; }
.button.large { font-size: 17px; padding: 15px 30px 16px; }
.button.medium { font-size: 14px; }
.button.small { font-size: 11px; padding: 7px 14px 8px; }
.button.tiny { font-size: 10px; padding: 5px 10px 6px; }
.button.expand { width: 100%; text-align: center; }
.button.primary { background-color: #2ba6cb; border: 1px solid #1e728c; }
.button.primary:hover, .button.primary:focus { background-color: #2284a1; }
.button.success { background-color: #5da423; border: 1px solid #396516; }
.button.success:hover, .button.success:focus { background-color: #457a1a; }
.button.alert { background-color: #c60f13; border: 1px solid #7f0a0c; }
.button.alert:hover, .button.alert:focus { background-color: #970b0e; }
.button.secondary { background-color: #e9e9e9; color: #1d1d1d; border: 1px solid #c3c3c3; }
.button.secondary:hover, .button.secondary:focus { background-color: #d0d0d0; }
.button.radius { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.button.round { -webkit-border-radius: 1000px; -moz-border-radius: 1000px; -ms-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; }
.button.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; }
.button.left-align { text-align: left; text-indent: 12px; }
.button.disabled, .button[disabled] { opacity: 0.6; cursor: default; background: #2ba6cb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.button.disabled:hover, .button[disabled]:hover { background: #2ba6cb; }
.button.disabled.success, .button[disabled].success { background-color: #5da423; }
.button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus { background-color: #5da423; outline: none; }
.button.disabled.alert, .button[disabled].alert { background-color: #c60f13; }
.button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus { background-color: #c60f13; outline: none; }
.button.disabled.secondary, .button[disabled].secondary { background-color: #e9e9e9; }
.button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus { background-color: #e9e9e9; outline: none; }

/* Small display targeting */
@media only screen and (max-width: 767px) { 
	h2 { font-size: 20px }
	ul.accordion > li .title::after { top: 15px }
	.iconsmall { font-size: 10px; }
	.rounded-img2 { margin: 20px; }
}

/* Speech bubble */
.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.read {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.blue::before {
	background-color: #a2d2FF;
} 

.blue {
        background-color: #a2d2FF;
}

.green::before {
        background-color: #72cc72;
}

.green {
	background-color: #72cc72;
}
  

.me {
    float: left;   
    margin: 5px 45px 5px 20px;         
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: right;    
    margin: 5px 20px 5px 45px;         
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
}

/* normal image */
.normal-img {
	background: #ccc;
	border: solid 1px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.normal-img-2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
}

/* rounded image styles */
.rounded-img {
	display: inline-block;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	max-height: 50px;
	max-width: 50px;
	margin-top: 5px;
}

.marked-img {
	-border: solid 2px #a00;
        color: #a00;
}

.marked-img:after {
	-content: "\f005";
	content: '';
	border: solid 5px #a00;
	position: absolute;
	width: 42px;
	height: 42px;
	-left: 16px;
	-top: 2px;
	-webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
	background-image: url('../images/rec.png');
	margin-left: -52px;
	margin-top: 3px;

}

@media only screen and (max-width: 960px) and (min-width: 768px) {
	.marked-img:after  {
		margin-left: 0px;
		margin-top: -56px;
	}
}

.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	height: 200px;
}

/* Mias */
.centertext {
    text-align: center;
}

.playbutton {
    cursor: pointer;
    width: 128px;
    height: 128px;
    background-image: url('../images/play_btn.png');
}  

.playbutton:hover {
    background-image: url('../images/play_btn_hover.png');
}

.recbutton {
    cursor: pointer;
    width: 128px;
    height: 128px;
    background-image: url('../images/rec_btn.png');
}

.recbutton:hover {
    background-image: url('../images/rec_btn_hover.png');
}

.playbtn {
    cursor: pointer;
}

.playbtn:after {
    content: '';
    position: absolute;
    width: 128px;
    height: 128px;
    margin-left: -140px;
    margin-top: 10px;
    background-image: url('../images/playbtn.png');
}

.playbtn:hover:after {
    background-image: url('../images/playbtn_hover.png');
}

@media only screen and (max-width: 768px) {
	.playbtn:after {
		margin-left: -60px;
		margin-top: -230px;
	}
}

.playbtn2 {
    cursor: pointer;
}

.playbtn2:after {
    content: '';
    position: absolute;
    width: 128px;
    height: 128px;
    margin-left: -140px;
    margin-top: 10px;
    background-image: url('../images/playbtn.png');
}

.playbtn2:hover:after {
    background-image: url('../images/playbtn_hover.png');
}

@media only screen and (max-width: 768px) {
        .playbtn2:after {
                margin-left: -140px;
                margin-top: -430px;
        }
}

.iconButton {
	cursor: pointer;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	font-weight: bolder;
	background-color: white;
	margin: 5px;
	padding-top: 8px;
	font-size: 20px;
	margin-bottom: 35px;

        overflow: hidden;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.iconButton.cellular.selected {
	background-image: url('../images/cellular.png');
}

.iconButton.cellular {
	background-image: url('../images/cellular_black.png');
}

.iconButton.wifi.selected {
	background-image: url('../images/wifi_icon.png');
}

.iconButton.wifi {
	background-image: url('../images/wifi_icon_black.png');
}

.iconButton.mediumq.selected {
        background-image: url('../images/mediumq.png');
}

.iconButton.mediumq {
        background-image: url('../images/mediumq_black.png');
}

.iconButton.highq.selected {
        background-image: url('../images/highq.png');
}

.iconButton.highq {
        background-image: url('../images/highq_black.png');
}

.iconButton.selected {
	background-color: #ccc;
	color: white;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
        -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
        box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

@media only screen and (min-width: 768px) {
.iconButton:hover:after {
	font-size: 9px;
	position: absolute;
	top: 60px;
	left: 15px;
	text-align: center;
	width: 60px;
	content: attr(title);
}

.iconButton.selected:hover:after {
	color: black;
}
}

@media only screen and (max-width: 768px) {
.iconButton:after {
        font-size: 9px;
        position: absolute;
        top: 60px;
        left: 15px;
        text-align: center;
        width: 60px;
        content: attr(title);
}

.iconButton {
	margin-bottom: 35px;
}

.iconButton.selected:after {
        color: black;
}
}


.license {
	width: 30px;
	height: 40px;
	display: inline;
	background-repeat: no-repeat;
}
.license.mini {
	background-size: 15px;
}
.license.gold {
	background-image: url('../images/gold_mini.png');
}
.license.ipad {
        background-image: url('../images/gold_mini.png');
}
.license.premium {
	background-image: url('../images/premium_mini.png');
}
.license.basic {
	background-image: url('../images/basic_mini.png');
}
.license.block {
	display: block;
}