/*
global

http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch-part-2


*/


@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_LightWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_LightWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: thin;
  font-style: normal;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_RegularWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_RegularWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_MediumWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_MediumWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_BoldWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_BoldWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_ExtraBoldWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_ExtraBoldWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_Light_ItalicWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_Light_ItalicWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: thin;
  font-style: italic;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_ItalicWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_ItalicWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_Medium_ItalicWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_Medium_ItalicWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_Bold_ItalicWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_Bold_ItalicWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Modena';
  src: url('../fnt/Modena_ExtraBold_ItalicWeb.eot'); /* IE9 Compat Modes */
  src: url('../fnt/Modena_ExtraBold_ItalicWeb.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-weight: 800;
  font-style: italic;
}


body {
padding: 0;
margin: 0;
background: #666666;
font-family: 'Modena', Lucida Sans, Arial, sans serif;
font-weight:normal;
color: #FFFFFF;
}


input {
font-size:16px;
padding: 7px;
outline: 0;
border:0;
width:250px;
background: #EBE8DE;
border-radius:5px;
}

input[type=submit] {
width:auto;
padding: 5px 18px;
line-height:25px;
text-shadow:none;
cursor:pointer;
box-shadow: none;
background: #333333;
color: #fff;
}


p {
margin: 5px 0;
line-height: 25px;
}

a {
text-decoration: none;
color: inherit;
transition: color .5s ease;
}

strong {
font-weight: bold;
}


figcaption {
line-height: 25px;
font-size:14px;
width:200px;
}

figcaption strong {
border-bottom: 1px solid #D6D0C1;
padding-bottom:10px;
margin: 10px 0;
display:block;
}

/*
image gallery
*/

div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

div.gallery-item { float: left; width: 33.33333333%; }
div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
div.gallery-item img { display: block; width: 100%; height: auto; }


/*
page
*/

/*
fonts:
http://www.google.com/fonts/#ReviewPlace:refine/Collection:Dosis|Flamenco|Buenard|Ubuntu+Condensed|Radley|Merriweather|Raleway|Raleway+Dots
*/


header {
position:relative;
width:auto;
/*
max-width:900px;
*/
margin: 0 auto 20px auto;
}

header h1 {
margin: 23px 0 0 5px;
font-size: 42px;
color: #FFFFFF;
font-style: normal;
font-weight: thin;
}


header p {
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
margin-left:6px;
}

nav {
margin-top:6px;
}

nav ul {
list-style:none;}


nav ul li {
display:block;
float:left;
padding:28px 15px;
padding-right: 28px;
}


nav ul li a {
transition: all .25s ease;
}


nav ul li a:hover {
color: #CCCCCC;
}


h1 a {
transition: all .25s ease;
background-color: #fff;
color: #666666;
}


h1 a:hover {
color: #000000;
background-color: #CCCCCC;
}




#boxcontent
{
width:auto;
margin:5 auto;

}

#boxcontent-about article
{
float:left;

margin-left: 5px;
margin-right: 5px;
margin-bottom: 55px;

line-height:16px;

font-size:14px;

font-weight: thin;
font-style: normal;
}

#boxcontent-about article h3
{
font-family: 'Modena', sans serif;
font-size:20px;
margin-bottom:0px;
margin-left:35px;}


#boxcontent article
{
float:left;
max-width:45%;

margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;

line-height:16px;

font-size:14px;

font-weight: thin;
font-style: normal;
}

#boxcontent article h3
{
font-family: 'Modena', sans serif;
font-size:20px;
margin-bottom:10px;
margin-left:75px;}

#boxcontent article img
{
float:left;}

#boxcontent article p
{

font-family: 'Modena', sans serif;
margin-left:75px;


}

#boxcontent article a {
text-decoration: underline;
color: #FFF;
}

#boxcontent article a:hover {
text-decoration: none;
color: #CCC;
}




footer {
position:relative;
clear:both;
width:auto;
height:70px;
background:#333333;}

footer .wrapper {
line-height:25px;
margin: 0 auto;
padding-top:24px;
padding-left:5px;
width:auto;
max-width:900px;
font-size:14px;}

footer .wrapper .column {
font-family: 'Modena', sans serif;
color:#ababab;
float:left;
width:280px;
margin-right:20px;}

footer .wrapper .column.midlist ul li {
width:auto;
padding:0 0 10px 25px;
margin-bottom:10px;
border-bottom: 1px solid #444444;
background:url(img/arrowright2.png) left 6px no-repeat;}

footer .wrapper .column.midlist ul li a:hover {
color:#fff;}


footer .wrapper .column.rightlist ul li
{
width:auto;
margin-bottom:15px;}

footer .wrapper .column.rightlist ul li a span
{
margin-left:95px;
display:block;}

footer .wrapper .column.rightlist ul li a img
{
transition: border .25s ease;
float:left;
border:3px solid #444444;}

footer .wrapper .column.rightlist ul li a img:hover
{
border-color: #5e5e5e;}

footer .wrapper .column h4
{
font-size: 16px;
color: #fff;
border-bottom: 1px solid #444444;
padding: 0 0 10px 0;
margin-bottom: 10px;}


#copyright
{
background: #1D1D1D;
height:70px;
position:absolute;
bottom:0;
left:0;
width:100%;}

#copyright .wrapper
{
font-family: 'Modena', sans serif;
padding-top:25px;
color: #5e5e5e;
font-size:14px;
position:relative;}


#copyright .wrapper .social
{
position:absolute;
right:0;
top:25px;}

#copyright .wrapper .social a
{
transition: opacity .25s ease;
opacity: 0.3;
margin-left: 12px;
display:block;
float:left;}

#copyright .wrapper .social a:hover
{
opacity: 0.7;}

#copyright .wrapper a
{
color: #ABABAB;}

#copyright .wrapper a:hover
{
color: #fff;}




/*
MISC
*/

.clear {
clear:both;
}

.hidden {
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);
}