@import url('https://fonts.googleapis.com/css?family=Lato');

body{
    margin:0px;
    font-family: 'Lato', Arial, sans-serif;
    background: #F9F9F9;
    font-size: 14px;
    font-weight:lighter;

    background-image:url('../images/background-image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; background-size: cover;
    padding: 25px;
}

body a:link {text-decoration: none;}
body a:visited {text-decoration: none;}
body a:hover {	color: #0099CA; text-decoration: none;transition: 0.3s;}
body a:active {color: #0099CA; text-decoration: none;}

h1 { font-size: 36px;
    font-weight:normal;
    margin-top: 0px;
    margin-bottom:8px;
    line-height: 60px;
    color: #119dda;
}

a, a:link {

    text-decoration: none;
}

a.notSelected {
    color: inherit;
}

a:hover {
    color: #40CFFD;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    transition: all .1s ease;
}

.CentralContent{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.ContentWrapper{
    margin-top:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:5px;
    float:left;
    width:100%;

}

.Button{background-color:#616161; border:0px; min-width:180px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; cursor:pointer; color:#fff; font-size:18px; line-height:35px; }
.Button:hover{background-color:#f3645c}


.Wrapper{ float:left;width:100%;}
.FullWidth{float:left; width:100%;}

.Col95, .Col90, .Col85, .Col80, .Col75, .Col70, .Col65, .Col60, .Col55, .Col50, .Col45, .Col40, .Col35, .Col30, .Col25, .Col20, .Col15, .Col10, .Col5{  float:left;  }
.Col95{  width:95%;  }
.Col90{  width:90%;  }
.Col85{  width:85%;  }
.Col80{  width:80%;  }
.Col75{  width:75%;  }
.Col70{  width:70%;  }
.Col65{  width:65%;  }
.Col60{  width:60%;  }
.Col55{  width:55%;  }
.Col50{  width:50%;  }
.Col45{  width:45%;  }
.Col40{  width:40%;  }
.Col35{  width:35%;  }
.Col30{  width:30%;  }
.Col25{  width:25%;  }
.Col20{  width:20%;  }
.Col15{  width:15%;  }
.Col10{  width:10%;  }
.Col5{  width:5%;  }

.TextCenter{  text-align:center;  }
.TextRight{text-align: right;}

.ErrorMessage{
    color:red;
    background: #FDE3E3;
    border: 1px solid #B70000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width:100%;
    float:left;

}

.GrandTotalCost{
    border-top:1px solid #999;
    background: #f8f8f8;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width:100%;
    float:left;

}

.TotalCost{font-size: 14px; font-weight: bold;}

.BoxSizing{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Padding10{  padding:10px;  }
.PaddingTop10{  padding-top:10px;  }
.PaddingBottom10{  padding-bottom:10px;  }
.PaddingTop15{  padding-top:15px;  }
.PaddingRight20{  padding-right: 20px;  }
.PaddingLeft20{  padding-left: 20px;  }

.FloatRight{float:right;}
.FloatLeft{float:left;}
.FloatNone{float:none;}

.BackgroundWhite{  background:White;  }

.BorderBottomBlue{  border-bottom: 1px solid #119dda;  }
.BorderBottomDarkGrey{  border-bottom: 1px solid #A9A8A8;  }

.BorderBottomGrey{  border-bottom: 1px solid #d0d0d0;  }

.MarginBottom5{  margin-bottom: 5px;  }
.MarginBottom40{  margin-bottom: 40px;  }



/* H E A D E R    E L E M E N T S */
header{float:left; width: 100%; padding-bottom: 10px;}

.DatabaseInformation{float: left; width: 100%; text-align: right;-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 0px 0px 10px;
font-size: 16px; font-style: italic; color: orange; /*background-color: #fff;*/}

.Logo{
    width:40%;
    height:120px;
    float:left;
    /*background: #fff;*/
}
.LogoImage img{
    width:120px;
    height:120px;
}
.LogoImage{float: left;}
.LogoText{float:left; padding-top: 65px; padding-left: 15px;}
/*.LogoText h1{color:#666;}*/
.LogoText h1{color:#fff;}

.CompanyLogo{
    width:20%;
    height:60px;
    float:left;
    /*background: #fff;
    padding-top: 60px;
    */
    padding-top: 40px;
}

.CompanyLogo img{padding: 15px; background-color: #fff; border-radius: 10px;}


.ContactUs{
    float:left;
    width:40%;
    height:120px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 15px;
    /*background-color:#fff;*/
}

.ContactBox{width: 180px; float:right;}

a.email,
a.phone{
    font-size: 11px;
    font-weight: normal;
    color: #fff;
    padding-left: 28px;
    background-position: left center;
    background-repeat: no-repeat;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;
}

a.email { background-image: url(../images/email.png), url(../images/email_hover.png);}
a.phone { background-image: url(../images/phone.png), url(../images/phone_hover.png);}
a.email:hover {  background-image: url(../images/email_hover.png);  }
a.phone:hover {  background-image: url(../images/phone_hover.png);  }



/*  P A G I N A T I O N */
.Pagination{
    padding-top:20px;
    float:left;
    width:40%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.CurrentPage, .Page{
    float:left;
    height: 30px;
    min-width:25px;
    cursor:pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 5px;
    padding: 5px;
    padding-left: 7px;
    padding-right: 7px;

}

.Page{
    text-decoration: none;
    background: #119dda;
    border:1px solid #119dda;
    color:#fff;
    margin-bottom: 5px;
}
.CurrentPage, .Page:hover{
    background:white;
    border:1px solid #119dda;
    color:black;

}

.Page:hover{transition: .2s;}

/* O R D E R I N G */


.OrderLink{
    float:left;
    width:100%;
    color:#505050;
    text-decoration: none;
    cursor:pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.OrderAscending{
    float:left;
    width: 0;
    height: 0;
    margin-left: 5px;
    margin-top: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #505050;
}

.TableHeader .PartCost .OrderAscending, .TableHeader .PartCost .OrderDescending{float:right;}
.TableHeader .PartStock .OrderAscending, .TableHeader .PartStock .OrderDescending{float:right;}

.PartStock{text-align: right;}
.OrderDescending{
    float:left;
    width: 0;
    height: 0;
    margin-left: 5px;
    margin-top: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #505050;
}


.Location{
    position: relative; z-index: 10; width: 300px;background-color: #119dda; color:#fff; padding: 10px; float: right; margin-top: 10px;
}

/*  P R O D U C T    L I S T */
.RowImage{float:left; width: 100%;}
.RowNoImage{float:left; width: 100%;}

.RowImage .PartImage{float:left;width:10%; text-align: center;}
.RowNoImage .PartImage{display:none;}

.PartImage img{max-width: 70%; max-height: 80px;}

.RowImage .PartCode{float:left;width:15%; font-weight: bold;}
.RowNoImage .PartCode{float:left;width:25%; font-weight: bold;}


.RowImage .PartCode10{float:left;width:10%; font-weight: bold;}
.RowNoImage .PartCode10{float:left;width:15%; font-weight: bold;}
.RowImage .PartSPN{float:left;width:10%; font-weight: bold;}

.PartDetails{float:left;width:75%;}
.PartDetails70{float:left;width:70%;}

.PartDescription{float:left;width:50%; font-weight: bold;}
.PartStock{float:left;width:35%; text-align: right;}
.PartCost{float:left;width:15%; text-align: right;}

.PartGroup{float:left;width:15%;}
.PartUOM{float:left;width:10%;}
.PartMF{float:left;width:15%;}
.PartColour{float:left;width:12%;}



.StockBreakdown{width: 100%; float: left; padding-top: 10px; font-size: 12px;}


.ResultRow{width:100%; float:left; padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
    color: #505050;
}



.Filters{
    float:left;
    width:60%;
}

.Table{
    width:100%;
    float:left;
}
.TableHeader{
    margin-top:10px;
    width:100%;
    float:left;
    background: #EFEFEF;
    color:#505050;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:15px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #A9A8A8;
    font-size: 14px;
    font-weight:bold;
}
.TableRow{
    float:left;
    width:100%;
}

.TableHeader .PartCost{text-align: right;}



.TableRow:hover, .ProductResult:hover{
    background: #f5f5f5;
}


.ProductResult{
    float:left;
    border-bottom: 1px solid #d0d0d0;
    width:100%;
    background: white;
    color:#505050;
    font-size: 13px;
}

.ProductResultDivider{
    Width:60%;
    float:left;
}

.ProductImageThumbnail{
    float:left;
    width:100%;
}
.ProductImageThumbnail img{
    max-width:90%;
    max-height:90%;
}

.FilterLabel{
    float:left;
    width:100%;
    margin-bottom:5px;
    font-weight: bold;
}

.FilterElement{
    float:left;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 20px;

}



/*

    F O O T E R
 */
.UserLoginFooter{
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    text-align:center;
    background: #119dda;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    color:white;
    font-weight:lighter;
    font-size: 12px;
    opacity: .7;
}

/*
    F O R M    E L E M E N T S
 */

.FormElement{
    width:100%;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
}

.FormLabel{
    width:20%;
    float:left;
}
.FormInputField{
    width:80%;
    float:left;
}

.FormTextInput{
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:5px;
    height:30px;
}

.FormSubmit {
    cursor: pointer;
    color: white;
    background: #119dda;
    border: none;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;


}

.FormSubmit:hover{
    background: orange;
    color: #fff;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}


@media screen and (max-width:1100px) {
    .ManufacturerCol, .ProductGroupCol{
        width:25%;
    }
    .ColourCol{
        width:20%;
    }

    .CodeCol, .IndentCol{
        width:15%;
    }

    .DescriptionCol{
        width:55%;
    }

    .ProductResultDivider{
        width:70%;
    }
    .Pagination
    {
        width:100%;
        padding-top:5px;
    }
    .Filters{
        width:100%;
    }
}


@media screen and (max-width:1000px) {
    .CentralContent{
        width:100%;
    }
    .CurrentPage, .Page{
        height: 25px;
        min-width:20px;
    }
    .CurrentPage{padding-top: 4px;}
}

@media screen and (max-width:800px) {
    .LogoText{display: none;}


}

@media screen and (max-width:630px){
    body{ padding: 10px;}
    .ImageCol{
        display:none;
    }
    .ProductWrapper{
        width:100%;
    }
    .Logo{width: 30%;}
    .ContactUs{width:70%;}
}

@media screen and (max-width:550px) {
    .IndentCol{
        width:0px;
        padding:0px;
    }
    .ProductResultDivider{
        width:80%;
    }

    .ManufacturerCol{
        width:30%;
    }
    .ProductGroupCol{
        width:30%;
    }
    .UoMCol{
        width:15%;
    }


    body{font-size: 12px;}
    header{margin-bottom: 10px;}


    .Page{margin-bottom: 5px;}
    .Filters .Col30{width:40%; padding-top: 5px; padding-bottom: 10px;}
    .Filters .Col15{display: none;}
    .RowImage,.RowNoImage{font-size: 11px;}





    .PartDetails{width:70%;}
    .PartDescription{width:100%;}
    .PartCost{width:25%;}

    .PartStock{width:75%; padding-top: 10px; text-align: left;}

    .StockBreakdown{padding: 0px; font-size: 10px;}

    .PartUOM{width:25%;}
    .PartMF{width:25%;}
    .PartColour{width:25%;}
    .PartGroup{width:25%;}


    .ImageGroup{float:left; width: 30%;}
    .ImageGroup .PartImage{width:100%; }
    .ImageGroup .PartImage img{max-width:50%; }

    .ImageGroup .PartCode{width:100%; text-align: center; font-size: 10px; }
    .ImageGroup .PartCode10{width:100%; text-align: center; font-size: 10px; }
    .ImageGroup .PartSPN{width:100%; text-align: center; font-size: 10px; padding-top: 5px;}
    .PartDetails70{width: 70%;}

    .TableHeader .PartImage{display: none;}


    .TableHeader{padding: 10px;}
    .ResultRow{padding: 10px;}


    .Logo{
        width:50%;
        height:80px;
    }
    .LogoImage img{
        width:80px;
        height:80px;
    }
    .LogoText{display: none;}
    .CompanyLogo{
        width:50%;
        height:60px;
        padding-top: 20px;
        text-align: right;
    }
    .CompanyLogo img{max-width: 120px;}

    .ContactBox{
        width:100%;
        height:40px;
    }
    .ContactUs{
        width:100%;
        height:80px;
    }
    .ContactBox{padding-top: 10px; text-align: center}
    .ContactBox p{display: inline; padding-right: 20px;}
    .DatabaseInformation{background-color: #fff;}

    .Location{width: 90%;}

}

@media screen and (max-width:470px){
    .CodeCol{
        width:100%;
    }
    .TableHeader .CodeCol{
        margin-bottom:10px;
    }
    .DescriptionCol{
        width:70%;
    }
    .Filters .Col30{width:100%; padding-top: 5px; padding-bottom: 0px;}

    .CurrentPage, .Page{

        min-width:10%;


    }
}

@media screen and (max-width:450px){
    /*.PartUOM{width:20%; display: none;}
    .PartMF{width:20%; display: none;}
    .PartColour{width:20%; display: none;}*/

    .PartUOM, .PartMF, .PartColour, .PartGroup{font-size: 9px;}
    .UserLoginFooter{display: none;}

    /*.Page{margin-bottom: 5px;}
    .Filters .Col30{width:100%; padding-top: 5px;}
    .Filters .Col15{display: none;}
    .RowImage,.RowNoImage{font-size: 11px;}
    .RowImage .PartImage{display: none;}

    .RowImage .PartCode{width:25%; }
    .RowNoImage .PartCode{width:25%;}

    .PartDetails{width:75%;}
    .PartDescription{width:100%;}
    .PartGroup{width:50%; padding-top: 5px;}
    .PartStock{width:100%; padding-top: 10px;}

    .StockBreakdown{padding: 0px; font-size: 10px;}
    .PartUOM{width:20%; display: none;}
    .PartMF{width:20%; display: none;}
    .PartColour{width:20%; display: none;}
    */

}