/*
* From Karoline V2.0 added between START & END
*
*/
/* START */
/*
* This is the include file with all the CSS for building
* Karoline.
*
* See http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html
* for a good overview of this.
*/
* {
-webkit-text-size-adjust: none;
}
* {
-webkit-user-select: none;
}
* {
-webkit-touch-callout: none;
}
body {
margin: 0px 0px 0px 0px;
font-family: Helvetica, sans-serif;
padding:0;
height:100%;
border:none;
width: 100%;
overflow-x: hidden;
}
/* Initial body class is "splashScreenBody", set in index.html.
*/
.splashScreenBody
{
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1));
}
.splashScreenQuestion
{
color: #666;
text-decoration: none;
> link {text-decoration: none; color: green;};
> visited {text-decoration: none; color: yellow;};
link {color: #666; text-decoration: none; };
font-weight: bold;
font-size: 18px;
}
.mainBody
{
background-color: #E8E8E8;
}
.blackBackground
{
background-color: black;
}
/*
* http://apptools.com/examples/tableheight.php
*/
#fullHeight
{
height:100%;
}
html
{
margin:0;
padding:0;
height:100%;
width:100%;
border:none
}
.textShadow
{
text-shadow: 0px 1px 0px #e5e5ee;
}
.heading2 { /* Don't think used for Konductor, Karoline specific ? */
line-height: 0.75em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-weight: bold;
background-color: #408080;
font-size:400%;
color:white;
}
h1 {color:black}
table {padding: 0px 0px 0px 0px; border-spacing: 0px 0px;}
p {margin: 5px 5px 5px 5px;}
.heading {}
.para {color:red}
/* shadow class used for text in now playing page (see body.html)
* Effect taken from : http://maettig.com/code/css/text-shadow.html
*
*/
.shadow {
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
}
.whiteOnBlack {
background-color: black; color:white
}
/*
* img.* is used for iPad Radio Presets display
*/
/* Try various width from 64px upwards
*/
img.mainSelected {border: 4px blue solid; width:128px; background-color:#FFFFFF;} /* Img is 145x145px actual size*/
img.selected {border: 4px blue solid; width:68px; background-color:#FFFFFF;}
img.standard {border: 4px #E8E8E8 solid; width:68px; background-color:#E8E8E8;}
img.mainRadioPlaying {border: 4px blue solid; width:145px; background-color:#FFFFFF;} /* Img is 145x145px actual size*/
img.mainRadioBuffering {border: 4px orange solid; width:145px; background-color:#FFFFFF;} /* Img is 145x145px actual size*/
img.mainRadioStopped {border: 4px #E8E8E8 solid; width:145px; background-color:#FFFFFF;} /* Img is 145x145px actual size*/
img.listRadioPlaying {border: 4px blue solid; width:68px; background-color:#FFFFFF;}
img.listRadioBuffering {border: 4px orange solid; width:68px; background-color:#FFFFFF;}
img.listRadioStopped {border: 4px #E8E8E8 solid; width:68px; background-color:#E8E8E8;}
/*
* presetText is used for the text of any presets displayed in the presets list.
*
*/
.presetText
{
}
#topBarDiv
{
background-color: #E8E8E8;
color: gray;
}
#nowListeningDiv
{
background-color: #E8E8E8;
color: gray;
}
#presetsDiv
{
display: block;
z-index: 10;
background-image: none;
background-color: #E8E8E8;
color: gray;
}
#station_name
{
text-align: center;
font-family: Helvetica;
font-size: 24px;
};
#station_genre
{
text-align: center;
font-family: Helvetica;
font-size: 10px;
};
#station_freq
{
text-align: center;
font-family: Helvetica;
font-size: 10px;
};
#station_title
{
text-align: center;
font-family: Helvetica;
font-size: 18px;
};
#room_name
{
text-align: center;
font-family: Helvetica;
font-size: 10px;
};
/* END of Karoline stuff */
/* shadow class used for text in now playing page (see body.html)
* Effect taken from : http://maettig.com/code/css/text-shadow.html
*
*/
.shadow {
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
}
/* .currentTrack & .notCurrentTrack used on playlist page.
*/
/* Swapped b&W to make it more readable.
*/
.notCurrentTrack {background-color: black; color:white}
.currentTrack {background-color: #101010; font-weight:bold; color:white}
.notCurrentAlbum {background-color: black; color:white}
.currentAlbum {background-color: #202020; font-weight:bold; color:white}
/*
*/
.blackOnWhite {background-color: white; color:black}
.whiteOnBlack {background-color: black; color:white}
.progressBar {background-color: #416779; color: #416779;}
.col {background-color: #416779;}
.tab {
color:#CECECE; width:320px; text-align: center; verticle-align: middle;
font-size: 14pt; font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
.track1 {width: 60px; text-align: center; }
.track2 {width: 60px; height: 60px; text-align: center; verticle-align: baseline; font-size: 32pt; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
.track3 {width: 60px; height: 60px; text-align: center; verticle-align: middle; font-size: 32pt; font-family: 'Trebuchet MS', Helvetica, sans-serif;}
/*
* Progress taken from http://building-iphone-apps.labs.oreilly.com/ch03.html#simpleProgressIndicator
* Loading... etc
*/
#infoBox {
-webkit-border-radius: 10px;
background-color: rgba(50,50,50,.7);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
}
/************************************************************************************************/
body {
padding: 0px;
background-color: #000000;
/* Turn off font resizing */
-webkit-text-size-adjust: none;
}
.heading {
font-size: 16px; /* was 20px */
font-weight: bold;
font-family: Helvetica, sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
/* The button class defines properties for buttons that are either 30px or 46px high
*/
.button {
/* Set a button to be a block so its height and width can be adjusted */
display: block;
/* Use the highest button height to ensure that text will vertically align on all buttons */
line-height: 46px;
/* A button will expand to the width of its parent cell if no width is specified , was 150px*/
width: 75px;
font-size: 16px; /* was 20px */
font-weight: bold;
font-family: Helvetica, sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* Creates a button using a 18x30 image */
.blackLeft
{
margin: 3px auto;
color: #fff;
/* Put a 1 pixel blur black shadow below the button's text */
text-shadow: #000 0px 1px 1px;
border-width: 0px 5px 0px 12px;
/* -webkit-border-image divides the leftButton image into 2 corners and middle part. */
/* The left corner is 12 pixels wide. The right corner is 5 pixels wide and the middle part is 1 pixel. */
/* data uri is leftButton.css */
-webkit-border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAeCAYAAAAhDE4sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAktJREFUeNqklk2rElEYx8/oqKOj1/EdHNPxFQUVfGHcKEJt2gWXuyiiVdAHqFVfIiIKgruoPkAtaxeFRBi0CpRo0yoEBS+ufL/9n8HbQhude+cPB45zxp/neZ7/eY6MGRTP86FYLPa0WCyeVyqVZSaT+SCKonqxzhmB4AvNXC73rlAohKLRKH1mg8GA9Xq9eb/ffzQajZ4fBLlcLrVarX5uNpuCz+djDoeDWa1WNp/P2WQyYd1ul3U6nZZ1H8Rms8mlUqnTbrePAoGABliv12y1WmnrdrudeTweNhwOo7ogi8XizWazH7ETJRgM/gNsD/wY7SzA64FkWX6JpBYpnNlstjd8t9vt43UWTvL5/G1K7GKxOFgMCpn/z8NQKpU6TSaTGsQIiN7ZAUUikVN4RKL5dDo15DGqIL/ll3uKotxCaAfzogtCSDJy8gw7uhRkBwSfvEGlJCqz0ZB2cuR0Ou9jJzfIYJeFXOyIQ0hJhPQjkUiIOJjsKhqPx4z3er2v/H6/uFwuGY2rSLMInPsF83PTo1arXUfZ/5gG4dDZVFV9gFzNTMIYO4LK5fIT0yDSNQiufm8aREI/riL5fdMgNDML8nUCY56ZAm1c7qzX6485jluZApFCEBrba9MgEnpSBof4kxHIJhX6Qs9uSJL08xAoHA5/3Qui5DcajWNBEEZ6ELyyQLXvHDyQgAitVusuPPt7G0IFAeQFGdrQ6aZK4n67mU6n32KqARDOdzx7CBMrhu/+zZ8IHvd/Lh6PH6OLfkMPGv+CziBa/yvAAN83WCdE/RuhAAAAAElFTkSuQmCC) 0 5 0 12;
}
/*
* scrollBar is used to the RHS of the library view.
*/
.scrollBar {
color: grey;
}
body {
padding: 0px;
background-color: white;
font-family: Helvetica, sans-serif;
font-size: 14px;
color: black;
}
a {
color: white;
}
img {
border-width: 0px;
}
input {
width: 260px;
background-color: #FFF;
font-size: 18px;
margin: 10px 0px 0px 0px;
}
.center {
text-align: center;
}
.fontSmall {
font-size: 12px;
}
.bold {
font-weight: bold;
}
/* IPHONE ANIMATION API CLASSES */
.divRtC {
-webkit-animation-name: 'RtC';
-webkit-animation-duration: 0.5s;
}
.divCtL {
-webkit-animation-name: 'CtL';
-webkit-animation-duration: 0.5s;
}
.divLtC {
-webkit-animation-name: 'LtC';
-webkit-animation-duration: 0.5s;
}
.divCtR {
-webkit-animation-name: 'CtR';
-webkit-animation-duration: 0.5s;
}
@-webkit-keyframes 'RtC' {
from { left: 490px; }
to { left: 0px; }
}
@-webkit-keyframes 'CtL' {
from { left: 0px; }
to { left: -490px; }
}
@-webkit-keyframes 'LtC' {
from { left: -490px; }
to { left: 0px; }
}
@-webkit-keyframes 'CtR' {
from { left: 0px; }
to { left: 490px; }
}
/* THE DEBUG RESULTS
*/
#debug {
position: absolute;
top: 220px;
left: -490px;
width: 300px;
z-index: 500;
}
/* New for Konductor'11 V1.5
*/
/*
* Common iOS CSS
*
* This CSS should work for both iPad and iPhone.
* Also any none common positioning will match iPad horizontal to allow cross browser testing.
*/
/*
* The footer
*
* In Konductor, the footer is represented by two characters from the font "font-awesome"
* which are used to represent two of the three separated pages / tabs shown.
*
* We don't display the character here, that's a SMOP.
*
*/
.footer
{
float : left;
position : fixed;
bottom : 10px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#footerLeftDiv
{
left : 10px;
}
#footerRightDiv
{
right : 10px;
}
/*
* The Header
*
* Which is rather similar to the footer..
*
*/
.header
{
float : left;
position : fixed;
top : 10px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#headerPowerDiv
{
right : 10px;
}
#headerHomeDiv
{
right : 75px;
}
/* We also keep the iPad horizontal CSS in here, as it will be overridden by other CSS if necesary
* and allows us to better test on Chrome on a PC.
*
*/
#playlistDiv
{
display : none;
top : 160px;
}
#libraryDiv
{
display : none;
top : 160px;
}
#controlDiv
{
display : none;
left : 0px;
}
#infoBox
{
display : none;
}
/*
* Album stuff
*
* _1 is the standard control page
* _2 is full screen
*/
#ds_title_1
{
font-size : 32pt;
z-index : 9999;
}
#ds_album_1
{
font-size : 24pt;
z-index : 9999;
}
#ds_artist_1
{
font-size : 16pt;
z-index : 9999;
}
#ds_title_2
{
font-size : 32pt;
z-index : 9999;
}
#ds_album_2
{
font-size : 24pt;
z-index : 9999;
}
#ds_artist_2
{
font-size : 16pt;
z-index : 9999;
}
#ds_cover_art
{
position : fixed;
left : 0px;
top : 0px;
padding : 0px;
z-index : 9995;
width : 600px;
height : 600px;
}
/*
* Progess circle.
*/
#progressId
{
position : fixed;
left : 680px;
top : 050px;
display : block;
z-index : 10;
}
#progressId_text
{
position : absolute;
left : 0px;
top : 18px;
height : 30px;
width : 60px;
padding : 0px;
text-align : center;
font-size : 20px;
z-index : 11;
}
#progressId_canvas
{
position : absolute;
height : 60px;
width : 60px;
padding : 0px;
z-index : 10;
}
/*
* ui.control.titlesDiv
*/
/*
* ui.control.topRowDiv
*/
#HomeId1
{
left: 950px;
}
/*
* ui.control.volumeIdDiv
*/
#volumeId
{
position : fixed;
display : block;
z-index : 10;
left : 750px;
top : 050px;
}
#volume_level
{
position : absolute;
left : 0px;
top : 18px;
height : 30px;
width : 60px;
padding : 0px;
text-align : center;
font-size : 20px;
z-index : 11;
}
#volume_level_canvas
{
position : absolute;
left : 0px;
top : 0px;
height : 60px;
width : 60px;
padding : 0px;
z-index : 10;
}
#volume_level_img
{
position : absolute;
left : 0px;
top : 0px;
height : 60px;
width : 60px;
padding : 0px;
z-index : 10;
}
#VolumeDecId
{
position : absolute;
left : 80px; /* Left a little more that 70px to center image more. */
top : 12px;
height : 60px;
width : 60px;
padding : 0px;
font-size : 36pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#VolumeIncId
{
position : absolute;
left : 140px;
top : 12px;
height : 60px;
width : 60px;
padding : 0px;
font-size : 36pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
/*
* ui.controls pause/play, previous, next, shuffle, repeat
*
* Note that all these controls are positioned `fixed` as they do not necessarily occure next to
* each other on the UI.
*
*/
/*
* Controls
*/
#pausePlayDivId
{
float : left;
position : fixed;
left : 800px;
top : 160px;
font-size : 72pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#previousDivId
{
float : left;
position : fixed;
left : 680px;
top : 300px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#nextDivId
{
float : left;
position : fixed;
left : 755px;
top : 300px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#randomDivId
{
float : left;
position : fixed;
left : 850px;
top : 300px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
#repeatDivId
{
float : left;
position : fixed;
left : 925px;
top : 300px;
font-size : 32pt;
font-family : FontAwesome;
color : white;
z-index : 9999;
}
/*
* classes for use in HTML tables cf playlists etc.
*/
.odd
{
background-color: black;
}
.even
{
background-color: #413839; /*grey 30*/
}
.selected
{
font-weight:bold;
background-color: #15317e; /* Royal blue 4 */
}
.notCurrentAlbum
{
background-color: black;
color:white;
}
.currentAlbum
{
background-color: #15317e;
font-weight:bold;
color:white;
}
/*
* Trash / wastebasket
*/
.trash
{
font-size : 24pt;
font-family : FontAwesome;
color : aqua;
z-index : 9999;
}
/* Transparancy from: http://www.w3schools.com/css/css_image_transparency.asp */
/*
* `footer` & `innerFooter` are used by the control page to provide the track information running along the bottom of the
* screen.
* I may conver from ids to classes to allow them to be used elsewhere.
*
*/
.footerText
{
background-color: #000000;
position: fixed;
bottom: 0;
width: 100%;
opacity: 0.6;
margin: 0px 0px;
z-index : 9997;
}
.innerFooterText
{
opacity: 1.0;
text-align: center;
color: #FFFFFF;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
z-index : 9998;
/*font-weight: 300;*/
}
/* Full screen background from: http://css-tricks.com/perfect-full-page-background-image
* http://dl.dropbox.com/u/2226856/test/art.1024/noCoverArt.png
*
* http://dl.dropbox.com/u/2226856/test/art.320/folder0015.jpg
*
* The data URI below is a 1px x 1px black PNG which is used by default.
*
* TODO: I need to ensure that the class is set correctly for the body on elaboration.
* The body class is set to "blackBackground" in createMainPage._init.
* This is simply "background-color: black"
*/
body
{
margin: 0px;
padding: 0px;
background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) center center fixed no-repeat;
background-size: contain;
color: #fff;
}
/* Was iphone_vertical.css
*/
@media only screen and (max-device-width: 480px) and (orientation:portrait)
{
/*
* iPhone Vertical CSS layout rules.
*/
#ds_cover_art
{
width : 185px;
height : 185px;
}
#ds_title_1
{
font-size : 14pt;
}
#ds_album_1
{
font-size : 12pt;
}
#ds_artist_1
{
font-size : 12pt;
}
/*
* ui.control.topRowDiv
*/
/*
* Progress circle.
*/
#progressId
{
top : 200px;
left : 20px;
}
/*
* ui.control.volumeIdDiv
*/
#volumeId
{
top : 200px;
left : 100px;
}
/*
* ui.controls pause/play, previous, next, shuffle, repeat
*
* Note that all these controls are positioned `fixed` as they do not necessarily occure next to
* each other on the UI.
*
*/
/*
* Controls [Note most of the CSS for these controls is in ios_common.css]
*/
#pausePlayDivId
{
left : 220px;
top : 70px;
bottom : auto;
font-size : 72pt;
}
#previousDivId
{
left : 10px;
top : 290px;
bottom : auto;
font-size : 32pt;
}
#nextDivId
{
left : 90px;
top : 290px;
bottom : auto;
font-size : 32pt;
}
#randomDivId
{
left : 170px;
top : 290px;
bottom : auto;
font-size : 32pt;
}
#repeatDivId
{
left : 250px;
top : 290px;
bottom : auto;
font-size : 32pt;
}
}
/* Was ipad_vertical.css
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait)
{
/*
* iPad Vertical CSS
*/
#ds_cover_art
{
width : 600px;
height : 600px;
}
/*
* ui.control.topRowDiv
*/
/*
* Progress circle.
*/
#progressId
{
top : 650px;
left : 110px;
}
/*
* ui.control.volumeIdDiv
*/
#volumeId
{
top : 650px;
left : 195px;
}
/*
* ui.controls pause/play, previous, next, shuffle, repeat
*
* Note that all these controls are positioned `fixed` as they do not necessarily occure next to
* each other on the UI.
*
*/
/*
* Controls [Note most of the CSS for these controls is in ios_common.css]
*/
#pausePlayDivId
{
left : 650px;
top : 270px;
bottom : auto;
font-size : 72pt;
}
#previousDivId
{
left : 410px;
top : 665px;
bottom : auto;
font-size : 32pt;
}
#nextDivId
{
left : 490px;
top : 665px;
bottom : auto;
font-size : 32pt;
}
#randomDivId
{
left : 570px;
top : 665px;
bottom : auto;
font-size : 32pt;
}
#repeatDivId
{
left : 650px;
top : 665px;
bottom : auto;
font-size : 32pt;
}
}
/*
* Was css/iphone_horizontal.css
*/
@media only screen and (max-device-width: 480px) and (orientation:landscape)
{
/*
* iPhone Horizontal CSS Layout rules.
*/
#ds_cover_art
{
width : 215px;
height : 215px;
}
/*
* Album stuff
*
* _1 is the standard control page
* _2 is full screen
*/
#ds_title_1
{
font-size : 24pt;
}
#ds_album_1
{
font-size : 18pt;
}
/*
* ui.control.volumeIdDiv
*
* volumeId is 80Px to the left of progress circle.
*/
#progressId
{
top : 75px;
left : 215px;
}
#volumeId
{
top : 75px;
left : 285px;
}
/*
* ui.controls pause/play, previous, next, shuffle, repeat
*
* Note that all these controls are positioned `fixed` as they do not necessarily occure next to
* each other on the UI.
*
*/
/*
* Controls [Note most of the CSS for these controls is in ios_common.css]
*/
#pausePlayDivId
{
left : 280px;
top : 10px;
bottom : auto;
font-size : 32pt;
}
#previousDivId
{
left : 230px;
top : 170px;
bottom : auto;
font-size : 32pt;
}
#nextDivId
{
left : 300px;
top : 170px;
bottom : auto;
font-size : 32pt;
}
#randomDivId
{
left : 370px;
top : 170px;
bottom : auto;
font-size : 32pt;
}
#repeatDivId
{
left : 440px;
top : 170px;
bottom : auto;
font-size : 32pt;
}
}
#headerGradient
{
z-index : 9990;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1.0)), to(rgba(0, 0, 0, 0.0)));
position:fixed;
top : 0;
left : 0;
width : 100%;
height : 48px;
padding : 0;
}
#footerGradient
{
z-index : 9990;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 1.0)));
position:fixed;
bottom:0;
left:0;
width:100%;
height:48px;
padding:0;
}
/*
* CSS Rules for the album view based tables
*/
.album_view_table
{
float : left;
text-align : center;
width : 128px;
table-layout : fixed;
font-size : 10px;
}
.album_view_table_image
{
width : 120px;
height : 120px;
}
.album_view_table_text_tr
{
height : 1.5em;
}
.album_view_table_text_td
{
overflow : hidden;
white-space : nowrap;
}
/*
* iOS Back Arrow - from: http://dream-world.us/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/
*
* Usege: Back
*/
#ios-arrow-left
{
left:20px;/*change the position*/
top:10px;/*change the position*/
position:absolute;
background-repeat:repeat-x;
background-color: rgba(74,108,155,1);/*change this and the background color for the :before element*/
background-image : -webkit-linear-gradient(
bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 50%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0.3) 100%
);
height:30px;
padding: 0 10px 0 8px;
z-index : 0;
border-radius: 6px;
-webkit-border-top-left-radius : 10px 15px;
-webkit-border-bottom-left-radius : 10px 15px;
border-bottom: 1px solid rgba(255,255,255,0.3);
box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
0 1px 2px rgba(0,0,0,0.8)inset;
font-size : 11px;
display : block;
text-align:center;
color:#fff;
text-shadow : 0px -1px 0px #000;
line-height : 30px;
font-family : HelveticaNeue;
font-weight: 700;
-webkit-background-size : 30px;
}
#ios-arrow-left:before
{
position:absolute;
top:9.9%;
left:-5px;
-webkit-background-size : 22px 22px;
background-position :-2px -1.5px;
background-color: rgba(74,108,155,1);/*change to the same as the main element*/
background-image :
-webkit-gradient(linear, left bottom, right top,
from(rgba(0,0,0,0)),
color-stop(0.5, rgba(0,0,0,0)),
color-stop(0.5, rgba(255,255,255,0.1)),
to(rgba(255,255,255,0.3)));
height : 25px;
width: 25px;
-webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
-webkit-border-top-right-radius : 100px 40px;
-webkit-border-top-left-radius : 30px 2px;
-webkit-border-bottom-right-radius : 2px 30px;
-webkit-border-bottom-left-radius : 40px 100px;
z-index : 1;
content : ' ';
border-left : 1.5px solid rgba(255,255,255,0.3);
box-shadow : 1px 1px 0 rgba(0,0,0,0.2) inset,
-1px 1px 1px rgba(0,0,0,0.5) inset;
-webkit-mask-image :
-webkit-gradient(linear, left top, right bottom,
from(#000000),
color-stop(0.33,#000000),
color-stop(0.5, transparent),
to(transparent));
}