/*
Primary CSS for Connectnz Repair Centre Website. 
*/
/* 
    Created on : 7/07/2015, 12:03:34 PM
    Author     : Royboy
*/
body {
    background-color: white;
    margin: 0;
    padding:0;
    text-decoration: none; font-family: Arial; font-size:11pt;
}

.wrapper{
    background: #da1b26; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#da1b26, #ff4200); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#da1b26, #ff4200); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#da1b26, #ff4200); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#da1b26, #ff4200); /* Standard syntax */
    //background-image: url("../images/headerbg.png");
    text-align: center;
    height: 360px;
}
.wrapper2{
    width:1000px;
    text-align: center;
    min-height:900px;
    margin-left:auto;
    margin-right: auto;
    padding-top:20px;
}

.contactbar{
    background: #282828; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#282828, #4b4a4a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #4b4a4a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #4b4a4a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #4b4a4a); /* Standard syntax */        
    width:100%;
    text-align: right;
    color:white;
    height:30px;
    text-decoration: none; font-family: Arial; color:gray; font-size:10pt;
    margin-right: 30px; 
}
.contactbar .phone{ font-family: arial; font-size: 14pt; color:white; font-weight: bold; letter-spacing: 0.2em; display:inline-block;}
.contactbar .email{margin-right:60px; display:inline-block;}
.contactbar .email:hover{background-color:#da1b26;}
.contactbar img {height:28px;}
.contactbar span{vertical-align: 8px;}


header{
    background-image:url("../images/header.png");
    background-repeat: no-repeat;
    background-position: left;
}

nav a:visited {text-decoration: none; font-family: Sans-Serif;  color:#282828; font-size:13pt;}
nav a:link {text-decoration: none; font-family: Sans-Serif;  color:#282828; font-size:13pt;}
nav a:active {text-decoration: none; font-family: Sans-Serif;  color:#282828; font-size:13pt;}
nav a:hover {text-decoration:none ; font-family: Sans-Serif;  color:white; font-size:13pt; text-shadow: 1px 1px #282828;}
nav{ height: 110px;}

nav a { display:block; width: 125px; height: 30px;}
nav ul { float: right; list-style-type: none; padding-top:20px; }
nav ul li {display:inline-block; margin:2px; line-height: 30px;}
nav ul li:hover {}

/* Sub Menus */
nav li ul a:visited {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:#282828; font-size:10pt;}
nav li ul a:link {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:#282828; font-size:10pt;}
nav li ul a:active {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:#282828; font-size:10pt;}
nav li ul a:hover {text-decoration:none ; font-family: Sans-Serif; font-weight: bold; color:white; text-shadow: 1px 1px #282828; font-size:10pt;}
nav li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    display: none;
    background-color:lightgray;
}

nav li:hover ul {
    width:118px;
    display: none;
    box-shadow: -1px 2px 5px #494646;
}

nav li ul li {
    display: block;
    clear:left;
    background-color:#da1b26;
    color:white;
}
nav li ul li a:hover {color:white; }


section{background-color:white; padding:5px; border-radius: 5px;    box-shadow: 0px 3px 5px #282828    }

article {padding:10px; text-decoration: none; font-family: Arial; color:black; font-size:11pt;}
article a:visited {text-decoration: none; font-family: Arial;  color:#da1b26; font-size:11pt;}
article a:link {text-decoration: none; font-family: Arial; color:#da1b26; font-size:11pt;}
article a:active {text-decoration: none; font-family: Arial; color:#da1b26; font-size:11pt;}
article a:hover {text-decoration:underline ; font-family: Arial; color:#da1b26; font-size:11pt;}

article .contentPic{padding:3px; position:relative; display:inline-block;margin:5px}
article .contentPic img{border-radius: 5px; margin: 3px;}
article .contentPic img:hover{}
article .contentPic span{display:none;}

article .contentPic a:hover span{
   margin:2px;
   padding:2px;
   display: inline-block; 
   position: absolute; top:80%; left:5%; z-index: 100;
   width: 75%;
   border:1px solid black; border-radius: 5px; background-color: white;
   font-family:Arial; color:black; font-size:9pt; text-decoration: none;
   background-image: url("../images/cnzbullet.jpg"); background-repeat: no-repeat; padding-left: 10px; background-position: top left;
}
article .contentPic a:hover .apple{ 
    padding-top:30px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .samsung{ 
    background-position: top center;
    background-image: url("../images/samsung-minor.png");
    padding-top:30px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .lenovo{ 
    background-position: top center;
    background-image: url("../images/lenovo-minor.png");
    padding-top:20px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .acer{ 
    background-position: top center;
    background-image: url("../images/acer-minor.png");
    padding-top:25px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .toshiba{ 
    background-position: top center;
    background-image: url("../images/toshiba-minor.png");
    padding-top:20px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .compaq{ 
    background-position: top center;
    background-image: url("../images/compaq-minor.png");
    padding-top:30px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .hp{ 
    background-position: top center;
    background-image: url("../images/hp-minor.png");
    padding-top:30px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .dell{ 
    background-position: top center;
    background-image: url("../images/dell-minor.png");
    padding-top:30px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}
article .contentPic a:hover .asus{ 
    background-position: top center;
    background-image: url("../images/asus-minor.png");
    padding-top:25px;
    font-family:Arial; color:black; font-size:9pt; text-decoration: none;
}

#job{
  margin: 0 auto;
}
#job label{padding:2px;vertical-align: top;font-weight: bold;}

article .smallhighlight a:visited {text-decoration: none; color:#da1b26; }
article .smallhighlight a:link {text-decoration: underline;  color:#da1b26;}
article .smallhighlight a:active {text-decoration: none; color:#da1b26;}
article .smallhighlight a:hover {text-decoration: underline; color:gray; font-size:11pt;}
article .smallhighlight{ text-decoration: none; color:#da1b26;}

article .largehighlight a:visited {text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;}
article .largehighlight a:link {text-decoration: underline; font-family: Arial; color:#da1b26; font-size:20pt;}
article .largehighlight a:active {text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;}
article .largehighlight a:hover {text-decoration: underline; font-family: Arial; color:gray; font-size:20pt;}
article .largehighlight{
    text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;
    display: block;
    padding-top:20px;
    padding-bottom:20px;
}

article .repairit a{background-color:rgba(255,255,255,0.6); display:block; position:relative; top:10px; text-align: center;}
article .repairit a:visited {text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;}
article .repairit a:link {text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;}
article .repairit a:active {text-decoration: none; font-family: Arial; color:#da1b26; font-size:20pt;}
article .repairit a:hover {text-decoration: none; font-family: Arial; color:#da1b26; font-size:22pt; background-color:rgba(255,255,255,0.9)}
article .repairit{
    background-image:url("../images/repairit.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    height:120px;
}

article #textbox{padding:10px; text-align: justify; line-height: 170%;}


article p{ padding:5px; font-weight: normal; text-decoration: none; font-family: Arial; color:black; font-size:11pt; text-align: justify; line-height: 170%; }

article li{
    padding: 5px;
    margin: 5px;
    text-align: left;
}

article h1 a:visited {text-decoration: none; font-family: Arial; color:#da1b26; font-size:16pt;;}
article h1 a:link {text-decoration: underline; font-family: Arial; color:#da1b26; font-size:16pt;}
article h1 a:active {text-decoration: none; font-family: Arial; color:#da1b26; font-size:16pt;}
article h1 a:hover {text-decoration: none; font-family: Arial; color:#da1b26; font-size:16pt;}
article h1{
    font-size: 16pt;
    border-bottom: 1px solid darkgray;
    color:#da1b26;
    background-image: url("../images/cnzbullet2.jpg"); background-repeat: no-repeat; padding-left: 10px; background-position: left;
    letter-spacing: 0.2em;
    text-align: center;
}
article h2{
    font-size: 12pt;
    border-bottom: 1px solid darkgray;
    color:#da1b26;
    background-image: url("../images/cnzbullet2.jpg"); background-repeat: no-repeat; padding-left: 10px; background-position: left;
    letter-spacing: 0.2em;
    text-align: center;    
}
article h3{
    font-size: 11pt;
    color:#da1b26;
    border-bottom:1px solid gray;
    background-image: url("../images/cnzbullet2.jpg"); background-repeat: no-repeat; padding-left: 10px; background-position: left;
    text-align: center;    
}

article h4{
    display: inline       
}

article fieldset{ border-radius: 5px; border:1px solid darkgray; }
article fieldset legend{color:#da1b26; text-align: left;}

article table{border:0px; padding:5px; width: 100%;}

article .infotable{text-align: left;}
article .infotable th{width:100px;}

article #job_loaded div{
    text-align: left;
}
article #job_loaded div label{
    font-weight: bold;
    width:180px;
    text-align: right;
}

article .abuttons{}
article .abuttons a{
    display:inline-block;
    height:60px;
    width:150px;
    background-color:whitesmoke;
    border:1px solid gray;
    text-align: center;
    line-height:60px;
    border-radius: 5px;
    font-size:14pt;
}
article .abuttons a:link {text-decoration: none; font-family: Sans-Serif; color:#da1b26;}
article .abuttons a:visited {text-decoration: none; font-family: Sans-Serif; color:gray; }
article .abuttons a:active {text-decoration: none; font-family: Sans-Serif; color:#da1b26;}
article .abuttons a:hover {text-decoration:none ; font-family: Sans-Serif; color:white; background-color: #da1b26; border:1px solid white; box-shadow: 0px 3px 5px #282828; }

article #tracking_results .title,.job_info{padding:10px;}    
article #tracking_results .title{}
article #tracking_results .job_info{
    text-align: left;
}
article #tracking_results .job_info div{
    padding:5px;
}
article #tracking_results .job_info .buttons{
    float:right;
}

article #tracking_results .job_info .buttons .email{
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image:url("../images/mail.png")
}
article #tracking_results .job_info .buttons a{
    display:inline-block;
    height:60px;
    width:150px;
    background-color:whitesmoke;
    border:1px solid gray;
    text-align: center;
    line-height:55px;
    border-radius: 5px;
    font-size:14pt;
}
article #tracking_results .job_info .buttons a:link {text-decoration: none; font-family: Sans-Serif; color:#da1b26;}
article #tracking_results .job_info .buttons a:visited {text-decoration: none; font-family: Sans-Serif; color:gray; }
article #tracking_results .job_info .buttons a:active {text-decoration: none; font-family: Sans-Serif; color:#da1b26;}
article #tracking_results .job_info .buttons a:hover {text-decoration:none ; font-family: Sans-Serif; color:white; background-color: #da1b26; border:1px solid white; box-shadow: 0px 3px 5px #282828; }

article #tracking_results label{font-weight:bold;}    

article #tracking_results td{
    padding:5px;
    vertical-align: top;
    text-align: left;
}    
article #tracking_results .jobnumber{
    font-size: 36pt;
    border-bottom:1px solid gray;        
}
article #tracking_results .status{
    font-size: 20pt;
    font-weight: bold;
}

article #tracking_results .online_notes .note_time{width:80px;border-bottom:1px solid lightgray}
article #tracking_results .online_notes .note_subject{width:140px;border-bottom:1px solid lightgray}
article #tracking_results .online_notes .note_content{border-bottom:1px solid lightgray}

input, select,textarea{border-radius: 5px; border:1px solid gray; padding-left:3px;}
span {padding:2px;}

#company{text-align: right;}

#createrepair{padding:10px;}
#createrepair table{border:0px; padding:5px;}
#createrepair textarea{height:100px; min-width: 500px; max-width:650px;}
#createrepair .updates{font-size:10pt;}


#createrepair label.error {
    color:red;
    margin-left:9px;
    font-size: 12px;
}

#createrepair .terms #termsbox .text{text-decoration: none; font-family: Arial; font-size:8pt; display: block; padding:10px; text-align: left;}
#createrepair .terms #termsbox .text h1{font-weight:bold;font-family: Arial; text-align: left; font-size: 8pt; color:black; background-image: none; display:inline; border:0px;}


#sendEmail{padding:10px;}
#sendEmail .label{display:inline-block;padding:5px; width:50px;}
#sendEmail .field{display:inline-block;padding:5px;}
#sendEmail #emailSubject{width:800px}
#sendEmail #returnEmail{width:800px}
#sendEmail textarea{height:100px; min-width: 900px; max-width:900px}

#payment{padding:10px;}
#payment table{border:0px; padding:5px;}
#payment .label{text-align: right;  vertical-align: top; font-size:10pt; width:150px; }
#payment .field{text-align: left; display:block}
#payment .fieldnote{font-size: 9pt;text-align: left;}

#payment label.error {
    color:red;
    margin-left:9px;
    font-size: 12px;
}


footer{
    background: #282828; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#282828, #4b4a4a); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #4b4a4a); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #4b4a4a); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #4b4a4a); /* Standard syntax */    
    width:100%;
    height: 100px;
    background-color:#282828;
}
footer{text-decoration: none; font-family: Sans-Serif; color:gray; font-size:10pt}
footer a:link {text-decoration: underline; font-family: Sans-Serif; color:#da1b26; font-size:10pt;}
footer a:visited {text-decoration: none; font-family: Sans-Serif; color:gray; font-size:10pt;}
footer a:active {text-decoration: none; font-family: Sans-Serif; color:#da1b26; font-size:10pt;}
footer a:hover {text-decoration:underline ; font-family: Sans-Serif; color:#da1b26; font-size:10pt;}

footer ul a:visited {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:white; font-size:11pt;}
footer ul a:link {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:white; font-size:11pt;}
footer ul a:active {text-decoration: none; font-family: Sans-Serif; font-weight: bold; color:#da1b26; font-size:11pt;}
footer ul a:hover {text-decoration:none; font-family: Sans-Serif; font-weight: bold; color:#da1b26; font-size:11pt;}
footer ul a { display:block; width: 150px;}
footer ul { list-style-type: none; }
footer ul li {display:inline-block; margin:5px; border-radius: 5px; vertical-align: top;}

footer #copyright{ color:lightgray;}
footer #copyright a:link {text-decoration: none; font-family: Sans-Serif; color:lightgray; font-size:10pt;}
footer #copyright a:visited {text-decoration: none; font-family: Sans-Serif; color:lightgray; font-size:10pt;}
footer #copyright a:active {text-decoration: none; font-family: Sans-Serif; color:#da1b26; font-size:10pt;}
footer #copyright a:hover {text-decoration:none ; font-family: Sans-Serif; color:#da1b26; font-size:10pt;}
footer #copyright{
    position:relative;
    top:40px;
}
#loader{text-align: center;margin-left: auto;margin-right: auto };