﻿

ul {list-style:disc!important;padding-left:20px!important;}
ol {list-style:lower-latin!important;padding-left:20px!important;} 
li {margin-bottom:5px;}

h1, h2, h3, h4, h5, h6 {margin-bottom: 0.5em; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.2em;}
h1 {font-size: 155%; line-height: 1.6em; color: #bf165e;}
h2 {font-size: 140%;}
h3 {font-size: 125%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}
h6 {font-size: 90%;}
body 
{
    overflow-y: scroll; 
    font-size: 13px; 
    color: #222; 
    font-family: Helvetica, Arial, sans-serif;
    background-image:url('https://www.cityu.edu.hk/aro/alum/Images/bg2011.jpg');
}



#buttonpanel{
    width: 1024px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #444;
    background-color: #FAF9F8;
}

#buttonpanel input[type="button"]
{
    padding:5px 10px;
    margin-right:10px;
}

#appformoptions
{
    width: 1024px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #444;
    background-color: #FAF9F8;
}

#appformoptions table td
{
    padding:5px 10px;
    vertical-align: top;
}

#appformoptions input[type="button"]
{
    padding:5px 10px;
}


#appformdetail
{
    width:1024px;
    border: 1px solid #e1e1e1;
    padding: 10px;
    margin: 10px 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #444;
    background: #fff;
}


#appform table
{
    width:100%;
}

#title
{
    padding:10px;
    text-align:center;
    font-size: 15px;
    font-weight:bold;
    font-family: 'Times New Roman' , Times, serif;
}

@media only screen and (max-width: 700px){
    #title {font-size: 12px;}
    #mainImg {width:80%}
}


.editarea
{
    background-color:#ffffea;
    width:870px;
    border:1px solid #d1d1d1
}

.editareatitle
{
    padding:10px;
    color:#666;
}



/* Form Design*/
#designform{
    width:940px;
    padding: 5px;
    margin: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #444;
}
#designform a:link, #designform a:visited { color: #1a55db;}
#designform a:hover, #designform a:active { color: #ef3910;}

.instruction{
    border:solid 1px #aaa; background:#fef9e2;padding:0 10px;
}

.appformsectionbutton{
    padding:4px 6px;
    font-size:10px;
}

.section
{
    position:relative;
    border:1px solid #d1d1d1;
    background-color: #FeFeFe;

    padding: 5px 10px;
    margin: 2px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #222;

}

.sectionheader{font-weight:bold;padding:0 0 10px 0;}
.editbutton{position:absolute;top:6px;right:6px; font-size:11px;}
.sectiontype{position:absolute;top:-5px;left:-1px;color:#fff;background:#666;text-align:center;padding:3px;font-size:9px;display:none;}
.sectionremark{padding:10px 0 0 0;}
.disabled{background-color: #d2d2d2;}

.question{padding:2px;position:relative;vertical-align:top;}
.questionlabel {min-width:160px;vertical-align:middle;font-size:12px;}
.questionlabel > a { text-decoration: none;  }
.questionitems{text-decoration: none;margin-right:10px; line-height:1.4em;font-size:12px;}
.optionbutton{font-size:11px;}

#totaldiv{
    text-align:right;
    font-weight:bold;
    padding:10px;
    border:1px solid #d1d1d1;
    background-color: #D1E2FE;    
    margin-top:5px;
}

#formtotal{
    border:none;
    background-color: #D1E2FE;
    font-weight:bold;
    width:100px;
}

.popuptable tr>td{ padding:5px 2px; }
 .labelcol {padding-top:8px!important;}


input:invalid {
  border:1px solid red;
}