/*
Reviewed by CSS Lint - 4 warnings : http://csslint.net/
*/

/*@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);*/

.bottomContainer {
    width: 100%;
}

.slideOutLeft {
      -moz-animation-duration: 1s;
      -webkit-animation-duration: .5s;
      -moz-animation-name: slideOutLeft;
      -webkit-animation-name: slideOutLeft;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    }
    
    @-moz-keyframes slideOutLeft {
      0% 
      {
        width:100%;
        margin-left:0;
        animation-timing-function: ease-in-out;
        opacity:1;
      }
      100%{
        width:100%;
        margin-left:-100%;
        opacity:0;
        }
    }
    
     @-webkit-keyframes slideOutLeft {
      0% 
      {
        width:100%;
        margin-left:0;
        animation-timing-function: ease-in-out;
        opacity:1;
      }
      100%{        
        width:100%;
        margin-left:-100%;
        opacity:0;
        }
    }
    
    
 .slideInLeft {
      -moz-animation-duration: 1s;
      -webkit-animation-duration: .5s;
      -moz-animation-name: slideInLeft;
      -webkit-animation-name: slideInLeft;
      -webkit-animation-fill-mode: forwards;
    }
    
    @-moz-keyframes slideInLeft {
      0% 
      {
        opacity:0;
        width:100%;
        margin-left:100%;
        animation-timing-function: ease-in-out;
      }
      
      100% 
      {
        opacity:1;
        width:100%;
        margin-left:0%;
      }
    }
    
     @-webkit-keyframes slideInLeft {
      0% 
      {
      opacity:0;
      width:100%;
         margin-left:100%;
        animation-timing-function: ease-in-out;
      }
      
      100% 
      {
          opacity:1;
          width:100%;
        margin-left:0%;
      }
    }






.slideAndFadeInLeft {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slideFadeInLeft;
      -webkit-animation-name: slideFadeInLeft;
    }
    
    @-moz-keyframes slideFadeInLeft {
      from {
        opacity: 0;
        margin-left:-15%;
          width: 300%;
          animation-timing-function: ease-out;
      }
      
      to {
          opacity: 0.18;
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slideFadeInLeft {
      from 
      {
        opacity: 0;
         margin-left:-15%;
        width:300%;
        animation-timing-function: ease-out;
      }
      
      to {
        opacity:0.18;
        margin-left:0%;
        width:100%;
      }
    }


.slideAndFadeInRight {
      -moz-animation-duration: 2s;
      -webkit-animation-duration: 2s;
      -moz-animation-name: slideInRight;
      -webkit-animation-name: slideInRight;
    }
    
    @-moz-keyframes slideInRight {
      from {
        opacity: 0;
        margin-left:15%;
        width:300%
      }
      
      to {
        opacity: 1;
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slideInRight {
      from {
        opacity: 0;
        margin-left:15%;
        width:300%
      }
      
      to {
        opacity: 1;
        margin-left:0%;
        width:100%;
      }
    }










.halfWidth {
    max-width: 40%;
}

body {
	background-color:#339966;
	/*background-image:url('/images/green_background_image.jpg');
	background-image:url('http://www.prelovac.com/vladimir/wp-content/uploads/2009/06/ecka-16-06-09-010.jpg');*/
	background-size:cover;
	
	font-family: 'Quattrocento Sans', sans-serif;
	margin:0;
}

form {
    display: inline
}

.link {
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear; 
	text-decoration:none;
    color: black;
}

.link:hover {
    text-decoration: underline;
}


/******************** HEADER - BEGIN *****************************/

.topNavigation {
	margin-top:10px;
	margin-left:0.8em;	
	text-wrap:none;
}

.pageNavigation {
	padding-left:1.8em;	
	margin:0;
}

.pageNavigation li {
	list-style: none;
	display:inline;
	padding-left:1em;
	margin-left:1em;
	border-left:1px solid #ccc;
}

.pageNavigationSelected a {
	color:#333333;
}

.pageNavigation li:first-child {
	border-left:none;
	margin-left:0;
	padding-left:0;
}

.pageNavigation a {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear; 
	opacity:.5;
	text-decoration:none;
	color:#cccccc;
}

.pageNavigation a:hover { 
	opacity:1;
}

/******************** HEADER - END *****************************/


/******************** TITLE - Begin *****************************/


/*
Used for background header font
*/
.bbFontGiant{
	font-size: 300px;
	font-weight:100;
}

.bbFontLarge{
	font-size: 36pt;	
}

.bbFontNavigation{
	font-size:24pt;
	color:#CCCCCC;
}

.bbFontPageHeading{
	font-size:18pt;
	margin:0; 
	text-transform: uppercase;
	font-weight:400;
	margin-bottom:25px;
}

.bbFontSubHeading {
    font-size: 16pt;
    font-weight: 200;
    margin-bottom: 5px;
}

.bbFontSubHeadingSecondary{
	font-size:14px;
	font-weight:800;
	text-transform: uppercase;
}

.bbFontBody{
	font-size:12px;
}


.topHeading {	
	overflow:hidden;
	margin-top:-25px;
	margin-bottom:75px;
}

.headerContainer {
	height:275px;	

	display: -moz-box;
	display: -webkit-box; 
	display: -ms-box;
	display: box;

	-moz-box-align:center;
	-webkit-box-align: center; 
	-ms-box-align: middle;
	box-align: center; 	
}

.pageHeaderContainer {
	position:absolute;
    overflow: hidden;
    width: 100%;
    height: 500px;
    z-index: -1;
}

.pageHeader {
	position:absolute;
	margin-left:.5em;
	z-index:-1;
}

.pageHeaderText {
	white-space:nowrap;	
	color:#cccccc;
	opacity: 0.18;
	margin:0;
}

.pageHeaderInset {
	margin-left:100px;
	padding-top:30px;
}

.profile {
	/*width:500px;*/
	margin:0;
	padding:0;
}

.profile .profileImage {
	padding:15px;
}


.profileSocialMediaLinks img {
	margin-top:10px;
	opacity: 0.5;
}

/******************** TITLE - End *****************************/



.bottomContainer section {
	padding: 0 1.8em;
}

.bb20pxBorderFaded {
	background-color:rgba(255,255,255,0.18);
	padding:20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.largeTextBox {
	text-align:right;
	width:150px;
	padding:5px 20px; 
	border:0;

	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.largeSubmitButton {
	font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    text-decoration: none;
    color: #cccccc;

	margin-left:10px;
    padding: 5px 50px 5px 50px;
    border: 1px solid #999;
 
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    background: rgba(0,0,0,0.4);
 
    cursor: pointer;
}


.commentSummary {
   padding: 10px;
   background-color:rgba(255,255,255,0.18);
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   margin-bottom:10px;
}

.commentSummaryTopLeftCallout:before {
   content: "";
   border: solid 10px transparent; /* set all borders to 10 pixels width */
   border-bottom-color: rgba(255,255,255,0.18); /* the callout */
   border-top: 0; /* we do not need the bottom border in this case */
   
   width: 0;
   height: 0;
  
   text-wrap:normal;
  
   overflow: hidden;
   display: block;
   position: relative;
   
   top: -20px; /* border-width of the :after element + padding of the root element */
   margin: auto;
   margin:0;   
}

.voteButtons {
	min-width:30px;
	margin-right:10px;
}

.voteButtons img { 
	padding:1px;
}

footer {	
	background-color:black;
	padding:50px 50px;
	margin:50px 0 0 0 ;
}

/************* COMMON CLASSES ******************/



.bbHoverShow {  
	opacity: 0.4; 
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear; 
}

.bbHoverShow:hover { 
	opacity: 1; 
}

.bbStackContentsVertically {
	display: -moz-box;
	display: -webkit-box; 
	display: -ms-box;
	display: box;

	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical;

	-moz-box-align: center;
	-webkit-box-align: center;
	-ms-box-align:center;
	box-align: center;
}

.bbImageBlock .bbThumbnailImage {
	padding:5px;
}

.bbImageBlock div.bbFontSubHeading {
	text-wrap:none;
}

.bbImageBlock div.bbFontSubHeadingSecondary {
	margin-top:-5px;
	text-wrap:none;
}

.bbNoSelect {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.leftAndRight {
	display: -moz-box;
	display: -webkit-box; 
	display: -ms-box;
	display: box;
	
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-ms-box-orient: horizontal;
	box-orient: horizontal;

	-moz-box-align: center;
	-webkit-box-align: center;
	-ms-box-align:center;
	box-align: center;
	
	-moz-box-pack: center;
	-webkit-box-pack: center;
	-ms-box-pack:center;
	box-pack: center;

	
	max-width:1000px;
	width:90%;
}

.leftAndRight > div {
	display: -moz-box;
	display: -webkit-box; 
	display: -ms-box;
	display: box;

	-moz-box-pack: center;
	-webkit-box-pack: center;
	-ms-box-pack:center;
	box-pack: center;
	
	-moz-box-flex : 0;
    -webkit-box-flex : 0;
    -ms-box-flex: 0;
    box-flex : 0;    
}

.leftAndRight > div:first-child {
	-moz-box-align: start;
	-webkit-box-align: start;
	-ms-box-align:start;
	box-align: start;
}

.leftAndRight > div:last-child {
	-moz-box-pack: end;
	-webkit-box-pack: end;
	-ms-box-pack:end;
	box-pack: end;
	
	-moz-box-flex : 1;
    -webkit-box-flex : 1;
    -ms-box-flex: 1;
    box-flex : 1;
}

div.sideBySide {
	display: -moz-box;
	display: -webkit-box; 
	display: -ms-box;
	display: box;
}

div.sideBySide > div {
	-moz-box-flex : 0;
    -webkit-box-flex : 0;
    -ms-box-flex: 0;
    box-flex : 0;
}

div.sideBySide > div:last-child {
	-moz-box-flex : 1;
    -webkit-box-flex : 1;
    -ms-box-flex : 1;
    box-flex : 1;
}