/*
    Document   : Cascading Style Sheet
    Created on : 19 April 2010
    Author     : Kristjan Farrugia ~ Linked Studios
    Description: Style sheet for Yellow Bit
*/

/*
logo yellow : f9cf09

10 77
11 85
12 93
13 100
14 108
15 116
16 123.1
17 131
18 138.5
19 146.5
20 153.9
21 161.6
22 167
23 174
24 182
25 189
26 197
*/

@import url("http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css");
@import url("http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css");

html,body{
    min-width: 950px;
    background-color: #2f3134;
}

h1{
    font-size: 146.5%;
    line-height: 153.9%;
    font-family: 'Trebuchet MS';
}

h2{
    font-size: 153.9%;
    line-height: 167%;
    font-family: 'Trebuchet MS';
}

h3{
    font-size: 116%;
    line-height: 153.9%;
    font-family: 'Trebuchet MS';
}

h4{
    font-size: 116%;
    line-height: 153.9%;
    font-family: 'Trebuchet MS';
}

h5{
    font-size: 116%;
    line-height: 153.9%;
    font-family: 'Trebuchet MS';
}

h6{
    font-size: 116%;
    line-height: 153.9%;
    font-family: 'Trebuchet MS';
}

p{
    line-height: 138.5%;
    font-size: 93%;
    text-align: justify;
}

ul.list li p{
    line-height: 16px;
    font-size: 12px;
    text-align: justify;
}

strong{
    font-weight: bold;
}

em{
    font-style: italic;
    font-weight: bold;
}



a{
    text-decoration: none;
    color: #020e74;
    font-weight: bold
}

a:hover{
    text-decoration:underline ;
}


#footer a{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
}

#footer a:hover{
    text-decoration: underline;
}

#header a{
    font-weight: normal;
}

/*
a{
    text-decoration: underline;
}

a:hover{
    text-decoration: none;
}
*/

a.show-hidden{
    text-decoration: none;
}




.backup-list h3{
    font-size: 108%;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}


.container{text-align:center; position: relative}
.content{text-align:left;width:950px;margin-left:auto;margin-right:auto; position: relative}

#header{
    height: 150px;
    background: url('../images/website/header-background.jpg') repeat-x #ffffff;
}

#header-content{
    height: 150px;
}

#torso{
    background-color: #ffffff;
    padding-bottom: 20px;
}

br{
    clear: both;
    float: none;
}

hr{
    height: 1px;
    border: none;
    background: transparent url('../images/website/yellow-line.jpg') center center no-repeat;
    width: 950px;
    padding: 15px 0;
    margin: 0 0;
    color: #fdd207;
}

#footer{
    background-color: #2f3134;
}

/* Company Specific */


/* Header */
#company-logo{
    position: absolute;
    top: 10px;
    left: 0px;
}

#top-menu{
    position: absolute;
    top: 80px;
    left: 7px;
}

#top-menu li,#top-menu li a{
    float: left;
    position: relative;
}

#top-menu li a{
    color: #ffffff;
    padding: 4px 18px;
    text-decoration: none;
    background: url('../images/website/small-yellow-line.png') no-repeat right;
}

#top-menu{
    background: url('../images/website/small-yellow-line.png') no-repeat left;
}

#top-menu li a.selected{
    font-weight: bold;
}

#top-menu li a:hover{
    color: #f9cf09;
}

/* Slider */

#slider-container{
    height: 310px;
    width: 950px;
    position: relative;
}

#slider{
    height: 310px;
    width: 950px;    
    position: relative;
}

#slider ul li img,#slider ul li a,#slider ul li div,#slider ul li h2{
    position: absolute;
}

#slider ul li,#slider ul{
    height: 310px;
    width: 950px;
    position: relative;
    overflow:hidden;
}
#slider ul li{
    background: url('../images/website/slider-box-background.jpg') no-repeat left;
}

#slider ul li img{
    top: 35px;
    left: 35px;
}

#slider ul li h2{
    top: 35px;
    left: 310px;
    width: 500px;
}

#slider ul li div{
    top: 85px;
    width: 240px;
}


#slider ul li div.slider-full{
    left: 310px;
    width: 500px;
}
/*
.slider-full{
    left: 310px;
    width: 500px;
}
*/
.slider-left{
    left: 310px;
}

.slider-right{
    left: 590px;
}

/*
#slider ul li a{
    top: 255px;
    left: 310px;
    width: 500px;

    font-weight: bold;

    line-height: 138.5%;
    font-size: 108%;
}
*/

/* slider numeric controls */

ol#controls{
    position: absolute;
    right: 35px;
    top: 30px;
    padding-top: 5px;
}

ol#controls li{
    margin-bottom: 20px;
}

ol#controls li a{    
    border:none;

    background:#fff8c6;
    color:#444444;

    height: 21px;

    padding:5px 10px;
    text-decoration:none;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

ol#controls li a:hover{
    background:#fff8e6;
}

ol#controls li.current a{
    background:#ffffff;
    color:#000000;
}

ol#controls li a:focus{
    outline:none;
}

/* main body content */
.top{
    height: 10px;
    background: url('../images/website/container-top.jpg') no-repeat left;
}

.bottom{
    height: 10px;
    background: url('../images/website/container-bottom.jpg') no-repeat left;
}

.center{
    min-height: 10px;
    background: url('../images/website/container-center.jpg') repeat-y left;
}

.wrapper{
    padding: 30px 35px;
}

.spacer{
    margin-top: 10px;
}

.double-spacer{
    margin-top: 20px;
}

.double-spacer-banner{
    margin-top: 20px;
	text-align: center;
	border: 1;
}



/* Slogan */

div#slogan hr.alpha{
    padding:15px 0 0 0;
    background: transparent url('../images/website/yellow-line.jpg') bottom center no-repeat;
}


div#slogan hr.omega{
    padding:0 0 15px  0;
    background: transparent url('../images/website/yellow-line.jpg') top center no-repeat;
}

div#slogan h2{
    text-align: center;
    padding: 5px;
}

div#slogan h2 span{
    font-family:'Times New Roman';
    font-weight: bold;
    padding: 0 5px;
    font-size: 138.5%;
    line-height: 77%;
}

div#footer{
    color: #dddddd;
}

div#footer a{
    color: #ffffff;
    text-decoration: none;
}


.footer-box{
    float: left;
    margin-bottom: 10px;
    margin: 25px;
}

ul.footer-box li h3{
    border-bottom: 1px solid #fdd207;
    margin-bottom: 10px;
    width: 185px;
}

ul.footer-box li{
    margin: 4px 0;
}

.social-media li a{
    padding-left: 20px;
}
.social-media li a.email{
    background: transparent url('../images/social-media/email_16.png') top left no-repeat;
}
.social-media li a.linkedin{
    background: transparent url('../images/social-media/linkedin_16.png') top left no-repeat;
}
.social-media li a.facebook{
    background: transparent url('../images/social-media/facebook_16.png') top left no-repeat;
}


/*
ul.social-media{
    float: right;
}

ul.social-media li{
    float: left;
}

ul.social-media li a{
    float: left;
    margin-left: 10px;
}
*/

div#footer hr{
    background:transparent url('../images/website/footer-yellow-line.jpg') center center no-repeat;
    color: #fdd207;
}

.linked-studios{
    text-align: center;
    font-size: 100%;
    padding-bottom: 5px;
}

.left{
    float: left;
    margin-right: 35px;
}

.right{
    float: right;
    margin-left: 35px;
}

/* Other General purpose */

.list li{
    line-height: 108%;
    font-size: 93%;
    text-align: justify;

    background: url('../images/website/list-item.png') no-repeat left top;
    padding-left: 10px;
}

.list li{
    margin-bottom: 8px;
}

.gallery img{
    margin-top: 10px;
}

.special-note{
    border: solid #f9cf09 1px;
    background: #fffae0;
    padding: 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-top: 25px;
}

.group{
    margin-top: 25px;
    border:  solid #d7d7d7 1px;
    background: #f8f8f8;
    padding: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
}


a.show-hidden{
    font-size: 85%;

    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 2px 5px 2px 18px;

    font-weight: bold;

    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;

    background: #e0e0e0 url('../images/website/bullet_arrow_down.png') center left no-repeat;

    border-top:  solid #d7d7d7 1px;
    border-left:  solid #d7d7d7 1px;
}

a.show-hidden:hover{
    background-color: #fefefe;
    text-decoration: none;
}

a.show-hidden:focus{
    outline: none;
}

.group-left{
    width: 310px;
    float: left;
}

.group-right{
    width: 200px;
    float: right;
}

.group-left-half{
    width: 425px;
    float: left;
}

.group-right-half{
    width: 425px;
    float: right;
}


input,select,button,textarea{
    padding: 2px 5px;
    /*background: rgb(47, 49, 52);*/
    background: rgb(250, 250, 250);
    /*color: #f9cf09;*/
    color: rgb(47, 49, 52);
    font-size: 93%;
    border: #c7c7c7 solid 1px;
    margin: 0;

    float:left;
}

button{
    background: rgb(250, 250, 250);
    color: rgb(47, 49, 52);

    cursor: pointer;
}

form{
    margin-top: 25px;
}

form br{
    margin-top: 10px;
}

form span{
    color: rgb(200,50,50);
    margin-left: 5px;
    float:left;
}

label{
    display: inline-block;
    width: 100px;    
    float:left;
}

button:hover{
    background: rgb(47, 49, 52);
    color: #f9cf09;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.error_list li{
    padding: 5px;
}

.pricing{
    font-size: 131%;
    margin: 10px;
    font-weight: bold;
    text-align: center;

}

.contact-details span{
    font-family: monospace;
}

.backup-list img{

    width: 64px;
    height: 64px;

}


.oops a img{

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}