* {
    padding:0;
    margin:0;
}

a {
    color:#999;
}

a:focus, a:hover {
    color:#000;
}

.active {
    color:#000;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    cursor: crosshair;
    cursor: pointer;
}

html, body {
    height: 100%;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
/*       min-height: 200px;*/
}


body {
/*    height: 100%;*/
  /*   min-height: 400px;*/
/*    min-width: 800px;*/
    background: #fff;
    color:#999;
    font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}



#outer {
    height: 100%;
    width:100%;
    min-width: 1100px;
    overflow: visible;
    background-color: #000;
    background-color: #FFFFFF;
    border: 0px solid black;
/*    font-size: 100%;*/
/*    line-height: 100%;*/
    
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
} /* or without overflow */





#wrapper {
    width:100%;
    height: 100%;
    margin:0 auto;
    display: table;
    overflow: visible;
    display: block;
    border: 0px solid green;
    background-color: #FFF;
}



#navWrapper {
    top: 25%;
    width: 580px;
    border: 0px solid green;
    float: left;
    position: relative;
    display: inline-block;
/*    font-size: 16px;
    font-size: 1.6rem;*/
}



#inner {

  width: 100%;
    position: relative;
    height: 50%;
/*    min-height: 400px;*/
    border: 0px solid red;
    float: left;

} /* for explorer only */
/* optional: #inner[id] {position: static;} */




#logoAlignment {
    width: 160px;
    height: 160px;
    margin-top: 0px;
    background-color: transparent;
    padding: 0px 0px 0px 0px;
    float: left;
    display: inline-block;
    background-color: #000;
}


/*#logoInside {
    width: 200px;
    height: 200px;
    margin-top: 0px;
    background-color: #000;
    padding: 0px 0px 0px 0px;
    float: left;
}*/




#logoImage {
    width: 70px;
    height: 108px;
    margin: 34px 0 0 50px;
    background-color: #000;
    background: url('/assets/arcconwhite-sm.jpg') no-repeat left top;

}





#navPane-Arcon {
/*    width: 50%;*/
    border: 0px solid green;
    float: left;
    position: relative;
    margin: 47px 0 0 0px;
    display: inline-block;
    width: 420px;
    height: 50%;
/*    font-size: 100%;*/
}



#navPane-Call {
/*    width: 50%;*/
    border: 0px solid green;
    float: left;
    position: relative;
    margin: 47px 0 0 0px;
    display: inline-block;
    width: 420px;
    height: 50%;
/*    font-size: 100%;*/

}


#navPane-one {
    float: left;
    margin: 10px 0px 0 26px;
    position:relative;
    border: 0px solid red;
    display: inline-block;
/*    width: 54px;*/
}


#navPane-two {
    float: left;
    margin: 10px 0px 0 26px;
    position: relative;
    border: 0px solid red;
    display: inline-block;
/*    width: 80px;*/
}


#navPane-three {
    float: left;
    margin: 10px 0px 0 26px;
    position: relative;
    border: 0px solid red;
    display: inline-block;
/*    width: 200px;*/

}

#navPane-pager {
    float: right;
    margin: 10px 70px 0 0px;
    position: relative;
    border: 0px solid red;
    display: inline-block;
/*    width: 200px;*/

}

#navPane-commercial {
    float: left;
    margin: 55px 0 0 0px;
    position: relative;
    border: 0px solid red;
/*    width: 210px;*/

}


#pager {
    float: right;
    margin: 0px 0px 0 0px;
    position: relative;
    display: inline-block;
    letter-spacing: 6px;
    border: 0px solid red;

}

#pager a {
    color: #F26721;
}

#pager a:hover   {
    color: black;
}
#pager a:focus   {
    color: black;
}

#pager-2 {
    float: left;
    margin: 64px 20px 0 50px;
}

.pagerOrange {
    display: block
}

a .pagerOrange {
    color: #F26721;
    margin-left:110px;
}

a:link .pagerOrange {
    color: #F26721;
}

a:hover .pagerOrange   {
    color: black;
}








/*Property photos on right half of page */

#imageWrapper {
    height:100%;
    width: auto;
/*    float: left;*/
    position: absolute;
    border: 0px solid red;
    display: inline-block;
/*    font-size: 90%;*/
}

#imageContainer {
    float: left;
/*    display: block;*/
    border: 0px solid red;
    height: 100%;
/*    width: auto;*/
/*    min-height: 400px;*/
}

#ImageFront {
    width: auto;
    height: 100%;
/*    float: left;*/
/*    bottom: 0px;*/
    border: 0px dotted green;
    position: relative;
}

#ImageFront img {
    display: block;
    height: 100%;
    width: auto;
    vertical-align: bottom;
    border: 0;
/*    position: absolute;*/
    bottom: 0;
    opacity:1.0;
}


#Image {
    width: auto;
    height: 100%;
    float: left;
/*    bottom: 0px;*/
    border: 0px dotted green;
    position: relative;
}

#Image img {
    display: block;
    height: 100%;
    width: auto;
    vertical-align: bottom;
    border: 0;
    position: absolute;
    bottom: 0;
}


#Image a:link {
    color: white;
}


#Image a:visited {
    color: white;
}



#Image a:hover {
    color: #F26721;
}



#architectTag    {
    font-size: 80%;
    letter-spacing: 1px;
    font-weight: bold;
}



#descriptor {
    margin-left: 0px;
    bottom: 0px;
    position: absolute;
    z-index: 99;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, .7);
    line-height: 120%;
    display: table-cell;
    vertical-align: middle;
}


#descriptorInner {
/*    float: left;*/
    display: table-cell;
    vertical-align: middle;
    border: 0px solid green;
    width: 100%;
    padding: 20px 20px 0px 20px;
    height: 300px;
}



.architectTag    {
    letter-spacing: 0px;
    color: #000;
    margin: 0 0 32px 0;
    display: block;
}





.descriptor {
    color: #000;
/*    font-size: 15px;*/
/*    line-height: 20px;*/
    color: #000;
    font-size: 90%;
    margin: 14px 0 0px 0;
    display: block;
}

.quote {
    font-size: 80%;
    font-style: italic;
/*    font-weight: bold;*/
    color: #000;
    display: block;
}



#frontDescriptor {
    letter-spacing: 1px;
    width:150%;
    height: 100%;
    z-index: 999;
    padding-left: 32px;
    float: left;
    position: absolute;
    color:#fff;
    display: inline-block;
    top:0; 
    opacity:1.0;
    border: 0px solid green;

}

#frontDescriptor a:link {
    color: white;
}


#frontDescriptor a:visited {
    color: white;
}



#frontDescriptor a:hover {
    color: #999;
}


#quoteWrapper {
     letter-spacing: 1px;
     color: white;
     position: absolute;
     top: 25%;
     width: 90%;
     border: 0px solid red;
     margin: 58px 0 0 20px;
     text-align: justify;
}




#quoteWrapper a:link {
    color: white;
    font-style: italic;
    font-size: 100%;
}


#quoteWrapper a:visited {
    color: white;
}



#quoteWrapper a:hover {
    color: orange;
}






header, #header {
	padding-top: 0px;
        border: 0px solid green;
}


a {
    text-decoration: none;
}




.contact {
    width: 70px;
    height: 30px;
    margin: 10px 0 0 -80px;
    color: #f26721;
    font-size: 100%;

    border: 0px solid green;
    text-align: right;


}




#address {
    color: #777;
/*    font-size: 100%;*/
    margin: 50px 0 0 0px;
    border: 0px solid red;
    width: 300px;
    height: 0px;
    border: 0px solid green;
/*    line-height: 150%;*/

}

#address a:link {
    color: #F26721;
}

#address a:visited {
    color: #F26721;
}

#address a:hover {
    color: black;
}


#contactForm {
    width: 600px;
    height: 300px;
    border: 0px solid red;
    float: left;
    margin: 0px 0 0 32px;
    background-color: transparent;
    font-size: 100%;
    top:25%;
    margin-top: 95px;
    position: absolute;

   
}


.contactform {
    width: 100%;
    height: 150px;
    color: #666;
    font-size: 100%;

    border: 2px dotted #f2f2f2;
    font-family: 'Open Sans Condensed', sans-serif;
        background-color: transparent;
                margin: -30px 0 0 0;
        float: left;

}

#name.error {
    width: 100%;
    height: 200px;
    color: #666;
/*    font-size: 16px;
    font-size: 1.6rem;*/
    border: 2px dotted #f2f2f2;
    font-family: 'Open Sans Condensed', sans-serif;
        background-color: transparent;
                margin: -25px 0 0 0;
        float: left;

}



.email {
    width: 100%;
    height: 2em;
    color: #666;
    font-size: 100%;

    border: 2px dotted #f2f2f2;
    font-family: 'Open Sans Condensed', sans-serif;
        background-color: transparent;
        margin: -30px 0 0 0;
        float: left;

}

#email.error {
    width: 100%;
    height: 2em;
    color: #666;
    font-size: 100%;

    border: 2px dotted #f2f2f2;
    font-family: 'Open Sans Condensed', sans-serif;
        background-color: transparent;
                margin: -30px 0 0 0;
        float: left;

}



#send  {
   width: 60px;
    height: 27px;
    border: 0px solid purple;
    background-color: #f26721;
    margin: 240px 0 2px 600px;
    color: white;
    text-align: center;
    background:transparent url('send-pill.png') no-repeat left top;

    padding: 2px 0 0 0;

}

#send a:link {
    color: white;
}


#send a:visited {
    color: white;
}



#send a:hover {
    color: black;
}


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

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */




.videoBG {
    background-color: #fff;
}



/*/// FORM STUFF   */




.error, .alert {
    margin: 3px 0 0 0;
    padding:0;
        background-color: transparent;
    border-color: #FFF;
    background: none repeat scroll 0 0 #FFF !important;

}

label.error { width: 600px; display: inline; color: #f26721; display:block;}


#results {
    display: block;
    width: 600px;
    margin-left: 0px;
    margin-top: -25px;

}


.input-rounded-button {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 0px solid gray;
    padding:0px 13px 0px 13px;
    display:inline-block;
    text-decoration:none;
    background:#F26721;

    color:#FFFFFF;
    cursor:pointer;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 100%;
        margin:10px 0 0 520px;
}

.input-rounded-button:hover {
    text-decoration:none;
    color:#000;
    cursor:pointer;
    border:0px solid #000;
}



#icon {
    width:160px;
    height:160px;
    top: 75%;
    float: left;
    position: absolute;
    background: url('/assets/japanese-icon.jpg') no-repeat center top;
}




    #slideshow { position: relative;width: 713px; height: 310px;}
    #slideshow div { position: absolute; top: 0;left: 0;         }
    #slideshow a {display: block;width:713px;height:310px; }
    #slideshow a:hover{background-position: center bottom;}

    #slideshownav a.navselected{color:#EB910C;}
    #slideshownav {text-align:left;padding-top:8px;padding-bottom:20px; position: absolute; bottom:0;cursor:pointer; margin-left: auto; margin-right: auto;}
    #slideshownav a {padding-right:10px;color:#748090;font-size:18px;}
    #slideshownav a:hover {cursor:pointer;}

    #nav-left {cursor: pointer; color: orange;}
    #nav-right {cursor: pointer; color: orange;}

    #nav-left hover {cursor: pointer; color: #444;}
    #nav-right hover {cursor: pointer; color: #444;}




@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* iphone 2 thru 4 in general */


}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
    /* iphone 2 thru 4 landscape */

      body {
      max-height: 640px;

}

img {
      max-height: 640px;
      width: auto;
}



}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
    /* iphone 2 thru 4 portrait */

      body {
      max-height: 480px;

}

img {
    max-height: 480px;

}


}








@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  body {
      max-height: 700px;

}

img {
    max-height: 700px;
}

}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */

  body {
      max-height: 1100px;

}

img {
    max-height: 1000px;
}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */

  body {
      max-height: 700px;
      
}

img {
    max-height: 700px;
}
navPane-Arcon {
    width:400px;
}


    #outer {
        font-size:80%;
        line-height:150%;
}

#navwrapper {
    width:430px;
}

#navPane-arcon {
    width:240px;
}

#navPane-one, #navPane-two, #navPane-three  {
    margin-left:14px;
}

#navpane-pager {
    margin-right:0px;
}




}







/* Desktops and laptops ----------- */



/* small window ----------- */
@media only screen
and (max-width : 960px) {

    #outer {
        font-size:80%;
        line-height:150%;
}

#navwrapper {
    width:400px;
    top:20%;
}

#navPane-arcon {
    width:240px;
}

#navPane-one, #navPane-two, #navPane-three  {
    margin-left:14px;
}

#navpane-pager {
    margin-right:0px;
}



#logoAlignment {
    width: 130px;
    height: 130px;
}



#logoImage {
    width: 70px;
    height: 108px;
    margin: 20px 0 0 33px;
}


#quoteWrapper {
     width: 90%;
     margin: 58px 0 0 20px;
}





#descriptor {
    width: 250px;
    height: 250px;
}


#descriptorInner {
    height: 250px;
}


.architectTag    {
    margin: 0 0 22px 0;
}

#contactForm {
    width: 400px;
    height: 200px;
    margin: 85px 0 0 -100px;
    top:20%;
}


.input-rounded-button {
        margin:10px 0 0 320px;
}






}

/*medium small screens*/
@media only screen
and (min-width : 961px) and (max-width : 1224px) {





}



/*medium small screens*/
@media only screen
and (min-width : 1225px) and (max-width : 1600px) {





}



/*medium small screens*/

@media only screen
and (min-width : 1601px) and (max-width : 1823px) {





}




/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {


}