/* 
    Document   : linkflow
    Created on : Oct 6, 2011, 12:48:16 PM
    Author     : scottmarkoski
    Description:
        Style for the link flow.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* Style for links in the link flow, basically just padding them */
.linkflow > a, .linkflow > span {
    padding: .4em 0 0 2.714em;
    display: block;
    font-size: 1.143em;
    text-transform: lowercase;
}

.linkflow.available > a, .linkflow.available > a:link, .linkflow.available > a:focus, .linkflow.available > a:visited {
    color: #E7F1F5;
}

.linkflow.available > a:hover, .linkflow.available > a:visited:hover, .linkflow.available > a:link:hover {
    text-decoration: none;
    border-bottom-style: none;
    border-bottom-width: 0px;
    color: #F7B13D;
}

/* Style for the first box in a link flow. Different because it will be rounded upper left and lower left*/
.linkflow {
    width: 13.186em;
    min-height: 2.222em;
    background: #E7F1F5;
    padding: 0;
    position: relative;
    float: left;
    margin: .714em 0 .714em 0;
    display: inline-block;
}

.linkflow:first-child {
/*    -webkit-border-radius: .5em 0 0 .5em; 
    -moz-border-radius: .5em 0 0 .5em;
    border-radius: .5em 0 0 .5em;*/
    
    -webkit-border-top-left-radius: 0.5em;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0.5em;
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0.5em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0.5em;
}

.linkflow:after {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 13.131em;
    width: 0;
    height: 0;
    z-index: 1;
    border-color: transparent transparent transparent #E7F1F5;
    border-style: solid;
    border-width: 1.111em;
}


.linkflow.available {
    background: #003366;
    color: #E7F1F5;
}

.linkflow.available:after {
    border-color: transparent transparent transparent #003366;
}

.linkflow:last-child:after {
    border-color: transparent;
}

.linkflow:last-child {
    width: 13.214em;
    min-height:2.222em;
    background: #E7F1F5;
    padding:0;
    position:relative;
    float: left;
    margin: .741em 0 .714em 0;
/*    -webkit-border-radius: 0 .5em .5em 0; 
    -moz-border-radius: 0 .5em .5em 0;
    border-radius: 0 .5em .5em 0;*/
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0.5em;
    -webkit-border-bottom-right-radius: 0.5em;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0.5em;
    -moz-border-radius-bottomright: 0.5em;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0;
}

.linkflow.available:last-child {
    background: #003366;
}

.linkflowcontainer {
    height: 3em;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}